HTML5+CSS3 使用content属性

合集下载

HTML5与CSS3 web前端开发技术习题答案

第一章1．简答题（1）在Web前端开发方面，HTML5与HTML4比较，主要解决哪几方面的问题？HTML5的核心在于解决当前Web开发中存在的各种问题。

一是解决Web浏览器之间的兼容性问题。

在一个浏览器上正常显示的网页（或运行的Web 应用程序），很可能在另一个浏览器上不能显示或显示效果不一致；二是文档结构描述的问题。

HTML4之前的各版本中，HTML文档的结构一般用div元素描述，文档元素的结构含义不够清晰；三是使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制，比如本地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户的体验。

（2）HTML5新增的全局属性有哪几个？描述其主要功能。

HTML5新增的全局属性，是指可以对任何元素都使用的属性。

功能如下所示。

（3）HTML5是下一代Web语言的开发框架，典型特性有哪些？HTML5从标记语言的功能提升到下一代Web语言的开发框架，他集成了HTML+CSS3+JavaScript的Web应用框架。

良好的语义特性。

HTML5支持微数据与微格式，增加的各种元素赋予网页更好的意义和结构，适于构建对程序、对用户都更有价值的数据驱动的Web应用。

HTML5增加了section元素、article元素、nav元素以及aside元素等结构元素。

强大的绘图功能。

通过使用Canvas API动态地绘制各种效果精美的图形，也可以通过SVG 绘制可伸缩矢量图形。

增强的音视频播放和控制功能。

新增了audio和video 元素，可以不依赖任何插件而播放音频和视频。

HTML5的数据存储和数据处理的功能。

包括离线应用、Web通信、本地存储等功能，HTML5还支持WebSQL和IndexedDB等轻量级数据库，增强了数据存储和数据检索能力。

获取地理位置信息。

HTML5新增了Geolocation API规范，应用于移动设备中的地理定位。

HTML5+CSS3 插入内容

Normal默认值。
String插入文本内容。
attr( )插入元素的属性值。
uri( )插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）。
counter( )计数器，用于插入排序标识。
示例：15-3 content.html
<!DOCTYPE HTML;head>
<meta charset="utf-8">
<title>插入内容</title>
<style type="text/css">
.TEXT {
width:400px;
height:50px;
line-height:50px;
overflow:hidden;
text-align:center;
color:#FF0000;
border:#993300 solid 1px;
HTML5+CSS3
content属性主要用来插入内容。而该属性与before和after伪元素配合使用，将生成内容放在一个元素内容的前面或后面。
另外，该内容创建的框类型可以用display属性控制。
语法：
content：normal string attr() uri() counter()
在上述语法中，其参数含义：
}
#TEXT_C:before {
content:"您使用的浏览器支持content属性";
}
</style>
</head>
<body>
<div id="TEXT_C" class="TEXT">-----content属性</div>

HTML5+CSS3 新增表单属性

HTML5+CSS3 新增表单属性
在HTML5中，除了兼容以前<form> </form>标签中的属性以外，还新增了以下两个属性。

1．autocomplete 属性
该属性规定表单是否应该启用自动完成功能。

当用户在某些文本框输入过一些内容时，如果再次输入内容时，文本框会出现一个下拉框显示出以前输入过的内容。

这是浏览器默认的一个功能，利用autocomplete属性可以关闭该功能。

该属性默认值为on，即规定启用自动完成功能。

而当值为off时，则禁用自动完成功能。

示例：3-1 autocomplete.html
2．Novalidate属性
该属性规定在提交表单时不应该验证<form>标签中域对象。

示例：3-2 Novalidate.html
当在<form>标签中，添加novalidate属性时，则表单将不验证域对象中的内容。

例如，在页面中，输入错误的Email地址内容。

输入错误内容
然后，并单击【提交】按钮，则不做任何验证，将直接转至提交页面。

