一、Web前端介绍
网页是基于浏览器的应用程序，是数据展示的载体
浏览器
-主流浏览器（根据浏览器的引擎和内核划分）：划分为5大浏览器：chrome（谷歌）、IE/Edge(微软) Firefox（火狐） Opera （欧朋） Safari（苹果）
服务器
协议
超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容
标签也称为标记或元素，用于在网页中标记内容
语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示
分类：双标签(主动闭和标签)：成对出现，包含开始标签和结束标签。例：<html></html>
单标签（自闭和标签）：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：<br>或<br/>
标签属性：
标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。
例：<meta charset="utf-8">
同一个标签中可以添加若干组标签属性，使用空格间隔。例：<img src="lily.jpg" width="200px" height="200px">
创建网页文件，使用.html或.htm作为文件后缀
添加网页的基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
标签嵌套
在双标签中书写其他标签，称为标签嵌套
嵌套结构中，外层元素称为父元素，内层元素称为子元素；
多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
平级结构互为兄弟元素
HTML语法规范
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="Refresh" content="1"> <title>first</title><!-- 小图标 、路径或者图片以.ico结尾的矢量图，类型图片 --> <link rel="shortcut icon" href="web.ico" type="image/x-icon"></head><body><!--h标签--> <h1>H标签my first web 中国</h1><!--段落标签，字体默认大小16px--> <p>段落标签</p><!--普通文本标签，行内标签--><span>普通文本标签</span><lebal>普通文本标签</lebal><!--带有格式的标签 --><b>加粗标签</b><strong>加粗标签strong</strong><!--换行标签--><br/><!--水平线标签--><hr><!--斜体 了解--><i>斜体italic</i><s>删除线</s><u>下划线标签underline</u><span> x <sub>1</sub> y <sup>2</sup></span></body></html>文本标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>段落标签：
<p>段落文本</p>普通文本标签：
<span>行分区标签，用于对特殊文本特殊处理</span><b>加粗标签</b><strong>强调标签，效果同b标签</strong><label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label><i>斜体标签</i><u>删除线标签</u>格式标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。
<br>水平线标签，在页面中插入一条水平分割线
<hr>字符实体：
某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写
例：
使用 < 在页面中呈现 "<" 使用 > 在页面中呈现 ">" 使用 在页面中呈现一个空格 使用 © 在页面中呈现版权符号"©" 使用 ¥ 在页面中呈现人民币符号"￥"容器标签
常用于页面结构划分，结合CSS实现网页布局
<div id="top">页面顶部区域</div><div id="main">页面主体区域</div><div id="bottom">页面底部区域</div>图片与超链接标签
语法：
<img src="" width="" height="" title="" alt="">1 属性：src=文件路径、width=更改宽度，height=更改高度，title设置图片标题，鼠标停在图片上时显示，alt设置图片加载失败时显示提示文本；========================================================================代码如下：<img src="mm.jpg" width="300px" height="200px" title="mm" alt="美女图片加载失败了">超链接标签：用户可以点击超链接实现跳转至其他页面
<a href="http://www.taobao.com" target="_self">淘宝</a><a href="rongrong.jpg" target="_blank">rongrong</a><a href="">href=""</a>点击页面刷新<a href="#">href="#"</a>点击url后加#<a href="javascript:void(0)">javascript:viod(0)</a>点击不刷新不加#图片超链接代码如下：<a href="https://www.baidu.com"> <img src="rongrong.jpg" alt=""></a>属性：href="链接地址"，target="_blank"开辟一个新的窗口，不写则默认在当前窗口上更换。
状态：超链接文本页面上文本下方自带下划线，字体蓝色表示未被访问，访问过后字体颜色为紫色，清除缓存可使字体恢复为蓝色，鼠标按住文本文件不抬起字体显示红色，表示激活状态。
超链接使用锚点使用
以#为锚点：
实现：在指定位置添加锚点
本地页面<a name="top"></a>打个锚点记号<a href="#top">回到顶部</a> 锚点跳转到另外一个页面的锚点<a name="bottom"></a>要跳转的指定页面位置做标记<a href="day01容器标签pm.html#bottom">底部</a>在当前页面添加链接以#加锚点的位置。<ol> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li></ol><ul> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li></ul>代码：
<!--列表标签有序列表--> <ol> <li>风清扬</li> <li>独孤九剑</li> <li>独孤求败，只求一败</li> </ol><!--无序列表--> <ul> <li>风清扬</li> <li>独孤九剑</li> <li>独孤求败，只求一败</li> </ul> 注意：有序列表开头以阿拉伯数字作为标识，可以更改显示属性，type更改显示表头，从哪个位置开始用start方法，方法如<ol type="A" start="2">，有1，a，A，i，I等 无序的可以使用none，circle空心圆，square（实心方块）列表嵌套
在已有列表中嵌套添加另一个列表，常见于下拉菜单，使用父子关系
<ol> <li> 西游记 <ul> <li>孙悟空</li> <li>孙悟空</li> <li>孙悟空</li> </ul> </li> </ol>表格标签
<!-- 创建表格标签 -->此种表格没有线框<table border="5px" cellspacing="0px" cellpadding="20px" width="500px" height="500px" bgcolor="red"> <!-- 创建行标签 --> <tr bgcolor="yellow" align="left" valign="bottom"> <!-- 行中创建单元格以显示数据 --> <th>姓名</th> th标签有加粗居中效果 <td>年龄</td> <td>班级</td> </tr> <tr> <td>迪丽热巴</td> <td>20</td> <td>002</td> </tr></table> - 其中table属性中border：表示边框，单元格也会自动添加1px边框，cellspacing表示内边框与外边框的距离，cellpadding表示内部字体与边框的距离。width:表示宽度，height：表示高度。bgcolor="red"表示边框的背景颜色；margin：表示边框与边框的调整，padding：表示内容与边框的距离. - tr标签属性:bgcolor="yellow"设置行背景颜色；align="left"设置行中内容水平对齐方式，默认居左，可取left/center/right; valign="bottom"设置内容的垂直对齐方式，默认居中，可取top/middle/bottom重点理解**- 单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整**
| 单元格属性 | 作用 | 取值 |
| ---------- | -------------- | ---------- |
| colspan | 跨列合并单元格（横向合并） | 无单位数值 |
| rowspan | 跨行合并单元格（纵向合并） | 无单位数值 |
<th colspan="3" align="center"valign="center">info</th>合并修改在th标签和td标签中使用----------注意：一旦发生单元格合并，需要删除多余的单元格，保证表格结构的统一 垮列合并：删除当前行中多余的单元格 跨行合并：删除其后行中多余的单元格----------- 行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中
<table border="1px" width="300px" height="300px"> <thead></thead> <tfoot></tfoot> <tbody></tbody></table>使用：1、结构化的分组标签根据需要添加，不是必填项2、默认所有行都会自动添加tbody中3、推荐书写顺序 thead、tfoot、tbody，不影响表格的结构，优化加载速度表单标签重点
表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。
| 属性名 | 取值
| action | 设置数据的提交地址 |
| method | 设置数据的提交方式，默认为get方式，可以设置为post |
| enctype | 设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"application/x-www-form-urlencoded" |如果使用get方式则提交的是文件名。
例如：
<form action="提交数据地址" method="方法get或post" enctype="编码类型，默认"> <!--此处为表单控件--></form>表单控件使用（重点）
表单控件用于采集用户信息，可设置以下标签属性： |属性名|取值|
| type | 设置控件类型 |
| name | 设置控件名称，最终与值一并发送给服务器 |
| value | 设置控件的值 |
| placeholder | 设置输入框中的提示文本 |
| maxlength | 设置输入框中可输入的最大字符数 |
| checked | 设置单选按钮或复选按钮的默认选中 |
| selected | 设置下拉菜单的默认选中 |
设置账号和密码<p> 用户名:<input type="text" name="username" maxlength="10" placeholder="由字母和数字组成"> </p><p> 密码:<input type="password" name="passwd"></p>属性中： name控件的名称必填项，和输入值一起发送服务器 maxlength：允许输入的最大字符数值 placeholder="由字母和数字组成"：文本进行用户提示。 用户性别选择：单选按钮属性使用radio <input type="radio" name="gender" value="man">男 <input type="radio" name="gender" value="women" checked>女 说明：1、按钮的控件名称必须保持一致 2、value属性必填，设置控件的值，最终发送给服务器 3、checked属性设置默认选中多选框：属性使用checkbox<input type="checkbox" name="hobby" value="music">lebal<input type="checkbox" name="hobby" value="study">学习<input type="checkbox" name="hobby" value="play">玩说明：value必填属性值和文本控件绑定在一起
<input type="checkbox" name="hobby" value="music" id="music"><label for="music">音乐</label>步骤：1、给“音乐”添加label标签，在标签内属性用for="music"2、input标签内添加Id属性id="music"隐藏域和文件选择
用户头像： <input type="hidden" name="uid" value="001"> <input type="file" name="uimg" >下拉菜单（了解）
<p> 选择城市： <select name="city" > <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="tianjin">天津</option> <option value="nanjing">南京</option> <option value="hangzhou" selected>杭州</option> </select></p>说明：select属性name必填写，option属性值value值必须填写，默认选择 在option属性中输入selected多行文本域（了解 ）
<p> 个人介绍： <textarea name="userinfo" id="" cols="30" rows="10"></textarea></p>多功能按钮：重点
1、提交按钮submit，重置按钮reset，普通按钮button需要结合js自定义处理<p><!-- value用来设置按钮的显示文本 --> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="自定义"></p>注意：数据提交需要经过form表单标签button
<button>提交</button>用法：1、使用在form内相当于submit2、使用在form外的标签相当于botton**<button onclick="alert(‘按钮被单击‘)">提交</button>**相当于窗口提示框:alter为提示框信息**###其他属性方式****1、对齐居中align=center; 向右对齐align=right；文本居中对齐<h1 align="center">H标签my first web 中国</h1>文本向右对齐<h1 align="right">H标签my first web 中国</h1>原文：https://www.cnblogs.com/gyl10/p/11125855.html