自己总结的HTML+CSS详细基础知识

HTML+CSS详细基础知识

一、 初识HTMLl5？

HTML5 ( 超文本 标记 语言)

HTML5 (HyperText Markup Language) -----超文本标记语言

CSS3 （Cascading Style Sheets）---------层叠样式表

JavaScript（脚本语言）------------------动态页面交互

二、HTML标记标签（标记语言）

​ ①标记标签一般成对出现 （也存在单标记）

​ ②HTML 标签是由尖括号包围的关键词

三、 常用的超链接a标签

① href 属性： 代表跳转地址

② target=“_blank” ：页面跳转新窗口打开！

③ base标签，通常在head标签内写，切记！

④实现瞄点链接跳转

实现一：

​ #号

​ Id属性 往id值上跳转

实现二：

#号

name属性 链接往链接上跳

当做锚点链接的时候，注意 # 号问题。

常用图片格式：

1.gif动态图片

2.jpg是一种比较常见的图片格式

3.png透明图片

video视频标签

①video 与 /video 标签对里插入的内容是提供给不支持 video 元素的浏览器显示的。

③video标签也需要设置宽度和高度

④需要添加视频路径地址

⑤需要添加播放控件control属性

⑥常用的视频格式：

1、Mp4

2、Webm

3、Ogg

audio 音频标签

① 在 与 之间你需要插入浏览器不支持的元素的提示文本 。

② 需要添加音频路径地址

③ 需要添加播放控件control属性

④ 常用的音频格式

MP3

Webv

​Ogg

四、元素转换问题：

1、块级元素

①默认独占一行
② 自动换行
③ 支持添加宽度和高度
④ 可以嵌套任意内容
⑤ 支持margin
⑥ 支持padding
⑦ 主要用来布局
⑧ 常见的块级元素有： div、p、ul、ol、li、table、等。

2、行内元素

① 不换行，只占据自己本身位置
②不支持设置宽高（宽度与内容决定）
③行内元素不支持嵌套块级元素
④ margin上下无效，左右有效。
⑤ padding上下无效，左右有效。
⑤上下只对自身有效
⑥常见的行内元素有： span、 a、 b、 i、等。

3、行内块级元素

① 可以设置宽高
② 它是块级元素以行内形式显示
③ 典型的行内块元素： img标签
​

五、通过样式转换行块级元素

display:none-----隐藏对象

display:block-----转换块级元素

display：inline— 转换行内元素

display：inline-block—以行内元素形式排列以块级元素样式显示。

六、最大最小宽高问题：

max-height200px 小于等于200像素

min-height:200px 大于等于200像素

宽度同理

七、HTML5中，常用的语义化标签

header 定义了文档的头部区域
aside 定义页面内容之外的内容。
section 定义文档中的节（section、区段）。
footer 定义页面页脚部分
nav 定义运行中的进度（进程）。

八、 div标签------（盒子模型）

①盒子模型占位宽：

自身宽（width）+左右内边距(padding)+左右边框(border)+左右外边距(margin)

②盒子模型占位高：

自身高(height)+上下内边距(padding)+上下边框 (border)+上下外边距(margin) ，见图一。

CSS（层叠样式表）部分重点常识

① 样式初始化：使用*通配符选择器进行样式初始化，在大型项目开发中，并不建议使用初始化样式，会占用网站性能。为了避免这种现象，我们可以单独把用到的标签，单独列出来，单独定义初始化样式，同时为了代码冗余，也可以写在一行（多元素选择器），用“ ,“号隔开。

background-color

background-image

background-position

background-repeat

backgroung-attachment 背景图随滚动条移动的方式

background-clip	规定背景的绘制区域。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸。

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

border-bottom-left-radius 属性定义左下角边框的形状。

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示

border-spacing 属性设置相邻单元格的边框间的距离（仅用于"边框分离"模式）。

border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值

box- align属性指定box的子元素如何对齐。