无验证，直接跳转页面。

CSS3的content属性详解

CSS3的content属性详解css中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有⼀个content属性，能够实现页⾯中的内容插⼊。

插⼊纯⽂字content : ”插⼊的⽂章”，或者 content:none 不插⼊内容#html<h1>这是h1</h1><h2>这是h2</h2>#cssh1::after{content:"h1后插⼊内容"}h2::after{content:none}嵌⼊⽂字符号可以使⽤content属性的 open-quote 属性值和 close-quote 属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套⽂字符号。

open-quote ⽤于添加开始的⽂字符号，close-quote ⽤于添加结束的⽂字符号。

修改上述的css:h1{quotes:"(" ")"; /*利⽤元素的quotes属性指定⽂字符号*/}h1::before{content:open-quote;}h1::after{content:close-quote;}h2{quotes:"\"" "\""; /*添加双引号要转义*/}h2::before{content:open-quote;}h2::after{content:close-quote;}插⼊图⽚content属性也可以直接在元素前/后插⼊图⽚#html<h3>这是h3</h3>#cssh3::after{content:url(/wp-content/themes/yusi1.0/img/new.gif)}插⼊元素的属性值content属性可以直接利⽤attr获取元素的属性，将其插⼊到对应位置。

HTML5+CSS3网站设计HTML5页面元素及属性

第2章HTML5页面元素及属性《HTML5+CSS3网站设计基础教程》（第2版）学习目地/Target掌握结构元素地使用,可以使页面分区更明确理解分组元素地使用,能够建立简单地标题组。

掌握页面交互元素地使用,能够实现简单地交互效果。

理解文本层次语义元素,能够在页面突出所标记地文本内容。

掌握全局属性地应用,能够使页面元素实现相应地操作。

章节概述/SummaryHTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。

本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。

/Contents01 02 03列表元素结构元素分组元素04页面交互元素/Contents05 06文本层次语义元素全局属性07阶段案例—制作电影影评网01列表元素章节概述HTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。

本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。

为了使网页更易读,经常将网页信息以列表地形式呈现,例如,淘宝商城首页地商品服务分类,排列有序,条理清晰,呈现为列表地形式。

为了满足网页排版地需求,HTML语言提供了3种常用地列表元素,分别为ul元素（无序列表）,ol元素（有序列表）与dl元素（定义列表）,本节将对这3种元素进行详细讲解。

1.ul元素l 了解无序列表地概念,能够说出无序列表地特点。

l 掌握无序列表地基本语法格式,能够在网页定义无序列表。

学习目地1.ul元素无序列表是网页最常用地列表,之所以称为"无序列表",是因为其各个列表项之间没有顺序级别之分,通常是并列地。

HTML5+CSS3 个人博客1

</ul>
</div>
（3）为页面添加类别模块，使用ul列表添加类别内容。
<img src="images/pic.jpg" alt="" />
<h3>类别</h3>
<ul>
<li><a href="#" title="Articles">模板(15)</a></li>
<li><a href="#" title="Gallery">互联网(10) </a></li>
<br /><a href="" title="">下载</a>  |  <a href="" title="">更多...</a>
</div页面添加getCurrentPosition方法简介，可以查看用户评论信息。
<h3>getCurrentPosition方法</h3>
<ul>
<li><a class="current" href=" " title="home">首页</a></li>
<li><a href="#" title="Articles">关于我们</a></li>

html5和css3入门知识

