HTML学习
来源：互联网 发布：day one mac 破解版 编辑：程序博客网 时间：2024/05/21 14:45
HTML学习网站
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type"content="text/html;charset=utf-8"> <title>只做我的第一个网页</title> </head> <body> <h1></h1> </body></html>```<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>制作我的第一个网页</title> </head> <body> <h1>Hello World</h1> </body></html><div class="se-preview-section-delimiter"></div>- `
|换行|| |空格||
|分隔行||
用户名:"><input type="text" name="username"/><label for="pass">密码:</label><input type="password" name="pass" /></from><div class="se-preview-section-delimiter"></div><from><input type="text/password" name="名称" value="文本"></from><div class="se-preview-section-delimiter"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>文本输入框、密码输入框</title></head><body><form method="post" action="save.php"> 账户: <input type="text" name="myname" /> <br> 密码: <input type="password" name="pass" /></form> </body></html><div class="se-preview-section-delimiter"></div><textarea rows="行数" cols="列数">文本</textarea><div class="se-preview-section-delimiter"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>文本域</title></head><body><form action="save.php" method="post" > <label>个人简介：</label> <textarea cols="10" rows="10">在这里输入内容...</textarea> <input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" /></form> </body></html><div class="se-preview-section-delimiter"></div><input type="radio/checkbox" value="值" name="名称" checked="ckecked" /><div class="se-preview-section-delimiter"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>单选框、复选框</title></head><body><form action="save.php" method="post" > <label>性别:</label> <label>男</label> <input type="radio" value="1" name="gender" /> <label>女</label> <input type="radio" value="2" name="gender" /></form></body></html><div class="se-preview-section-delimiter"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>下拉列表框</title></head><body><form action="save.php" method="post" > <label>爱好:</label> <select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select></form></body></html><div class="se-preview-section-delimiter"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>使用下拉列表框进行多选</title></head><body><form action="save.php" method="post" > <label>爱好:</label> <select multiple="multiple"> <option value="看书" >看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select></form></body></html><div class="se-preview-section-delimiter"></div><input type="submit" value="提交"><div class="se-preview-section-delimiter"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>重置按钮</title></head><body><form action="save.php" method="post" > <label>爱好:</label> <select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <input type="submit" value="确定" /> <input type="reset" value="重置" /></form></body></html><div class="se-preview-section-delimiter"></div><label for id="控件id名称"><div class="se-preview-section-delimiter"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>form中的lable标签</title></head><body><form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <br /> <label for="email">输入你的邮箱地址</label> <input type="email" id="email" placeholder="Enter email"> <p>你对什么运动感兴趣:</p> <label for="慢跑">慢跑</label> <input type="radio" name="慢跑" id="慢跑" /> <br /> <label for="登山">登山</label> <input type="radio" name="登山" id="登山" /> <br /> <label for="篮球">篮球</label> <input type="radio" name="篮球" id="篮球" /> <br /></form></body></html><div class="se-preview-section-delimiter"></div>p{ font-size:12px; color:red; font-weight:bold;}<div class="se-preview-section-delimiter"></div>p{font-size:12px;color:red}<div class="se-preview-section-delimiter"></div>p{ font-size:12px; color:red}<div class="se-preview-section-delimiter"></div>红色文字
嵌入式样式:<style type="text/css">span{color:red;}</style><div class="se-preview-section-delimiter"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>子选择符</title><style type="text/css">.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/.first>span{border:1px solid red;}</style></head><body><p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><h1>食物</h1><ul class="food"> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li></ul></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>后代选择器</title><style type="text/css">.first span{color:red;}.food li{ border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ }</style></head><body> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><!--下面是本小节任务代码--><ul class="food"> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li></ul></body></html>* {color:red}<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>* 选择符</title><style type="text/css">* {color:red;}* {font-size:20px;}</style></head><body> <h1>勇气</h1> <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>伪类选择符</title><style type="text/css">a:hover{ color:red; font-size:20px;}</style></head><body> <h1>勇气</h1> <p class="first">三年级时，我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>分组选择符</title><style type="text/css">p,span{color:red;}.first,#second span{color:green;}</style></head><body> <h1>勇气</h1> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></body></html>三年级时，我还是一个胆小如鼠的小女孩。
“p标签中的所有元素都设置为了红色。<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>继承</title><style type="text/css">p{color:red;}p{border:1px solid red;}</style></head><body> <h1>勇气</h1> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p></body></html>···## 特殊性有时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式？三年级时，我是一个胆小如鼠的人
p和.first都匹配到了这个标签上，那么会显示什么颜色呢？green是正确的颜色，这是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就是用哪种css样式。权值规则：标签的权值为1，类选择符的权值为10，ID选择符的权值为100.<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>!important</title><style type="text/css">p{color:red!important;}p.first{color:green;}</style></head><body> <h1>勇气</h1> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span class="first">简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">body{font-family:"Microsoft Yahei";}</style></head><body> <h1>勇气</h1> <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字号、颜色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body> <h1>勇气</h1> <p>三年级时，我还是一个<span class="stress" >胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的<span>问题</span>，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗体签</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body> <h1>勇气</h1> <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会<a href="http://www.imooc.com">批评</a>我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜体样式</title><style type="text/css">a { font-style:italic; }p{font-style:italic;}</style></head><body><p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p> </body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>下划线样式</title><style type="text/css">a { text-decoration:underline; }span{text-decoration:underline;}</style></head><body><p><span>三年级</span>时，我还是一个<a>胆小如鼠</a>的小女孩。</p> </body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>删除样式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> </body></html>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。
注意：2em的意思就是文字的2倍大小;<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>缩进样式</title><style type="text/css">p{text-indent:2em;}</style></head><body> <h1>了不起的盖茨比</h1> <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body></html>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为”爵士乐时代”吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。
···行间距p{line-height:2em;}菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为”爵士乐时代”吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。
···## 中文字间距，字母间距如果想在网页排版中设置文字间隔或者字母间隔就可以使用letter-spacing 来实现。>>h1{ letter-spacing:50px;}…了不起的盖茨比
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。单词间距设置: 如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现>>h1{ word-spacing:50px;}…welcome to imooc!
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字间距</title><style type="text/css">h1{letter-spacing:20px;}</style></head><body><h1>hello world!你好！</h1></body></html>了不起的盖茨比
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>对齐</title><style type="text/css">div{text-align:center;}</style></head><body><div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div></body></html>,,
## 元素分类–块级元素在html中,
…
,,,,,,,,. 常用的内联元素有：、、
、、、、
- ,
- ,,,,,
. 常用的内联元素有：、、
、、、、、 、、
、
、、 和 - 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{dislpay:block;} 块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>内联块状元素</title><style type="text/css">div,p{background:pink;}</style></head><body><div>div1</div><div>div2</div><p>段落1段落1段落1段落1段落1</p></body></html>我要变成内联元素
内联元素的特点：1、和其他元素都在一行上；2、元素的高度、宽度及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变。小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>行内元素标签</title><style type="text/css">a,span,em{ background:pink;/*设置a、span、em标签背景颜色都为粉色*/}</style></head><body><a href="http://www.baidu.com">百度</a><a href="http://www.imooc.com">慕课网</a><span>33333</span><span>44444</span><em>555555</em></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>内联块状元素</title><style type="text/css">a{ display:inline-block; width:20px;/*在默认情况下宽度不起作用*/ height:20px;/*在默认情况下高度不起作用*/ background:pink;/*设置背景颜色为粉色*/ text-align:center; /*设置文本居中显示*/}</style></head><body><a>1</a><a>2</a><a>3</a><a>4</a></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>边框</title><style type="text/css">p{border-width:2px;border-style:solid;border-color:red;}</style></head><body> <h1>勇气</h1> <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> </body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>边框</title><style type="text/css">li{ border-bottom:1px dotted #ccc; }</style></head><body><ul> <li>别让不会说话害了你</li> <li>二十七八岁就应该有的见识</li> <li>别让不好意思害了你</li></ul></body></html>文本内容
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：li是块状元素，块状元素有一个特点之一：在不设置宽度的情况下，显示为父容器的100%。<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>宽度和高度</title><style type="text/css">li{ border-bottom:1px dotted #ccc; width:200px;height:30px;}</style></head><body><ul> <li>别让不会说话害了你</li> <li>二十七八岁就应该有的见识</li> <li>别让不好意思害了你</li></ul></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>填充</title><style type="text/css">#box1{ width:100px; height:100px; padding:10px; border:1px solid red;}</style></head><body><div id="box1">盒子1</div></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>边距</title><style type="text/css">div{ width:300px; height:300px; border:1px solid red; }#box1{margin-bottom:30px;}</style></head><body> <div id="box1">box1</div> <div id="box2">box2</div> </body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>流动模式下的块状元素</title><style type="text/css">#box1{ width:300px; height:100px;}div,h1,p{ border:1px solid red;}</style></head><body> <div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> <h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> <div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px--></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>流动模式下的内联元素</title><style type="text/css"></style></head><body> <a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em> <strong>强调</strong></body></html>div{ width:200px; height:200px; border:2px red solid; float:left;}<div id="div1"></div><div id="div2"></div>div{ width:200px; height:200px; border:2px red solid; float:right;}div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;}<div id="div1"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>absolute样式</title><style type="text/css">div{ width:200px; height:200px; border:2px red solid; position:absolute;}</style></head><body><div id="div1"></div></body></html>#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}<div id="div1"></div><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>relative样式</title><style type="text/css">#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}</style></head><body> <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移的位置</span></body></html>#div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px;}<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>....<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>relative样式</title><style type="text/css">#div1{ width:200px; height:200px; border:2px red solid; position:fixed; bottom:0; right:0;}</style></head><body> <div id="div1"></div> <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> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p></body></html>相对参照元素进行定位
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
box1{
width:200px;height:200px;position:relative; }
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
box2{
position:absolute;top:20px;left:30px; }
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
颜色值的缩写
关于颜色值的css样式是可以所写的，当你设置的颜色是16紧致的色彩值时，如果每两位的值相同，可以缩写一半。
例子：
p{color:#000000;}可以缩写为p{color:#000;}P{color:#336699}可以缩写为p{color:#369;}
字体缩写
网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
body{font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif;}或者可以缩写为
body{font:italic small-cap cold 12px/1.5em "宋体",sans-serif}- 这里的间歇方式你至少要指定font-size和font-family属性其他的属性（如font-style，font-weight，font-varient，line-height）如未指定将自动使用默认值。
- 在缩写时font-size和line-height中要加入‘/’斜杠。
一般情况下对于中文网站，英文还是比较少的，所以下面的缩写比较常用：
body{font:12px/1.5em "宋体",sans-serif;}自已偶只好，行间距，中文字体，英文字体设置。
颜色值
在网页中的颜色设置时非常重要的，有字体颜色，背景颜色，边框颜色，设置颜色的方法有多种。
1. 英文命令颜色
P{color:red;}
2. RGB颜色，这与Photoshop中的RGB颜色是一致的。P{color:rgb(133,45,200);}
每一项的值可以是0-255之间的整数，也可以是0%~100%放入百分数。如：
P{color:rgb(20%,33%,25%);}
3. 十六进制的颜色
这种颜色设置方法实现比较普遍的使用方法，其原理也是RGB，但是每一个值由0-255变成了0-ff，P{color:#00ff;} 
长度值
长度燕尾总结一下，目前常用到的xp，em,%其实都是相对单位。
px
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设90像素=1英寸）。实际情况是浏览器会使用显示器的实际像素值以有关，在目前大多数设计者都偏向使用像素作为设计单位。
em
就是本元素给字体的font-size值，如果元素的font-size为14px，那么1em=14px；如果font-size是18px，那么1emm=18px。如下代码：
P{font-size:12px;text-ident:2em;}
上面的代码就可以实现首航段落缩进24px（也就是两个字体大小的距离）
下面特殊情况
但当给font-size设置单位为em时，此时计算的标准以p的父元素的font-size为基础，如下代码
html:以这个例子为例.
css:
p{font-size:14px}span{font-size:0.8em;}结果span中的字体’例子’大小就为11.2px(14*0.8=11.2px)
3. 百分比
p{font-size:12px;line-height:130%}
设置行间距为字体的130%(12*1.3=15.6px)
水平居中设置=行内元素
我们在实际工作中需要用到水平剧中的场景，比如为了美观，文化在那个的标题，文章的标题一般都是水平居中显示的。
这里我们都得分两种情况：行内元素还是块状元素，块中元素里面又分为定宽块状元素，以及不定块状元素 。
如果被设置元素文本为文本，图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现。（父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素）如下代码：
<body><div class="txtCenter">我想要在父容器中水平显示。></div></body>css代码
<style> .txtCenter{ text-align:center; }</style>水平居中设置-定宽块元素
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div></body>css代码：
<style>div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>也可以写成：
margin-left:auto;margin-right:auto;<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>定宽块状元素水平居中</title><style>div{ border:1px solid red; margin:20px auto;}</style></head><body><div>我是定宽块状元素，我要水平居中显示。</div></body></html>水平居中总结-不定宽块状元素的方法(一)
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
1. 加入 table 标签 2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的这一小节我们来讲一下第一种方法：
为什么选择方法一加入table标签? 是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table></div>css代码
<style>table{ border:1px solid; margin:0 auto;}</style><!DOCTYPE HTML><html><head><meta charset="utf-8"><title>不定宽块状元素水平居中</title><style>table{ margin:0 auto;}/*下面是任务区代码*/.wrap{ background:#ccc;}</style></head><body><div><table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody></table></div><div class="wrap"> 设置我所在的div容器水平居中 </div></body></html>水平居中总结-不定宽块状元素方法（二）
除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。
第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>css代码：
<style>.container{ text-align:center;}/* margin:0;padding:0（消除文本与div边框之间的间隙）*/.container ul{ list-style:none; margin:0; padding:0; display:inline;}/* margin-right:8px（设置li文本之间的间隔）*/.container li{ margin-right:8px; display:inline;}</style>这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
水平居中总结-不定宽块状元素方法（三）
除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
代码如下：
<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>css代码：
<style>.container{ float:left; position:relative; left:50%}.container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%;}.container li{float:left;display:inline;margin-right:8px;}</style>垂直居中-父元素高度确定的单行文本
这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
任务
我来试试：添加代码为任务区中的 class 为 wrap-center 的div设置水平居中。（记得点击右上角的全屏按钮查看效果哦！）
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<div class="container"> hi,imooc!</div>css代码：
<style>.container{ height:100px; line-height:100px; background:#999;}</style><!DOCTYPE HTML><html><head><meta charset="utf-8"><title>垂直居中</title><style>.wrap h2{ margin:0; height:100px; background:#ccc;}</style></head><body><!--下面是代码任务部分--><div class="wrap"> <h2>hi,imooc!</h2></div></body></html>垂直居中-父元素高度确定的多行文本（方法一）
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>css代码：
table td{height:500px;background:#ccc}因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本（方法二）
除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div></div>css代码：
<style>.container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute
float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container"> <a href="#" title="">进入课程请单击这里</a></div>css代码
<style>.container a{ position:absolute; width:200px; background:#ccc;}</style>想不起 display:inline-block 是做什么的小伙伴们，单击“元素分类–内联块状元素”可返回到前面小节进行复习。
0 0
- 【HTML】HTML学习笔记
- 学习html
- Html学习
- html 学习
- HTML学习
- HTML学习
- HTML学习
- Html学习
- html学习
- HTML学习
- html学习
- 学习Html
- html学习
- 学习html
- html学习
- html学习
- html学习
- HTML 学习
- 堆栈错误
- Codeforces 69D Dot(DFS)
- Android Studio 的安装和配置
- ubuntu wubi.exe 直接加载下载好的 amd64.tar.xz
- 盈透证券 简单API 实战
- HTML学习
- 支持向量机（SVM）一
- 自定义注解
- Radix Sort
- SQl训练题总结
- node.js学习笔记(2)_极客学院_基础语法
- POJ 2116 Death to Binary?（模拟题）
- 欢迎使用CSDN-markdown编辑器
- Gradle系列之从init.gradle说起
