html（一）html学习-干货之 html4+css2.0
w3c 官网 这里是 html4 的内容
一、关于HTML
- 基本语法
- HTML常用标签
- 相对路径和绝对路径
二、css基础
- 表单元素
- 创建样式表
- css语法
- css选择器
三、css的相关属性
- 列表 li 独有的属性
list-style - 边框属性
border - overflow
- 浮动 float 遇到的坑
- 文本相关属性
- 数字单词自动换行
- 背景相关属性
background - 常用图片格式
- 定位属性
position - 透明属性
四、盒模型
- padding
- margin
五、锚点和热点
- 锚点
- 热点
一、关于HTML
1. 基本语法
（1）命名规则： 字母必须以英文开头，名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符，尽量不要使用大写字母；
（2）标签：
- 双标记：
<标记 属性=“属性值” 属性=“属性值”> - 单标记：
<标记 属性=“属性值” />
（3）注意点：
- 写在
<>中的第一个单词叫做标记，标签，元素。 - 标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在
""号内。 - 一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
- 空标记没有结束标签，用
/代替。
（4）基本写法
<html>
<head>
<meta charset="UTF-8" />
<title>title>
head>
<body>body>
html>
2. HTML常用标签
HTML标签的种类：块元素、行元素、行内块元素
（1）块状元素：天生能换行的元素；
文本标题
段落
- 无序
- 无序
- 无序
- 有序
- 有序
- 有序
- 标题
- 内容
- 内容
注意：①p标签 不能放“天生的块元素”;
②h标签 内不能放其他的 h标签，否则会父子变兄弟。
（2）行内元素：天生不能换行的元素；
<a href="#" target="_blank">a>
<a href="./b.html" target="_blank">a>
<a href="www.baidu.com" target="_blank">a>
（3）行内块元素：天生不能换行但能设置宽高的元素；
img图片元素- 表单元素
<img src="图片路径" title="标题属性" alt="替换文本" />
<a href="#">
<img src="图片路径" />
a>
（4）表格元素
<table border="1">table>
<tr align="left">tr>
<td colspan="2">td>
合并规则：
合并列：合并n列，当前tr中少 n-1 个td。
合并行：合并n行，该td所在tr下面的 n-1 个 tr 中都要少1个td。
（5）块元素、行元素、行内块元素的区别
3. 相对路径和绝对路径
绝对路径就是写死的路径,缺点是换设备会出现路径找不到问题
相对路径就是灵活的路径,优点是不会因为设备更换出现路径问题,
（1）绝对路径： 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。
例如：C:\xyz\test.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个URL绝对路径。
（2）相对路径： 相对于某个基准目录的路径。包含Web的相对路径（HTML中的相对目录）。
例如：在Servlet中，"/“代表Web应用的根目录。物理路径的相对表示，例如：”./" 代表当前目录，"…/"代表上级目录。这种类似的表示，也是属于相对路径。
/表示源文件的根目录
./表示当前文件所在的目录(可以省略)
../表示当前文件所在的目录的上一级目录
二、css基础
css 层叠样式表，web 标准中的表现语音，目前推荐遵循的是 w3c 发布的 css3.0。css 样式有两部分组成：选择符（选择器）+声明（{属性：属性值}）。
1. 表单
（1）form 标签的属性：
name=“定义表单名”- method=“get/post”
- action=“请求地址/跳转地址”
（2）其他表单元素：
多行文本输入框下拉框，其中selected="selected"表示默认选中，写在"" 标签中；表单元素
text 单行文本输入框，常与 placeholder 属性（提示信息）一起使用
password 面膜输入框
radio 单选框，checked="checked"默认选中，常于 name 属性一起使用
checkbod 复选框，checked="checked"默认选中
submit 提交按钮
reset 重置按钮
button 自定义按钮
<input type="radio" name="sex" value="传给后台的值" checked="checked" />男
<input type="radio" name="sex" value="传给后台的值"/>女
<input type="radio" name="sex" value="传给后台的值"/>保密
（3）form 中 name 的作用
- name 属性用于对提交到服务器后的表单数据进行标识；
- 或者在客户端通过 JavaScript 引用表单数据。
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
（4）form 中的 method = "get/post"
method,传输方式，默认 get，常用 get 的传输方式。两者的区别：
- get 通过地址栏传输，会将信息拼接到地址栏上。而 post 不会讲信息拼接到地址栏上；
- post 的传输方式比 get 安全；
- post 能传输大量信息；
- get 传输速度比 post 快；( get 没有加密 )。
2. 创建样式表
（1）内联样式表：，最好写在中；
（2）外部样式表： 和 @import url(路径);；
顶部部小标签：；<%= BASE_URL %> 可以省略，主要作用是将图片编译成 base64；
| 区别 | link | import |
|---|---|---|
| 1. 从属关系 | link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 | @import是 CSS 提供的语法规则，只有导入样式表（加载CSS）的作用。 |
| 2. 加载顺序 | 当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载。 | 而@import引用的CSS 会等到页面全部被下载完再被加载，所以有时候浏览@import加载CSS的页面时开始会没有样式。 |
| 3. 兼容性的差别 | link标签作为 HTML 元素，不存在兼容性问题。 | @import是CSS2.1提出的，所以老的浏览器不支持，@import只t在IE5以上的才能识别。 |
| 4. 使用dom控制样式时的差别 | 当使用javascript控制dom去改变样式的时候，只能使用link标签。 | @import不是 dom 可以控制的。 |
| 5. 权重区别 | link引入的样式权重大于@import引入的样式。 |
（3）内联样式表（嵌入式、行间、行内）：
- 内联样式表的优先级别（权重）最高；
- 内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
3. css语法
选择符(或选择器){属性:属性值;属性:属性值;} 例如：div{width:200px;height:100px;background:red; }
（1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
（2）属性必须放在花括号中，属性与属性值用冒号连接。
（3）每条声明用分号结束。
（4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序；
（5）在书写样式过程中，空格、换行等操作不影响属性显示。
注释 html 代码：
注释 css 代码：/*注释内容*/
4. css选择器的优先级（权重）
选择器就是运用不同手段来选择特定元素的方法。
内联样式表的权重最高：1000 ，继承样式的权重为：0000。
（1）id 选择符 0100
（2）class 选择符 0010
（3）伪类选择符 0010
（4）元素选择符（类型选择符）0001
（5）后代选择符 后代选择符的权重之和
（6）群组选择符
（7）通配符
选择符叠加写法：div.box.red。
例如：#box .list.list li{} 权重121，div#box .list li 权重112。
/* 可以缺少，但是不能改变位置，因为:hover和:active是同时触发的，后书写的会覆盖前面写的css*/
a:link{
}/*初始状态，没有点击过的状态,只有 a 标签有该伪类选择符*/
a:visited{
}/*被访问过后的状态,只有 a 标签有该伪类选择符*/
a:hover{
}/*鼠标滑过时的状态*/
a:active{
}/*鼠标按下不放的状态*/
三、css的相关属性
1. 列表 li 独有的属性 list-style
复合写法：
list-style:square inside url('/i/arrow.gif');，可以不设置其中的某个值。
list-style: none表示没有列表符号。
（1） list-style-type 设置列表符号。属性值： disc(实心圆) 、 circle(空心圆) 、 square(实心方块) 、 none(去掉列表符号)；
（2）list-style-image:url(路径)； 自定义图片列表符号；
（3）list-style-position 定义符号所在位置。outside(默认外边) 、 inside(里边)
常用 list-style-type:none; 因为列表符号在各浏览器显示无法统一，并且无法随心所欲的控制符号与文本内容之间的距离。
2. 边框属性 border
复合写法：
border:1px solid #000;
（1）边框线型：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）；
点线的大小总是 1px ,而且各个浏览器大小都不一样
（2）单边框设置：border-left、border-right、border-top、border-bottom；
（3）单边框其他属性：border-方向-width 设置单边边框宽度、border-方向-style 设置单边边框线型、border-方向-color 设置单边边框颜色；
（4）用边框属性写出下三角形：
哪个方向的三角形，就将哪个方向的边框设置
border-方向: 大小 solid 颜色，相邻的边框颜色设置成白色（消失色），对边的边框设置为 0；
<style>
div{
width:0; /*块元素不设置宽度=父元素宽度*/
height:0; /*可省略*/
border-top:20px solid #00f;
border-left:20px solid #fff;
border-right:20px solid #fff;
border-bottom: 0;
}
style>
3. overflow
（1）overflow 的属性：
overflow:visible;/*默认值*/
overflow:hidden;/*溢出隐藏*/
overflow：scroll;/*滚动*/
overflow:auto;/*自动出现滚动条*/
（2）隐藏滚动条：div::-webkit-scrollbar { display: none; }，兼容所有浏览器的超出部分滚动不显示滚动条，div 为出现滚动条的元素。
（3）单行文本溢出隐藏显示省略号：
width: 200px; //文本超出多少隐藏
white-space: nowrap; //强制不换行
overflow: hidden; //溢出隐藏
text-overflow: ellipsis; //文本溢出隐藏时出现省略号
4. 浮动 float 遇到的坑
（1）float 浮动属性：
float: none; //默认不浮动
float: left; //左浮动
float: right; //右浮动
（2）浮动的坑（特点）：
通常情况下，如两个兄弟元素设置左右浮动，我们需要设置父框高度，如果不设置，就会造成“高度塌陷”
- 高度塌陷：父元素撑不开子元素内容；
- 不占文档流；
- 父元素高度不够时，浮动的子元素会影响下面的元素；
- 当浮动元素的父元素高度不够时，会影响到与该父元素相邻元素中的浮动元素；
- 浮动元素不能与文本元素重合在一起，它会把文字挤出去；
- 浮动元素会把所有的元素变成一类元素，即浮动元素，可以设置宽、高、背景色等；
（3）预防浮动出现：
- 要浮动一窝都浮动（兄弟元素都浮动）；
- 父元素必须设置足够的高度；
5. 文本相关属性
文本相关的属性会被继承，a标签 除外，因为 a标签 有一个默认的伪类效果。
- 网页字体大小通常为： 12px 或 14px ；
- 单位：px 像素，pt 点， em 倍距； 3pt = 4px；
- em 是根据父元素的字体大小来决定多小像素；
字体大小默认 16px，1em=16px（文字的一倍大小，一倍距就是一个文字的大小）
复合写法： font:700 italik 12px/2 "华文琥珀"; 最简： font:字体大小 "字体类型";如果没有设置到的视为缺省值还原默认。
（1）font-size: 数字px; 设置文本大小；
（2）font-style: normal（正常）/italik（斜体）; 设置文本斜体；
（3）font-weight: normal（正常100-500）/bold（加粗600-900） 设置文本粗体；
（4）font-family: "字体1","字体2" 可以设置多个字体，如果浏览器不支持第一个字体，则会尝试下一个。自定义字体通常默认为“宋体”；
（5）text-align: left/center/right 水平位置；
（6）vertical-align: top/middle/bottom 针对图片使用，常写在图片上；
（7）line-height: 数字px; 行高；
（8）letter-spacing: value; 字间距：控制英文字母和汉字的字距；
（9）work-spacing: value; 词间距：控制英文单词词距；（只对单词生效）
（10）text-decoration: none（没有修饰）/underline（添加下划线）/overline（上划线）/line-through（删除线） 文本修饰；
（11）text-indent: 2em ：首行缩进 ；
6. 数字单词自动换行
一般字母和数字没有空格不会换行，但中文会以文字为单位自动换行。
word-wrap: normal; 默认；
word-wrap: break-word; 让字母和数字没有空格的情况下自动换行；
white-space: nowrap; 文本强制不换行；
7. 背景相关属性background
复合写法：
background:#000 url(图片路径) no-repeat top center;
可以不设置其中的某个值，比如：background: #f00;。
（1）background-color : 背景色
（2）background-image : url(图片路径) 背景图片
（3）background-repeat : 背景图片平铺属性 repeat（默认平铺）、repeat-x（横向平铺）、repeat-y（纵向平铺）、no-repeat（不平铺）
（4）background-position : left/right/center(水平) top/bottom/center(垂直)
注意：如果只写一个值，另外一个值会默认为 居中，还可以书写 数值，数值可以为 负值。
background-position: 1px -2px; 表示往下平移1px，像左平移2px；
8. 常用图片格式
| 常用格式 | .jpg | .png | .gif |
|---|---|---|---|
| 区别 | 图片有损质量，但肉眼难分辨，用来减小图片大小，图片非镂空使用。 | 图片有损质量，但肉眼分辨不出，用来减小图片大小，图片镂空使用。 （ps：打开图片，去除背景，虚框选中delete，png-24格式，保存） |
图片有损质量严重，肉眼容易分辨，常用做动图。 （ps截图：ctrl+c复制 — ctrl+n新建 — 回车— ctrl+v粘贴 — ctrl+alt+shift+s保存） |
9. 定位属性position
（1）position 的属性值：
position：只有定位元素可以使用 left、right、top、bottom、z-index；
static：默认值。所有元素默认的定位属性就是是 static ，一般不用；absolute：绝对定位（完全脱离文档流）。relative: 相对定位（占文档流）。fixed: 固定定位（完全脱离文档流）。
定位属性position属性值 |
static |
relative |
absolute |
fixed |
|---|---|---|---|---|
| 称呼 | 默认不定位 | 相对定位 | 绝对定位 | 固定定位 |
| 区别 | 没有定位，元素出现在正常的流中. | 根据自身初始所在位置来定位；不破坏原有元素的特性。 | 自动向上检索，根据最近的定位元素作为父元素，如果检索不到就以 html 来定位。 | 始终根据 html 来定位； |
| 是否占文档流 | 占文档流 | 占文档流 | 不占文档流，完全脱离文档流 | 不占文档流，完全脱离文档流 |
| 特点或用法 | 特点：因为相对定位占文档流，在没有设置 left、top 属性下的效果和static 默认是一样的。 |
用法：①向上检索定位的元素作为父框； ②多个定位元素使用 z-index 来定义层级。 |
特点：位置不随着滚动条滚动而发生变化。 | |
| 适用场合 | 微调距离时可以用此属性。可以使用left，top，right，bottom等。 |
通常用于做重叠效果。 | 网页遮罩。 |
（2）z-index 层级
只有设置定位元素才能设置
z-index（默认值为 auto，几乎和 0 差不多）。在兄弟关系中，z-index值越大的显示在上面。
z-index: auto; 只有在子元素也有定位的情况下出现。
<style>
p{width: 40px;height:40px;background: #ff9;position:absolute;}
.auto4{background: #999; position:absolute;left: 20px;top: 20px;z-index: 9;}
.auto1{background: #f99;position:absolute;}
.auto2{background: #f99;position:absolute; z-index:10}
.auto3{background: #f99; position:absolute;z-index: auto;/*这里的z-index可省略*/}
.p3{position:absolute;z-index: 20;}
<style>
<body>
<div class="box">
<div class="auto1">
<p>pppp>
div>
<div class="auto4">auto4div>
div>
<div class="box">
<div class="auto2">
<p class="p2">pppp>
div>
<div class="auto4">auto4div>
div>
<div class="box">
<div class="auto3">
<p class="p3">pppp>
div>
<div class="auto4">auto4div>
div>
body>
10. 透明属性
opacity:0.5;值0-1，从透明-不。0.5表示半透明，ie9以下版本无效。filter:alpha(opacity=50);值0-100，非ie浏览器无效，兼容ie678。
（1）缺点：给父元素设置透明 子元素也会变透明。
（2）解决方法（想背景透明，子元素不透明）：
- ①做2个层叠关系的定位元素，将父子元素变成兄弟元素；
- ②给父元素设置透明的背景图。
四、 盒模型
- 盒模型的组成分为：外边距、边框、内边距、内容区；
- 盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）；
1. padding：
（1）说明：
- 用来调整 子元素在父元素中 的位置关系；padding 属性需要添加在 父元素 上。
padding值是额外加在元素原有大小之上的，若想保证元素大小不变，需从元素宽或高上减掉添加的 padding 属性值；
（2）padding 属性值
{padding: 10px 20px 30px 50px;}4个值，表示：上 右 下 左；{padding: 10px 20px 30px;}3个值，表示：上 左右 下；{padding: 10px 20px;}2个值，表示：上下 左右；{padding: 20px;}1个值，表示 ：4个方向都是 20px；
（3）可单独设置某一个方向的 padding，类似 border。
padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;
2. margin：
margin 是用来调整兄弟元素之间的距离； 它的属性值和单边设置写法与padding相同。
margin 的坑：
（1）margin 上下会重叠（左右没事）；
<style >
.box1{
width: 100px;height:100px;background:pink;margin-bottom:30px;}
.box2{
width: 100px;height:100px;background:green;margin-top:50px;}
style>
<body>
<div class="box1">div>
<div class="box2">div>
body>
解决办法 ：设置单边就行。
（2）第一个块的子元素设置 margin-top 会无限向父元素传递，直到不是第一个子元素。
<style >
.fruits{
width: 150px;height:150px;background:pink; }
.fruits .apple{
width: 50px; height: 50px; background: red;margin-top:40px;}
.fruits .banana{
width: 50px; height: 50px; background: yellow;margin-top:20px;}
.foods{
width: 150px;height:150px;background:green;margin-top:30px;} style>
<body>
<div class="fruits">
<div class="apple">苹果div>
<div class="banana">香蕉div>
div>
<div class="foods">
<div class="oil">div>
<div class="salt">div>
div>
body>
解决办法 ：
- ① 给 父元素 设置
border-top：1px;或者padding-top: 1px;或者float: left;或者overflow: hidden;； - ② 给 子元素 设置
float:left;； - ③ 给父元素添加伪类元素：
父元素:before{content:""; display: table;}。
因为:before相当于给第一个子元素之前添加一个类似span标签，所以这个块元素就变成了第二个子元素。
overflow:hidden; 可以解决高度塌陷问题，可以解决 margin-top 向父元素传递效果的问题。
（3）给行元素设置上下盒模型，会穿过其他物体，左右没事。
<style>
.box1{
width: 200px;height:200px;background:#ff0;}
span{
background:#f99;padding:20px;margin:40px}
.box2{
width: 200px;height:200px;background:#000;}
style>
<body>
<div class="box1">div>
<span>1234342span>
<div class="box2">div>
body>
解决办法 ：
- ① 不要给行元素设置上下盒模型；
- ② 给这个行元素转换成块元素：
display: block;
五、热点和锚点
1. 锚点
锚点是网页制作中超级链接的一种，在网页内部进行跳转。
（1）语法：
<style>
P{
position:fixed;设置高;right:10px;top:0;bottom:0;margin:auto;}
P a{
display:block;}
style>
<a href="#id名">a>
<div id="id名">div>
<a href=".class名">a>
<div class="class名">div>
（2）示例：
点击锚点链接进行跳转时，地址栏也会有所改变。如果想要跳转到页面的某个内容区域，可以在地址上加上锚点。
<style>
*{
margin:0; padding:0;}
div{
height: 500px;}
#box1{
background: #99f;}
#box2{
background: #9f9;}
#box3{
background: #f99;}
#box4{
background: #f9f;}
#box5{
background: #ff9;}
#box6{
background: #9ff;}
#box7{
background: #f80;}
#box8{
background: #90f;}
p{
position: fixed; height: 150px; left:10px; top:0; bottom:0; right: 0;margin: auto;}
a{
display: block; height: 16px; width: 16px; color:#fff;padding: 10px;margin-top: 2px;background:#000;}
style>
<body>
<p>
<a href="#box1">F1a>
<a href="#box2">F2a>
<a href="#box3">F3a>
<a href="#box4">F4a>
<a href="#box5">F5a>
<a href="#box6">F6a>
<a href="#box7">F7a>
<a href="#box8">F8a>
p>
<div id="box1">奢侈品div>
<div id="box2">精品店div>
<div id="box3">卖女鞋div>
<div id="box4">卖女装div>
<div id="box5">卖童装div>
<div id="box6">卖男装div>
<div id="box7">美食城div>
<div id="box8">电影院div>
body>
2. 热点
（Dreamweaver工具）盒子模型的标准，任何元素都是以一个矩形呈现，但有时则不然。比如地图，点击某一个县需要一个链接，此时需要热点链接。
<img src="" usemap = "#名称A"/>
<map name="名称A">
<area shape="poly" coords="坐标" href="连接地址" target="_blank"></area>
</map>
热点只能给图片添加，这个方法已经被抛弃了。
网页实体 ： < < 和 > > 和 空格
相关面试、笔试题：关于HTML的面试题
下一篇：html（二）html学习-干货之 html4+css2.0