HTML：Hyper Text Markup Lanuage 超文本标记语言
超文本：比普通文本功能更加强大，可以添加各种样式
标记语言：通过一组标签，来对内容进行描述.<关键字> 是有浏览器来解释执行
常用标签：
<h1>标题标签（取值范围1~6） </h1>
换行标签<br/>
<b>加粗标签</b>
<p>段落标签</P>
<hr/> 水平分割线标签
<font> 改变字体标签</font>
常用属性 color ：颜色
size：改变字体大小 范围1~7
face：改变字体
<img /> 加载图片标签
常用属性 src：相对路径 ./ 代表当前路径
../ 代表上一级路径
../../ 代表上上一级路径
i标签：斜体
strong标签：带语义的加粗
em标签：斜体标签 带语义
入门案例：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>标题</title>
-
</head>
-
<body>
-
<h1>今日美句</h1><hr/>
-
<p>
-
<font color="red" size="5">
-
愿你一生努力，一生被爱。最想要的都拥有，得不到的都释怀。
-
</font>
-
</p>
-
-
<p>
-
<b>
-
<font color="green" size="6" face=楷体>
-
我还是喜欢你，像春风十里，不问归期。
-
</font>
-
</b>
-
</p>
-
-
<p>
-
<font color="gray" size="5">
-
我爱你，<br/>
-
不光因为你的样子，<br/>
-
还因为，<br/>
-
和你在一起时，我的样子。
-
</font>
-
</p>
-
-
<img alt="图片加载失败" src="imgs/731741.png" width="660" height="440"/>
-
</body>
-
</html>
<h1>今日美句</h1><hr/>
<p>
<font color="red" size="5">
愿你一生努力，一生被爱。最想要的都拥有，得不到的都释怀。
</font>
</p>
<p>
<b>
<font color="green" size="6" face=楷体>
我还是喜欢你，像春风十里，不问归期。
</font>
</b>
</p>
<p>
<font color="gray" size="5">
我爱你，<br/>
不光因为你的样子，<br/>
还因为，<br/>
和你在一起时，我的样子。
</font>
</p>
<img alt="图片加载失败" src="imgs/731741.png" width="660" height="440"/>
</body>
</html>运行结果：
超链接标签：无序列表ul 跟有序列表ol
<ul>无序列表标签</ul>
属性 type: circle(小圆圈）、disc(小黑圆点)、square（小方块）
<li>列表项</li>
<ol>有序列表标签</ol>
属性 type: 指定序号类型
start:从几开始 数字
<li>列表项</li>
属性：href：指定要跳转去的链接地址，需要加上http协议，如果是访问本项目的html网站可以直接写路径
target：以什么方式打开
self：（默认打开方式）在当前窗口打开
blank：新起一个标签页打开
案例：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>Insert title here</title>
-
</head>
-
<body>
-
<ul type="square">
-
<li><a href="http://www.baidu.com/" target="_blank">百度</a></li>
-
<li>知乎</li>
-
<li>优酷</li>
-
</ul>
-
-
<hr>
-
-
<ol type="a" start="2">
-
<li><a href="http://www.baidu.com/">百度</a></li>
-
<li>知乎</li>
-
<li>优酷</li>
-
</ol>
-
-
</body>
-
</html>
运行结果：
表格标签：table
<table>表格标签</table>
属性：border 边框、width 宽度、 height 高度、 bgcolor 背景颜色、align 对齐方式
<tr>行标签</tr>
<td>列标签</td>
合并： colspan：跨列
rowspan：跨行
入门案例：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>Insert title here</title>
-
</head>
-
<body>
-
<table border="1" width="400" bgcolor="yellow" align="center">
-
<tr align="center">
-
<td colspan="2">11</td>
-
<td>13</td>
-
<td>14</td>
-
<td>15</td>
-
</tr>
-
<tr>
-
<td>21</td>
-
<td>22</td>
-
<td colspan="2" rowspan="2">
-
<!-- 表格嵌套 -->
-
<table border="1" width="100%">
-
<tr>
-
<td>0</td>
-
<td>0</td>
-
<td>0</td>
-
</tr>
-
<tr>
-
<td>0</td>
-
<td>0</td>
-
<td>0</td>
-
</tr>
-
</table>
-
</td>
-
<td>25</td>
-
</tr>
-
<tr>
-
<td>31</td>
-
<td>32</td>
-
<td rowspan="2">35</td>
-
</tr>
-
<tr>
-
<td>41</td>
-
<td>42</td>
-
<td>43</td>
-
<td>44</td>
-
</tr>
-
-
</table>
-
</body>
-
</html>
运行结果：
输入标签：
<input /> 输入标签
属性：type 输入项类型
可选值：text 文本框、password 密码框、file 上传文件、radio 单选按钮、checkbox 勾选框
tel 手机号码、number 只允许输入数字、date 日期类型、hidden 隐藏域、submit 提交按钮
button 普通按钮、reset 重置按钮、hidden 隐藏域
placeholder：指定默认的提示信息
name :在表单提交的时候，当作参数的名称
id:给输入项取一个名字，以便于我们后期去找到他操作
<textarea cols="宽度" rows=“高度”>大文本框标签</textarea>
<select>下拉标签</select>
<option>子标签 选择项</option>
<form action="提交的地址" method="方式：get（默认）/post">表单标签</form>
get：会将参数拼接在链接后面
post：会将参数封装在请求体中
入门案例：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>Insert title here</title>
-
</head>
-
<body>
-
<form action="http://www.baidu.com/">
-
帐号：<input type="text"><br>
-
密码：<input type="password"><br>
-
性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
-
籍贯：
-
<select>
-
<option>广东</option>
-
<option>广西</option>
-
<option>湖南</option>
-
<option>其他</option>
-
</select><br>
-
出生日期：<input type="date"><br>
-
爱好：<input type="checkbox">跑步
-
<input type="checkbox">看书
-
<input type="checkbox">打球
-
<input type="checkbox">其他<br>
-
个人介绍：
-
<textarea rows="4" cols="40"></textarea><br>
-
-
<input type="submit" value="提交">
-
<input type="reset" value="重置">
-
<input type="button" value="普通按钮">
-
</form>
-
</body>
-
</html>
运行结果：