Day03_HTML课堂笔记

Day03 HTML 课堂笔记

1 回顾

1.1 文本标签

em 文本加强，默认斜体显示，只需把需要加强的文字套入该标签中
strong 文本加强，默认粗体显示，同上
ins 插入，多用于价格更新，默认有下划线，加粗
del  文字删除线，用于价格删除，更新
sup 上标字，用于数学公式，次方
sub 下标字，用于化学表达式，例如水的化学表达式

1.2 图片标签

img		属性： src、alt、width、height

1.3 相对路径和绝对路径

绝对路径： 完整的URL

相对路径：参考当前文件
        ./  表示当前目录
        ../  表示上一级目录

1.4 超链接和锚点

① 超链接

a 标签： 属性：href、target

② 锚点

1. 如何设置锚点
2. 如何跳转到锚点

2 列表

2.1 无序列表

<ul>
    <li>上半年我国经济主要宏观指标运行处于合理区间</li>
    <li>推进浦东打造社会主义现代化建设引领区，上海这么干</li>
    <li>来联署吧 一起呼吁世卫组织调查美国德特里克堡实验室</li>
    <li>来联署吧 一起呼吁世卫组织调查美国德特里克堡实验室</li>
    <li>来联署吧 一起呼吁世卫组织调查美国德特里克堡实验室</li>
    <li>来联署吧 一起呼吁世卫组织调查美国德特里克堡实验室</li>
</ul>

页面中的导航条、新闻列表、文章列表、评论列表、商品列表等适合使用无序列表。

2.2 有序列表

<ol>
	<li>把做明星的门槛提上来</li>
    <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 直接包裹！

3 表格标签

3.1 表格的结构

<table border="1">
    <!--表格标题-->
    <caption>用户信息</caption>

    <!-- 表格头 -->
    <thead>
        <!--表头行-->
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>地址</th>
        </tr>
    </thead>

    <!-- 表格主体 -->
    <tbody>
        <!--行 table row -->
        <tr>
            <td>1</td>
            <td>曹操</td>
            <td>56</td>
            <td>男</td>
            <td>许昌</td>
        </tr>
        <tr>
            <td>2</td>
            <td>曹丕</td>
            <td>36</td>
            <td>男</td>
            <td>许昌</td>
        </tr>
        <tr>
            <td>3</td>
            <td>曹植</td>
            <td>26</td>
            <td>男</td>
            <td>许昌</td>
        </tr>
        <tr>
            <td>4</td>
            <td>曹冲</td>
            <td>12</td>
            <td>男</td>
            <td>许昌</td>
        </tr>
        <tr>
            <td>5</td>
            <td>曹昂</td>
            <td>36</td>
            <td>男</td>
            <td>许昌</td>
        </tr>
    </tbody>

    <!-- 表格脚 -->
    <tfoot></tfoot>
</table>

table
	caption
	thead
		tr
			th
			th
			....
		...
	tboty
		tr
			td
			td
			...
		...
	tfoot
		tr
			td
			td
			...
		...

3.2 表格整体样式设置

通过给 table 标签设置属性，设置表格的整体样式，table 标签的属性如下：

width		设置表格的宽度
height		设置表格的高度
border		设置表格边框
cellspacing 设置单元格之间的间距
cellpadding	设置单元格补白（单元格边框与内容的距离）

3.3 单元格样式设置

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

设置单元格内容的水平对齐方式：

1. 给 thead、tfoot、tbody 设置 align 属性，所包含的单元格都会生效。
2. 给 tr 设置 align 属性，本行内的单元格都会生效。
3. 给 th 或者 td 设置 align 属性，只有自己生效。

align 属性的值： left right center

设置单元格内容的垂直对齐方式：

1. 给 thead、tfoot、tbody 设置 valign 属性，所包含的单元格都会生效。
2. 给 tr 设置 valign 属性，本行内的单元格都会生效。
3. 给 th 或者 td 设置 valign 属性，只有自己生效。

valign 属性的值： top bottom middle

② 设置单元格宽高

设置单元格宽度：

给 td 或者 th 设置 width 属性，所在列的单元格都按照此设置的宽度。

设置单元格高度：

1. 给 tr 设置 height 属性，行内所有的单元格都按照此高度。
2. 给 td 或者 th 设置 height 属性，所在行内的所有单元格都按照此高度。

3.4 单元格跨行和跨列（重要）

给 td 或者 th 设置跨行、跨列的属性：

colspan		跨列，指定所跨越的列数
rowspan		跨行，指定所跨越的行数

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：**设置本单元格所跨的列数。	双标签

