html与css的知识点

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

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

3、 ”摘要” 添加摘要但摘要内容不会在浏览器中显示超链接默认在当前浏览器窗口中打开，链接到另一个页面va href=目标网址” target= ” _blankv7a在新建浏览器窗口打开点击链接会打开电子邮件应用，参数可以是邮件主题subject= ” 邮件内容 body= ”；利用HTML表单(form )与用户进行交互；把浏览者输入的数据传送到服务器端method=(get/post)传送方式action:浏览者输入的数据被传送到的地方vform vinput typ e=text/ password n ame= 名称value=文本/ v/form 文本输入框密码输入框vtextarea

4、 rows=行数 ” cols列数”本 在表单中输入大段文字时，用文本输入域vinput type=radio/checkboxvalue=值name=名称checked=checked/Radio为单选框 checkbox为复选框当checkbox=f checkboXtf选项被默认选中显示的值 下拉列表框selected=f selectd 设置成这样代表选项默认选中vinput type= ” sub nit ” va提 e=f f 提交按钮vinput type= ” resetvalue= 重置重置按钮 控件包括：文本框、密码框输入，单选框、复选框，7.css的样式代码定义HTML内

5、容在浏览器内的显示样式/*注释语句*/fon t-size:字体大小、字号color:字体颜色font-weight:字体粗细 font-weight:bold 粗体lin e-height:行间距设置word-spacing: 单词间距设置letter-spacing:字母与字母之间间距font-family:设置字体 bodyfont-familt:宋体;fon t-style:italic斜体text-decoration:underline;设置下划线text-decoration:line-through设置删除线text-align:center 文字居中text-align:le

6、ft 文字居左 text-align:right 文字居右8.CSS羊式代码方法有：内联式、嵌入式、外部式内联式：把css代码直接写在 HTML的标签中嵌入式：把 css代码写在 /style之间 spafls:yle需要加 css样式的标签有： 等外部式：把css代码写一个单独的外部文件中以.css为扩展名，在内使用标签将css样式文件链接到 HTML文件内嵌入式外部式9.CSS选择器标签选择器： HTML 文件中的标签，有 卩样式代码类选择器：标签中加入 class 在script中的css样式代码为：.类选择器名称样式代码如如： .spanID选择器：在标签中加入idID选择器只能在文档

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

8、个元素设置不同的css代码，权值大,优先级大P 权值为 1 p span 为 1+1=2.类名 为 10P span类名为 1+1+10=12 #id 名css 层叠：为同一个元素设置不同的 css 并且权值相同时， 在最后面的 css 样式被应用。为某些样式设置最高权值11.CSS将HTML标签元素分为三种：块状元素，内联元素（行内元素），内联块状元素常用为 100根据 css 样式的前后顺序决定， pcolor:red !important ;的块状元素有： 、.、 、 常用的内联元素有： 、 、 、 、 、 、 、 、 、 、 常用的内联块状元素有：、 12. 块级元素： display

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

10、素： dispiay:inline-block特点：和其他元素都在一行 元素的高度、宽度及顶部和底部边距可设置15. 盒模型 一个块级元素相当于一个盒模型边框： border 设置粗细、样式、颜色 border-top/bottom/left/right:样式包括： dashed 虚线 dotted 点线 solid 实线填充：padding边框与内容之间的距离 padding-top/bottom/left/right边界：margin元素与另一个元素的距离padding和 margin的区别， padding 在边框里， margin 在边框外盒子的宽度等于 +左右边框 +左右填充 +内容

11、宽度16.css 布局模型：流动模型 flow 浮动模型 float 层模型 layer flow 默认网页布局模型 块状元素自上而下垂直分布 内联 从左到右水平分布显示float 能够让两个块状元素水平发布float:left 左浮动float:right 右浮动层模型（layer）三种形式：绝对定位absolute相对定位relative 固定定位 fixed17.绝对定位 position:absolute; 将元素从文档流中拖出来相对其最接近的一个具有定位属性的父包含块进行绝对定位，若没有，就相对body，即浏览器窗口。position:absolute; top/left/bptto

12、m/right:px;相对定位： position:relative 相对于以前的位置移动，偏移前的位置保留不动固定定位： position:fixed; 相对于屏幕内的网页窗口移动。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化， 除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小， 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响1是 2的父元素，则 1进行相对定位， 2进行绝对定位 用于下拉菜单18.水平居中设置行内元素 通过给父元素设置 text-align:center 来实现 （文本水平居中 ）定宽块状元素 通过设置左右 margin 值为 auto 来实现 （整体居中）Width:200px; margin:20px auto; margin-left 与 margin-right 设置为 auto不定宽块状元素 :1）加入 table 标签2）给块状元素设置 display:inline 具有行内元素特点 ,然后设置 text-align:center 来实现3)父元素设置 position:relative, 然后子元素设置 positio