2021-07-18第三天学习HTML

一、HTML常用标签

1、超链接标签

（1）链接分类

06.锚点标签

当我们点击链接，可以快速定位到页面中的某个位置。在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>。找到目标位置标签，里面添加一个ID属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

2、表格标签

（1）主要作用

用来展示、显示数据

（2）基本语法

<table>
	    <tr>（行标签）
	        <td>单元格内的文字</td>（单元格标签）
	         ...
	    </tr>
	     ...
	</table>

01.<table></table>是用于定义表格的标签
02.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
03.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

（3）例子

<table>
	    <tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
	    <tr><td>byq</td> <td>女</td> <td>21</td></tr>
	     <tr><td>wss</td> <td>男</td> <td>22</td></tr>
	      <tr><td>2021年</td> <td>5月</td> <td>19日</td></tr>
	</table>

（4）表头单元格（th表头单元格标签）

<table>
	    <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
	    <tr><td>byq</td> <td>女</td> <td>21</td></tr>
	     <tr><td>wss</td> <td>男</td> <td>22</td></tr>
	      <tr><td>2021年</td> <td>5月</td> <td>19日</td></tr>
		</table>

（5）表格属性（多用CSS实现）

写在<table>标签里面

（6）表格结构标签（thead表格头部区域标签；tbody表格主体区域标签）

<table>
	<thead>
	    <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
	</thead>
	<tbody>
	    <tr><td>byq</td> <td>女</td> <td>21</td></tr>
	     <tr><td>wss</td> <td>男</td> <td>22</td></tr>
	      <tr><td>2021年</td> <td>5月</td> <td>19日</td></tr>
	<tbody>
	</table>

（7）合并单元格

01.合并单元格方式

001.跨行合并：rowspan=“合并单元格的个数”
002.跨列合并：colspan=“合并单元格的个数”

02.目标单元格（写合并代码）

001.跨行：最上侧单元格为目标单元格，写合并代码
002.跨列：最左侧单元格为目标单元格，写合并代码

03.合并单元格三步曲

001：先确定是跨行还是跨列合并
002：找到目标单元格，写上合并方式=合并的单元格数量。例如：<td colspan="2"></td>
003：删除多余的单元格的代码

例子：

<table>
	    <tr>
		<td></td>
	  	<td colspan="2"></td>
	    </tr>
	    <tr>
		<td rowspan="2"></td>
		<td></td>
		<td></td>
	    </tr>
	     <tr>
		<td></td>
		<td></td>
	     </tr>
	</table>

3、列表标签

（1）作用

用来布局，特点是整齐、有序，作为布局会更加自由和方便

（2）分类

01.无序列表

<ul>
	<li>荔枝</li>
	<li>芒果</li>
	<li>葡萄</li>
</ul>

001.<ul></ul>中只能嵌套<li></li>
002.<li>与</li>之间相当于一个容器，可以容纳所有元素

02.有序列表

<ol>
	<li>荔枝  喜欢数为100</li>
	<li>芒果  喜欢数为50</li>
	<li>葡萄  喜欢数为30</li>
</ol>

001.<ol></ol>中只能嵌套<li></li>
002.<li>与</li>之间相当于一个容器，可以容纳所有元素

03.自定义列表

001.用于对术语或名词进行解释和描述，定义列表的表项前没有任何项目符号
002.语法格式

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
</dl>

0001.<dl></dl>中只能嵌套<dd>和<dt>
0002.<dd>和<dt>没有个数限制，经常一个<dt>对应多个<dd>

4、表单标签

（1）目的

收集用户信息

（2）表单的组成

01.表单域

<form action="ur1地址" method=“提交方式” name=“表单域名称”>
		  各种表单元素控件
		</form>

02.表单控件（表单元素）

	001.input输入表单元素 

<input type="属性值" />

type属性的属性值及其描述：

	002.select下拉表单元素 

<select> 			<option>选项1</option> 			<option>选项2</option> 			<option selected=“selected”>选项3</option>
> 		</select> 	在<option>中定义selected=“selected”时，当前项即为默认选中项
> 		003.textarea文本域元素 		<textarea>
> 		      文本内容 		</textarea>

03.提示信息

二、HTML中的注释和特殊字符

1、注释

（1）格式

01.以“<!--”开头，以“-->”结束
02.快捷键：ctrl+ /

2、特殊字符

重点记住：空格、大于号、小于号

三、综合案例练习

1、目录文件夹
2、所学标签
3、路径
4、锚点链接
四种相结合的综合练习：