Html及CSS知识点概括

最新推荐文章于 2021-10-14 20:40:23 发布

没心没肺可苦可乐

最新推荐文章于 2021-10-14 20:40:23 发布

阅读量252

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/qq_17492249/article/details/86579324

版权

HTML/CSS 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

html4.0

web 标准

结构（html）,行为（js）,表现（css）

html概念

超文本标记语言

h5文档声明及其作用

<!doctype html>

告知浏览器使用哪种html或xhtml规范

html元素

块元素
- h1-h6,p,div,ul,ol,li,dl,dt,dd,form,table,tr,td,th,hr,fieldset
内联元素
- a,span,strong,b,em,i,label
  - 超链接如何在新窗口打开 target="_blank"
- 内联块元素
  - img,input,textarea,select
    - alt和title的区别
    - 相对路径的三种写法
可变元素

表格（作用：显示数据）

表格相关html元素
- table,tr,td,th,caption
  - 表格行分组：thead,tbody,tfoot
表格相关html属性
- 合并行：rowspan 合并列：colspan
- 水平对齐：align="left|center|right"
- 垂直对齐：valign="top|middle|bottom"
表格重要css属性
- 合并相邻单元格边框 border-collapse:collapse;

表单（作用：搜集用户信息）

表单元素
- 文本框，密码框，提交按钮，单选按钮，复选按钮 <input type="***"/>
- 下拉列表（select），文本域（textarea）
表单重要html属性
- checked 选中状态单选或复选
- disabled 禁用状态的表单元素
- placeholder 添加默认提示信息
- required 必填项，不能为空
- autofocus 自动聚焦
如何取消h5表单验证
- novalidate
h5新增表单type属性值
- type="email"
- type="url"
- type="range"
- type="number"
表单字段集及表单字段集标题
- fieldset,legend
表单的组成：表单域，表单控件，提示信息（label）

div的作用：主要用来划分板块

iframe如何去掉或隐藏滚动条： scrolling="no"

css

css语法及其特点

层叠样式表
实现了结构与表现相分离

css样式表的创建

内联样式（行内，行间样式）
- <h1 style="color:red;"></h1>
内部样式（嵌入式样式）
- <style type="text/css"></style>
外部样式
- 使用link引入
  - <link rel="stylesheet" type="text/css" href="1.css"/>
- 使用@import
link和@import引入外部样式的区别
- 老祖宗区别
- 加载顺序不同
- 浏览器支持性不同
- 对js改变dom不同
样式表的优先级
- !important>内联>内部>外部

css2.0选择器

id选择器
- <p id="box"></p> #box{color:red;}
class选择器
- <div class="box box1"></div> .box{color:blue;}
元素选择符（类型选择符，标签选择器）
- a{text-decoration:none;}
后代选择器
- .box a{font-size:12px;}
群组选择器
- ul,ol{list-style:none;}
通配符
- *{margin:0; padding:0;}
伪类选择器
- a:hover
- 滑过父元素，控制子元素的变化

css选择器权重

内联：1000 id:100 class,伪类，属性： 10 标签选择器，伪元素：1
css层叠的含义
- !important>内联>内部>外部
- id>class>标签
- 权重相同时取后面定义的样式

css核心属性

字体类属性
- 字体类型 font-family:"微软雅黑",Arial;
- 字体大小 font-size:16px|1em|medium;
- 字体加粗 font-weight:normal|bold|bolder|100-900;
- 字体颜色 color:#000|rgb(0,0,0)|black;
文本类属性
- 水平对齐方式
  - text-align:left|center|right|justify;
- 行高
  - line-height (行高不允许设置负值)
- 文本修饰
  - text-decoration:none|underline|line-through|overline;
- 首行缩进
  - text-indent 设置为较大负值时会有隐藏效果
- 垂直对齐方式
  - vertical-align:baseline|top|middle|bottom;
背景类属性
- 背景色
  - background-color
- 背景图
  - background-image:url(1.jpg);
- 背景平铺属性
  - background-repeat:no-repeat|repeat|repeat-x|repeat-y;
- 背景图位置
  - background-position:left|center|right|数值 top|center|right|数值;
- 背景简写属性
  - background:#f00 url(1.jpg) repeat-x left bottom;
- 背景图尺寸
  - background-size:数值|百分比|cover|contain;
浮动属性
- float:none|left|right;
- clear:none|left|right|both;

css盒模型

