24 May 18
一、head内meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<!--告诉浏览器用什么解码，防止乱码-->
<meta charset="utf-8">
<!--在搜索页面显示-->
<meta name="Description" content="具体描述。。。">
<!--浏览器的搜索关键字-->
<meta name="Keywords" content="python,linux,go,IT培训">
<!--刷新后跳转-->
<meta http-equiv="refresh" content="3;https://www.baidu.com">
</head>
<body>
<p>我是段落</p>
</body>
</html>
二、Head内非meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--网页标签-->
<title>百度一下，你就知道</title>
<!--网页标签上的图片-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
<!--CSS调字体颜色-->
<style>
p {
color: rebeccapurple;
}
</style>
<!--也可导入CSS文件调字体颜色-->
<link rel="stylesheet" href="my.css">
<!--可导入JS对页面动画效果进行配置-->
<script src="hello.js"></script>
</head>
<body>
<p>我是段落</p>
</body>
</html>
三、HTML5中废弃的标签（HTML语义化）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
<br>
<hr>
<font color="aqua" size="5px">我是帅气逼人的Egon老师</font>
<b>我是帅气逼人的Egon老师</b>
<u>我是帅气逼人的Egon老师</u>
<i>我是帅气逼人的Egon老师</i>
<s>我是帅气逼人的Egon老师</s>
-->
<!--增强；定义重要性强调的文字-->
<b>我是帅气逼人的Egon老师</b>
<strong>我是帅气逼人的Egon老师</strong>
<hr>
<!--下划线；定义插入的文字-->
<ins>我是帅气逼人的Egon老师</ins>
<u>我是帅气逼人的Egon老师</u>
<hr>
<!--斜体；定义强调的文字-->
<em>是帅气逼人的Egon老师</em>
<i>我是帅气逼人的Egon老师</i>
<hr>
<!--删除线-；定义被删除的文字->
<del>我是帅气逼人的Egon老师</del>
<s>我是帅气逼人的Egon老师</s>
</body>
</html>
四、字符实体
#1、在HTML中对空格／回车／tab不敏感，会把多个空格／回车／tab当作一个空格来处理：空白折叠现象
#2、有的HTML字符，在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西想显示出来就必须通过字符实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>我是帅气 逼人的EGON</p>
<!-->-->
<p>1>3</p>
<!--<-->
<p>1<3</p>
<!--©-->
<p>©版权所有</p>
<img src="" alt="asdf" title="鼠标悬停">
</body>
</html>
http://tool.chinaz.com/Tools/HtmlChar.aspx
五、h系列标签
#1、h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题
#2、在企业开发中一定要慎用h系列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（出于SEO考虑）,比如www.163.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是1级标题</h1>
<h2>我是2级标题</h2>
<h3>我是3级标题</h3>
<h4>我是4级标题</h4>
<h5>我是5级标题</h5>
<h6>我是6级标题</h6>
</body>
</html>
六、p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>EGON</h1>
<p>论颜值，秒杀一切</p>
<p>论才华，天下无敌</p>
</body>
</html>
七、img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--导入本地文件推荐用相对路径；如果用绝对路径，按shift执行，但不推荐使用-->
<!--不建议在html中对外观（height，weight等）进行设置；如果设置height，width设置一项，防止图片变形-->
<!--图片的格式可以是png、jpg和gif-->
<img src="images/1.jpg" alt="图片加载失败时显示的信息" title="这绝对正常的图片" height="100px">
</body>
</html>
八、a标签基本使用
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置-->
<!--如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置-->
<base target="_blank">
</head>
<body>
<!--超链接到百度-->
<a href="https://www.baidu.com" title="搜索" target="_blank">百度一下，你就知道</a>
<!--a标签不仅可以标记文字，也可以标记图片-->
<a href="https://www.baidu.com" target="_self"><img src="images/1.jpg" alt=""></a>
<!--本地跳转-->
<a href="index.html">锤我胸口</a>
</body>
</html>
九、a标签之假连接
#1、什么是假链接？
就是点击之后不会跳转的链接，我们称之为假链接
#2、假链接存在的意义：
在企业开发前期，其他界面都还没有写出来，
那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替
#3、假链接的定义格式
1、href="#" :会自动回到网页的顶部
2、href="javascript:" ：不会返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#">新闻页</a>
<a href="javascript:">学术</a>
</body>
</html>
十、页面中的锚点
#1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，
这样a标签才能在当前界面中找到需要跳转到的目标位置
#2、如何为html中的标签绑定一个独一无二的身份证号码呢？
在html中，每一个标签都有一个名称叫做id的属性
这个属性就是用来给标签指定一个独一无二的身份证号码的
#3、所以要想实现通过a标签跳转到指定的位置，分为两步
3.1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
#4、a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#egon">美丽的EGON到底在哪里</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p id="egon">我是英俊潇洒的EGON老师</p>
</body>
</html>
十一、a标签之跳回首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--<base target="_blank">-->
</head>
<body>
<p>首页</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<!--通过我们的a标签跳转到指定的位置，是没有过度动画的-->
<!--回到顶部-->
<a href="#" target="_self">跳回首页</a>
<!--刷新页面，回到顶部，人类感觉不出来区别-->
<a href="" target="_self">跳回首页</a>
</body>
</html>
十二、列表标签
标记一堆数据是一个整体/列表
1、无序列表（列表标签中使用最多的一种，非常重要）：unordered list
2、有序列表（极少使用）
3、自定义列表（也会经常使用）
选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子
无序列表：内容是并列的,没有先后顺序
有序列表：内容是有先后顺序的
自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框
十三、列表标签之无序列表（组合使用ul>li）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
ul通常应该只嵌套li标签
而li标签却可以嵌套任意其他标签
-->
<!--将默认黑点取消-->
<!--<ul style="list-style: none">-->
<!--将默认黑点变成空心圆-->
<ul type="circle">
<li>秒杀</li>
<li>优惠券</li>
<li>PLUS会员</li>
<li>山沟</li>
<li>二手东</li>
</ul>
</body>
</html>
十四、列表标签之有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>智商排名</h1>
<ol type="1">
<li>Egon</li>
<li>刘清正</li>
<li>武佩奇</li>
<li>alex</li>
<li>元昊</li>
</ol>
<!--有序列表能干的事，完全可以用无序列表取代-->
<ul style="list-style:none;">
<li>1. Egon</li>
<li>2. 刘清正</li>
<li>3. 武佩奇</li>
<li>4. alex</li>
<li>5. 元昊</li>
</ul>
</body>
</html>
十五、列表标签之自定义列表（dl>dt+dd）
dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签
一个dt可以没有对应的dd，也可以有多个，但建议一个dt对应一个dd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>
<h1>标题1</h1>
</dt>
<dd>
<a href="#">内容1</a>
</dd>
<dd>内容1</dd>
<dd>内容1</dd>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dd>内容2</dd>
<dd>内容2</dd>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
<dd>内容3</dd>
<dd>内容3</dd>
<dd>内容3</dd>
</dl>
</body>
</html>
十六、form标签（标记表单）
https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911
#1、什么是表单？
表单就是专门用来接收用户输入或采集用户信息的
#2、表单的格式
<form>
<表单元素>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--输入之后跳转的连接；一般登录用post，但为演示方便这里用get-->
<form action='' method="get">
<p>
用户名:
<!--预先输入默认值，可更改-->
<!--<input type="text" name="username" value="EGON">-->
<!--灰色显示预先占位符，输入后消失-->
<!--<input type="text" name="username" placeholder="请输入用户名">-->
<!--显示，但不允许更改-->
<input type="text" name="username" value="egon" disabled="disabled">
</p>
<p>
密码:
<!--password：密码不明文显示-->
<input type="password" name="password" placeholder="密码长度不能超过16位">
</p>
<p>
<input type="submit" value="登录">
<!--默认value为登录-->
<!--<input type="submit">-->
</p>
</form>
</body>
</html>
十七、form标签之单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
<p>
性别:
<input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女
</p>
<p>
<input type="submit" value="注册">
</p>
</form>
</body>
</html>
十八、form标签之多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
<p>
用户名：
<input type="text" name="username">
密码：
<input type="password" name="password">
</p>
<p>
爱好:
<input type="checkbox" name="hobbies" value="basketball">篮球
<input type="checkbox" name="hobbies" value="football" checked>足球
<input type="checkbox" name="hobbies" value="pingpang" "checked"=checked>乒乓球
</p>
<p>
<input type="file" name="uploadfile">
</p>
<p>
<input type="submit" value="注册">
<!--需绑定onclick事件才能使用-->
<!--<input type="button" value="注册" onclick="alert(123)">-->
<!--图片也可做跳转入口，需绑定onclick事件才能使用-->
<!--<input type="image" src="images/1.jpg" onclick="alert(111111)">-->
<!--回复到初始状态-->
<!--<input type="reset" value="重置" >-->
</p>
十九、form标签之label标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
<p>
用户名：
<input type="text" name="username">
密码：
<input type="password" name="password">
</p>
<p>
性别：
<!--鼠标在文字上就可以选择，用户体验更好-->
<input type="radio" name="gender" value="male" id="ml"><label for="ml">男</label>
<input type="radio" name="gender" value="female" id="fl"><label for="fl">女</label>
</p>
<p>
爱好:
<input type="checkbox" name="hobbies" value="basketball" id="bb"><label for="bb">篮球</label>
<input type="checkbox" name="hobbies" value="football" checked id="fb"><label for="fb">足球</label>
<input type="checkbox" name="hobbies" value="pingpang" checked id="pp"><label for="pp">乒乓球</label>
</p>
<p>
<input type="submit" value="注册">
</p>
</form>
</body>
</html>
二十、form标签之下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
<p>
用户名：
<input type="text" name="username">
密码：
<input type="password" name="password">
</p>
<p>
性别：
<input type="radio" name="gender" value="male" id="ml"><label for="ml">男</label>
<input type="radio" name="gender" value="female" id="fl"><label for="fl">女</label>
</p>
<p>
爱好:
<input type="checkbox" name="hobbies" value="basketball" id="bb"><label for="bb">篮球</label>
<input type="checkbox" name="hobbies" value="football" checked id="fb"><label for="fb">足球</label>
<input type="checkbox" name="hobbies" value="pingpang" checked id="pp"><label for="pp">乒乓球</label>
</p>
<p>
城市：
<!--一次显示两个，用于选项很多的情况-->
<!--multiple 按住control可多选-->
<select name="city" id="" size="2" multiple="multiple">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ" selected="selected">深圳</option>
<option value="GZ">广州</option>
</select>
<!--分组显示-->
城市：
<!--<select name="city" id="" style="width: 200px">-->
<!--<optgroup label="一线城市">-->
<!--<option value="BJ">北京</option>-->
<!--<option value="SH">上海</option>-->
<!--<option value="SZ" selected="selected">深圳</option>-->
<!--<option value="GZ">广州</option>-->
<!--</optgroup>-->
<!--<optgroup label="二线城市">-->
<!--<option value="BJ">济南</option>-->
<!--<option value="SH">苏州</option>-->
<!--<option value="SZ" selected="selected">南京</option>-->
<!--<option value="GZ">成都</option>-->
<!--</optgroup>-->
<!--</select>-->
</p>
<p>
<input type="button" value="注册" onclick="alert(123)">
<input type="reset" value="重置" >
</p>
</form>
</body>
</html>
二十一、form标签之文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
<p>
#如果不设置resize，文本域大小可调
<textarea name="comment" id="" cols="30" rows="3" style="resize: none">
亲，给好评哈
</textarea>
</p>
<p>
<input type="submit" value="注册">
</p>
</form>
</body>
</html>
二十二、form标签之fieldset标签（显示在框内）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
<fieldset>
<legend>注册页面</legend>
<p>
用户名：
<input type="text" name="username">
密码：
<input type="password" name="password">
</p>
<p>
性别：
<input type="radio" name="gender" value="male" id="ml"><label for="ml">男</label>
<input type="radio" name="gender" value="female" id="fl"><label for="fl">女</label>
</p>
<p>
爱好:
<input type="checkbox" name="hobbies" value="basketball" id="bb"><label for="bb">篮球</label>
<input type="checkbox" name="hobbies" value="football" checked id="fb"><label for="fb">足球</label>
<input type="checkbox" name="hobbies" value="pingpang" checked id="pp"><label for="pp">乒乓球</label>
</p>
<p>
城市：
<select name="city" id="" style="width: 200px">
<optgroup label="一线城市">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ" selected="selected">深圳</option>
<option value="GZ">广州</option>
</optgroup>
<optgroup label="二线城市">
<option value="BJ">济南</option>
<option value="SH">苏州</option>
<option value="SZ" selected="selected">南京</option>
<option value="GZ">成都</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="注册">
</p>
</fieldset>
</form>
</body>
</html>