11
HTML5移除的元素移除的元素
▪ font, center, strike, big, s, u, acronym, applet, dir... 移除的属性
▪ 如link和a元素的rev属性, link元素的target属性, td的scope属性，script元素的language属性, body元素的alink， link，text和vlink属性...
3
HTML5是什么下一代 Web 语言，它不单单是一种标记语言，更为下一代 Web 提供了全新功能，并将引领下一代 Web 实
现类似桌面的应用体验。
4
HTML5是什么 HTML5将使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
HTML5是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。
5
HTML5是什么
新增的功能： ▪ 本地音频视频播放 ▪ 动画 ▪ 地理信息 ▪ 硬件加速 ▪ 本地运行（即使在 Internet 连接中断之后） ▪ 本地存储 ▪ 从桌面拖放文件到浏览器上传 ▪ 语义化标记
6
7
8
HTML发展历史
HTML4.0
XHTML1
XHTML2
WHATG
HTML5
1998
2000
2002
2004
2007
Web Hypertext Application Technology Working Group 很多浏览器支持html5：Safari 3.1+，FireFox 3.1+，Internet Explorer 8.0+，Google等
9

HTML5+CSS3网页设计基础教程第17章网页布局

HTML5+CSS3网页设计基础教程
第17章网页布局
第18页
17.3.2 设置元素的显示顺序

使用弹性盒布局时，可以通过order属性来改变各元素的显示顺序。可以在每个元素的样式中加入 order属性，该属性使用一个整数值表示，浏览器在显示元素的时候根据数值按从小到大排列。【例17-9】设置元素的显示顺序。
HTML5+CSS3网页设计基础教程
第17章网页布局
第27页
17.4.2 justify-content属性

指定如何布局容器中除了子元素之外的mainaxis轴方向上的剩余空白部分。当flex-grow属性值不为0时，各子元素在main-axis轴方向自动填满容器，所以justify-content属性值无效。属性取值：
设置列宽和列数设置列间距设置列边框设置跨列标题统一列高
HTML5+CSS3网页设计基础教程
第17章网页布局
第5页
17.1.1 设置列宽和列数

column-width子属性用于给列定义一个最小的宽度。默认值为auto，表示将根据column-count子属性指定的数目计算列宽。column-count子属性用于指定文本显示的列数。实际应用中，通常将这两个参数放在columns中一起指定。例如，columns: auto 4;就是图17-1所示的4栏效果，这行代码将div中的内容分成4列显示，根据div的宽度 640px，均分列宽为160px（包括列间距的宽度）。
HTML5+CSS3网页设计基础教程
第17章网页布局
第15页
主要内容
17.1 17.2 17.3 17.4 17.5 多栏布局盒布局弹性盒布局弹性盒布局的布局原理本章小结

网页设计与制作案例教程(HTML5+CSS3)第9章盒子模型

WEB 6
盒子模型
WEB 7
盒子模型
一个标准的W3C盒子模型由content、padding、border和margin这4个属性组成。各属性含义如下： ➢ content（内容） - 盒子的内容，显示文本和图像。 ➢ padding（内边距） - 内容也边框之间的距离。会受到框中填充的背景颜色影响。 ➢ margin（外边距） - 盒子与其它盒子间的距离。margin是完全透明的，没有背
9.2.2 盒子模型的计算
注意：IE的盒子模型与标准的W3C盒子模型有区别，IE的盒子模型中，width和height指的是内容区域+border+padding 的宽度和高度。在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
9.2.2 盒子模型的计算
请按照W3C标准计算一下这个元素实际占用的空间
景色。 ➢ border（边框） - 盒子的边框，它具有border-style、border-width、
border-color属性。边框是受到盒子的背景颜色影响的。
8
9
9.2.2 盒子模型的计算
在CSS的标准盒子模型中，width和height指的是内容区域（content）的宽度和高度，不是盒子的实际大小。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
在标准的W3C盒子模型中：元素框的总宽度 = 元素的width + padding的左右边距的值 + margin的左右边距的值 + border的左右宽度；元素框的总高度 = 元素的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下高度。

详解CSS伪元素及Content属性

详解CSS伪元素及Content属性初识伪元素说起伪元素我第⼀想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插⼊第⼀个⼦节点和追加最后⼀个⼦节点。

