本文介绍了HTML的基本概念，包括其作为超文本标记语言的角色，以及文档结构如DOCTYPEHTML、HTML标签、头部和主体内容的定义。接着详细讲解了常见的文本标签如标题、段落、水平线和换行，以及文本格式化。此外，还提到了表格的创建和CSS的三种引入方式，选择器的类型，以及字体样式的设置。文章最后提及了表单元素和全局属性。
一、基本概念
1、HTML指的是超文本标记语言（Hyper Text Markup Language），是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。
2、HTML指的是超文本标记语言（Hyper Text Markup Language），是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。
二、文档结构
1、<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档（HTML5是HTML的第五个版本）
2、<html></html>称为根标签，所有的网页标签都在<html></html>中
3、<head></head>标签用于定义文档的头部，它是在所有头部元素的容器
4、在<body>和</body>标签之间的内容是网页的主要内容，最终会在浏览器中显示出来
注：使用 Shift+! 可以快速生成html的基本骨架（英文输入法）
1、标签是不会显示出来的
2、HTML标签不区分大小写,但通常使用小写
3、标签只是用来做语义标识而不负责控制样式，样式由css来控制
4、注释<!--这是注释内容--> 快捷Ctrl+/
三、文本标签
1、< h1 > ~ <h6 >:标题标签（head：头部标题）
<h1 >代表最大的标题，<h6 >代表最小的标题
作为标题使用，按照标题重要性依次递减,，数字越大标题越小。
2、< p >段落标签 (paragraph:段落)
p标签是一个文本及标签，里面只能放文字、图片、表单元素。
p标签默认情况下，是独占一行，后面的内容会自动换行。
3、<hr >水平线标签(horizontal:横线)
hr标签是单标签。
通过hr标签能使文档结构更加清晰，增加层次感。
4、<br >换行标签（break：换行、打断）
br标签是单标签
如果希望某段文字，显示在新的一行，那就可以使用br标签达到强制换行的效果。
5、文本格式化标签
| 标签 | 效果 |
| < b></b>和<strong>< /strong> | 文字以粗体显示 |
| <i></i>和<em>< /em> | 文字以斜体的方式显示 |
| <s>< /s>和<del></del> | 文字以加了删除线的方式显示 |
| <u></u>和<ins></ins> | 文字以加下划线的方式显示 |
有时候需要设置文字为粗体、斜体、下划线等等效果，这时候就需要使用HTML中的文本格式化标签来达到自己想要的效果。
| 标题标签 | < h1 > ~ <h6 >，依次减小 |
| 段落标签 | <p> </p> |
| 水平线标签 | </hr> (单标签) |
| 换行标签 | </br> (单标签) |
| 文本格式化标签 | <b>、<strong>，<i>、<em>，<s>、<del>，<u>、<ins> |
| 无语义标签 | <div>独占一行;<span>一行可存在多个 |
| 图片标签 | <img src="路径" alt=" " title=" " 光标所表示的内容,图片加载 失败显示alt |
| 视频标签 | <video src=" 路径" controls autoplat muted poster="路径"> controls是控件,autoplat是自动播放,muted是静音播放poster 是视频加载出来前显示的图片 |
| 音频标签 | <audio src=" 路径" controls muted autoplat loop> loop是循环 |
| 链接标签 | <a href=\"http:\\xxxx\" target="-blank">xxx</a> <a herf=\"http:\\xxxx\"><img src="路径"></a> |
| 锚标签 | <a href="#xx">需要定位内热</a> <div id="xx">需要定位内热</div> |
| 有序排列 | <ol type=" "> <li> </li> </ul> |
| 无序排列 | <ul type=" "> <li> </li> </ul> |
| 自定义排列 | <dl>--<dt>--<dd> |
| iframe框架 | <a href="路径" target="xx">内容</a><iframe name="xx" frameborder="0" width="xx" height="xx"></iframe> |
四、表格
<table border="10px" width="900px" height="400px" cellspacing="0"
<!-- 表头 rows 数据 data-->
table：border（只控制最外围大小）、width、height(tbody
值是底线，只高不低)、cellspacing(单元格与单元格之间的距离)
caption；通过css更改
thead、tr、tbody、tfoot:height\align（水平）\valign（垂直）
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- td 跨行：rowspan 跨列：colspan-->
<tbody>
<tr>
<td rowspan="2">XXX</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr align="right">
<td colspan="5">共计:4人</td>
</tr>
</tfoot>
details
<!-- details：详情标签 配合summary使用 -->
<details>
<summary>有志青年</summary>
我们这里都是优秀的有志青年
</details>
tabindex
<!-- tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数-->
<input type="text">
<a href="#">去百度</a>
表单
<!-- 表单：网页交互区，收集用户信息
action:将数据交给谁处理
name：必有属性
method：提交方式 ajax
-->
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="color">
<input type="time">
<button>提交</button>
</form>
<form action="#">
<!-- 文本框 maxlength:最大长度-->
用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名："><br />
<!-- 密码 -->
密码：<input type="password" name="pwd"><br />
<!-- 单选框 -->
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br />
<!-- 多选框 label标签-->
<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲
</label>
<label><input type="checkbox" name="food">吃臭豆腐</label>
<!-- checked默认选中 -->
<input type="checkbox" name="food" checked>吃肥肉
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="南德斯才能使调查">
<!-- 确认按钮 -->
<!-- <button type="submit"></button> -->
<!--重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button">
<!-- 文本域 -->
<textarea cols="20" rows="10" maxlength="200
">
</textarea><br />
<!-- 下拉菜单 -->
<select name="jiguan" id="one">
<option value="南京">南京</option>
<!-- selected下拉菜单的默认选中 -->
<option value="成都" selected>成都</option>
<option value="西安">西安</option>
</select>
id身份证号,在一个页面中只能出现一次
class一类,可以出现多个.
全局属性
需要写在head中
<style>
.pink {
color: pink;
}
</style>
五、CSS三种引入方式
1、内部样式<写在head里面>
<style>
div{
width: 300px;
height:300px;
background-color:aquamarine;
}
</style>
2、行内样式
<div style="width:200px; height:200px; background-color:cornsilk;"></div>
3、外部结构
<!-- 外部样式 推荐！！！！！ -->
<link rel="stylesheet" href="./14-样式.css">
六、选择器
基本选择器
1、标签选择器-选择所有选择的标签
p
{
color:aqua;
}
2、id选择器
#box{
color:aqua;
}
3、类选择器
.box{
color:aqua;
}
4、通配符选择器
*{
color:aqua;
}
包含选择器
1、子代选择器-选亲儿子
.a>li{
color:aqua;
}
2、后代选择器--选全部后代
.a li{
color:aqua;
}
字体的样式
<style>
div {
cursor: pointer;
/* 字体大小 */
/* font-size: 40px; */
/* 字体粗细 */
/* font-weight: bold; */
/* font-weight: 900; */
/* 100-900 400===normal 800===bold 100-900越来越粗
font-weight: 400;*/
/* 字体是否倾斜 */
/* font-style: italic/normal; */
/* font-family: "微软雅黑"; */
/* italic 900可省略，字体大小，font-family必须存在 */
font: italic 900 70px "微软雅黑"
}
</style>
复合选择器
<style>
div,
p,
span {
color: red;
}
</style>
属性选择器
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
}
input[type$="l"] {
background-color: green;
}
/* type*="e" type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
}
第一次作业：
第二次作业：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
