一、HTML文档结构相关标签
| 标签 | 描述 |
|---|---|
<html> | 此元素可告知浏览器其自身是一个 HTML 文档。 |
<head> | 定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 |
<body> | 定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） |
<base> | 定义页面中所有链接的默认地址或默认目标。 |
<meta> | 定义关于 HTML 文档的元信息。 |
<link> | 定义文档与外部资源的关系。 |
<script> | 定义客户端脚本。 |
<style> | 定义文档的样式信息。 |
<title> | 定义文档的标题。 |
二、HTML基础块标签
2.1 标题标签
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
标题很重要，请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>注释: 浏览器会自动地在标题的前后添加空行。
2.2 段落标签
<p> 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
扩展:
可以只在块（block）内指定段落，也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。总的来讲，这意味着段落可以在任何有合适的文本流的地方出现，例如文档的主体中、列表的元素里，等等。
从技术角度讲，段落不可以出现在头部、锚或者其他严格要求内容必须只能是文本的地方。实际上，多数浏览器都忽略了这个限制，它们会把段落作为所含元素的内容一起格式化。
<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>2.3 水平线标签
<hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
<body>
<h1>北京欢迎你</h1>
<hr />
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>
</body>三、HTML基础布局标签
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
<p style="width:400px; height:300px; background:#9FF">
<p>……</p>
<h3>新人上路</h3>
<ul>…… </ul>
<p>div其实就是一个......</p>
</div>四、HTML基础行内标签
4.1 范围标签
<span> 标签被用来组合文档中的行内元素。
<p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p>
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
4.2 换行标签
<br> 可插入一个简单的换行符。
<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。
在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。
<p>
北京欢迎你，有梦想谁都了不起！<br />
有勇气就会有奇迹。<br />
北京欢迎你，为你开天辟地<br />
流动中的魅力充满朝气。<br />
北京欢迎你，在太阳下分享呼吸<br />
在黄土地刷新成绩。<br />
北京欢迎你，像音乐感动你<br />
让我们都加油去超越自己。<br />
</p>4.3 超链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
默认情况下，链接将以以下形式出现在浏览器中：
-
一个未访问过的链接显示为蓝色字体并带有下划线。
-
访问过的链接显示为紫色并带有下划线。
-
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
在所有浏览器中，链接的默认外观是(记)：
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
基本语法:<a href="链接地址" target="目标窗口位置"> 链接热点文本或图像</a>
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 规定链接指向的页面的 URL。 |
| target |
| 规定在何处打开链接文档。
_self： _top：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。Framename:在指定的框架中打开被链接文档。 |
超链接用法:
1.链接本地文档
href="本地文档的路径"
路径:具体存储位置 (路径有绝对路径和相对路径)
2.友情链接
href="友情链接网站的网址" 必须加上http或https
3.图片链接
超链接的标签内容是图片
4.建立电子邮箱的链接
href设置 发送的邮箱地址 mailto:邮箱地址
5.链接本页面的某个位置
1.设置锚点 <a name="锚点名">内容</a>
2.链接指向锚点 <a href="#锚点名">跳转到某点</a>
4.4 相对路径和绝对路径解析
路径解析:
1.绝对路径:文件存储的具体路径
2.相对路径:目标文件相对于源文件的路径
目标文件:要访问的页面或图片
源文件:网页的根
相对路径只有一个原则:绝对路径去同存异
1.当源文件和目标文件在同一个文件夹下面的时候,相对路径写法:目标文件文件名.扩展名
2.当目标文件在源文件的下一级目录里面,相对路径的写法:目录名/目标文件名.扩展名
3.当目标文件在源文件的上一级目录,相对路径的写法: ../目标文件名.扩展名
五、HTML图像标签
5.1 图片标签
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
<img src="url" alt="some_text">
src属性:用来指定图片地址的来源,可以是本地图片,也可以是网络图片来源;
width和height属性,用来设置图片宽和高,单位是px或% （css替代使用）
alt属性:用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
title属性:当鼠标移入图片的时候显示的文字内容
<img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" title="精品热卖：高清晰，30寸等离子电视" /> 请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
5.2 图像映射
<map>标签:
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
id属性:为 map 标签定义唯一的名称。
name属性:为 image-map 规定的名称。
<area>标签:
<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 规定区域的替代文本。如果使用 href 属性，则该属性是必需的。 |
| coords | coordinates | 规定区域的坐标。 |
| href | URL | 规定区域的目标 URL。 |
| shape | default rect circle poly | 规定区域的形状。 |
| target | _blank _parent _self _top framename | 规定在何处打开目标 URL。 |
coords值:
x1,y1,x2,y2 如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x,y,radius 如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn 如果 shape 属性设置为 "poly"，则该值规定多边形各顶点的值。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
<img src="images/eg_planets.jpg" alt="Planets" usemap="#planetmap">
<!-- map图片映射 -->
<map name="planetmap" id="planetmap">
<!-- area定义图片的可点击区域 -->
<area shape="rect" coords="0,0,108,260" href="pages/sun.htm" alt="Sun">
<area shape="circle" coords="128,160,8" href="pages/mercur.htm" alt="Mercury">
<area shape="circle" coords="180,140,15" href="pages/venus.htm" alt="Venus">
</map>六、HTML表格标签
6.1 表格应用场合
6.2 表格的基本结构
表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
<caption>元素定义表格标题(table标签子标签)。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
<tr> 标签定义 HTML 表格中的行。
tr 元素包含一个或多个 th 或 td 元素。
<th> 标签定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：
表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
<td> 标签定义 HTML 表格中的标准单元格。
td 元素中的文本一般显示为正常字体且左对齐。
表格相关属性(一定不要记): width:规定表格的宽度。 height:规定表格的高度 border:规定表格边框的宽度。 cellpadding:规定单元边沿与其内容之间的空白。 cellspacing:规定单元格之间的空白。
表格的宽高: 1、同列单元格宽度由该列宽度最大的单元格决定 2、同行单元格高度由该行高度最高的单元格决定
6.3 表格的跨行跨列
列合并: colspan属性:横向合并单元格 属性值为正整数,表示要合并单元格的个数
行合并: rowspan属性:纵向合并单元格 属性值为正整数,表示要合并单元格的个数
跨行跨列原则:
1.宽度如果设定以设定为准,否则同列单元格宽度由该列宽度最大的单元格决定
2.高度如何设定以设定为准,否则同行单元格高度由该行高度最高的单元格决定
3.表格行的个数和列的个数以最多的数值为准
4.行合并还是列合并看单元格是跨行还是跨列,合并遵循的是从左到右,从上到下
扩展思考:CSS中能不能实现合并单元格?
这种问题，需要强调的是你对“样式”和“属性”的理解程度;CSS是层叠样式表，是一种用来控制HTML元素样式的代码； 它主要分为选择器和样式表达式;通过这些CSS控制，你可以改变页面上任何元素的样式，通过也要知道，它所能做的，也仅仅是改变元素的样式，样式以外的东西是没法改变的； 那么你所提的这个合并单元格是不是属于样式呢？
答案很肯定，不属于；为什么呢？ 因为属性是用来控制这个标签本身的一种状态，如：id、name等； 通过这些属性的控制，可以实现的就不仅仅约束在样式中了，就好象合并单元格的cols属性，它不仅仅改变了表格的样式，最根本也改变了表格的结构； 那么刚才提到，CSS只能改变元素的样式，那么对于改变元素的结构，它是心有余而力不足的。
另外一个很容易混淆的就是元素的样式属性，比如元素本身也有width属性，height属性，这些东西也可以控制元素的宽度或高度，为什么在CSS里面就可以使用呢？ 答案和上面一样，这些width或height，虽然作为元素的属性，但它所改变的，仅仅是元素的样式，对元素本身结构没有任何改变，因此我们可以使用CSS来代替它们，并且现在也不建议直接在元素本身写样式属性；
6.4 表格高级标签
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的最优出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
新标签优势:
在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
6.5 如何实现图文布局
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
只需要在td中添加img标签即可实现图文布局;
6.6 其他新标签
colgroup标签:
colgroup标签用于对表格中的列进行组合，以便对其进行格式化,它的span属性可以设置组合列的数组;结合css使用最好;它可以包含一个子元素,col;
如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
<colgroup> 标签只能在 table 元素中使用。如果有caption标签和thead等标签，那么必须放在caption标签之后,thead标签之前;
<table border="1px">
<colgroup span="2" style="width:100px;"></colgroup>
<colgroup style="width:80px;"></colgroup>
<tr>
<td>1000</td>
<td>2000</td>
<td>3333</td>
<td>1232</td>
</tr>
<tr>
<td>3213</td>
<td>5452</td>
<td>6436</td>
<td>6323</td>
</tr>
</table>col标签:
col标签是用来设定列的属性,它也可以使用span属性,不可和colgroup同时使用span属性,不然会出现冲突; col标签一般作为colgroup标签的子标签配合使用;此标签为单标签。
col标签表示对一列设置样式，比如上面的第一个colgroup标签,是用来设置两列样式,那么如果想设置不同背景颜色,就可以在colgroup标签中设置两个col标签,分别对背景进行设置。
<table border="1px">
<colgroup span="2" style="width:100px;">
<col style="background: red">
<col style="background: yellow">
</colgroup>
<colgroup style="width:80px;"></colgroup>
<tr>
<td>1000</td>
<td>2000</td>
<td>3333</td>
<td>1232</td>
</tr>
<tr>
<td>3213</td>
<td>5452</td>
<td>6436</td>
<td>6323</td>
</tr>
</table>七、HTML基础表单元素
7.1 表单的用途
表单在网页中主要负责数据采集功能(通过表单把客户端用户输入的数据发送给服务器)。
一个表单有三个基本组成部分：
表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
表单域(表单控件)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
7.2 表单的典型应用
7.3 表单的基本语法
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
<form> 标签用于为用户输入创建 HTML 表单。
表单用于向服务器传输数据。
<form action="表单提交地址" method="提交方法">
… 文本框、按钮等表单元素…
</form>action 指定表单的发送地址(服务器地址)
method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post
get和post的区别（简而言之）:
get提交:用户输入的信息,显示在地址栏中,不安全,请求内容长度有限制,请求速度快
post提交:用户输入的信息,不会显示在地址栏，安全,请求内容长度无限制(重要数据)，请求速度慢。
注:实际开发中，页面布局<form>一般和table使用
7.4 表单的执行原理
客户端通过表单把数据提交给服务端，服务端根据提交的数据给客户端一个响应.
请求/响应模式: 客户端浏览器发送请求给服务器;服务器给予客户端浏览器响应;
7.5 表单控件元素
表单输入控件
<input>定义输入控件。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等
| 控件名称 | type属性值 | 描述 |
|---|---|---|
| 文本框 | text(默认值) | 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。 |
| 密码框 | password | 定义密码字段 |
| 单选按钮 | radio | 定义单选按钮。(性别等) |
| 复选框 | checkbox | 定义复选框。(爱好等) |
| 提交按钮 | submit | 定义提交按钮。 |
| 重置按钮 | reset | 定义重置按钮（重置所有的表单值为默认值）。 |
| 图片提交按钮 | image | 定义图像作为提交按钮。 |
| 普通按钮 | button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本） |
| 隐藏文本框 | hidden | 定义隐藏输入字段。前后台交互非常有用 |
| 文件上传框 | file | 定义文件选择字段和 "浏览..." 按钮，供文件上传。 可以通过accept属性规范选取文件的类型,比如图片/视频,如果不设置则什么类型都可以。 accept属性的值: image/png 表示只接受图片文件的png文件 audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。 multiple属性可以用来设置一次允许选择多个文件 multiple="multiple" |
其他表单控件
<textarea>:定义文本域 (一个多行的输入控件)
<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
<label>:定义了 <input> 元素的标签，一般为输入标题
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
方式一:
for属性,让标签和指点的input元素建立关联,多数使用在单选或复选
给单选或复选后面的文字加入label标签,for属性值是input的id值
方式二:
将input元素包含在lable标签中
如果将input放置在label标签之间,那么for属性就可以不用
注:和单选、复选结合使用,提高用户体验
<fieldset>、<legend> (了解)
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 元素为 <fieldset>元素定义标题。
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form><select>、<option>
<select>定义了下拉选项列表
<option>定义下拉列表中的选项（一个条目）。
size属性用来定义列表中显示的列表项,在select标签设置
multiple属性用来定义是否可以多选
<optgroup>: 定义选项组
对列表项进行分组并命名,必须使用该标签的label属性才可以命名;
1、把对应的option标签放在optgroup里面
2、给optgroup添加label属性,用以列表组命名
<button>:定义一个点击按钮
在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。
type属性:可以设置三个值 submit/reset/button与input元素设置的按钮含义一致
表单元素的属性
| 属性 | 值 | 描述 |
|---|---|---|
| type | 上述值 | type 属性规定要显示的 <input> 元素的类型。 |
| value | text | 指定 <input> 元素 value 的值。 |
| src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image") |
| size | number | size 属性规定以字符数计的 <input>元素的可见宽度。 |
| readonly | readonly | readonly 属性规定输入字段是只读的。 |
| name | text | name 属性规定 <input> 元素的名称。 |
| maxlength | number | 属性规定 <input> 元素中允许的最大字符数。 |
| disabled | disabled | disabled 属性规定应该禁用的 <input> 元素。 |
| checked | checked | checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio") |
| accept | audio/* video/* image/* MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对type="file") |
| selected | selected | 下拉框的默认选中 |
八、HTML列表标签
8.1 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
定义无序列表,使用 ul表示
定义列表项,使用li表示<li></li> 一对li表示一个列表项
给列表的小图标更换样式,使用属性type 值disc(默认值) circle square
<h3>新人上路指南 </h3>
<ul>
<li>如何激活会员名？</li>
<li>如何注册会员？</li>
<li>注册时密码设置有什么要求？</li>
<li>用户认证</li>
</ul>8.2 有序列表
有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
定义有序列表,使用ol表示
给列表的小图标更换样式,使用属性type 值 1 a A i I
有序列表的start属性:定义列表的开始序号
有序列表的value属性:定义单个列表项的序号,注意:设置之后,该列表项之后的值都随之变化。
<h3>注册步骤：</h3>
<ol>
<li>填写信息</li>
<li>收电子邮件</li>
<li>注册成功</li>
</ol>8.3 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
注意事项 - 有用提示
提示: 列表项内部可以使用段落、换行符、图片
<dl>
<dt> 图片的HTML代码<dt>
<dd>商品名称：灿坤蒸气电熨斗</dd>
<dd>商品价格：388元</dd>
<dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd>
</dl>8.4 嵌套列表
有序列表和无序列表可以相互嵌套使用.
<h4>嵌套列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>九、HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。
为什么用<iframe>:
<frameset>需要使用多个文件，目录结构复杂
内嵌较为灵活，可以在网页的任何位置使用
可以作为模板，在本网站的多个页面复用
Iframe - 设置高度与宽度:
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。当然，我们完全可以使用CSS样式来实现。
Iframe - 移除边框:
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
Iframe - 框架命名:
name:自定义框架名,规定 iframe 的名称。
十、HTML滚动标签
滚动效果 使用标签marquee ,一般情况下滚动标签的内容可以是文字,图片,超链接
属性 behavior 设置文本如何滚动:
-
值:scroll 字幕从右到左,循环滚动
-
值:alternate 在两端之间 来会滚动 重复
-
值:slide 从一段到另一段,不重复
属性 direction 设置文本的滚动方向:
-
值:left
-
值:right
-
值:down
-
值:up
属性 loop 设置字幕的滚动次数:
-
值: -1,表示无限循环
-
值: 大于0的任何数,数值是几,就滚动几次
属性 scrollamount 用来设置每次滚动之间的像素数,直接写数值:
像素值越大,速度越快,但是有卡顿情况
属性scrollDelay 用来设置每次滚动的延迟:
数值越大,越慢
十一、HTML文本格式化标签
11.1 HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
| b | 定义粗体文本 |
| em | 定义着重文字 |
| i | 定义斜体字 |
| small | 定义小号字 |
| strong | 定义加重语气 |
| sub | 定义下标字 |
| sup | 定义上标字 |
| ins | 定义插入字 |
| del | 定义删除字 |
我们通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
11.2 HTML "计算机输出" 标签
| 标签 | 描述 |
|---|---|
| code | 定义计算机代码,软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。规范提示：我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。 |
| kdb | 定义键盘码 |
| samp | 定义计算机代码样本 |
| var | 定义变量 |
| pre | 定义预格式文本 |
11.3 HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| abbr | 定义缩写，使用title属性指定该缩写代表的全称 |
| address | 定义地址 |
| bdo | 定义文字方向 dir属性: ltr 默认 rtl 从右到左 |
| blockquote | 定义长的引用 |
| q | 定义短的引用语 |
| cite | 定义引用、引证 |
| dfn | 定义一个定义专业术语。 |
扫一扫
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