那这时我不禁地想问：“直接添加两个class为.before和.after不是⼀样的吗？” 其实使⽤伪元素::before和::after以下两个好处：1.HTML的代码量减少，对SEO有帮助；2.提⾼JavaScript查询元素的效率。

那为什么会这两好处呢？原因就是伪元素并不存在于DOM中，⽽是位于CSSOM，HTML代码和DOM Tree中均没有它的⾝影，量少了⾃然效率有所提升。

但这也引⼊⼀个问题——我们没办法通过JavaScript完全操控伪元素（我将在下⾯⼀节为⼤家讲述）⼀⼤波伪元素来了除了::before和::after外，别漏了以下的哦！1.:first-line：只能⽤于块级元素。

⽤于设置附属元素的第⼀个⾏内容的样式。

可⽤的CSS属性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。

2.:first-letter：只能⽤于块级元素。

⽤于设置附属元素的第⼀个字母的样式。

可⽤的CSS属性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。

3.::selection：匹配选中部分的内容。

可⽤的CSS属性为background,color。

有没有发现有的伪元素前缀是:有的却是::呢？::是CSS3的写法，其实除了::selection外，其他伪元素既两种前缀都是可以的，为兼容性可选择使⽤:，为容易区分伪元素和伪类则使⽤::，但我还是建议使⽤::来提⾼可读性，兼容性就让postcss等⼯具帮我们处理就好了。

HTML5+CSS3 背景的新增属性及应用

HTML5+CSS3 背景的新增属性及应用在CSS 3中，新增4个与背景相关的属性，来设置背景的显示范围、尺寸和图像的起始点等内容。

1．background-clip属性示例：17-1 background-clip.html在上述代码中，向页面添加两个DIV层。

设置div1层从border边框下开始显示背景，div2层从padding下开始显示背景。

从Chrome浏览器打开该文件，结果如下：Border边框开始显示背景2．background-origin属性background-origin属性用于指定在绘制背景时，从边框的左上角开始或者从内示例：17-2 background-origin.html在上述代码中，在网页中添加了3个DIV层。

设置div1层绘制背景时从border 边框开始算起，div2层从padding位置开始算起，div3层从content内容区域开始算起。

从Chrome浏览器打开该文件，结果如下：Border边框开始绘制背景Padding填充区开始绘制背景Content内容区开始绘制背景3．background-size属性4．background-break属性background-break属性用于指定内联元素背景图像进行平铺时的循环方式。

循环方式介绍如下：5．在一个标签中显示多个背景图像为了使得背景图像中所用素材的调整变得更加容易，在CSS 3中，允许在一个标签中显示多个图像且可以将多个背景图像进行重叠显示。

在CSS 3中，使用breakground-image属性指定图像文件时，图像的叠放顺序从上往下指定。

第一个图像放在最上面，最后指定的图像放在最下面。

示例：17-3 moreBackground.html在上述代码中，使用background-image属性为div层设置了三张背景图片，背景图片之间使用逗号分隔。

Div标签中显示三种背景。

HTML5笔试题库

HTML5笔试题库1、关于块级元素描述错误的是（） [单选题] *A.块级元素独占一行，在默认情况下，宽度自动填满父元素宽度B.块级元素宽度和高度可以控制C.块级元素的margin和padding横向设置有效，纵向设置不产生边距效果(正确答案)D.块级元素可以通过display: inline; 转换为行内元素2、样式表定义.outer{background-color:yellow;}表示（） [单选题] *A.网页中某一个id为outer的元素的背景色是黄色的B.网页中含有class="outer"的元素的背景色是黄色的(正确答案)C.网页中元素名为outer元素的背景色是黄色的D.以上任意一个都可以3、在HTML网页中，若需要实现导航菜单，可使用以下（）块状结构来布局。

[单选题] *A.div-ul-li(正确答案)B.div-dl-dt-ddC.div-table-tr-tdD.div-form-table-tr-td4、在HTML网页中，若需要实现图文混编的效果，可使用以下（）块状结构来布局。

