HTML的概念
- Hyper Text Markup Language 超文本标记语言
- 超文本：超级文本，比普通文本厉害于可以存放图片，音频，视频等
- 标记语言：由标签构成的语言，<标签名称>，如HTML，XML
- 标记语言不是编程语言，因为没有逻辑性，只要写上，就会无脑执行
HTML的语法
- HTML文档后缀名：xxx.html或xxx.htm
- 标签分为：
- 围堵标签：有开始标签和结束标签。如<html> </html>
- 自闭和标签：开始标签和结束标签在一起。如<br/>
- 标签与标签可以嵌套，但要正确嵌套。如
<a><b></b></a><!--正确嵌套-->
<a><b></a></b><!--错误嵌套-->
- 在开始标签中可以定义属性，属性由键值对构成，值需要用引号（单双都可以）引起来
- HTML的标签不区分大小写，如<br/>与<BR/>效果一样，但建议使用小写
HTML中的标签
文件标签
- <html>：根标签。所有标签都在它里面
- <head>：头标签。用于指定HTML文档的一些属性；引入外部资源（CSS，js）
- <title>：标题标签。浏览器标签页上的文字
- <body>：体标签。网页内容
- <!DOCTYPE html>：HTML5中定义该文档是HTML文档
<!--这是用idea默认生成的HTML文件-->
<!DOCTYPE html>
<htmllang="en">
<head>
<!--meta标签用来指定字符集，utf-8才支持中文-->
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
文本标签
- <h1> to <h5>：标题标签（headline）。h1->h6字体逐渐变小，自带换行效果
- <p>：段落标签（paragraph）
- <br>：换行标签（blank row）
- <hr>：展示一条水平线（horizontal route）；有属性color（颜色），size（高度），width（宽度），align（对齐方式）
- <b>：加粗（bold）
- <i>：斜体（italic）
color属性的定义
- 英文单词：red，green，blue；能得到的颜色很少，不推荐使用
- rgb(值1,值2,值3)：值得范围为0~255；例如rgb(0,0,255)为蓝色；很多浏览器已不支持，不推荐使用
- #值1值2值3：值得范围为00~FF；例如#0000FF为蓝色，推荐使用
width属性的定义
- 数值：width="20",数值的单位，默认是px（像素）
- 数值%：占比相对于父元素的比例
<hrcolor="#0000FF"width="50%"/>
图片标签img
常用属性：
- src：图片的路径（一般为相对路径）
- alt：当图片加载失败，用alt的值进行替换；alternate有备用的意思
<imgsrc="image/DominusNoob.jpg"alt="有备无患"/>
<!--相对路径：以.开头的路径
./代表当前路径
../代表上一级路径
如果啥都没写，默认是当前路径./
即./image/DominusNoob.jpg和image/DominusNoob.jpg路径一样-->
列表标签
有序标签<ol>
<!-- 有序列表 ol-->
周末做什么？
<oltype="1"start="5">
<!-- type定义有序列表类型，start定义起始位置-->
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
<!-- 5.吃饭-->
<!-- 6.睡觉-->
<!-- 7.打豆豆-->
</ol>
无序标签<ul>
<!-- 无序列表 ul-->
周末做什么？
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
<!-- · 吃饭-->
<!-- · 睡觉-->
<!-- · 打豆豆-->
</ul>
链接标签<a>
超链接功能：
- 可以被点击
- 点击后跳转到href指定的url
如何实现可以被点击，但不跳转页面？
实现：href="javascript:;"
上面的代码很常用，可以像按钮一样绑定单击事件，而不跳转页面
<ahref="https://www.baidu.cn"target="_self">我是超链接</a>
<!-- href：指定访问资源的URL（统一资源定位符）-->
<!-- target：指定链接的网页在哪里打开
_self:默认值，当前网页打开
_blank:新空白页面打开 -->
块标签div和span
div与span没有任何效果，与CSS结合使用，白纸才好画画
div
每个div占满一行。块级标签
span
有多少文字占据多少空间，包裹内容。行内标签，内联标签
语义化标签
HTML5中为了提高程序的可读性，提供了一些标签，也要与CSS结合使用
- <header>
- <footer>
表格标签
- table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
- bgcolor：背景色
- align：对齐方式
- tr：table row（表格行）的缩写，定义行
- td：table data（表格数据）的缩写，定义普通单元格
colspan：合并列
rowspan：合并行 - th：table head（表格头）的缩写，定义表头单元格
- caption：表格标题
- thead：表示表格的头部分（下面三个和语义化标签类似，但HTML5之前已经存在）
- tbody：表示表格的体部分
- tfoot：表示表格的脚部分
<tablewidth="20%"border="1"cellpadding="0"cellspacing="0"bgcolor="#faebd7"align="center">
<caption>学生信息表</caption>
<tralign="center">
<!-- 合并两行-->
<throwspan="2">id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tralign="left">
<td>Dominus</td>
<td>20</td>
</tr>
<tralign="right">
<td>2</td>
<tdcolspan="2">Noob</td>
<!-- 合并两列-->
</tr>
</table>
表单标签
form标签
用来定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性
- action：指定提交数据的url
- method：指定提交方式分类：一共7种，2种比较常用
- get：
- 请求参数会在地址栏中显示。会封装到请求行中
- 请求参数的长度有限制
- 不太安全
- post
- 请求参数会封装在请求体中
- 请求参数长度无限制
- 较安全
表单项中的数据要想被提交，必须指定input标签的name属性
<form action="#">
用户名<input name="user"><br>
密码<input name="pass"><br>
<input type="submit">
</form>
表单项标签
- input
- type=" "：通过改变type属性的值，进而改变输入框的类型
- text：文本输入框（默认值）
- password：密码框
- radio：单选框
- 要想让多个单选框实现单选效果，则多个单选框的name属性值必须一样
- 一般会给每一个单选框提供value属性，指定其被选中后提交的值
- checked属性，可以指定默认值
- checkbox：复选框
checked属性，可以指定默认值 - file：文件选择框
- hidden：隐藏域。不会显示在网页上，但会被提交，用来隐藏信息
- submit：提交表单的按钮
- button：按钮，不能提交表单，与js结合使用
- image：图片按钮，可以提交表单。src属性指定图片路径
- color：取色器，会被提交
- placeholder：指定输入框的默认内容，当输入框内容发生变化，会自动清空
- value：为 input 元素设定值。输入框为默认值，按钮为按钮的名字
- name：规定 input 元素的名称。（name=value即为表单提交的键值对）
- label：指定输入项的内容类型。label的for属性为对应的input的id值，如果对应，点击label区域的文字，会让input输入框获取焦点
- select：下拉列表
- option：指定列表项
如果设置value属性，则value的值会替代选项文字被提交
selected属性指定默认选中项
- textarea标签：文本域，类似记事本
- cols属性：指定列数，每一行多少字符
- rows属性：指定行数
<form action="/demo4" method="post">
<input type="text" placeholder="请输入用户名" name="username"><br>
<input type="text" placeholder="请输入密码" name="password"><br>
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="music">音乐
<br>
<input type="submit" value="注册">
</form>
HTML字符实体
HTML 中的预留字符必须被替换为字符实体。
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样：
&entity_name;
或者
&#entity_number;
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格（non-breaking space）
HTML 中的常用字符实体是不间断空格()。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
HTML 中有用的字符实体
注释：实体名称对大小写敏感！
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| 空格 | |
||
| < | 小于号 | < |
< |
| > | 大于号 | > |
> |
| & | 和号 | & |
& |
| " | 引号 | " |
" |
| ' | 撇号 | ' (IE不支持) |
' |
| ￠ | 分（cent） | ¢ |
¢ |
| £ | 镑（pound） | £ |
£ |
| ¥ | 元（yen） | ¥ |
¥ |
| € | 欧元（euro） | € |
€ |
| § | 小节 | § |
§ |
| © | 版权（copyright） | © |
© |
| ® | 注册商标 | ® |
® |
| ™ | 商标 | ™ |
™ |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
如需完整的实体符号参考，请访问我们的 HTML 实体符号参考手册。