font-style属性指定文本的字体样式。

letter-spacing 属性增加或减少字符间的空白（字符间距）

list-style-image 属性使用图像来替换列表项的标记。

list-style-position属性指示如何相对于对象的内容绘制列表项标记。

list-style-type 属性设置列表项标记的类型。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

Opacity属性设置一个元素了透明度级别。

order 属性 设置或检索弹性盒模型对象的子元素出现的順序。

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

text-align属性指定元素文本的水平对齐方式。

text-shadow 属性应用于阴影文本。

visibility属性指定一个元素是否是可见的。

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transition 属性设置元素当过渡效果，四个简写属性为：

· transition-property

· transition-duration

· transition-timing-function

· transition-delay

box-sizing: 盒尺寸，可以改变盒子模型的展示形态。

① 不用再去计算一些值

② 可以解决一些100% 的问题

text-transform**：**

text-transform:capitalize /是首字母大写/

text-transfrom:lowercase /是全部字母为小写/

text-transfrom:uppercase /是全部字母为大写/

cursor**：手势的样式，默认箭头。还可以自定义手势，切记有图片格式要求 .ico**

盒子模型的一些问题：

1、 margin****叠加问题，出现在上下margin同时存在的时候，会取较大的值作为叠加值。

2、 margin****传递问题，出现在嵌套结构中，只是针对margin-top的问题。

扩展：自适应问题：左右自适应是可以的，但是上下自适应是不行的。

宽高不设置的时候，盒子模型的影响，

CSS****选择器都有哪些？

Id 选择器

class 选择器

通配符选择器

标签选择器

并列选择器

分组选择器

伪类选择器

后代选择器

子代选择器

兄弟选择器

相邻选择器

属性选择器

CSS****复合样式：

复合写法：把样式写在一条中，空格隔开。有的不关心顺序，有的关心顺序。开发项目常用

注意：先写复合样式，再写单一样式。

**
**

1**、选择器优先级问题**

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

2**、样式问题：**

行间样式（内联样式） > 内部样式 == 外部样式

3**、css样式权重：**

\1. id选择器的权值为100

\2. class、属性和伪类选择器的权值为10

\3. 标签选择器、伪元素的权值为1

\4. 权值较大的优先级越高

\5. 比较样式时，将对应的选择器权值相加，大的优先级高

\6. 权值相同的，根据从上往下的原则，后定义的优先级高

\7. 特殊！important，优先级最高，权值1000

3、标签引入外部样式，属性有 rel、type、href等。常用

rel --指定链入页面与样式表之间的关系。

type-- 指定引入文档的类型。

href – 链接资源的地址。

4、css中颜色值问题：（怎样获取颜色值）

主要分为三种类型：

① 英文单词表示法（土鳖式）

② 十六进制表示法（颜色代码）

③ RGB/RGBA 三原色表示法 （颜色函数）

取值范围 0~255

网页的整体结构：

·----文档声明：声明是浏览器html文件

-----html的最外层标签，包裹着所有htm标签代码。

告诉搜索引擎爬虫，我们的网站是关于什么内容的。

“en”表示是一个英文网站，“zh-cn“就表示一个中文网站。

----整个网页编码问题（国际编码），让网页不出现乱码问题。 ------定义网页中的标题

HTML5 注释：在浏览器中看不到，在代码中可以看到。

① 网页注释写法

② CSS注释写法 /* */

③ Js代码注释 //

表格标签：

----- 定义表格标题 ------ 表格的最外层容器 ------- 表格的行 ------- 表格的表头 ------- 定义表格内容

注意：他们之间是有嵌套关系的，要符合规则。

表格的语义化标签：

----可以出现多次

表格的常用属性：

表单标签：

<from action=’’ method=’get/post’****>

input （单标签) ------输入框标签

表单相关标签：

** -----**多行文本框

** -------**下拉菜单

multiple 多选

**------**辅助表单