Day03 HTML 学习笔记height 属性：设置本行的高度。 | 双 | rowspan 属性：指定要跨的行数

1 回顾

1.1 文本标签

em			强调,默认表现为斜体字。	双
strong		强调（强烈），默认表现为粗体体。	双
del			表示删除的内容，默认表现为添加删除线。	双
ins			表示新增的内容，默认表现为下划线。 双
sup			上标字。 双
sub			下标字。 双

1.2 图片标签

img	标签

属性：
src	指定图片的地址（路径） 必须指定的
alt	指定图片加载失败后显示的文字	（建议设置）
border	设置图片边框的宽度
width	设置图片的宽度
height	社会图片的高度

图片常见的格式：
	.jpg / .jpeg
	.png
	.gif

1.3 路径

绝对路径：
	一个文件完整的网络地址 （URL）
	可以获取到本地的文件，也可以获取其他服务器上的文件（这些文件只要可以通过网络访问）
	
	
相对路径：
	根据源文件和目标文件的相对位置，以源文件为出发点。
	在同级或下级：   ./ 开头 或者 省略 ./
	在上一级或上上级：  ../ 开头

1.4 超链接和锚点

a 标签
  属性：
  href	指定要跳转到的文件的地址， 一个a标签只有设置了 href 属性才是超链接。
  target	指定目标文件在哪个窗口打开。 值： _self 本窗口打开（默认值）； _blank 新窗口打开
  name	指定锚点的名字，a 标签指定了 name 属性，就表示此处是锚点。
  
  
超链接：
	点击超链接，跳转到指定的页面（html 类型的文件）。
	点击超链接，跳转到任意类型的文件。 浏览器能打开该类型的文件就直接打开，浏览器无法打开该类型的文件就下载
	点击超链接，特殊用途，打开操作系统上的应用程序。
	href 的值是空的，点击超链接，刷新本页面。
	
锚点：
	如何设置锚点：
		第一种方式，a 标签设置 name 属性，name 指定锚点名。
		第二种方式，任意一个标签，设置 id 属性，id 指定锚点名。
	如何跳转到锚点：
		使用超链接
		跳到本页面指定的锚点，href 的值以 # 开头，后面跟上锚点名
		跳转到指定页面的指定锚点，在指定页面路径的后面跟上 #锚点名

2 列表

2.1 无序列表

<ul>
    <li>列表项的内容</li>
    <li>列表项的内容</li>
    <li>列表项的内容</li>
    <li>列表项的内容</li>
</ul>

用于 新闻列表、文章列表、商品列表、导航 等

2.2 有序列表

<ol>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
</ol>

用于排行榜列表

2.3 定义列表

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>一种浏览器脚本语言</dd>
</dl>


<dl>
    <dt>如何掌握 HTML 标签</dt>
    <dd>掌握标签的语义和功能</dd>
    <dd>掌握标签具有什么属性以及属性值的设置</dd>
    <dd>掌握是单标签还是双标签</dd>
</dl>

用于专有名词列表，包含对专有名词的解释。

2.4 列表标签总结

标签名	功能和语义	单标签还是双标签
ul	无序列表	双
ol	有序列表	双
li	有序列表或无序列表的列表项	双
dl	定义列表	双
dt	定义列表项的标题	双
dd	定义列表项的描述	双

注意：

li 标签只能直接嵌套在 ul 或者 ol 的里面。

定义列表中的 dt 标签可以对应多个 dd 标签。

3 表格标签

3.1 表格的结构

表格 table
	表格标题 cpation
	表格头部 thead
		行 tr
			单元格 th
	表格主体 tbody
		行 tr
			单元格 td
	表格注脚 tfoot
		行 tr
			单元格 td

<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表头单元格</th>
            <th>表头单元格</th>
            <th>表头单元格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>普通的单元格</td>
             <td>普通的单元格</td>
             <td>普通的单元格</td>
        </tr>
        <tr>
            <td>普通的单元格</td>
             <td>普通的单元格</td>
             <td>普通的单元格</td>
        </tr>
        <tr>
            <td>普通的单元格</td>
             <td>普通的单元格</td>
             <td>普通的单元格</td>
        </tr>
    </tbody>
    <tfoot>
    	 <tr>
             <td>普通的单元格</td>
             <td>普通的单元格</td>
             <td>普通的单元格</td>
        </tr>
    </tfoot>
</table>

3.2 表格整体样式设置

给 table 标签设置属性：
	border 属性： 设置表格边框的宽度，通常设置为 1。
	width  属性： 设置表格的总宽度。
	height 属性： 设置表格的总高度。
	cellspacing 属性： 设置单元格和单元格之间的距离。
	cellpadding 属性： 设置单元格补白（单元格边框和里面内容的距离），默认是 0。

3.3 单元格样式设置

① 设置单元格内容对齐方式

