一.html5 + css3

html结构语言

特点

  1. 通过浏览器解析
  2. 文件名为html或htm

css样式语言(样式表)

本质:实现表现与结构分离的样式设计语言

特点

  1. 控制网页的视觉表现及简单交互
  2. 通过浏览器解析
  3. 文件名为css

css引用方式:(优先级)行内样式>内嵌样式>外部样式

css选择符

  1. 标签本身(名称)
  2. 标签特定属性:id/class
  3. 标签的某种状态(伪类)
<!DOCTYPE html><!--html文档的文档类型生明:这是一个html文档,版本是5-->
<html><!--html标签:html文档正式开始-->
<head lang="en"><!--html文档头部区域  head区域:给浏览器说明html文档的一些相关属性或设置-->
    <meta charset="UTF-8"><!--元信息标签,给网页添加一些相关信息或设置   charset:字符集。指定此网页的编码是UTF-8-->
    <!--常见编码:国际化--UTF-8/中文编码--GBK-->
    <title></title>
    <meta name="keywords" content="web前端开发"><!--浏览器可识别的关键字-->
</head>
<body><!--表示html文档的主题区域-->

</body>
</html><!--html标签:html文档正式结束-->

二.选择符

css常用选择符

  1. 标签选择符:标签名称 主要对网页文档的基础标签做统一的标准化设定
  2. id选择符
  3. class类选择符

css组合选择符

  1. 通配选择符(*):适配文档中所有html对象 用于定义html文档中所有对象的基础样式(消除浏览器默认设置的基础样式 ,根据就近原则,放在css代码首行)
  2. 包含选择符:(父级对象a 子级对象b)     根据html对象的嵌套关系,指定某个元素的子级元素样式 选择符对象可以是多重包含,样式仅作用于最后的内部对象
  3. 群组选择符:对象a,对象b,对象c
  4. 指定选择符:标签名.class类名 主要适用于在使用了某个class类的所有html对象中特别指定的某一类标签

其余

  1. 后代选取器(以空格分隔)
  2. 子元素选择器(以大于号分隔)
  3. 相邻兄弟选择器(以加号分隔):可选择紧接在另一元素后的元素,且二者有相同父元素
  4. 普通兄弟选择器(以破折号分隔~):所有相邻兄弟
  5. 伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

三.盒子模型

css核心盒子模型(box model)

本质:将css作用的选择符对象当做盒子对待

标准盒子模型 :

  1. margin
  2. border :  3要素     宽度,样式,色彩
  3. padding(无负值)
  4. content

方向性复合属性值得缩写方法

  1. 上下/左右   (padding:12px  12px)
  2. 上/左右/下 (padding:12px  12px  12px)
  3. 上/右/下/左 (padding:12px  12px  12px  12px)

标准盒子:盒子自身整体尺寸=内容宽/高+内边距+边框的总合

HTML5+CSS3    1-LMLPHP

框架盒子:直接将宽高设为盒子自身的整体尺寸,如果带有内边距或边框,则通过缩小内容区域实现

二者转换

box-sizing:content-box(标准盒子)/border-box(框架盒子)

四.块级元素和行间元素

块级元素(默认display:block)

特点

  1. 独占一行(该元素前后的其他内容都要换行)
  2. 直接适用盒模型的所有css属性
  • <div> <header><section><footer><aside><nav>**页面布局类标签
  • <h1></h1>
  • <p></p>
  • <ul></ul>之类
  • <form></form>

行间元素(默认display:inline)

特点

  1. 不独占一行,多个行间元素可以在一行中呈现
  2. 部分适用css盒模型属性
  3. 宽度由装载的内容决定,宽度设置无效
  4. 由于受到行的限制,高度及上下方向的边距设置无效(padding-top/bottom)
  • <span>  <a> 
  • <strong></strong>    重点强调
  • <em></em>        一般强调

注意:

  • 块状元素可以嵌套块状元素或行间元素
  • 行间元素只能嵌套行间元素,不能嵌套块级元素
  • 块级元素本身即是‘盒子’,行间元素需要转换后变成‘盒子

标签(元素)的状态转换

display:设置对象的显示方式

  1. block:转化为块级元素
  2. inline:转化为行间元素
  3. inline-block:转化为行间-块级元素(实现同在一行中的行间元素能适用盒模型属性)
  4. none:对象呈现为无(元素在页面中消失)

对应inline-block显示模式的html元素:(主要应用于需要存在于一行中的元素设置盒模型属性)

  • 本身是inline元素,但视觉表现上按照block效果呈现,可以直接适用盒模型属性
  • 这类元素通常是代表的页面中外部引入的文件,或直接定义好的控件
  • 如<img src=""><input>

display:none应用

元素将在视觉上彻底消失,不保留物理空间

五.布局标签

布局标签:用于页面区域布局,都是块级元素

HTML5新增布局标签

  • <header></header>   头部
  • <footer></footer>   底部
  • <nav></nav>    导航
  • <section></section>    文档中章节,区段,板块等
  • <aside></aside>     侧边栏
  • <article></article>     文章/文档

HTML5布局优势

  1. 页码更简单,高效
  2. 新布局标签的明确语义告知浏览器在页面中的位置和结构意义,增强了对搜索引擎的友好性
10-05 15:52