2022年html与css的知识点 .pdf

《2022年html与css的知识点 .pdf》由会员分享，可在线阅读，更多相关《2022年html与css的知识点 .pdf（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML 与 CSS第二遍1.HTML 是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2.CSS样式是表现。 就像网页的外衣。比如， 标题字体、 颜色变化， 或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。3.JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。4. font-size 字体大小text-align:center 文字居中5. 注释   空格

2、6. 关于 html 的一些标签 表示强调斜体 表示更强烈的强调粗体两者是强调一段话中的关键字是使用 设置单独的样式 引用短文本引用某个作家的一句诗 引用长文本一段文字 设置水平横线没有结束标签文本地址 为网页加入地址信息 在文本中加入一行代码 加入多行代码 添加信息列表无序 排行榜在网页中默认样式一般为：每项前自带一个序号 网页上的表格整个表格以table 开始 表格中的内容全部下载完后才会显示若没有 标签，表格会下载一点显示一点 行数 列数 表格头部的一个单元格表格表头精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - -

3、 - - -第 1 页，共 6 页 - - - - - - - - - - tr td,th 利用 css样式表，为表格添加边框 为表格添加标题 添加摘要但摘要内容不会在浏览器中显示 超链接 默认在当前浏览器窗口中打开，链接到另一个页面 在新建浏览器窗口打开 点击链接会打开电子邮件应用，参数可以是邮件主题subject=”;邮件内容body=”; 利用 HTML 表单（ form）与用户进行交互;把浏览者输入的数据传送到服务器端method=(get/post) 传送方式action:浏览者输入的数据被传送到的地方 文本输入框密码输入框 文本 在表单中输入大段文字时，用文本输入域 Radio

4、为单选框checkbox 为复选框当 checkbox=” checkbox ”时，选项被默认选中显示的值 下拉列表框selected=”select ed” 设置成这样代表选项默认选中 提交按钮 重置按钮 控件包括：文本框、密码框输入，单选框、复选框，7.css的样式代码定义 HTML 内容在浏览器内的显示样式/* 注释语句 */ font-size: 字体大小、字号color: 字体颜色font-weight: 字体粗细font-weight:bold 粗体line-height: 行间距设置word-spacing: 单词间距设置letter-spacing: 字母与字母之间间距font

5、-family: 设置字体bodyfont- familt:”宋体” ; font-style:italic斜体精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 2 页，共 6 页 - - - - - - - - - - text-decoration:underline;设置下划线text-decoration:line-through 设置删除线text-align:center 文字居中text-align:left 文字居左text-align:right 文字居右8.CSS样式代码方法有：内联式、

6、嵌入式、外部式内联式：把css代码直接写在HTML 的标签中嵌入式：把css代码写在 之间 span 需要加 css样式的标签有： 等外部式：把css代码写一个单独的外部文件中以.css 为扩展名，在 内使用 标签将 css样式文件链接到HTML 文件内 后面两个是固定写法三种方法的优先级：内联式嵌入式 外部式9.css选择器标签选择器： HTML 文件中的标签，有 P样式代码 类选择器：标签中加入class 在 script 中的 css样式代码为：.类选择器名称 样式代码 如： .span ID 选择器：在标签中加入id ID 选择器只能在文档中使用一次#id 名 样式代码子选择器：（ ）

7、用于选择指定标签元素的第一代子元素仅仅指直接后代.id 名第一代子元素样式代码 包含选择器：空格.id 名 后代元素所有指定的后代元素通用选择器： （*）作用是匹配HTML 所有标签元素* 伪类选择符：给HTML 的标签鼠标滑过的状态设置字体颜色a:hover 可以兼容所有浏览器分组选择器： （， ）为多个标签设置同一个样式h1,span 10.css继承： css样式不仅应用于某个特定的HTML 标签元素，而且应用于其后代pcolor:red; 三年级时，我还是一个胆小如鼠 的小女孩。 上面例子，颜色不仅应用于p 标签，还应用于span 标签精品资料 - - - 欢迎下载 - - - - -

