什么是 HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
URL的组成
URL：127.0.0.1:8080/blog/addBlog?a=1&b=2
IP：127.0.0.1
PORT：8080
path：/blog/addBlog
data：a=1&b=2
基本的 HTML 标签
标签分为两类：
block(块级标签)-----自己独占一行
inline(内联标签)----按内容划分
基本标签
<html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。 元素内容是另一个 HTML 元素（body 元素）。
<body> 元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。 元素内容是另一个 HTML 元素（p 元素）。
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的，（块级标签） <h1>This is big heading</h1> <h2>This is little heading</h2> <h3>This is little little heading</h3>
HTML 段落是通过 <p> 标签进行定义的(块级标签) <p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML 链接是通过 <a> 标签进行定义的。(内联标签) <a href="http://www.baidu.com">This is a link</a>
HTML 图像是通过 <img> 标签进行定义的。（内联标签） <img src="a.jpg" width="104" height="142" />
a标签的锚点，实现目录与内容的跳转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#c1">1</a> <a href="#c2">2</a> <a href="#c3">3</a> <h1></h1> <div style="height: 500px;background-color: green" id="c1">第一章</div> <div style="height: 500px;background-color: wheat" id="c2">第二章</div> <div style="height: 500px;background-color: gray" id="c3">第三章 </div> </body> </html>
b标签加粗 <b>blod</b> strong标签加粗 <strong>strong</strong> 横线标签 <strike>60$</strike> 斜体标签 <em>em</em> 下标标签 3<sub>2</sub> 上标标签 3<sup>2</sup>
常用标签
无序清单 <ul> <li>111</li> <li>111</li> <li>111</li> </ul> 有序清单 <ol> <li>222</li> <li>222</li> <li>222</li> </ol> #分级清单 <dl> <dt>河北省</dt> <dd>保定市</dd> <dd>石家庄</dd> <dd>邯郸</dd> </dl>
表格标签 <table border="1px" cellpadding="5px" cellspacing="2px"> <tr> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td colspan="2">111</td>/*跨列合并*/ <td>111</td> <td>111</td> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> <td rowspan="2">111</td>/*跨行合并*/ </tr> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> </table>
表单标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>注册页面</h3> <form action="" method="get" enctype="multipart/form-data"> /*以key，value方式给后台传参数*/ <p> <label for="c1">姓名：</label>/*<label> 标签为 input 元素定义标注（标记）*/ <input type="text" name="username" placeholder="username" id="c1">/*文本框 placeholder文本框内提示信息*/ </p> <p>密码：<input type="password" name="pwd"></p>/*密码框*/ <p>性别: <input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="0">女</p>/*单选按钮*/ <p>爱好：<input type="checkbox" name="hobby" value="football" checked>足球 <input type="checkbox" name="hobby" value="basktball">篮球<input type="checkbox" name="hobby" value="double2">双色球</p>/*多选框 checked属性：默认选择上*/ <p>头像：<input type="file"></p>/*上传标签*/ <p><input type="reset" value="reset"></p>/*重置*/ <p><input type="button" value="按钮" onclick="alert(1234)"></p>/*按钮*/ <p><input type="hidden" name="key" value="v1"></p>/*隐藏的，用于给后台传默认参数*/ <p> 省份： <select name="province" size="3" multiple="multiple"> <option value="1">河北省</option> <option value="2" selected>河南省</option> <option value="3">湖北省</option> <option value="4">日本省</option> </select>/*多行选择框*/ </p> <p> <textarea name="gerenjianjie" id="" cols="30" rows="10" placeholder="个人简介"></textarea>/*多行文本框*/ </p> <p><input type="submit" value="submit"></p>/*提交*/ </form> /*各标签的name为传入后台的key，选择或输入的内容为key对应的value {"username":"yuan","pwd":"123"，"gender":"0"，"hobby":[]，"province":"","gerenjianjie":""}*/