前端由三部分组成：
HTML（标签）——CSS（美化，修饰）——JS(执行指令)
HTML（超文本标记语言，Hypertext Markup Language）：是一种用于创建网页的标记语言。
本质上为根据浏览器可识别的规则，我们按照规则写网页，浏览器按照规则渲染网页。
网页扩展名：.html或者.htm
HTML文档结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>
1.<!DOCTYPE html>为HTML5文档。
2.<html>、</html>为文档开始和结束标记，它们之间是文档的头部（head）和主体（body）。
3.<head>、</head>定义html文档开头内容，他们之间的内容不会在浏览器窗口显示
4.<title>、</title>定义了网页标题，在浏览器标题栏显示。
5.<body>、</body>之间的文本为网页可见内容。
HTML标签格式
- html标签：一般形式如<html>, <div>等，通常成对出现，如<div>和</div>，第一个标签是开始，第二个标签是结束。
- 也有一部分标签单独呈现，比如：<br/>、<hr/>、<img src="1.jpg" />等。
几个很重要的属性：
- id:定义标签的唯一ID，html文档树中唯一。
- class:为html元素定义一个或多个类名（classname）
- style：规定元素的行内样式HTML常用标签
HTML常用标签:
head内常用标签
head内常用标签
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
body内常用标签
基本标签（块级标签和内联标签）
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--><br> <!--水平线--><hr>
特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。
span标签用来定义内联(行内)元素，并无实际的意义。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签（超链接标签）：实现跳转
所谓的超链接是指从一个网页指向一个目标的链接,这个目标可以是1.另一个网页
2.同一网页上不同位置，这个位置可以是一个图片、邮箱地址等
URL定义
URL(统一资源定位器,Uniform resource locator)：又为网页地址，是因特网上标准的资源地址
URL举例（上下为同一个搜索结果）
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL由4部分组成
第一部分：http://、ftp://等为协议
第2部分：www.sohu.com为域名
222.172.123.33为IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
<a href="https://www.cnblogs.com/aaronthon/p/8507310.html" target=" _blank">戳我</a>
href属性：指定目标网页地址，有3种类型
- 绝对URL：完整路径（https://www.cnblogs.com/aaronthon/p/8507310.html）
- 相对URL：部分路径（aaronthon/p/8507310.html）
- 锚URL：指向页面中的锚（href="#top"）
target：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
列表
1.无序列表（unorder list）
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
2.有序列表(order list)
<ol type="1">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
3.标题列表(definition list)(自定义列表)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
form（表单）标签
<form action=""> <input type="text" name="name1"> <input type="password" name="pwd"> <button type="submit">提交</button> </form>
包含三部分：
- form标签，action属性是URL（提交路径）
- input标签，type属性有text、password等
- button按钮，type属性必须是submit。
功能：
- 向服务器传输数据,实现用户与web服务器的交互
- 可包含input、textarea、select、fieldset和 label标签。
表单属性
| 属性 | 值 | 含义 |
|---|---|---|
| action | URL | 指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。 |
| method | get或post | 将表单数据提交到http服务器的方法，默认为get |
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息