4 表单

4.1 表单总体设置

<form action="http://www.baidu.com/s" target="_blank">
    <input type="text" name="wd">
    <button>搜索</button>
</form>

4.2 表单控件

① 文本输入框

<input type="text">
<input type="text" maxlength="10">

② 密码输入框

<input type="password">
<input type="password" maxlength="12">

③ 单选按钮

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

注意： 多个单选框要想实现单选的效果，需要设置它们的 name 属性值是一样的。

④ 复选框

<input type="checkbox">暴富
<input type="checkbox">睡觉
<input type="checkbox" checked>吃饭
<input type="checkbox">打游戏
<input type="checkbox">数钱
<input type="checkbox">洗脚
<input type="checkbox" checked>学习

⑤ 提交按钮

<input type="submit" value="提交">
<button>提交</button>

⑥ 重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

⑦ 普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

⑧ 文本域

<textarea rows="10" cols="60"></textarea>

⑨ 下拉选项

<select>
    <option>江苏</option>
    <option>浙江</option>
    <option>山东</option>
    <option>江西</option>
    <option selected>内蒙古蒙古族自治区</option>
    <option>河北</option>
    <option>河南</option>
    <option>安徽</option>
</select>

4.3 表单控件的属性

① name 属性

1. name 用于标记数据的名称，后端根据name名称获取对应的数据
2. 多个单选框设置相同的name，才能实现单选的效果
3. 下拉选项，给 select 设置 name 属性
4. 提交按钮、重置按钮、普通按钮不要设置 name 属性

② value 属性

1. 文本输入框和密码输入框，value 属性可以指定输入框默认显示的内容
2. 复选框和单选框，value 属性指定的是真正提交到后端的数据
3. 下拉选项，给 option 指定 value，value 的值也是真正提交的数据；如果 option 不指定 value，标签中的文字作为真正提交的数据
4. 使用 input 标签实现的提交按钮、重置按钮、普通按钮，value 属性指定按钮上的文字

③ disabled 属性

1. 所有的表单控件都可以设置 disabled 属性，设置之后该表单控件不可用
2. disabled 属性无需设置值
3. select 设置disabled 导致整个下拉选项不可用，option 设置 disabled，只有本选项不可被选

4.4 label 标签的使用

label 标签用于与表单控件进行关联，设置 label 标签的 for 属性值与表达控件的 id 值一致。

<!-- label 与文本输入框、密码输入框、文本域、下拉选项的关联方式 -->
<label for="nameInp">姓名：</label>
<input type="text" id="nameInp">
<br>

<label for="des">介绍：</label>
<textarea rows="10" cols="40" id="des"></textarea>
<br>

<label for="zuji">祖籍：</label>
<select id="zuji">
    <option>新疆维吾尔自治区</option>
    <option>西藏藏族自治区</option>
    <option>广西壮族自治区</option>
    <option>宁夏回族自治区</option>
</select>
<br>


<!-- label 标签与单选框和复选框的关联方式 -->
性别：
<label>
    <input type="radio" name="gender">男
</label>
<label>
    <input type="radio" name="gender">女
</label>
<label>
    <input type="radio" name="gender">其他
</label>
<br>

爱好：
<label>
    <input type="checkbox">敲代码
</label>
<label>
    <input type="checkbox">读书
</label>
<label>
    <input type="checkbox">思考
</label>
<label>
    <input type="checkbox">运动
</label>

4.5 表单标签总结

标签名	语义和功能	属性	单标签和双标签
form	表单	action： 设置提交地址。 target： 设置提交页面的打卡方式，值:_blank。 method： 设置表单的提交方式，值：get、post	双标签
input	各种表单控件	type： 设置表单控件的类型。 name： 设置数据名称。 **value：**表单控件的值。 maxlength： 设置最大可输入长度，用于输入框。 checked： 设置默认选中，用于单选框、复选框。 disabled： 设置不可用	单标签
button	按钮	type： 按钮类型，值:submit、reset、button。 disabled： 设置不可用	双标签
textarea	文本域	rows： 设置默认显示的行数（影响高度） cols： 设置默认显示的列数（硬性宽度） **name：**设置数据的名称 disabled： 设置不可用	双标签
select	下拉选项框	**name：**设置数据的名称 disabled： 设置不可用	双标签
option	下拉选项	**value：**设置真正提交的数据 disabled： 设置不可用 selected： 设置默认选中。	双标签
label	与表单控件关联	**for：**指定表单控件的ID值	双标签

type 属性的值： text、password、radio、checkbox、submit、reset、button