[单选题] *A.div-ul-liB.div-dl-dt-dd(正确答案)C.div-table-tr-tdD.div-form-table-tr-td5. CSS3中关于渐变的说法错误的是（） [单选题] *A.CSS3径向渐变是圆形或椭圆形渐变B.径向渐变颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合C.渐变中angle角度是指水平线和渐变线之间的角度，按顺时针方向计算(正确答案)D.CSS3定义了两种类型的渐变:线性渐变和径向渐变6.在HTML5中，有关关键帧属性的描述，错误的是（） [单选题] *A.animation-delay:指定动画开始之前的延迟时间B.animation-direction:指定动画循环播放的时间是否反向播放过渡的持续时间C.animation-name:指定动画名称D.animation-duration:指定动画循环播放的时间是否反向播放过渡的持续时间(正确答案)7.对于样式规则background:linear-gradient（to right,red 50%,green 50%）;错误的是（） [单选题] *A.背景是线性渐变B.线性渐变的颜色从红色过渡到绿色C.红色和绿色之间没有过渡(正确答案)D.红色和绿色各占50%8. 在HTML5中，关于dl-dt-dd的描述，错误的是（） [单选题] *A.dt和dd放于dl标签内B.dd标签不可以出现多次(正确答案)C.dt不能放入dd内，dd不能放入dt内D.标签dt与dd处于dl下相同级10. 设置文本阴影的是哪个属性（） [单选题] *A.border-shadowB.box-shadowC.text-shadow(正确答案)D.以上都不对11.对于样式规则transition:all 3s ease-in 0.5s;描述错误的是（） [单选题] *A.3s表示过渡持续时间B.,0.5s指的是延迟时间C.,0.5s指的是过渡持续时间(正确答案)D.all表示全部属性12.CSS3中flex-wrap属性的默认值是（） [单选题] *A.NOWRAP(正确答案)B.noneC.warpD.wrap-reverse13. 设置边框阴影的是哪个属性（） [单选题] *A.border-shadowB.box-shadow(正确答案)C.text-shadowD.以上都不对14.对于border-image的理解，说法错误的是（） [单选题] *A.border-image是css3的新特性B.border-image需要指定素材的路径C.border-image用来用素材图片填充边框D.背景图填充方式的默认值是repeat(正确答案)15. 对于样式规则border-radius:10px 20px ;理解正确的是（） [单选题] *A.左上和左下角度都是10px,右上和右下角度都是20pxB.左上和右下角度都是10px,右上和左下角度都是20px(正确答案)C.左上和右上角度都是10px,右下和左下角度都是20pxD.左上和右下角度都是20px,右上和左下角度都是10px16. 下列关于视口的属性描述错误的是（） [单选题] *A.width:设置layout viewport的宽度只能是一个正整数(正确答案)B.height:设置layout viewport的高度为一个正整数或字符串“height-device”er-scalable:是否允许用户进行缩放，值为“no”或“yes”。

CSS3常用属性大全

CSS3 动画属性（Animation）keyframes //规定动画。

animation //所有动画属性的简写属性，除了animation-play-state 属性。

animation-name //规定keyframes 动画的名称。

animation-duration //规定动画完成一个周期所花费的秒或毫秒。

animation-timing-function //规定动画的速度曲线。

animation-delay //规定动画何时开始。

animation-iteration-count //规定动画被播放的次数。

animation-direction //规定动画是否在下一周期逆向地播放。

animation-play-state //规定动画是否正在运行或暂停。

animation-fill-mode //规定对象动画时间之外的状态。

CSS 背景属性（Background）background //在一个声明中设置所有的背景属性。

background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。

background-color //设置元素的背景颜色。

background-image //设置元素的背景图像。

background-position //设置背景图像的开始位置。

background-repeat //设置是否及如何重复背景图像。