设置内容在单元格内水平对齐方式：
给 td/th 设置属性 align，值:left、center、right，设置本单元格文字的对齐方式。
给 tr 设置属性 align，值:left、center、right，设置本行内所有单元格文字的对齐方式。
给 thead/tbody/tfoot 设置属性 align，值:left、center、right，设置里面所有的单元格文字的对齐方式。

设置内容在单元格中垂直对齐方式：
给 td/th 设置属性 valign，值:top、middle、bottom，设置本单元格文字的垂直对齐方式。
给 tr 设置属性 valign，值:top、middle、bottom，设置本行内所有的单元格文字的垂直对齐方式。
给 thead/tbody/tfoot 设置属性 valign，值:top、middle、bottom，设置里面所有的单元格文字的垂直对齐方式。

② 设置单元格宽高

设置宽度：
给 td/th 可以设置 width 属性，可以设置该单元格的宽度，同时还会影响所有同列的单元格的宽度。（推荐给第一行的单元格设置）

设置高度：
给 td/th 可以设置 height 属性，可以设置该单元格的高度，同时同行所有单元格的高度。
给 tr 设置 height 属性，可以设置本行的高度。 （推荐）

如果存在单元格补白，给 td/th 和 tr 设置 height 属性，表现出来的高度是不同的。给 td/th设置的height的值是不包含补白的，实际显示大小会加上补白；给 tr 设置的height值就是行的总高度。

3.4 单元格跨行和跨列

跨行：
给 td/th 设置 rowspan 属性，指定要跨越的行数。

跨列：
给 td/th 设置 colspan 属性，指定要跨越的列数。

3.5 表格标签总结

标签名	功能和语义	属性	单标签还是双标签
table	表格	width 属性：设置表格的总宽度 height 属性：设置表格的总高度 border 属性：设置表格的边框宽度 cellspacing 属性：设置单元格之间的间距 cellpadding 属性：设置单元格的补白	双
caption	标题标题		双
thead	表格头部	align 属性：设置里面所有单元格的水平对齐方式 valign 属性：设置里面所有单元格的垂直对齐方式	双
tbody	表格主体	align 属性：设置里面所有单元格的水平对齐方式 valign 属性：设置里面所有单元格的垂直对齐方式	双
tfoot	表格注脚	align 属性：设置里面所有单元格的水平对齐方式 valign 属性：设置里面所有单元格的垂直对齐方式	双
tr	行	align 属性：设置行内所有单元格的水平对齐方式 valign 属性：设置行内所有单元格的垂直对齐方式 height 属性：设置本行的高度。	双
td	普通单元格	align 属性：设置本单元格的水平对齐方式 valign 属性：设置本单元格的垂直对齐方式 width 属性：设置单元格宽度,同列单元格全受影响 height 属性：设置单元格的的高度，同行所有单元格受影响 rowspan 属性：指定要跨的行数。 colspan 属性：指定要跨的列数	双
th	表头单元格	align 属性：设置本单元格的水平对齐方式 valign 属性：设置本单元格的垂直对齐方式 width 属性：设置单元格宽度,同列单元格全受影响 height 属性：设置单元格的的高度，同行所有单元格受影响 rowspan 属性：指定要跨的行数。 colspan 属性：指定要跨的列数	双

注意： 如果省略了 thead、tbody、tfoot 标签，显示效果没有影响，浏览器会自动在 table 和 tr 之间添加一个 tbody 标签。

4 表单标签

用户可以通过表单向网站提交数据，与网站进行交互。

表单允许用户输入内容选择某个选项，并且可以把用户的内容提交给网站。

通常用于搜索框、登录、注册、评论、发帖等。

4.1 表单总体设置

表单的内容要包裹在 form 标签内。
form 标签可以通过属性设置相关功能：
	action 属性可以设置要提交的地址（后端处理程序的地址）
	target 属性指定提交的地址从哪里打开（本窗口或新窗口）
	method	属性指定提交方法。
表单控件需要指定 name 属性，目的是后端程序通过 name 属性的值获取对饮的数据。

4.2 表单控件

① 文本输入框

<input type="text">

② 密码输入框

<input type="password">

③ 单选按钮

<input type="radio" name="sex">女
<input type="radio" name="sex">男
<input type="radio" name="sex">其他

多个radio想要具有单选效果，它们 name 属性值要保持一致。

④ 复选框

<input type="checkbox" name="hobbys">睡觉
<input type="checkbox" name="hobbys">吃
<input type="checkbox" name="hobbys">发呆
<input type="checkbox" name="hobbys">男（高富帅）
<input type="checkbox" name="hobbys">女（富婆）
<input type="checkbox" name="hobbys">打游戏

⑤ 隐藏域

⑥ 提交按钮

⑦ 重置按钮

⑧ 普通按钮

⑨ 文本域

⑩ 下拉选项

4.3 设置表单控件不可用

4.4 label 标签的使用

4.5 fieldset 标签和 legend 标签的使用

4.6 表单标签总结

标签名	语义和功能	属性	单标签和双标签