前端学习之HTML5＋CSS3基础

HTML5

1.HTML语法规范

2.HTML常用标签：

（1）语义标签

（2）标题标签<h1>-<h6>

（3）段落和换行标签<p> </p>，<br/>（单）

（4）文本格式化标签：加粗<strong>/<b>，倾斜em/i，删除线del/s，下划线ins/u

div大盒子，独占一行。span小盒子

（5）图像标签<img src＝“imj.jpg”>等

路径：相对/绝对路径

（6）超链接标签：<a href=“ 目标”target＝“ 弹出方式_self/blank”> 文本或图像 </a>

（内部/外部链接/空链接/下载链接/网页元素链接/锚点链接）

（7）表格标签：table,tr,td,th表头

及其相关属性

（8）列表标签

（9）表单标签

由表单域，表单控件（表单元素），提示信息三个部分组成

〈input type＝“ ” name＝“” value＝“” checked maxlength 〉

CSS3

1.基础选择器：

标签选择器，类选择器，id选择器，通配符选择器

2.复合选择器

后代选择器：元素1 元素2{}

子选择器：元素1＞ 元素2{}

并集选择器：元素1， 元素2{}

伪类选择器：

a：link/visited/hover/active{}

input：focus{}

3.字体属性：

font-family：''（字体）

font-size/weight/style：（大小/粗细/样式）

4.文本属性：

颜色

对齐文本：text-align：center/left/right

装饰文本：text-decoration：none/underline

文本缩进：text-indent：2em；

行间距：line-height

5.引入方式：

内部/行内/外部样式表

外部.css文件

HTML中〈link rel＝“stylesheet” herf＝“css文件路径”〉

6.Chrome调试工具使用

7.Emmet语法

快速生成HTML/CSS结构语法

8.元素显示模式

9背景相关

10.盒子模型

边框border

内边距padding

外边距margin：0 auto（常用）

行内元素水平居中text-align：center；

清除内外边距

圆角边框 border-radius：10px；

盒子阴影 box-shadow

文字阴影 text-shadow

11.浮动及其清除方式

基本语法

12.定位