目录
3.Emmet HTML代码简写及快速格式化(shift+alt+f或右击)
一、网页基本知识
1.常用浏览器及其内核
2.Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
Web标准的构成：结构(网页元素 HTML)、表现(外观样式 CSS)、行为(交互 JavaScript)
Web标准提出的最佳体验方案：结构、表现、行为相分离。
3.Emmet HTML代码简写及快速格式化(shift+alt+f或右击)
二、简单标签
1.标签关系
包含关系和并列关系
2.骨架标签
3.DOCTYPE和lang以及字符集的作用
（1）<!DOCTYPE>
（2）<head lang=en>
（3）字符集
（4）
<!-- 解决IE的兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动开发时不可缺少 宽度=屏幕宽度-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">（5）影响SEO的3个标签
<title>网页标题标签</title>
<meta name="keywords" content="网页关键词标签"> 注：多个关键词之间用英文逗号隔开
<meta name="description" content="网页描述标签">
（6）ico图标设置
<link rel="shortcut icon" href="ico图片路径" type="image/x-icon">
在线转换网址：可以是16的，也可以是48的
制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net
查看其他网站的ico图片，在网址后加上 favicon.ico 即可，如
注：icon图标因兼容性，要放到根目录下。
4.标题标签(h1~h6)
h1在电商网站上常用于存放logo图
标题一共六级选，文字加粗一行显，由大到小依次减，从轻到重（重要性）随之变
5.<p></p>段落标签
会根据浏览器窗口的大小自动换行
6.<br>换行 <hr>水平线
7.<address></address> 地址标签
一般用<p>+<em>标签实现<address>的效果
8.文本格式化标签(加粗、斜体、删除线、下划线)
<i></i>常用来装小图标
9.<div>和<span>标签
相同点：<div>和<span>都无语义，都用于布局(容器-结构化，捆绑操作)；
不同点：<div>独占一行；在一行上可以有多个<span>
10.<img> 图像标签及路径
（1）<img>
<img src="图片路径" alt="图片出错时出现的文字" title="光标在图片上时出现的文字">alt="" 图片占位符：图片地址出错时展示的文字信息
title="" 图片提示符：鼠标放在图片上现实的的内容
（2）三种路径（网址、相对、绝对）
src="" （src=source资源）
1）网上图片的服务器地址：引用别的网站的图片（在新标签页中打开链接）
2）本地的绝对路径:要把地址写全 src="D:/a/b/c/123.jpg"(缺点:若移动位置，会出错)
3）本地的相对路径（html文件和图片在同一个文件夹下）:src="123.jpg" （html文件和图片各自存放在总文件夹下的images和pages中）:src="../images/123.jpg"(两个点表示上一级文件夹)
11.<a> 链接标签
（1）链接分类
1）外部链接：<a href="https://www.baidu.com/">百度</a>
2）内部链接：网站内部页面之间的相互链接。例，<a href="index.html">首页</a>
3）空链接：<a href="#">点击跳转</a> 有没有# ，点击会回到页面顶部
4）死链接：<a href="javascript:;">死链接</a> 点击不会回到页面顶部
5）网页元素链接：文本、图像、表格、音频、视频等都可以添加超链接。
<a href="tel:15613124556">打电话</a>
<a href="mailto:1011714740@qq.com">发邮件</a>
（2）作用
1）网页链接跳转并跳转到新页面(target)
<a href="https://www.baidu.com/" target="_blank">百度</a>
//target目标；blank空页 点击链接，打开新标签页;默认的是target="_self",在此页面上打开2）锚点链接：点击链接可以快速定位到页面中的某个位置（点击回到顶部）
1)) 在链接文本的href属性中，设置属性值为 #名字 的形式。如，<a href="#live">个人生活</a>
2)) 找到目标标签，里面添加一个 id属性=刚才的名字 。如，<h3 id="live">个人生活</h3>
3）下载链接：如果href里面地址是一个文件或压缩包，会下载这个文件。
<a href="abc.zip">下载文件</a>4）点击打电话
<a href="tel:15613124556">打电话</a>5）点击发邮件
<a href="mailto:1011714740@qq.com">发邮件</a>6）协议限定符（书签，加javascript实现）
12.<iframe> 内联框架
<iframe>标签会创建包含另外一个文档的内联框架，有效地将另一个 HTML页面嵌入到当前页中。
如果浏览器不支持 iframe则不会显示。
<iframe src="https://www.w3cschool.cn" width="100%" height="100%" >
</iframe>13.<video> 视频标签
width 控制视频宽度，可选；
controls 提供播放控件，不可缺少；
loop 设置为循环播放，可选；
autoplay 设置为自动播放，可选；
muted 设置为静音，可选；
两种书写方式
1.
<video width="800" height="" controls loop autoplay muted>
<source src="视频路径" type="video/mp4" ></source>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="视频路径">下载视频</a>
</video>
2.
<video width="500" height="" src="20210811_154149.mp4" controls loop autoplay muted>
</video>14. <audio> 音频标签
<audio src="../../../../AU/歌曲/仙剑奇侠传-仙凡之恋.mp3" controls loop autoplay muted ></audio>15.特殊字符（空格、"<"、">"）
空格是文字分隔符，输多少个空格都会显示一个空格，但全角的空格可以完全输出出来
< less than "<"
> great than ">"
重 量 （中间是全角的空格）
三、进阶标签
1.表格(table>tr>td或th)
作用：清晰展示数据
（1）每层标签的含义
<table></table> 用于定义表格的标签；
<caption></caption> 写在table内部，表示表格整体的大标题（居中）；
<tr></tr> 表格中的行(table rows)；
<td></td> 表示单元格，相当于列(table data)；
<th></th> 表头单元格，有加粗、居中的效果
（2）<table>属性
<table align="center" border="1" cellpadding="20" cellspacing="0" width="400" height="100">
<!--cellpadding单元格边框与内容的间距；cellspacing单元格之间的间距；width表格的总宽度；height每个单元格的高度-->
<thead>
<tbody><tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
</thead>
<tbody>
<tr><td>宋</td> <td>男</td> <td>20</td></tr>
<tr><td>李</td> <td>女</td> <td>18</td></tr>
<tr><td>刘</td> <td>男</td> <td>25</td></tr>
</tbody>
</table> <!--加入图片和链接的表格（排行榜）-->
<table border="1" cellspacing="0" cellpadding="20">
<tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr>
<tr> <td>1</td> <td>西游记</td> <td><img src="https://icweiliimg1.pstatp.com/weili/bl/264746276738039836.jpg" width="50px"/></td> <td>153</td> <td>5162</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr>
<tr> <td>2</td> <td>三国演义</td> <td><img src="https://p2.ssl.qhimgs1.com/sdr/400__/t017749fea3f6c8f3d2.jpg" alt="向下箭头" width="50px"/></td> <td>526</td> <td>2152</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr>
<tr> <td>3</td> <td>红楼梦</td> <td><img src="https://icweiliimg1.pstatp.com/weili/bl/264746276738039836.jpg" width="50px"/></td> <td>291</td> <td>8216</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr>
<tr> <td>4</td> <td>水浒传</td> <td><img src="https://icweiliimg1.pstatp.com/weili/bl/264746276738039836.jpg" width="50px"/></td> <td>556</td> <td>9315</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr>
<tr> <td>5</td> <td>鬼吹灯</td> <td><img src="https://p2.ssl.qhimgs1.com/sdr/400__/t017749fea3f6c8f3d2.jpg" alt="向下箭头" width="50px"/></td> <td>666</td> <td>4562</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr>
<tr> <td>6</td> <td>盗墓笔记</td> <td><img src="https://icweiliimg1.pstatp.com/weili/bl/264746276738039836.jpg" width="50px"/></td> <td>1528</td> <td>4562</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr>
<tr> <td>7</td> <td>双世宠妃</td> <td><img src="https://p2.ssl.qhimgs1.com/sdr/400__/t017749fea3f6c8f3d2.jpg" alt="向下箭头" width="50px"/></td> <td>999</td> <td>6712</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr>
</table>（3）表格结构标签(<thead> <tbody>)
作用：更好的表示表格的语义，更好的分清表格结构。如上方代码段。
| 标签名 | 含义 |
|---|---|
| <thead> </thead> | 表格的头部区域，表格的头部 |
| <tbody> </tbody> | 表格的主体区域，表格的主体 |
| <tfoot> </tfoot> | 表格的底部区域，表格的底部 |
（4）合并单元格（rowspan/colspan）
1）跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
2)跨行：最上侧单元格为目标单元格，写合并代码；
跨列：最左侧单元格为目标单元格，写合并代码；
3）合并单元格三部曲
先确定是跨行还是跨列合并；
找到单元格，写上“合并方式=合并的单元格数量”。例，<td colspan="2"></td> ；
删除多余的单元格；
合并单元格
<table border="1" cellspacing="0" cellpadding="20">
<tr><td></td><td colspan="2"></td></tr>
<tr><td rowspan="2"></td><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>2.三种列表
（1）无序列表(ul>li）（导航栏）
<ul type="circle">
<!-- type="disc"(discircle实心圆)或"square"(方块)或"circle"(空心圆圈) -->
<!-- li {list-style-type: none;} 去除黑点 -->
<li>18</li>
<li>数</li>
<li>媒</li>
</ul>| list-style 是一个复合属性 | 表示含义 |
|---|---|
| list-style-type | 设置列表项标记的类型，none表示前面没有标记 |
| list-style-position | 设置在何处放置列表项标记。值为outside、inside,默认为outside |
| list-style-image | 使用图像来替换列表项的标记 |
（2）有序列表(ol>li)
<ol type="i" reversed="reversed">
<!-- type="1"或"a"或"A"或"i"或"I" 控制按什么排序 -->
<!-- reversed="reversed" 倒序-->
<!-- start="3" 从第几个开始排，只填数字-->
<li>石</li>
<li>家</li>
<li>庄</li>
</ol>（3）自定义列表(dl>dt/dd)
<dl> 定义列表(具有描述性列表)；
<dt> 列表项；
<dd>描述，比列表项自动向右缩进。
注：<dt>和<dd>为并列关系
<dl>
<dt>关于小米</dt>
<dd>了解小米</dd>
<dd>加入小米</dd>
<dd>投资者关系</dd>
</dl>
3.表单
表单作用：用于采集用户信息。
表单的组成：表单域、表单元素、提示信息(表单元素前面的文字。如，姓名、性别)。
（1）表单域<form>
表单域是一个包含表单元素的区域。
<form action="收集的数据交由哪个页面处理" method="提交方式" name="表单域名称">
各种表单元素
</form>
（2）表单元素（input输入表单元素、select下拉表单元素、textarea文本域元素）
1）<input type="text/password/radio/checkbox/submit/reset">
| 标签名 | type属性值 | 说明 | 其它属性 | |
|---|---|---|---|---|
| input | 输入框 | text | 文本框，用于输入单行文本 | readonly 只读 placeholder 占位符(提示语默认显示，当文本框中输入内容时提示语消失) |
| password | 密码框，用于输入密码 | |||
| 选择框 | radio | 单选框，用于多选一 | checked 默认选项 <label> 用于增大点击范围 | |
| checkbox | 多选框，用于多选多 | |||
| file | 文件浏览选择 | multiple 多文件上传 | ||
| 按钮 | submit | 提交按钮，把表单数据发到服务器 | disabled 按钮禁用 提交、重置起作用的前提是有表单域<form action=""></form> | |
| reset | 重置按钮 | |||
| button | 普通按钮，用js封装功能 | |||
| <button></button> | 双标签的普通按钮，和submit一样可以有提交功能 | |||
| hidden | 隐藏的输入字段 （代码虽然隐藏，但还是起作用的） | |||
| image | 图像形式的提交按钮 | |||
| url | 网址 （提示网址格式正确与否） | |||
| 邮箱 （自动验证Email地址格式是否正确） | ||||
| number | 数字递增（购物车数量） | |||
| range | 进度条 | |||
| search | 搜索框 | |||
一些外加type属性值
1.网址（type="url"可提示网址格式正确与否）
<input type="url" value="请输入网址"/>
2.邮箱（自动验证Email地址格式是否正确）
<input type="email" value="请输入网址"/>
3.图片
<input type="image" src="https://inews.gtimg.com/newsapp_bt/0/13166895965/1000" height="150px"/>
4.数字递增（购物车加数量）
<input type="number" name="num" id="num" value="" min="0" max="100" step="1"/>
最小值 最大值 每点一次增加几
5.进度条
<input type="range" name="" id="" value="" min="0" max="100" step="2"/>
6.搜索框
<input type="search" name="" id="" value="搜索" />注意事项：
1.name数据名，可随便起(用于区别不同的表单)，与数据值对应，方便修改，没有数据名则会提交不成功（提交成功会显示网址，‘？’之后数据名与数据值相对应 file:///C:/a/b/Desktop/bd.html？username=shy&password=123123）；
value数据框中显示的内容；
maxlength规定输入字段中的字符的最大长度(正整数)，但多用正则表达式来限制字符长度；
用户名：<input type="text" name="username" value="请输入..." maxlength="5">
2.搜索框:onfocus聚焦在对象上；onblur对象失去焦点时
<input type="text" name="搜索框" value="请输入..." style="color: #999;"
onfocus="if(this.value=='请输入...'){this.value='';this.style.color='#424242'}"
onblur="if(this.value==''){this.value='请输入...';this.style.color='#999'}">
3.单选和复选的每个题的选项要有相同的name值(重点)
(1)name用于区分选项是哪个题，这样才能单选;
(2)要有数据名name和数据值value才能提交成功(value是给后台看的);
(3)默认选项checked="checked"，可用于单选radio和多选checkbox
//单选
<input type="radio" name="第一题" value="A">单选1
<input type="radio" name="第一题" value="B">单选2
<input type="radio" name="第一题" value="C">单选3
//复选(复选框中value值要从“1”开始)
<input type="checkbox" name="第三题" value="1">多选1
<input type="checkbox" name="第三题" value="2">多选2
<input type="checkbox" name="第三题" value="3" checked="checked">多选3
4.按钮上的字可通过value值来改变
<input type="submit" value="提交一下">
<input type="reset" value="重置吧">
5.<label>标签常与input一起使用；
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，
浏览器就会自动将焦点(光标)转到或选择对应的表单元素上，用来增加用户体验。
(举例，当选择性别时，点击“女”字就可以将此表单元素选中，增加了点击面积)
重点：<label>标签的for属性值应当与相关元素的id属性值相同（适合结构复杂的情况）。
<label for="XM">用户名：</label><input type="text" value="请输入您的名字..." name="username" id="XM"/> <!--点击“用户名”，光标就会到输入框中-->
性别：<input type="radio" name="sex" id="nv" value="女" /><label for="nv">女</label>
<input type="radio" name="sex" id="nan" value="男" /><label for="nan">男</label>2）select>option 下拉表单元素(节约页面空间)
实际项目中下拉列表通过 ul、a 来模拟
下拉列表框（默认选项 selected="selected" 若无此属性，则默认第一项）
省份：<select name="省份">
<option value="北京">北京</option>
<option value="河北">河北</option>
<option value="浙江" selected="selected">浙江</option>
</select>3）textarea 文本域（在用户输入内容较多的情况下使用）
rows="显示的行数" cols="每行中的字符数" 实际中通过CSS设置宽高
readonly="readonly" 只读
placeholder="说你想说..." 提示文字
<textarea rows="5" cols="20" readonly="readonly" placeholder="说你想说..."></textarea>（3）表单初级验证
表单验证的作用：减轻服务器的压力；保证数据的可行性和安全性。
1）placeholder 提示语默认显示，当文本框中输入内容时提示语消失
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>1.改变输入的文本颜色
input { color: green; }
2.改变提示文本的颜色
input::placeholder { color: #bfbfbf; }2）required 规定文本框填写内容不能为空，否则不允许用户提交表单
<input type="text" name="username" required/>3）pattern 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
以1开头，第二位是3/5/8,后面再有9位数字
昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"
密码：pattern="[\dA-Za-z]{6,16}"
手机号码：pattern="1[3578]\d{9}"
年龄：pattern="\d|[1-9]\d|1[0-2]\d"（4）综合案例—注册页面
利用表格<table>做注册页面
重点：表单元素(input/select/textarea)可嵌套在<table>中
<h3>青春不常在，抓紧谈恋爱</h3> <!--标题-->
<table width="500px" border="1">
<tr> <!--第一行-->
<td>性别</td>
<td><input type="radio" value="男" id="nan" name="sex" checked="checked"/><label for="nan"><img src="http://pic50.photophoto.cn/20190315/1190120526144267_b.jpg" width="25px"/>男</label>
<input type="radio" value="女" id="nv" name="sex"/><label for="nv"><img src="https://static.fotor.com.cn/assets/stickers/true_romance_cl_20170113_02/2a839399-1553-4eb9-8b2e-8969429a63e0_medium_thumb.jpg" width="15px"/>女</label>
</td>
</tr>
<tr> <!--第二行-->
<td>生日</td>
<td>
<select name="year">
<option value="0" selected="selected">--请选择年--</option>
<option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option>
<option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option>
<option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option>
<option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option>
<option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option>
</select>
<select name="month">
<option value="0" selected="selected">--请选择月--</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option>
<option value="4">4</option><option value="5">5</option><option value="6">6</option>
<option value="7">7</option><option value="8">8</option><option value="9">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option>
</select>
<select name="day">
<option value="0" selected="selected">--请选择日--</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option>
<option value="4">4</option><option value="5">5</option><option value="6">6</option>
<option value="7">7</option><option value="8">8</option><option value="9">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option><option value="15">15</option>
<option value="16">16</option><option value="17">17</option><option value="18">18</option>
<option value="19">19</option><option value="20">20</option><option value="21">21</option>
<option value="22">22</option><option value="23">23</option><option value="24">24</option>
<option value="25">25</option><option value="26">26</option><option value="27">27</option>
<option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
</select>
</td>
</tr>
<tr> <!--第三行-->
<td>所在地区</td>
<td>
<select name="address">
<option value="">北京</option><option value="">河北</option><option value="">江苏</option>
<option value="">南昌</option><option value="">浙江</option><option value="">重庆</option>
</select>
</td>
</tr>
<tr> <!--第四行-->
<td>婚姻状况</td>
<td>
<input type="radio" value="未婚" id="unmarried" name="marriage" checked="checked"/><label for="unmarried">未婚</label>
<input type="radio" value="已婚" id="married" name="marriage"/><label for="married">已婚</label>
<input type="radio" value="离婚" id="divorce" name="marriage"/><label for="divorce">离婚</label>
</td>
</tr>
<tr> <!--第五行-->
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="ideal" value="妩媚的" id="01"/><label for="01">妩媚的</label>
<input type="checkbox" name="ideal" value="可爱的" id="02"/><label for="02">可爱的</label>
<input type="checkbox" name="ideal" value="漂亮的" id="03"/><label for="03">漂亮的</label>
<input type="checkbox" name="ideal" value="高挑的" id="04"/><label for="04">高挑的</label>
<input type="checkbox" name="ideal" value="微胖的" id="05"/><label for="05">微胖的</label>
</td>
</tr>
<tr> <!--第六行-->
<td>自我介绍</td>
<td>
<textarea name="myself">自我介绍</textarea>
</td>
</tr>
<tr> <!--第七行-->
<td></td>
<td>
<input type="button" name="免费注册" id="register" value="免费注册" />
</td>
</tr>
<tr> <!--第八行-->
<td></td>
<td><input type="checkbox" name="注册条款" value="yes" checked="checked"/>我同意注册条款和会员加入标准</td>
</tr>
<tr> <!--第九行-->
<td></td>
<td><a href="#">我是会员，立即登入</a></td>
</tr>
<tr> <!--第十行-->
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18、单身</li>
<li>抱着严肃、认真的态度</li>
<li>真诚的寻找另一半</li>
</ul>
</td>
</tr>
</table>
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