background-clip //规定背景的绘制区域。

background-origin //规定背景图片的定位区域。

background-size //规定背景图片的尺寸。

CSS 边框属性（Border 和Outline）border //在一个声明中设置所有的边框属性。

border-bottom //在一个声明中设置所有的下边框属性。

border-bottom-color //设置下边框的颜色。

border-bottom-style //设置下边框的样式。

CSS3的content属性详解及CSS中content使用字体图标

CSS3的content属性详解及CSS中content使⽤字体图标 CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有⼀个content属性，能够实现页⾯中的内容插⼊。

content属性⼀般⽤于::before、::after伪元素中，⽤于呈现伪元素的内容。

平时content属性值我们⽤的最多的就是给个纯字符，其实它还有很多值可供选择。

1、插⼊纯⽂字：content: '插⼊纯字符';2、插⼊图⽚：content: url('http://**.png');3、插⼊元素属性：<h1>3、插⼊元素属性</h1><div class="content fill-dom-attr"data-title="我是.fill-dom-attr元素的 data-title 属性值"></div>.content.fill-dom-attr::before{content: attr(data-title);}<p><a href="//">菜鸟教程</a> - 免费的编程学习⽹站。

</p>a:after {content: " (" attr(href) ")";}4、插⼊当前元素编号（即当前元素索引）<style>*{margin: 0;padding: 0;box-sizing: border-box;}li{list-style: none;}.content{position: relative;padding: 10px;border: 1px solid #666;margin: 10px;}.fill-dom-index li{position: relative;/* 给计数器加器起个名字，它只会累加 li 标签的索引，li元素中间的div并不会理会 */counter-increment: my;}.fill-dom-index li div::before{/* 使⽤指定名字的计算器 */content: counter(my)'- ';color: #f00;font-weight: 600;}</style><body><h1>4、插⼊当前元素编号(即当前元素索引)</h1><div class="content fill-dom-index"><ul><li><div>我是第1个li标签</div></li><div>我是li标签中的第1个div标签</div><li><div>我是第2个li标签</div></li><li><div>我是第3个li标签</div></li><div>我是li标签中的第2个div标签</div><li><div>我是第4个li标签</div></li><li><div>我是第5个li标签</div></li></ul></div></body>5、插⼊当前元素编号(指定种类)<style>*{margin: 0;padding: 0;box-sizing: border-box;}li{list-style: none;}.content{position: relative;padding: 10px;border: 1px solid #666;margin: 10px;}.fill-dom-index2 li{position: relative;counter-increment: my2;}.fill-dom-index2 li div::before{/* 第⼆个参数为list-style-type，可⽤值见： /cssref/pr_list-style-type.asp*/content: counter(my2,lower-latin)'- ';color: #f00;font-weight: 600;}</style><body><h1>5、插⼊当前元素编号(指定种类)</h1><div class="content fill-dom-index2"><ul><li><div>我是第1个li标签</div></li><div>我是li标签中的第1个div标签</div><li><div>我是第2个li标签</div></li><li><div>我是第3个li标签</div></li><div>我是li标签中的第2个div标签</div><li><div>我是第4个li标签</div></li><li><div>我是第5个li标签</div></li></ul></div></body>6、CSS中content使⽤字体图标，⽐如iconfont ⽬前字体图标使⽤最⼴泛的是阿⾥巴巴的iconfont（具体使⽤请⾃⾏百度），然后找到我们需要的字体图标，点击编译图标，这个Unicode(16进制)的符号是我们需要的：其中content：“”中\e667之前必须有空格，不然显⽰不正确。

HTML5+CSS3 HTML5结构性标签体系

HTML5+CSS3 HTML5结构性标签体系HTML 5变革最明显的地方，让人机交互，人网交互变得更加舒适，更贴合用户。

这其中对文档结构和语义化标签体系革新，起到了很大的作用。

如同XHTML语义化一样，HTML 5语义化标签的使用也应该遵循：每个标签都有它特定的意义，而语义化，就是让用户在适当的位置用适当的标签，以更好的让人和机器(机器可理解为浏览器，也可理解为搜索引擎)都一目了然。

1．语义更明确简洁的结构能记住吗？你会去死记硬背吗？当然不会！用户只需要机械的复制粘贴即可。

了。

HTML 5的头部可以如此简单，可以轻易的记住！并且，可以忽略大小写，引号以及最后一个尖括号前的反斜线。

为什么可以如此松散？其实，如果把XHTML当成text/html发送，浏览器一样可以很好的解析，浏览器并不在乎代码的语法。

所以，HTML 5是形而上的，它可能会破坏原有的一些标准，但仍可在浏览器中很好的表现。

当然，为了团队协助与后续维护的方便，用户还是应该统一一种自己喜欢的风打开一个HTML 5页面，然后执行【工具】|【页面信息】命令，将打开【页信息】对话框，其中标注出当前页面是以标准模式显示的。

标准模式另外，HTML 5虽然目前并不为所有浏览器所支持，但这个能省去100多字节(对于日PV百万级以上的站点，能省下不少的流量)的头部已可以完美的兼容了。

如果对浏览器解析模式有研究的话，应该知道，页面在没有定义doctype的情况下会触发怪异模式，而只要定义了<!doctype html>浏览器就可以在标准模式下解析页面，而不需要指定某个类型的DTD。

2．新的语义化标签体系语义化编码是一个合格前端开发者必备的技能，但随着网页的日渐丰富化，仅仅用原有的xhtml标签去语义化显然已经力不从心。

于是，HTML 5提供了一系列新的标签及相应属性，以反应现代网站典型语义。

下面以具体的实例来说明，如下组成。

编码整洁，也符合XHTML的语义化，即便是在HTML 5中也可以很好的表现。

HTML5+CSS3 Web前端设计基础教程第3版(第5章)

relative 相对，元素虽然偏移某个距离，但仍然占据原来的空间
absolute 绝对，元素在文档中的位置会被删除，定位后元素生成一个块级元素
5.2 CSS 定位
5.2.1 静态定位和固定定位 1．静态定位（static） 2．固定定位（fixed）
图5-10 鼠标为滚动时左侧导航固定
图5-11 页面滚动后左侧导航仍然固定
图5-5 父级容器宽度不够的情况
图5-6 浮动的容器相互拥挤的情况
5.1 浮动与清除浮动
5.1.2 清除浮动的三种方法
1．方法一：额外增加应用“clear: both;”规则的空容器在浮动元素后额外增加一个空容器，比如“<div class="clear"></div>”，然后在CSS中赋予.clear{clear:both;}属性即可清理浮动。
2．方法二：使用“overflow: ”规则清除浮动向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动，在添加overflow属性后，浮动的容器又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3．方法三：使用:after伪元素清除浮动 :after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时，首先给浮动的容器添加一个名为“clearfix”的Class，然后给这个Class添加一个:after伪元素实现在容器末尾添加一个看不见的容器以清理浮动。
5.2 CSS 定位
CSS有关定位的属性包括position、z-index（层叠顺序）、top、 left、right、bottom和clip。
表5-1 position属性的取值及其含义

css contain的用法

css contain的用法`contain` 是一个CSS 属性，用于设置元素的大小和位置，使其完全包含在指定的区域内。

这个属性通常用于`div`、`span` 等块级元素。

以下是`contain` 属性的基本用法：1. 设置宽度和高度：使用`contain` 属性时，可以设置元素的宽度和高度，以确保其完全包含在指定的区域内。

例如：```css.container {width: 200px;height: 100px;contain: center;}```2. 设置位置：除了设置宽度和高度之外，还可以使用`contain` 属性设置元素的位置，以确保其居中。

例如：```css.container {width: 200px;height: 100px;contain: center;}```在这个例子中，元素将根据其父容器的尺寸居中。

3. 结合其他属性：可以使用`contain` 属性与其他CSS 属性相结合，以实现更复杂的设计效果。

例如：```css.container {width: 200px;height: 100px;contain: center;margin: 0 auto;}```在这个例子中，元素将根据其父容器的尺寸居中，并且具有固定的宽度和高度。

需要注意的是，`contain` 属性在某些浏览器中可能不被支持。

在这种情况下，可以考虑使用其他方法（如`position: relative` 和`transform: center`）来实现类似的效果。

HTML5+CSS3网页设计基础第六章 CSS盒子模型

HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第11页
6.2.2 盒模型的宽和高

4. 元素类型与元素类型转换
(1) 文档中元素都可以划归为 block和 inline两种类型块级元素(block)，块级元素的宽度为100%，始终占据一行。<h1>~<h6>、<p>、<ul>、<ol>、<li>、<table>、 <div>和<body>等元素都是块级元素。行级元素(inline)，行级元素没有高度和宽度，行级元素前后没有换行符，没有固定的形状，显示时只占据其内容的大小。<a>、<img>、<strong>、<b>、<em>、<i>、 <span>和表单元素等都是行级元素。
第6章 CSS盒子模型
本章概述本章的学习目标主要内容
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第1页
本章概述

盒模型是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子。一个盒子包括content （实际内容）、padding（内边距）、border （边框）和margin（外边距）。本章将具体介绍盒子的各种外观属性和背景属性及其设置方法。
第6章 CSS盒子模型

HTML5+CSS3网页设计基础
第21页
6.2.5 案例制作

制作完成演示案例:首页企业新闻局部页面。参考代码 6-2.html
HTML5+CSS3网页设计基础

CSS3弹性布局内容对齐（justify-content）属性使用详解

CSS3弹性布局内容对齐（justify-content）属性使⽤详解内容对齐（justify-content）属性应⽤在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

该操作发⽣在弹性长度以及⾃动边距被确定后。

它⽤来在存在剩余空间时如何加以分配，也会在发⽣内容溢出时影响项⽬的对齐。

注意：弹性布局中有两个基本术语main axis和cross axis，⼀般情况下，我们可以把它们各⾃看作是屏幕上的⾏向和列向（但是严格讲，这和写模式以及弹性流⽅向有关）。

那么main-start和main-end就可以分别被看作是弹性容器的左右边。

justify-content语法如下：justify-content: flex-start | flex-end | center | space-between | space-around参数说明如下：flex-start弹性项⽬向⾏头紧挨着填充。

这个是默认值。

第⼀个弹性项的main-start外边距边线被放置在该⾏的main-start边线，⽽后续弹性项依次平齐摆放。

flex-end弹性项⽬向⾏尾紧挨着填充。

第⼀个弹性项的main-end外边距边线被放置在该⾏的main-end边线，⽽后续弹性项依次平齐摆放。

center弹性项⽬居中紧挨着填充。

（如果剩余的⾃由空间是负的，则弹性项⽬将在两个⽅向上同时溢出）。

space-between弹性项⽬平均分布在该⾏上。

如果剩余空间为负或者只有⼀个弹性项，则该值等同于flex-start。

否则，第1个弹性项的外边距和⾏的main-start边线对齐，⽽最后1个弹性项的外边距和⾏的main-end边线对齐，然后剩余的弹性项分布在该⾏上，相邻项⽬的间隔相等。

space-around弹性项⽬平均分布在该⾏上，两边留有⼀半的间隔空间。

如果剩余空间为负或者只有⼀个弹性项，则该值等同于center。

否则，弹性项⽬沿该⾏分布，且彼此间隔相等（⽐如是20px），同时⾸尾两边和弹性容器之间留有⼀半的间隔（1/2*20px=10px）。