超文本标记语言
基本语法
!+ 回车 快速构建页面
文档声明与字符编码
告诉浏览器以下写的代码是英文的
常用标签
1、文本标签
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
</body>
</html>
2、段落文本（p）
标识一个段落（段落与段落之间有断间距）
3、换行（br）
换行是一个空标记（强制换行）
4 、水平线（hr）
空标记
5、加粗有两个标记(推荐strong)
加粗内容 只显示加粗
强调的内容 突出的文本
6、倾斜有两个标记（推荐em）
强调文本
倾斜文本
7、删除线有两个标记（推荐del）
文本删除线
文本删除线
8、扩展
文本下划线
下标
上标
不一样的hr
特殊的符号
尖角号
如果需要把尖角号显示在html网页上，就需要用特殊符号：< >
空格
<p> 赵钱孙李，周吴郑王</p>
<p>  赵钱孙李，周吴郑王</p>
nbsp不确定对应方式。
一个emsp对应一个汉字。
版权符号
<body>
©//版权符号
</body>
商标号
<body>
™™
®®
</body>
div和span标签
div标签：没有具体的含义，用来划分页面的区域，独占一行。
span标签：没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽，就占用多宽的空间距离允 许在一行显示。
图片标签的路径
<body>
<img src="./aaa.jpg"/>
</body>
上一级的话就用 ../
图片标签的属性
<body>
<img src="aaa1.jpg" alt="请刷新重试" title="详细描述">
<img src="aaa.jpg" title="详细描述">
</body>
alt: 图片不能正确加载提示的信息，类似于报异常。
title：鼠标放到图片上，显示的内容。
<img src="aaa.jpg" width="100">
<img src="aaa.jpg" height="100">
超链接和标签
功能：实现不同页面的跳转
<body>
<a href="https://www.baidu.com">百度</a>
</body>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com" target="_self">百度</a> //默认的
<a href="https://www.baidu.com" target="_blank">百度</a> //在新窗口打开
</body>
除了可以跳转到外部链接，也可以跳转到自己写的链接
也可以实现 点击图片进行页面跳转
<a href="https://www.baidu.com">
<img src="aaa.jpg" title="详细查询">
</a>
锚点链接
点我们点击链接,可以快速定位到页面中的某个位置.
-
在链接文本的href属性中，设置属性值为 #名字的形式，如第二集
-
找到目标位置标签，里面添加一个ID属性=刚才的名字，如：
第二集介绍
table表格
表格用于显示、展示数据。可读性好
表格基本结构
<body>
<table> //创建表格
<tr> // tr表示行
<td>1</td> td表示单元格
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
表头单元格也是单元格，常用语表格第一行，突出重要性。表头单元格里面的内容会居中加粗显示。
表格属性
列表
表格用于显示数据、列表用于布局
3、自定义列表
1、有序列表
<body>
<ol type="A" start="8" >
<li >1111</li>
<li>222</li>
</ol>
</body>
1、ol 里面只能放 li 但是li里面可以放任意标签。
2、并且数字是任意生成的。
3、type：1 A a i I
start:取值只能是一个数字。
如果start 为 27
2、无序列表
1、ul里只能放li,但是li里可以放其他标签。
2、默认的是黑色的实心圆。
4、type: disc（实心圆默认） 、circle（空心圆形）、square（正方形）、none（使用的最频繁的）
<body>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</body>
3、自定义列表
<dl>
<dd>我是图片</dd>
<dt>我是文字</dt>
</dl>
表单标签
使用表单目的：收集用户信息。
在网页中，需要跟用户进行交互，收集用户信息，就需要表单。
表单的组成：
表单域
表单域就是包含一个表单元素的区域。
标签用于定义表单域，实现用户信息的收集和传递。 会把他范围内的表单元素信息提交给后台。<form action=“url地址” method=“提交方式” name=“表单域名称"> 各种表单元素控件
</form>
常用属性：
表单控件（元素）
input标签：用户收集用户信息。
有一个type属性，根据不同的type属性值，输入字段有多种形式（文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）
<input type="属性值"
- input 为单标签
- type 属性设置不同的属性值用来指定不同的控件类型
除了type属性外，input标签还有其他很多属性，其常用属性如下
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> 人妖 <input type="radio" name="sex" value="人妖"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
</form>
labyl标签
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
layble标签里的for属性与相关元素的ID属性相同。
表单元素 在页面中，如果有多个选项让用户选，并且想要节约空间时，我们可以使用select标签控件定义下拉列表。 语法： <body> <form> 籍贯: <select> <option>山东</option> <option>北京</option> <option>天津</option> <option selected="selected">火星</option> </select> </form> 表单元素 当用户输入内容较多的情况下，就不能使用文本框表单，可以使用textarea 标签 cols 表示每行的字符数 rows 表示最做有几行 ``` <form> 今日反馈: <textarea cols="50" rows="5">留言是textarea来做的
</form>
