<!DOCTYPE html><!--该html格式默认的类型是!DOCTYPE（公共统一认可的html规范类型）-->
<html lang="en"><!-- html标签的开始 （在html文件中只能有一个html标签）-->
<head> <!--head标签的开始 （一个hmtl标签内只允许一个head标签）-->
<!--head标签内部详解-->
<meta charset="UTF-8">
<!--meta：自闭合标签，charset：指定字符集 -->
<meta http-equiv="Refresh" content="3">
<!--http-equiv="Refresh":刷新 content="3":3秒 每3秒自动刷新一次页面-->
<!--<meta http-equiv="Refresh" content="3;Url=http://www.baidu.com">-->
<!--3秒后自动跳转到www.baidu.com,这种跳转基本不用没倒计时，后面用JS实现-->
<meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>
<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>
<!--name=keywords：关键字， name="description"：对网址进行描述
百度输入关键字如何找到你的网页？
百度就开始进行网页爬虫，
然后对你的网页的head标签内部的name=keywords以及name="description"里面的关键字进行核对是否是你输入的关键字，如果是就显示出来
现在的百度一些商业关键字需要收钱的-->
<meta http-equiv="X-UA-Compatible" content="IE=IE11;IE=IE10;IE=IE19;IE=IE8;IE=IE7">
<!--X-UA-Compatible：html如果要支持IE版本浏览器
就需要在html标签下的head标签下加上该 X-UA-Compatible功能-->
<title>Burgess</title>
<!-- tiltle标签的内容显示在浏览器的标签页上显示 -->
<link rel="shortcut icon" href="image/burgess.jpg">
<!--指定本文件image目录下的burgess.jap图片作为浏览器标签页的小图标-->
<!--总结
<head>xxx</head>：一个hmtl标签内只允许一个head标签
head标签内部的所有标签外部都是不可见的除了title标签
标签分类
-自闭合标签 如: <meta charset="UTF-8"> 直接<xxx> 开始也是结束（很少）
-主动闭合标签 如:<???>xx</???>
-pycharm写html代码的时候 如果写的是主动闭合的标签写一个自动补全
-->
<style>
/*
专门在head标签下用style标签写装饰功能，
*/
#i1{
background-color: #2459a2;
height: 48px;
}
/*
标准名称：id选择器
body标签下的标签通过匹配id进行装饰该功能(装饰功能可被重复调用但是不规范 ）
*/
#i2{
background-color: #a33c44;
height: 48px;
}
#i3{
background-color: #5aa234;
height: 48px;
}
.c1{
background-color: #2459a2;
height: 48px;
}
/*
标准名称：class选择器
body标签下标签通过class关键字进行调取该装饰功能
*/
.c2{
background-color: #9798a2;
height: 48px;
}
a{
background-color: #fff454;
}
/*
标准名称：标签选择器
body标签下的所有<a>标签被动接收装饰功能
*/
span div{
background-color: #ffac9b;
height: 48px;
}
/*
标准名称：层级（关联）选择器
body标签下的span标签下的<div>标签装饰该功能
可以不断往后 如： span div a p span h{}
*/
.c2 div{
background-color: #5cffe9;
height: 48px;
}
/*
标准名称：层级（关联）选择器，使用空格区分
body标签下的已经装饰了.c2功能的标签下的<div>标签装饰该功能
可以不断往后 如： .c2 div .c1 a h{}
*/
#i4,#i5,#i6 {
background-color: #08ff17;
}
/*
标准名称：组合选择器，使用逗号区分
body标签下的标签通过id匹配的装饰该功能
*/
.c3,.c4,.i7 {
background-color: #6d01cc;
}
/*
标准名称：组合选择器，使用逗号区分
body标签下的标签通过class关键字匹配的装饰该功能
*/
input[type='text' ]{ width:200px;height:30px; }
input[type='password']{ width:60px;height:30px; }
input[value='burgess' ]{ width:400px;height:30px; }
.c1[type='password']{ width:60px;height:30px;}
/*
标准名称：属性选择器
body标签下的标签属性匹配到后进行装饰该功能
注意.c1已经有该装饰功能了
如果body的input标签里面有用class关键字匹配优先匹配.c1装饰功能
*/
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
.}
/*
装饰功能
height:38px 高度
background-color:#dddddd 背景颜色
line-height:38px 字符根据像素居中
*/
img{
border:0;
}
/*默认img标签是有边框的，所以我们如果想在IE点击图片就跳转就需要去掉边框*/
.pg-header01{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
/*position: fixed; 固定页面的位置，并且把该div从背景层（底层）变底层上层
固定在 top right left:距离顶部、左、右 0px距离
这样以后就不管你页面往下滚动，该div一直存在该浏览器页面的顶部
*/
.pg-body01{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
/*背景层（底层）试验position写的装饰功能
margin-top偏离顶部50px这样才不会被盖住
（后期就不需要了，因为可以利用display隐藏固定div*/
.pg-header02{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
/*
覆盖固定到页面的距离右边0 左边0 上面0 高度48px
颜色蓝，文字输入高度48px的居中
*/
.pg-body02{
margin-top: 50px;
}
/*顶部往下移动50px*/
.w{
width: 980px;
margin: 0 auto;
}
/*宽度980px 居中*/
.pg-header02 .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*
display: inline-block; 行内标签转块级标签（a标签就可以设置左右上下宽度）
padding: 10px （上下左右+10px）
padding:0 10px （上下+0px 、左右+10px）
padding: 0 10px 0 10px （上+0px 、右+10px 、下+0px 、左+10px）
*/
.pg-header02 .menu:hover{
background-color: blue;
}
/*
menu:hover:当鼠标移动到当前menu标签上时，该hover属性才生效
*/
</style>
<link rel="stylesheet" href="css/commons.css" />
<!--引用当前路径下的css目录下的commons.css文件的装饰功能-->
</head><!--head标签的结束-->
<body style="margin: 0 auto;width: 1040px;> <!--body标签的开始-->
<!--body标签内部
pycharm文件路径：day14/html_test/s2.html-->
<a href="http://www.baidu.com">李 ><a>杰</a>
<!-- href：内部属性，跳转指定网址
 :空格、>：大于号、 <：小于号 -->
<p>123<BR>123</p>
<p>123<br />123</p>
<!-- <p>标签：1个p标签是一个段落，br：换行但是属于1个段落的。
2个P标签是2个段落，段落之间的有间距
自闭合标签里的参数大小写不区分
自闭合标签格式:<?? />==<??>
推荐用这种格式<?? /> 这样一看就最大是自闭合表 -->
<h1>Burgess</h1>
<h2>Burgess</h2>
<h3>Burgess</h3>
<h4>Burgess</h4>
<h5>Burgess</h5>
<h6>Burgess</h6>
<!-- <h>标签:数字越小显示越大 每个标签一行-->
<span>hello</span>
<span>hello</span>
<!-- <span>标签，虽然代码看起来是换行，但是显示的时候不换行-->
<!-- ========小总结========
所有的标签分为2类：
1.块级标签：
H系列标签（自带特性：加大加粗）、
P标签（自带特性：段落和段落之间有间距）
div(自带属性：白板(就是没特性)但是可以通过CSS加特性)
2.行内标签（内联标签）：
span标签(自带特性：白板(就是没特性)但是可以通过CSS加特性) -->
<div>1</div>
<div>2</div>
<div>3</div>
<!--<div>块级标签(自带特性：白板(就是没特性)但是可以通过CSS加特性)
一个标签一行 行与函之间没有间距（****几乎都是用这个标签+CSS）
为什么div是用的最多的，你要学前端最少要会div+CSS.
div是白板，所以CSS可以构造div几乎所有的特性-->
<!--标签作用以及浏览器F12对页面的HTML代码操作详解
pycharm文件路径：day14/html_test/s3.html-->
123
<!--<div ID="i1" style="position:fixed;top:0;right:0;">123-->
<div ID="i1">123
<div>
<span>123</span>
</div>
</div>
<!--body就可以写数据了，为什么还要用到标签？
这样方便后期利用CSS快速精确查找该标签的数据并且替换该数据，移动数据
ID="i1"内部属性：标记用的方便以后查询替换
style="position:fixed;top:0;right:0;"
内部属性:该便签的数据在浏览器显示在右上上边
style="position:fixed;bottom:0;right:0;"
内部属性:该便签的数据显示在浏览器显示在右下低边-->
<!-- ========结论===========
标签之间是可以嵌套的
标签存在的意义：CSS操作，JS操作
chorme（谷歌浏览器，360浏览器）审查元素的使用
这样以后看到某个网站的页面的某个功能好用,或者整个页面好看
就可以快速查到该功能的html标签内容是如何写的
以后任何网页都可以自己制作了-->
<!-- body标签之input系列详解
试验用户输入用户，密码，邮箱. 提交到后台服务端
tornado web服务端接收用户输入的并且验证返回结果
1写一个tornado的简单web框架的服务端程序：app.py
pycharm文件路径：day14/app.py
2.写个html，input系列进行测试form标签
pycharm文件路径：day14/html_test/s4.html -->
<form action="http://localhost:8888/index.html" method="POST">
<!--
<form>标签：包裹input系列
input系列输入的数据提交给form标签.
form标签的内部属性action指定数据发送的服务端位置：
如：tornado web框架程序服务端：http://localhost:8888/index
这样就把数据提交到服务端
默认提交数据请求方式：GET
GET：请求指定资源信息，服务器会返回指定资源
method="POST":提交数据的请求方式指定为：POST
POST：将客户端的数据提交到数据库，和GET效果一样，
-->
<!--
GET和POST效果一样但是发送数据的形式不一样
GET发送数据是以数据存提交到url并且拼接起来然后发送到服务端
POST发送数据是在内部body直接发送过去
-->
<!--
===请求6种形态=== IT业内请求方式的标准 每个请求做相应的工作====
GET： 客户端请求指定资源信息，服务端返回指定资源
HEAD：只请求响应报文中的HTTP首部
POST：将客户端的数据提交到数据库
PUT: 从客户端向服务器传送的数据取代指定的文档内容
DELETE：请求服务器删除指定的资源
MOVE：请求服务器将指定的页面移至另一个网络地址
-->
<input type="text" name="user"/>
<!-- <input type="text"/>:页面显示普通文本输入框（输入明文）:属于行内标签
name是给标签起名字，这样提交数据了以后，服务端才能区分数据的作用-->
<input type="text" name="email"/>
<!-- <input type="text"/>:页面显示普通文本输入框（输入明文）:属于行内标签
name是给标签起名字，这样提交数据了以后，服务端才能区分数据的作用-->
<input type="password" name="pwd"/>
<!-- <input type="password"/>:页面显示普通文本输入框（输入密文）：属于行内标签
name是给标签起名字，这样提交数据了以后，服务端才能区分数据的作用-->
<!-- 所有的数据都是以字典格式形式提交到服务端
如：{'user':"用户输入的xxx"，'email':"用户输入的xxx",'pwd';"用户输入的xxx"}-->
<input type="button" value="登录1"/>
<!-- <input type="button"/>:页面显示按钮：属于行内标签
value="登录"：按钮的名字（button配合）
可以点击目前点击以后没有效果，默认没用（等学GS的时候才可以赋予其他功能）-->
<input type="submit" value="登录2"/>
<!-- <input type="submit"/>:页面提交按钮：属于行内标签
value="登录"：提交按钮的名字（sumbmit配合）
可以点击目前点击以后没有效果，有提交功能，但是数据提交给谁？
所以我们需要把数据提交给 <form>标签，让form标签帮我们提交到服务器，
这样才可以收到服务器的返回数据-->
</form>
<!--form标签结束-->
<br/>
<!--换行-->
<form>
<input type="text"/>
<input type="password"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
<!-- ===小总结===
form标签：提交数据到后台需要的标签
form标签内部属性acthion:指定提交的位置
form标签内部属性method:提交数据到后台的请求方式
input标签：用户可输入数据
input标签 内部属性type :指定输入的类型
type="test"：文本输入类型（明文）
type="password"：文本输入类型（密文）
type="button"：按钮（默认没用，后期需要CSS赋予功能）
type="submit"：可提交表数据
input标签 内部属性name="xx" ：
xx=该标签的字典key,输入的数据=该标签的value
后台服务器才可以以字典的格式提取相应的数据
input标签 内部属性value="xx" ：
配合内部属性按钮button或submit， 按钮的名字
input标签的几个内部属性配合就可以提交数据，提交数据就需要form标签帮忙-->
<!--试验引用百度搜索-->
<form action="https://www.baidu.com/s?">
<!--提交数据到百度搜索的服务端-->
<input type="text" name="wd" />
<!-- type="text"：--输入文本格式
name属性：key=wd ,服务端可调取该key的值 -->
<input type="submit" value="搜索" />
<!--type="submit：提交按钮 value属性：默认值-->
</form>
<br>
<!--换行-->
<form action="https://www.baidu.com/s?">
<!--提交数据到百度搜索的服务端-->
<input type="text" name="wd" value="英雄" />
<!-- type="text"：--输入文本格式
name属性：key=wd ,服务端可调取该key的值
value属性：默认值 -->
<input type="submit" value="搜索" />
<!--type="submit：提交按钮 value属性：默认值-->
</form>
<!--试验单选框，多选（复选）框，上传文件筐，提交，重置，多行文本输入，单下拉框，多选下拉框，下拉框不可选父项可选子项-->
<form enctype="multipart/form-data">
<!--enctype="multipart/form-data" 上传文件需要该内部属性-->
<div>
<textarea name="meno" >dfs</textarea>
<!--<textarea>默认值</textarea>:多行文本输入
name属性:key
dfs：默认值放在中间-->
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">南京</option>
<option value="4">成都</option>
</select>
<!-- 单选下拉框 默认：点击才跳出可选择的选项
name:key (name相同则互斥，意味只能选择一个)
<select></select>:下拉框选择
<option></option>：被选择的名字
value:字典value值list格式
selected="selected"：默认选择-->
<select name="city" size="10" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">南京</option>
<option value="4">成都</option>
</select>
<!-- 多选下拉框，
size="10"：直接显示10可选择的选项（不使用该参数默认size=1）
multiple="multiple"：加上该内部属性，按键盘ctrl可多选
name:key (name:有multiple内部属性:批量接收数据)
<select></select>:下拉框选择
<option></option>：被选择的名字
value:字典value值list格式
selected="selected"：默认选择该选项-->
<select name="city">
<optgroup label="广东">
<option value="1">深圳</option>
<option value="2">广州</option>
</optgroup>
<optgroup label="四川">
<option value="3" >重庆</option>
<option value="4">成都</option>
</optgroup>
</select>
<!-- 不可选父选，可选子项单选下拉框 默认：点击才跳出可选择的选项
name:key (name相同则互斥，意味只能选择一个)
<select></select>:下拉框选择
<optgroup label="广东><optgroup >:不可选父项
<option></option>：可选子项
value:字典value值list格式
selected="selected"：默认选择-->
<input type="text" name="user" />
<!--input type="text"：文本输入(单行)-->
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" />
女：<input type="radio" name="gender" value="2" checked="checked"/>
Alex：<input type="radio" name="gender" value="3"/>
<!-- type="radio"：单选框
checked属性：默认勾选
name属性：数据提交服务端根据该key提取数据
为什么要3个name=相同值呢？，这样效果只能选择其中一个，单选，也就是name值相同则互斥。
由于key值相同，服务端如何区别提取相应数据？所以使用value属性:字典value(list格式)行区别
单选提交数据到接收数据方式
客户端提交数据方式：
提交数据格形式是默认GET：也就是把数据拼接以后先提交到url尾部如：
gender=1 or 2 or 3 由于是单选
服务端提取数据的方式：
gender_list = self.get_arguments('gender':[1 or2 or 3])
gender_list=1 or2 or 3-->
<p>爱好</p>
篮球：<input type="checkbox" name="favor" value="1" />
足球：<input type="checkbox" name="favor" value="2" checked="checked" />
皮球：<input type="checkbox" name="favor" value="3" />
台球：<input type="checkbox" name="favor" value="4" checked="checked"/>
网球：<input type="checkbox" name="favor" value="5" />
<!-- type="checkbox"：多选择框
checked属性：默认勾选
name属性：数据提交服务端根据该key提取数据。name属性值相同则批量获取数据。
服务端如何区数据？所以使用value属性:字典value(list格式)进行区别
多选提交数据到接收数据方式
客户端提交数据方式：
提交数据格形式是默认GET：也就是把数据拼接以后先提交到url尾部如：
favor=1&favor=3&favor=3 由于是单选
服务端提取数据的方式：
favor_list = self.get_arguments('gender':[1,2,3])
favor_list[0]=1
favor_list[1]=2
favor_list[3]=3 -->
<p>技能</p>
撩妹：<input type="checkbox" name="skill" value="1" checked="checked" />
写代码：<input type="checkbox" name="skill"value="2"/>
<!--同理favor解释-->
<p>上传文件</p>
<input type="file" name="fname"/>
<!--input type="file" :上传本地文件
默认是上传不了文件的
需要依赖form标签的一个内部属性：<form enctype="multipart/form-data">
name="fname"：服务端根据该fname(list格式)提取数据
服务端提取数据方式(以后会讲）
file_metes = self.request.files["fname"]
for meta in file_metas:
file_name = meta['filename']
with open(file_name,'wb') as up:
up.write(meta['body'])
-->
</div>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<!--input type="reset"：回到初始信息-->
</form>
<!--<a>标签详解和试验包含超级链接，跳转，锚跳转到指定id标签
pycharm文件路径：day14/html_test/s7.htm-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- <a>标签：跳转，超链接（不能提交数据库） 默认点击当前页跳转
href内部属性：指定跳转的连接
target="_blank" ：新页面跳转 -->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<!-- <a>标签：跳转，超链接（不能提交数据库） 默认点击当前页跳转
href="#i1"：指定跳转的位置
#号：锚，不要跳转到其他链接，跳转到当前的某一个id相对应的标签
i1: 跳转到当前id=i1的标签 -->
<div id="i1" style="height:600px;">第一章的内容</div>
<div id="i2" style="height:600px;">第二章的内容</div>
<div id="i3" style="height:600px;">第三章的内容</div>
<div id="i4" style="height:600px;">第四章的内容</div>
<!-- <div>：块级白板标签
id="i1":id标记
style="height:600px;" ：像素600，可输入内容的大小，大概是一页左右 -->
<!--试验：
img图片标签和内部属性（src title style alt
ul列表显示标签配合li标签
ol序列化显示标签配合li标签
dl父子显示标签配合，dt标签：父显示dd标签：子显示
pycharm文件路径：day14/html_test/s8.html -->
<a href="http://www.baidu.com">
<img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女">
</a>
<!-- <img>：图片标签，自闭合标签....想要做跳转就被包裹在a标签里面
内部属性：
src:图片路径
title="大美女"：鼠标移动到图片的时候不用点击就会显示大美女字符串
style="height: 200px;width：图片像素，height(高) px()像素 width（宽）
alt="美女"：如果没有图片，该图片框显示 美女字符串 -->
<ul>
<li>asdf</li>
<li>asdf</li>
</ul>
<!-- ul标签配合li标签：列表显示，如显示：• asdf
• asdf -->
<ol>
<li>asdf</li>
<li>asdf</li>
</ol>
<!-- ol标签配合li标签：自动添加序列号列表显示，如显示： 1.asdf
2.asdf-->
<dl>
<dt>ttt</dt>
<dd>ddd</dd>
<dt>yyy</dt>
<dd>ddd</dd>
</dl>
<!-- dl标签配合dt标签和dd标签：dt内为父显示，dd内容子显示，父子列表显示
如显示： ttt
ddd
yyy
ddd -->
<!--试验：
table表格标签：内部属性（border添加边框）
tr标签：行
td标签：列 内部属性: colspan该行列合并 rowspan该列行合并
shred表头标签
tr标签：行
th标签：表头列
tbody表内标签
tr标签：行
td标签：表头列
pycharm文件路径：day14/html_test/s9.html -->
<table border="1">
<!--table表格标签开始 border="1":添加边框
以下是缩写代码：-->
<tr>
<td>主机名</td>
<td>端口</td>
<td>操作</td>
</tr>
<!--tr标签：第一行 td标签：列-->
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a href="s2.html">查看详细</a>
<a href="#">修改</a>
</td>
</tr>
<!--tr标签：第二行 td标签：列 a标签：跳转-->
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>第三行，第3列</td>
</tr>
<!--tr标签：第三行 td标签：列 -->
</table>
<!--table表格标签结束 -->
<table border="1">
<!--table表格标签开始 上面写法不是完整写法，是缩写的-->
<thead>
<!--thead标签：表头 tr标签：行 th标签：表头列-->
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
</thead>
<tbody>
<!--tbody标签：表内 tr标签：行 td标签：表内列-->
<tr>
<td>1</td>
<td colspan="3">1</td>
<!--colspan="3":该行3列合并（合并单元格） -->
</tr>
<tr>
<td rowspan="2">1</td>
<!--rowspan="2":该列的2行合并 （合并单元格）-->
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
<!--试验：
label标签：配合input标签 得到的效果是，点击用户名该字符串，就等于点击输入框，通过for属性指定到id相对应的input标签输入边框，简单理解：就是获取光标
fieldset：边框标签，配合legend标签达到达到的效果：
会让fieldset边框线缺出一部分空间给 legend标签的内容
然后包裹其他的标签就可以达到一个比较好看的效果
pycharm文件路径：day14/html_test/s9.html -->
<fieldset>
<legend>登录</legend>
<!--fieldset：边框标签配合legend标签达到达到的效果：
会让fieldset边框线缺出一部分空间给 legend标签的内容
然后包裹其他的标签就可以达到一个比较好看的效果-->
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
<!--label标签：配合input标签 得到的效果是，点击用户名该字符串，就等于点击输入框
通过for属性指定到id相对应的input标签输入边框。 简单理解：就是获取光标-->
<br />
<!--br换行标签-->
<label for="pwd">密码：</label>
<input id="pwd" type="text" name="user" />
<!--label标签：配合input标签 得到的效果是，点击用户名该字符串，就等于点击输入框
通过for属性指定到id相对应的input标签输入边框。 简单理解：就是获取光标-->
</fieldset>
<!--试验CSS装饰功能各种选择器（id选择器，class选择器，标签选择器，层级关联选择器，组合选择器，属性选择器）
pycharm文件路径：day14/html_test/s11.html -->
<div style="background-color:red;height:48px;">1</div>
<!--标签的style属性实现标签装饰（装饰功能不能重复使用：极少用到）-->
<div id="i1">2</div>
<div id="i2">3</div>
<div id="i3">4</div>
<!--2 head标签下的style标签下的装饰功能使用：（id选择器），
body标签下的标签通过id匹配进行装饰
(装饰功能可重复被调用但不规范：极少用到)-->
<div class="c1">5</div>
<span class="c1">6</span>
<!--span白板标签：属于行内标签-->
<div class="c2">7</div>
<!--3 head标签下的style标签下的装饰功能使用：（class选择器），
body标签下的标签通过class关键字匹配进行装饰
(装饰功能可重复调用，且规范，常用)-->
<a>1111</a>
<a>1111</a>
<!--4 head标签下的style标签下的装饰功能使用：（标签选择器），
body标签下的标签匹配的功能标签名将被动装饰
-->
<span class="c2">
<div class="c2">8</div>
<div>9</div>
</span>
<!--5 head标签下的style标签下的装饰功能使用：（层级（关联）选择器），
body标签下的标签下的标签匹配的层级功能标签名将被动装饰（可以拥有N层）
-->
<div id="i4">10</div>
<div id="i5">11</div>
<div id="i6">12</div>
<!--6 head标签下在style标签下的装饰功能使用：（组合选择器），
body标签下的标签通过id匹配进行装饰（该装饰功能可以拥有N个id），
-->
<div class="c3">10</div>
<div class="c4">11</div>
<div class="i7">12</div>
<!--7 head标签下在style标签下的装饰功能使用：（组合选择器），
body标签下的标签通过class关键字匹配进行装饰（该装饰功能可以拥有N个class关键字），
-->
<input class="c1" type="text" value="burgess">
<input class="c1" type="password">
<!--8 head标签下在style标签下的装饰功能使用：（属性选择器），
body标签下的标签自身的属性被匹配到后，被动进行装饰
-->
<!--试验style优先级，以及引用css文件的装饰功能
pycharm文件路径：day14/css/commons.css
pycharm文件路径：day14/html_test/s13.html-->
<div class="c5 c6" style="color:pink">asdf</div>
<!--一个标签可以应用多个装饰功能，如果功能属性相同但是value不同会覆盖
那么那个最优先呢？
本标签里面增加装饰功能最优先，
如果通过选择器调取head标签下的style标签，c2优先，因为c2在c1下面有覆盖效果
浏览器上F2审查元素也可以看优先值
style装饰功能可以不写在html文件里面，可以引用css文件，
只需要在head标签下写个link引用
格式： <link rel="stylesheet" href="css/commons.css" /> （href：引用路径）-->
<!--试验标签属性（height、border、width、font-size、line-height、font-weight）
pycharm文件路径：day14/html_test/s14.html-->
<div style="border: 1px solid red ;">
asdfasdf
</div>
<!--边框属性：宽，样式，颜色
border边框：1像素那么宽 border-top：值显示上边框线，等等边框类型，
solid:边框样式实体的 dotted：边框样式虚线的
red：边框的颜色
用浏览器审查元素试验或者查看功能更简单
-->
<div style="height: 48px;
width:80%;
border: 1px solid red;
font-size: 16px;
text-align: center;
line-height: 48px;
font-weight: bold;">
asdf
</div>
<!--标签属性：
height：48px 高度
border:边框 属性有 宽，样式，颜色
width：%80 宽度
font-size:16px 字体大小
text-align:center 居中
line-height:48px 字符串放在像素大小的中间
font-weight:bold 字体加粗
-->
<!--试验标签内部属性：float
pycharm文件路径：day14/html_test/s15.html-->
<body>
<div style="width: 20%;background-color: red;">1</div>
<div style="width: 20%;background-color: black;">2</div>
<br>
<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 30%;background-color: black;float: left">2</div>
<br>
<div style="width: 20%;background-color: orange;float: left">1</div>
<div style="width: 30%;background-color: olive;float:right ">2</div>
<br>
<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 50%;background-color: yellow;float: left">1</div>
<div style="width: 30%;background-color: black;float:right ">2</div>
<!--float：让标签狼起来，块级标签页可以堆叠
div标签是块级白板标签 所以一个标签就占据一行
如果想在一行里面使用2个块级标签以上的话：必须使用float内部属性
这样就可以让块级标签变成行内标签了
folat:left让块级标签变成行内标签，往左靠
folat:right让块级标签变成行内标签，往右靠
（注：需大于2个并且紧挨着标签，同时使用folat)
超过100%宽度就另起一行-->
<!--试验开始初探写html网站(写个顶部，和中部内的一个比较需要float的部分)
pycharm文件路径：day14/html_test/s16.html-->
<!--写网站首先考虑的是分块，一般分为3个部分：头、中、底 然后在从中分出几个顶级标签--->
<!-- <body style="margin: 0">:
maigin:外边距，默认body标签外边距是margin: 8，
所以上颜色的时候，外边距就会出现间隙，8像素染不上色-->
<div class="pg-header">
<!-- maigin:外边距，默认body标签外边距是margin: 8，
所以上颜色的时候，外边距就会出现间隙，8像素染不上色-->
<div style="float:left">收藏本站</div>
<!--这时候头部的位置也需要开始分配(float)头部的左边内容-->
<div style="float:right">
<!--头部的右边内容-->
<a>登录</a>
<a>登录</a>
</div>
</div>
<!--开始写中部某个位置也需要开始各种分配(float)-->
<div style="width:300px;border:1px solid red;">
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="clear:both"></div>>
<!--
上级（父级）div标签的border边框会被子级标签float弄消失，
所以需要在子级标签尾部增加多一个标签：
<div style="clear:both"></div>>
这样父级div标签的border边框才会出现(撑开父标签高度)
-->
</div>
<!--试验display内部属性
pycharm文件路径：day14/html_test/s17.html-->
<div style="background-color: red;display: inline;">asdf</div>
<!--display: inline;：块级标签转换行内(内联)标签-->
<span style="background-color: red;display: block;">asdf</span>
<!--display: block;：行内(内联)标签转换块级标签-->
<span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span>
<!--
块级标签：设置高度，宽度，padding margin
行内标签：无法设置高度，宽度，padding margin
display:inline-block 让行内标签可以设置高度，宽度，padding ,margin
-->
<a style="background-color: red;">Eric</a>
<!--普通a标签就是配合上面一条display:inline-block模式，让我们看效果更清晰而已，没用特别-->
<div style="background-color: red;display: none;">asdf</div>
<!--
display: none：
让标签消失(后期学习了js，你可以弄个按钮，点下就显示，在点下就消失。
如有一些网站有灯的，点下就亮，在点下就不亮)-->
<!--->
<!--试验内外边距（padding margin）
pycharm文件路径：day14/html_test/s18.html-->
<div style="border:1px solid red;height:70px;">
<div style="background-color: green; height:50px;
width:600px;margin-top:0px;">123</div>
</div>
<br>
<div style="border:1px solid red;height:70px;">
<div style="background-color: green; height:50px;
width:600px;margin-top:10px;margin-left:150px;">123</div>
</div>
<!--
margin-top:外边距，默认(margin-top:0子标签的高度占据父标签边框的顶部)
margin-top:0的时候，如:子标签高度：50px，宽度600px
该子标签的高度占据的是父标签边框的顶部,宽度是占据父标签最左边
margin-top:10的时候，margin-left:150的时候:
该子标签的高度占据的是父标签边框的顶部往下移动10像素
该子标签的宽度占据的是父标签边框最左边往右移动150像素
同理：margin-bottom 和 margin-top方向相反
同理：margin-right 和 margin-left方向相反
-->
<br>
<br>
<div style="border:1px solid red;height:70px;">
<div style="background-color: green; height:50px;
width:600px; padding-top:0;">123</div>
</div>
<br>
<div style="border:1px solid red;height:70px;">
<div style="background-color: green; height:50px;
width:600px; padding-top:15px; padding-left: 150px">123</div>
</div>
<!--
padding-top:内边距,默认（padding-top:0 子标签的高度占据父标签边框的顶部）
padding-top:0的时候，如：子标签高度：50px， 宽度是600px
该子标签的高度占据的是父标签边框的顶部,宽度是占据父标签最左边
padding-top:15的时候，margin-left:150的时候，
高度=50+15 =65 宽度=600+150=750
该子标签高度在顶部增加15px的高度，也就是该子标签高度=65（记住是顶部增加）
该子标签宽度在左边增加150px的宽度，也就是该子标签宽度=750（记住是顶部增加）
-->
<!--试验开始完成作业编写html网站
pycharm文件路径：day14/html_test/s19.html
pycharm文件路径：day14/html_test/s19页面缩大缩小不会变形.htm
是一整个网页就不往这里写了 day14-25课就笔记就有了-->
<!--试验去掉img标签的自带框属性
pycharm文件路径：day15/s1.html-->
<a href="http://www.oldboyedu.com" >asdf</a>
<a href="http://www.oldboyedu.com">
<img src="1.jpg" style="width: 200px;height: 300px;">
</a>
<!--img默认是有边框的，所以在head的style 写个装饰功能 img{border:0;} 把边框去掉
这样IE浏览器就不会出现问题了-->
<!--试验position属性不管如何页面往下滚动会出现一个返回顶部
pycharm文件路径：day15/s2.html-->
<div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom:20px;
right: 20px;">
返回顶部
</div>
<!--内部属性position: fixed–>把该div从底层放到上层 固定到页面某个位置
（图层概念，默认是div都是背景层（也就是底层））
bottom:20px 把该div标签放在离底部20PX
right：20px 把该div标签放在离右边20PX
这样该标签永远放在浏览器页面右下角距离底部和右边20PX距离
onclick="GoTop()：Js时候教的
-->
<div style="height: 5000px;background-color: #dddddd;">
asdfasdf
</div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
<!--试验position属性不管页面如何滚动，上面的菜单永远在顶部
pycharm文件路径：day15/s3.html-->
<div class="pg-header01">头部</div>
<!-- 调用pg-header01装饰，达到不管你如何在浏览器滚动页面，该div永远在页面顶部-->
<div class="pg-body01">内容</div>
<!--背景层（底层）试验positionn该内部参数-->
<!--试验position:relative+position:absolute配合使用：absolute标签依据relative标签进行固定位置
pycharm文件路径：day15/s5.html-->
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<!--position:relative；和position：absolute配合使用：
absolute标签固定在relative标签的某个位置（abosolut依据relative标签固定位置）-->
<!--试验position多层应用场景当点击一个按钮的时候，跳出一个框，值可以对该框进行操作
pycharm文件路径：day15/s6.html-->
<div style="z-index:10; position: fixed;top: 50%;left:50%;
margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<!--第三层
z-index:9；区别层级，谁的数字大，谁就在最上层
需要注意有了position的标签margin：0居中会失效
应用场景：本身该标签加上内部属性display:none；隐藏的
然后当点一个按钮以后，这个框就跳出来（JS的时候才讲display实现按钮功能）-->
<div style="z-index:9; position: fixed;background-color: black;
top:0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
"></div>
<!--第二层
用黑色覆盖了第一层
opacity: 0.5;透明度，0到1，0完全透明 1完全遮住
z-index:9；区别层级，谁的数字大，谁就在最上层
-->
<div style="height: 5000px;background-color: green;">
asdfasdf
</div>
<!--背景层（第一层）-->
<!--试验overflow（overflow: hidden\overflow: auto ）
pycharm文件路径：day15/s7.html-->
<div style="height: 200px;width: 300px;overflow: auto">
<img src="1.jpg">
</div>
<!--overflow: auto：放置的图片，超过定义标签的高度和宽度，超过出现滚动条-->
<div style="height: 200px;width: 300px;overflow: hidden">
<img src="1.jpg">
</div>
<!--overflow: hidden放置的图片，超过标签定义的高度和宽度，超过的隐藏-->
<div style="height: 200px;width: 300px;">
<img src="1.jpg" style="height: 200px;width: 300px">
</div>
<!--把图片大小调成定义好的宽高度一样的大小-->
<!--试验:hover当样式后面加上:hover，那么鼠标移到装饰该样式的标签，该:hover样式生效
pycharm文件路径：day15/s8.html-->
<div class="pg-header02">
<div class="w">
<a class="logo">LOGO</a>
<!--一般需要点击以后跳转的都需要a标签-->
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
<!--由于menu样式使用了:hover，当鼠标移动至装饰menu样式的标签
那么该:hover样式会生效-->
</div>
</div>
<div class="pg-body02">
<div class="w">a</div>
</div>
<!--试验background背景图片[涉及: background-repeat:( repeat-y、repeat-x、no-repeat)、 background-position]
pycharm文件路径：day15/html_test/s9.html-->
<div style="background-image: url(icon_18_118.png);
height: 180px;border: 1px solid red">
</div>
<!--background-image: url(icon_18_118.png) 背景图片；
默认图片横竖平铺该div空间-->
<div style="background-image: url(icon_18_118.png);
background-repeat:repeat-y;
height: 360px;border: 1px solid red">
</div>
<!--background-image: url(icon_18_118.png) 背景图片；
background-repeat:repeat-y; 图片竖平铺，
background-repeat:repeat-x; 图片横平铺，
-->
<div style="background-image: url(icon_18_118.png);
background-repeat:no-repeat;
height: 20px;width:20px;border: 1px solid red">
</div>
<!--background-image: url(icon_18_118.png) 背景图片；
background-repeat:no-repeat; 不平铺，
-->
<div style="background-image: url(icon_18_118.png);
background-repeat:no-repeat;
height: 20px;width:20px;border: 1px solid red;
background-position-x:0px;
background-position-y:-140px;">
</div>
<!--background-image: url(icon_18_118.png) 背景图片；
background-repeat:no-repeat; 不平铺，
background-position-x:0px;横向移动背景图片
background-position-y:-140px;竖向移动北京图片
background-position:0 -140px ;上面两个综合简写
-->
<!试验input输入框里面添加background背景图片--（涉及：多层position: relative；+ position: absolute、padding、background-image、display:inline-block）
pycharm文件路径：day15/s11.html-->
<div style="height: 35px;width: 400px;position: relative;">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px" />
<span style="position:absolute;right:0;top:10px;
background-image: url(i_name.jpg);height: 16px;width: 16px;
display: inline-block;"></span>
</div>
<!--在input输入框里面右边增加一个图片，
涉及了position:relative+position:absolute；第二层
注意：行内标签span如果不转块级标签display:inline-block；是不可以设置高度和宽度的
注意：padding的使用，在输入框输入，如果输入的长度到达第二层图片会被遮住，
所以应该padding把输入框+长，然后第二层图片放置在padding加长的位置，这样
输入的长度就不会被遮盖住
-->
</body> <!--body标签的结束-->
</html ><!-- html标签的结束-->
前端实战之HTML、CSS 常用标签注释
猜你喜欢
转载自blog.csdn.net/Burgess_zheng/article/details/86481511
今日推荐
周排行