content
- width
- height
padding
- 背景可以延伸到padding区域
- 当需要调整子元素在父元素中位置关系时，给父元素设置padding
- padding不允许设置负值
border
- border:3px solid|dashed|dotted|double red;
- 使用border属性实现三角效果
- 背景可以延伸到border区域，当设置为实线时，会遮挡背景
margin
- 背景不能延伸到margin区域
- margin可以设置负值
- 当需要调整元素之间的位置关系时，给本元素设置margin
标准盒模型和怪异盒模型的区别和转换
- box-sizing:border-box; 标准转为怪异
- box-sizing:content-box; 怪异转为标准

标准盒模型

总宽度
- width+左右padding+左右border+左右margin
总高度
- height+上下padding+上下border+上下margin

怪异盒模型

总宽度
- width+左右margin
总高度
- height+上下margin

元素类型转换

display
- block
- inline
- inline-block
  - img,input
- none
  - 元素隐藏不可见的两种方式
    - display:none;
    - visibility:hidden;
- list-item
- table
  - 不定宽块元素水平居中
- table-cell
  - 不定宽高的子元素在父元素中水平垂直都居中
- flex
  - 弹性盒

定位（层模型）position

默认值： static
绝对定位： absolute
- 具有定位属性的父包含块
相对定位：relative
- 元素偏移前的位置
固定定位： fixed
- 浏览器窗口
相对定位和绝对定位的区别
透明度 opacity:0-1; 如何兼容IE6 filter:alpha(opacity=0-100);
定位层叠属性 z-index

锚点链接

目标伪类选择器

溢出

容器溢出
- overflow:hidden|scroll|auto|visible;
文本溢出
- 单行文本省略号设置（四个条件缺一不可）

宽高自适应

宽度自适应
- 通栏效果
高度自适应
- 最小高度 min-height 如何IE6
- 高度塌陷问题解决方案及其优缺点
伪元素
- :before
- :after
居中
- 文本，图片等行内元素水平居中
  - 父元素{text-align:center;}
- 定宽块元素水平居中
  - 左右margin为auto
- 不定宽高的元素在屏幕窗口水平垂直都居中
  - 固定定位 position:fixed; left:0; top:0; right:0; bottom:0; margin:auto;
  - html,body{height:100%;} body{display:flex; justify-content:center; align-items:center;}
  - position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
- 不定宽高的子元素在父元素中水平垂直都居中
  - 相对定位结合绝对定位
  - 父元素{display:table-cell; text-align:center; vertical-align:middle;}
  - 弹性盒
  - css3变形

图片整合的概念及优势

css3圆角

border-radius:50%;

常见兼容性问题

双倍浮动bug
- display:inline;
表单元素行高不一致
- float:left; 或 vertical-align:middle;
图片默认有空隙
- display:block;或float:left;
图片添加超链接有边框
- border:0;
IE6下不识别高度小于10px的容器
- overflow:hidden;
鼠标指针bug
- cursor:pointer;
opacity低版本IE浏览器不识别
- filter:alpha(opacity=30)
min-height属性IE6不识别
- _height:100px;

css hack(过滤器)

下划线属性过滤器
- _height:100px;
!important关键词过滤器
- height:100px!important;

五大浏览器内核及其代表作品

IE内核
- Trident
Mozilla Firefox
- Gecko
Safari,Chrome
- Webkit
Opera
- Presto
联合开发
- Blink

seo优化

站内优化

页面主体优化（给网站添加标题）
页面头部优化（添加关键词和描述）
添加网站导航或网站地图
添加友情链接
图片添加alt和title
尽量避免使用flash或图片热点链接，给a添加title属性

站外优化

网站品牌建设，百度推广，网站流量分析

h5新标签

结构性标签

header,footer,nav,section,article,aside,hgroup,figure,figcaption,dialog

其他h5标签

mark,meter,progress

音频

audio 支持的音频格式：mp3,ogg,wav

视频

video 支持的视频格式：mp4,ogg,webm

css3选择器

基本选择器

id,class,*,群组，元素

层次选择器

E F 后代选择器
E > F 子选择器
E + F 相邻兄弟选择器
E～F 通用兄弟选择器

伪类选择器

结构性伪类选择器
- :first-child :last-child :nth-child(n)
- :first-of-type :last-of-type :nth-of-type(n)
目标伪类选择器
- E:target E是指锚点链接连接到那个元素
UI状态伪类选择器（form表单元素）
- E:checked 匹配选中状态的单选或复选按钮
- E:enabled 匹配启用状态的表单元素
- E:disabled 匹配禁用状态的表单元素