HTML简单笔记.docx

《HTML简单笔记.docx》由会员分享，可在线阅读，更多相关《HTML简单笔记.docx（15页珍藏版）》请在三一办公上搜索。

1、HTML简单笔记 DOCTYPE 声明了文档类型 位于标签 与 描述了文档类型 位于标签 与 为可视化网页内容 位于标签 与 作为一个标题使用 位于标签 与 作为一个段落显示 HTML文档也叫做 web 页面 HTML 标签通常是成对出现的，比如 和 只有 区域 (白色部分) 才会在浏览器中显示。 中文编码 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。 HTML 编辑器推荐 可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器： Notepad+：https:/notepad-plus-plus.org

2、/ Sublime Text： HBuilder：http:/www.dcloud.io/ HTML 标题是通过 - 标签来定义的. HTML 段落是通过标签 来定义的. HTML 链接是通过标签 来定义的. 这是一个链接 HTML 图像是通过标签 来定义的. HTML参考手册 标签在 HTML 页面中创建水平线。 如果您希望在不产生一个新段落的情况下进行换行，请使用 标签：相当于写诗，没有关闭标签 HTML 输出- 使用提醒 我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。 对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输

3、出的效果。 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行也被显示为一个空格。 一句话 就显示一个空格！ 通常标签 替换加粗标签 来使用, 替换 标签使用。 这是 下标 和 上标 pre 标签对空行和空格进行控制 超链接 定义连接在何处显示，就是设置哪几个字为超链接。上面就是 访问菜鸟教程字作为超链接。 Eg. a href= 六个 链接文本 本文本 是一个指向本网站中的一个页面的链接. 这是一个链接 使用 标签定义HTML文档的标题 使用 定义页面中所有链接默认的链接目标地址。 使用 元素来描述HTM

4、L文档的描述，关键词，作者，字符集等。 HTML 元素 元素包含了所有的头部标签元素。在 元素中你可以插入脚本, 样式文件，及各种meta信息。 可以添加在头部区域的元素标签为: , , , , , , and . HTML 元素 标签定义了不同文档的标题。 在 HTML/XHTML 文档中是必须的。 元素: 定义了浏览器工具栏的标题 当网页添加到收藏夹时，显示在收藏夹中的标题 显示在搜索引擎结果页面的标题 做一个没有下划线的超链接 a href=heep:/ it CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用style 属性 内部样式表 -在HTML文档头部

5、区域使用 元素 来包含CSS 外部引用 - 使用外部 CSS 文件 设计背景颜色 This is a heading! This is a paragraph. font-family，color，和font-size 使用 text-align属性指定文本的水平与垂直对齐方式： 外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 Eg. 图片链接 HTML中src是source的缩写，这里是源文件的意思。“source”本身是“源”的意思。 alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是

6、用户定义的在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。 Border 边界宽度 URL 指存储图像的位置。如果名为 boat.gif 的图像位于 的 images 目录中，那么其 URL 为 A paragraph with an image. The image will float to the left of this text. A paragraph with an image. The image will float to the right of this text. HTML 表格 colspan 属性规定单元格可

7、横跨的列数。 row:行， span:跨度，跨距，范围 与此相关的属性有表格单元格的垂直对齐属性valign，跨列属性colspan。 Cell padding 来创建单元格内容与其边框之间的空白。相当于在table的定义是时直接写出来 Cell spacing 增加单元格之间的距离。 HTML无序列表 无序列表使用 标签 Coffee Milk 有序列表始于 标签。 Coffee Milk HTML 自定义列表 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。 Coffee - black hot dri

8、nk Milk - white cold drink 浏览器显示如下： Coffee - black hot drink Milk - white cold drink 不同类型的有序链表,类型定义于ol中 start”222” typeI type=i type=A 不同类型的无序链表 黑色圆点 黑色圆圈 黑色正方形 HTML 列表标签 标签 描述 定义有序列表 定义无序列表 定义列表项 定义定义列表 自定义列表项目 定义自定列表义的描述 HTML 和 HTML 区块元素 大多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时，通常会以新行来开始。 实例: , , , H

9、TML 内联元素 内联元素在显示时通常不会以新行开始。 实例: , , , HTML 元素 HTML 元素是块级元素，它可用于组合其他 HTML 元素的容器。 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用， 元素可用于对大的内容块设置样式属性。 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。 HTML 与元素 HTML 元素是内联元素，可用作文本的容器 元素也没有特定的含义。 当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。

10、我的母亲有 蓝色 的眼睛 蓝色加粗的意思，bold 明显的醒目的粗体的 HTML 布局 br 换行符 float:left表示向左浮动，比如多个div在一个页面上，默认情况是：一行一个div，但是只要在div的css中使用float：left，可以使一行有多个div，这样可以把网页划分成很多块，但是使用该属性会影响后面的元素，所有如果后面的div不想再被影响，可以使用clear:both；可以理解为清除float:left和float:right的影响，返回到默认状态。像也可以这么使用，做导航菜单基本上有这个元素,使用float:left使其横向显示。 text-align:center; 内

11、容居中 网站布局 大多数网站会把内容安排到多个列中。 大多数网站可以使用 或者 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。 后面的id或者class 你可以理解为 这个div的“名字”。 因为你写CSS或者JS的时候 需要用到这些 来精确到某个或某几个div。 就是 一个ID为container的dive HTML 布局 - 有用的提示 Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更

12、易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程. Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板。 HTML 表单和输入 本例演示如何创建 HTML 的密码域。 Form action 没什么作用 当成一个标题表头 表单使用表单标签 来设置: Username: Password: Note: The characters in a password field are masked (shown as asterisks or circles). 文本域 文本域通过 标

13、签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。 First name: Last name: 浏览器显示如下： First name: Last name: 注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。 密码字段通过标签 来定义: 单选按钮 标签定义了表单单选框选项 Male Female 提交按钮(Submit Button) 定义了提交按钮. 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理 Username: 复选按钮 I hav

14、e a bike I have a car 下拉菜单 Volvo 带有预选值的下拉菜单 Volvo Saab Fiat 如何创建文本域。用户可在文本域中写入文本。可写入字符的字数不受限制。 我是一个文本框。 创建一个按钮 演示如何在数据周围绘制一个带标题的框。 Personal information: Name: E-mail: Date of birth: 此例演示如何从表单发送电子邮件。 Send e-mail to someone: Name: E-mail: Comment: HTML 框架 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。iframe是框架的意思，表示在当

15、前页面嵌套一个页面 该URL指向不同的网页。 颜色值的设定 颜色(Color) 颜色十六进制(Color HEX) #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF 颜色RGB(Color RGB) rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255) HTML 标签 标签用于定义客户端脚本，比如 J

16、avaScript。 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验证以及内容动态更新。 下面的脚本会向浏览器输出Hello World!： HTML 标签 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。 只有在浏览器不支持脚本或者禁用脚本时，才会显示 元素中的内容： function.myfunction 是什么意思？ 调用函数myfunction HTML 字符实体 有些字符，像()这类的，对HTML来说是有特殊意义

17、的，所以这些字符是不允许在文本中使用的。要在HTML中显示()这个字符，我们就必须使用实体字符。如需显示小于号，我们必须这样写： 或 < 或 < 提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称。 不间断空格(Non-breaking Space) HTML 中的常用字符实体是不间断空格( )。 浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。 HTML 统一资源定位器(Uniform Resource Locators) URL是一个网页地址。 URL可以由字母组成，如W3CSchools.cc，或互联网协议地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住。 Web浏览器通过URL从服务器请求页面当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。 一个统一资源定位器(URL) 用于定位万维网上的文档。 HTML速查列表