8、 - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 3 页，共 6 页 - - - - - - - - - - Css特殊性：为同一个元素设置不同的css代码，权值大，优先级大P 权值为 1 p span 为 1+1=2 .类名 为 10 P span.类名 为 1+1+10=12 #id 名 为 100 css 层叠：为同一个元素设置不同的css 并且权值相同时， 根据 css 样式的前后顺序决定，在最后面的css 样式被应用。为某些样式设置最高权值pcolor:red!important; 11.css 将 HTML标签元素分为三种：块状元素，内联元素（

9、行内元素），内联块状元素常用的块状元素有： 、.、 、 、 、 、 、 、 常用的内联元素有：、 、 、 、 、 、 、 常用的内联块状元素有：、 12. 块级元素： display：block 将元素显示为块级元素 adisplay:block 使 a 元素具有块状元素特点块级元素特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行。一个块级元素独占一行元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100% （和父元素的宽度一致），除非设定一个宽度。13. 内联元素： display:inline 将元素设置为块状元素 divdisplay:

10、inline 使 div 元素具有内联元素的特点内联元素特点：和其他元素都在一行上元素的高度、宽度及顶部和底部边距不可设置元素的宽度就是它包含的文字或图片的宽度，不可改变14. 内联块状元素：dispiay:inline-block 特点：和其他元素都在一行元素的高度、宽度及顶部和底部边距可设置15. 盒模型一个块级元素相当于一个盒模型边框： border 设置粗细、样式、颜色 border-top/bottom/left/right: 样式包括： dashed 虚线 dotted 点线 solid 实线填充： padding 边框与内容之间的距离 padding-top/bottom/lef

11、t/right 边界： margin 元素与另一个元素的距离padding 和 margin 的区别， padding 在边框里， margin 在边框外盒子的宽度等于+左右边框 +左右填充 +内容宽度精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 4 页，共 6 页 - - - - - - - - - - 16.css布局模型：流动模型flow 浮动模型float 层模型layer flow 默认网页布局模型块状元素自上而下垂直分布内联从左到右水平分布显示float 能够让两个块状元素水平发布float

12、:left 左浮动float:right 右浮动层模型（ layer）三种形式：绝对定位absolute 相对定位relative 固定定位fixed 17.绝对定位position:absolute; 将元素从文档流中拖出来相对其最接近的一个具有定位属性的父包含块进行绝对定位，若没有，就相对body，即浏览器窗口。position:absolute; top/left/bpttom/right: px; 相对定位： position:relative 相对于以前的位置移动，偏移前的位置保留不动固定定位： position:fixed; 相对于屏幕内的网页窗口移动。由于视图本身是固定的，它不会

13、随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响1 是 2 的父元素，则1 进行相对定位，2 进行绝对定位用于下拉菜单18.水平居中设置行内元素通过给父元素设置text-align:center 来实现(文本水平居中) 定宽块状元素通过设置左右margin 值为 auto 来实现（整体居中）Width:200px; margin:20px auto; margin-left 与 margin-right 设置为 auto 不定宽块状元素: 1)加入 table 标签2)

14、给块状元素设置display:inline 具有行内元素特点,然后设置text-align:center 来实现3)父元素设置position:relative, 然后子元素设置position:relative;left:-50% 来实现居中19.垂直居中父元素高度确定的单行文本：height 与 line-height 高度一致父元素高度确定的多行文本：1) 插入 table ，同时设置vertical-align:middle 2)将块状元素display:table-cell 设置为表格单元显示display:table-cell;vertical-align:middle; 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 5 页，共 6 页 - - - - - - - - - - 文档编码：KDHSIBDSUFVBSUDHSIDHSIBF-SDSD587FCDCVDCJUH 欢迎下载 精美文档欢迎下载 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 6 页，共 6 页 - - - - - - - - - -