1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. font-size 字体大小
text-align:center 文字居中
4. 注释 <!—注释文字--> 空格
5. 关于html的一些标签
<em> 表示强调 斜体 <strong> 表示更强烈的强调 粗体
两者是强调一段话中的关键字是使用
<span> 设置单独的样式
<q> 引用短文本 引用某个作家的一句诗
<blockquote> 引用长文本 一段文字
<hr> 设置水平横线 没有结束标签
<address>文本地址</address> 为网页加入地址信息
<address><a href=” 网址 ”></a><.address>
<code> 在文本中加入一行代码
<pre> 加入多行代码
<ul> 添加信息列表 无序 <ul><Li> </li></ul>
<ol> 排行榜 在网页中默认样式一般为：每项<li>前自带一个序号
<ol><li> </li></ol>
<table> 网页上的表格 整个表格以table开始
<tbody> </tbody> 表格中的内容全部下载完后才会显示
若没有<tbody>标签，表格会下载一点显示一点
<tr> 行数 <td> 列数 <th> 表格头部的一个单元格 表格表头
<table> tr td,th{ } 利用css样式表，为表格添加边框
<caption> </caption> 为表格添加标题
<table summary=” 摘要”> 添加摘要 但摘要内容不会在浏览器中显示
<a> 超链接 <a href = > 默认在当前浏览器窗口中打开，链接到另一个页面
<a href=”目标网址” target=”_blank”> </a> 在新建浏览器窗口打开
<a href=mailto:地址？第一个参数&第二个参数&第三个参数>
点击链接会打开电子邮件应用，参数可以是邮件主题 subject=””;邮件内容 body=””;
<img src=”图片地址” alt=”图片下载失败时的替换文本” title=”对图形的描述”/>
<form method=”传送方式” action=”服务器文件”> </form>
利用HTML表单（form）与用户进行交互;把浏览者输入的数据传送到服务器端
method=(get/post)传送方式 action:浏览者输入的数据被传送到的地方
<form> <input type="text/password" name="名称" value="文本" /> </form>
文本输入框 密码输入框
<textarea rows=”行数” cols=”列数”>文本</textarea>
在表单中输入大段文字时，用文本输入域
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
Radio 为单选框 checkbox 为复选框 当checkbox=”checkbox”时，选项被默认选中
<select><option value=’向服务器提交的值’ select=”select”>显示的值 </option></select>
下拉列表框 selected=”selected”设置成这样代表选项默认选中
<input type=”subnit” value=”提交”> 提交按钮
<input type=”reset” value=”重置”> 重置按钮
<label for=”控件id名称”> 控件包括：文本框、密码框输入，单选框、复选框，
6.css的样式代码 定义HTML内容在浏览器内的显示样式
/*注释语句*/
font-size: 字体大小、字号
color: 字体颜色
font-weight: 字体粗细 font-weight:bold 粗体
line-height: 行间距设置
word-spacing: 单词间距设置 letter-spacing: 字母与字母之间间距
font-family: 设置字体 body{font-familt:”宋体”;}
font-style:italic 斜体
text-decoration:underline; 设置下划线
text-decoration:line-through 设置删除线
text-align:center 文字居中 text-align:left 文字居左 text-align:right 文字居右
7.CSS样式代码方法有：内联式、嵌入式、外部式
内联式：把css代码直接写在HTML的标签中
<p style=”color:red”></p>
嵌入式：把css代码写在<style type=”text/css”> </style>之间
<style type=”text/css”> span{ } </style> 需要加css样式的标签有：<P> <span> <h>等
外部式：把css代码写一个单独的外部文件中 以.css为扩展名，在<head>内使用<link>标签将css样式文件链接到HTML文件内
<link href=”外部文件名” rel=”stylesheet” type=”text/css”/> 后面两个是固定写法
三种方法的优先级：内联式>嵌入式>外部式
8.css选择器
标签选择器：HTML文件中的标签，有<p> <h> <body> <html> <span>
P{样式代码}
类选择器：标签中加入class <span class=””> </span>
在script中的css样式代码为： .类选择器名称{样式代码} 如：.span{}
ID选择器：在标签中加入id ID选择器只能在文档中使用一次}
#id名{ 样式代码
子选择器：（>）用于选择指定标签元素的第一代子元素 仅仅指直接后代
.id名>第一代子元素{样式代码}
包含选择器：空格 .id名 后代元素 所有指定的后代元素
通用选择器：（*） 作用是匹配HTML所有标签元素 *{ }
伪类选择符：给HTML的标签 鼠标滑过的状态设置字体颜色
a:hover{ } 可以兼容所有浏览器
分组选择器：（，）为多个标签设置同一个样式
h1,span{ }
19.css继承：css样式不仅应用于某个特定的HTML标签元素，而且应用于其后代
p{color:red;} <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
上面例子，颜色不仅应用于p标签，还应用于span标签
Css特殊性：为同一个元素设置不同的css代码，权值大，优先级大
P{} 权值为1 p span{} 为1+1=2 .类名{ } 为10
P span.类名{} 为1+1+10=12 #id名 为100
css层叠：为同一个元素设置不同的css并且权值相同时，根据css样式的前后顺序决定，在最后面的css样式被应用。为某些样式设置最高权值p{color:red!important;}
10.css将HTML标签元素分为三种：块状元素，内联元素（行内元素），内联块状元素常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：<img>、<input>
11.块级元素：display：block 将元素显示为块级元素
a{display:block} 使a元素具有块状元素特点
块级元素特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行。
一个块级元素独占一行
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
12.内联元素：display:inline 将元素设置为块状元素
div{display:inline} 使div元素具有内联元素的特点
内联元素特点：和其他元素都在一行上 元素的高度、宽度及顶部和底部边距不可设置
元素的宽度就是它包含的文字或图片的宽度，不可改变
13.内联块状元素：dispiay:inline-block
特点：和其他元素都在一行 元素的高度、宽度及顶部和底部边距可设置
14.盒模型 一个块级元素相当于一个盒模型
边框：border 设置粗细、样式、颜色 border-top/bottom/left/right:
样式包括：dashed 虚线 dotted 点线 solid 实线
填充：padding 边框与内容之间的距离 padding-top/bottom/left/right
边界： margin 元素与另一个元素的距离
padding和margin的区别，padding在边框里，margin在边框外
盒子的宽度等于+左右边框+左右填充+内容宽度
15.css布局模型：流动模型flow 浮动模型 float 层模型 layer
flow 默认网页布局模型 块状元素自上而下垂直分布 内联 从左到右水平分布显示
float 能够让两个块状元素水平发布
float:left 左浮动 float:right 右浮动
层模型（layer）三种形式：绝对定位absolute 相对定位 relative 固定定位 fixed
16.绝对定位 position:absolute; 将元素从文档流中拖出来 相对其最接近的一个具有定位属性的父包含块进行绝对定位，若没有，就相对body，即浏览器窗口。
position:absolute; top/left/bpttom/right: px;
相对定位：position:relative 相对于以前的位置移动，偏移前的位置保留不动
固定定位：position:fixed; 相对于屏幕内的网页窗口移动。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响
1是2的父元素，则1进行相对定位，2进行绝对定位 用于下拉菜单
17.水平居中设置
行内元素 通过给父元素设置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,然后子元素设置position:relative;left:-50%来实现居中
18.垂直居中
父元素高度确定的单行文本：height与line-height高度一致
父元素高度确定的多行文本：1) 插入table，同时设置vertical-align:middle
2)将块状元素display:table-cell设置为表格单元显示
display:table-cell;vertical-align:middle;
网友评论