目录
-
HTML
HTML的代码必须写在.html 或 .htm文档 中
-
标签
- 标签从书写结构上分为2种：单标签和双标签
- 标签从组织结构上分为2种：内容标签和结构标签
- 内容标签：主要包含和展示内容的，部分标签可以包含其他的内容标签
- 结构标签：主要用于包含其他标签，一般结构标签内部不会直接包含网页内容（文本、图片、视频、音频等）
-
单标签
网页中的常见单标签：
| 标签名 | 描述 |
| <meta> | 元信息标签 |
| <link> | css外观样式的外链引入标签（类似于import），可以导入css代码到html文档中 |
| <img> | 图片标签 |
| <input> | 输入框标签 |
| <br /> | 换行标签，浏览器遇到br标签就会自动进行内容换行（类似于/r /n） |
| <hr /> | 分格线标签，代表分隔内容的一条横线 |
-
双标签
网页中的常见双标签：
| 标签名 | 描述 |
| <h1></h1> | 网页的一级标题 |
| <h2></h2> | 网页的二级标题 |
| ... | ... |
| <h6></h6> | 网页的六级标题 |
| <p></p> | 网页的段落 |
| <a></a> | 网页超链接 |
| <div></div> | 块级结构标签 |
| <span></span> | 行级结构标签 |
| <form></form> | 表单标签，表示网页的一个提供给用户输入数据的表单 |
| <ul></ul> | 无序列表结构标签，表示网页的一个内容列表 |
| <li></li> | 列表项目标签 |
| <table></table> | 表格标签，表示网页的一个表格 |
-
常见标签的使用
标题和段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML常见标签的使用</title>
</head>
<body>
<h1>h1标题:常用于网站的logo、标题</h1>
<h2>h2标题:常用于网站的模块标题、栏目标题</h2>
<h3>h3标题:常用于网站的模块标题、栏目标题</h3>
<h4>h4标题:常用于网站的附加板块标题或是文章的标题</h4>
<h5>h5标题:更小级别的标题,基本用不到</h5>
<h6>h6标题:更小级别的标题,基本用不到</h6>
<p>p段落</p>
</body>
</html>
换行、分隔、超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>换行br/分隔符hr/超链接a</title>
</head>
<body>
<a href="https://baike.baidu.com/item/将进酒/5312" title="将进酒"><h1>将进酒</h1></a>
<p>
君不见黄河之水天上来，奔流到海不复回。<br>
君不见高堂明镜悲白发，朝如青丝暮成雪。<br>
人生得意须尽欢，莫使金樽空对月。<br>
天生我材必有用，千金散尽还复来。<br>
烹羊宰牛且为乐，会须一饮三百杯。<br>
岑夫子，丹丘生，将进酒，杯莫停。<br>
与君歌一曲，请君为我倾耳听。<br>
</p>
<hr>
<h2>译文</h2>
<p>
你可见黄河水从天上流下来，波涛滚滚直奔向大海不回还。<br>
你可见高堂明镜中苍苍白发，早上满头青丝晚上就如白雪。<br>
人生得意时要尽情享受欢乐，不要让金杯空对皎洁的明月。<br>
天造就了我成材必定会有用，即使散尽黄金也还会再得到，<br>
煮羊宰牛姑且尽情享受欢乐，一气喝他三百杯也不要嫌多。<br>
岑夫子啊，丹丘生啊，快喝酒啊，不要停啊。<br>
我为在坐各位朋友高歌一曲，请你们一定要侧耳细细倾听。<br>
</p>
</body>
</html> 
超链接的2中常用用法：页面跳转、下载文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--页面跳转:如果href的值是网络页面时，跳转到指定页面-->
<a href="http://baidu.com">百度一下</a>
<br>
<!--页面跳转:如果href的值是本地地址时，跳转到本地的内部网页-->
<a href="./1_3_4-超链接页面.html">跳转到本地页面</a>
<br>
<!--下载资源:当href的值是一个浏览器无法直接展示的内容格式时，浏览器会自动下载当前路径对应的内容-->
<a href="./html">点击下载</a>
<!--下载资源:当href的值是一个浏览器可以直接识别并展示的内容格式时，用户可鼠标右键，对当前href的值进行另存为下载-->
<a href="./attribute.png">点击下载图片(使用“鼠标右键，另存为”的方式)</a>
</body>
</html>
列表标签
列表标签在HTML中提供了3种：
- 无序列表（UnorderList，ul）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表</title> </head> <body> <!--网页列表内容一般由列表标签组织展示，ul+li组合，ul标签与li标签之间尽量不要写标签或是内容 若列表中有内容，一定要写在li中间--> <ul> 这是ul与li,不会形成一个列表项 <li>无序列表,第1个列表项</li> <li>无序列表,第2个列表项</li> <li>无序列表,第3个列表项</li> </ul> <hr> <!-- 列表的嵌套,可嵌套多层 --> <ul> <li> 1 <ul> <li>1.1</li> <li>1.2</li> <li>1.3</li> </ul> </li> <li> 2 <ul> <li>2.1</li> <li> 2.2 <ul> <li>2.3.1</li> <li>2.3.2</li> <li>2.3.3</li> </ul> </li> </ul> </li> </ul> </body> </html>
- 有序列表（OrderList，ol）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序列表</title> </head> <body> <ol> <li>有序列表，第1个列表项</li> <li>有序列表，第2个列表项</li> <li>有序列表，第3个列表项</li> </ol> <hr> <ol> <li> 1 <ol> <li>1.1</li> <li>1.2</li> </ol> </li> <li> 2 <ol> <li>2.1</li> <li>2.2</li> </ol> </li> </ol> </body> </html>
- 定义列表（DefineList，dl）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列表</title>
</head>
<body>
<!--定义列表，仅能用在-->
<p>
定义列表标签为dl<br>
定义列表的每一个定义项由<strong>dt(Define Title)</strong> 和 <strong>dd(Define Description)</strong>组成<br>
dt表示定义项0的标题<br>
dd表示对上一个dt中的标题内容进行描述或是补充说明
</p>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dd>W3C标准中的结构标准</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dd>W3C标准中的外观标准</dd>
<dt>JavaScript</dt>
<dd>简称JS</dd>
<dd>W3C标准中的行为标准</dd>
</dl>
</body>
</html>
除了定义列表结构特殊以外，其他的2种列表都为列表项目（List Item，li）
表单标签
- <input>
- <textarea>
个性签名:<br>
<textarea name="description" rows="10" cols="30"></textarea>- <select>
- <option>
- <optgroup>
城市:
<select>
<optgroup label="云南">
<option value="0">昆明</option>
<option value="1">曲靖</option>
</optgroup>
<optgroup label="河南">
<option value="2">郑州</option>
<option value="3">安阳</option>
</optgroup>
<option value="4">其他</option>
</select>
- <lable>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post" enctype="application/x-www-form-urlencoded">
<label>
账号:
<input type="text" name="username" value="" placeholder="请输入账号">
</label>
<br>
<label>
密码:
<input type="password" name="pwd" value="" placeholder="请输入密码">
</label>
<br>
<label>
电话号码:
<input type="tel" name="telephone" placeholder="请输入电话号码">
</label>
<br>
<label>
年龄:
<input type="number" name="age" value="" placeholder="请输入年龄">
</label>
<br>
<label>
出生年月:
<input type="month" name="born">
</label>
<br>
性别:
<label><input type="radio" name="sex" value="0">男</label>
<label><input type="radio" name="sex" value="1">女</label>
<br>
爱好:
<label><input type="checkbox" name="hobbies" value="0">篮球</label>
<label><input type="checkbox" name="hobbies" value="1">滑板</label>
<label><input type="checkbox" name="hobbies" value="2">撸猫</label>
<label><input type="checkbox" name="hobbies" value="3">吉他</label>
<br>
城市:
<select>
<optgroup label="云南">
<option value="0">昆明</option>
<option value="1">曲靖</option>
</optgroup>
<optgroup label="河南">
<option value="2">郑州</option>
<option value="3">安阳</option>
</optgroup>
<option value="4">其他</option>
</select>
<br>
上传文件:
<input type="file" name="file">
<br>
个性签名:<br>
<textarea name="description" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>
</body>
</html>
-
属性
属性的使用
<!DOCTYPE html>
<html lang="en"> <!--lang就是HTML标签的属性，代表当前网页的默认语言language为english-->
<head>
<meta charset="UTF-8"> <!-- charset是meta元信息标签的属性，表示当前网页的编码是utf-8-->
<title>HTML常见标签的使用</title>
</head>
<body>
<!-- 双标签的属性 -->
<!--align:文本的对齐方式 ==> left左(默认)、right右、center居中
title:表示当前标签的补充提示，当用户把鼠标放在当前标签上方，则会自动显示title属性的值-->
<h1 align="left" title="提示文本">h1标题:常用于网站的logo、标题</h1>
<h2 align="center">h2标题:常用于网站的模块标题、栏目标题</h2>
<h3 align="right">h3标题:常用于网站的模块标题、栏目标题</h3>
<h4>h4标题:常用于网站的附加板块标题或是文章的标题</h4>
<h5>h5标题:更小级别的标题,基本用不到</h5>
<h6>h6标题:更小级别的标题,基本用不到</h6>
<p>p段落</p>
<!-- 单标签的属性：单标签没有内容，需要依靠属性来展示对应的内容-->
<img src="./attribute.png"> <!--src:需要展示图片的地址-->
<input type="number"> <!--输入框标签[数值输入框]，number表示只允许当前输入框中的内容为数值-->
<input type="password"> <!--输入框标签[密码输入框]，password表示输入的任何内容都是密码，所以输入的内容不会被展示出来 -->
<input type="text"> <!--输入框标签[单行文本输入框]，text表示只允许输入一行内容，不能回车-->
<input type="datetime-local"> <!--时间输入框，只需要用户选择时间日期-->
</body>
</html>
<input type="datetime-local">
