整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
程序员HTML5培训教程-html和css的使用方法以及样式，很好的基础知识系列，内容都是干货知识点，适合收藏下来！
布局步骤
第一步： 清除默认样式
第二步： 划分模块
第三步： 设置模块的大小以及位置
第四步： 划分下一级模块
html和css
引入网页头像
<link rel="shortcut icon" href="img/...ico">
css样式表的引入方式
css样式表的引入方式
1、外链式
<link href="" rel="stylesheet">
2、嵌入式
<style></style>
3、行内样式
<div style="width:200px;height:200pxs;"></div>
文件命名以及变量命名
命名规范
1、严格区分大小写
2、可以采用字母数字下划线$,数字不开头
3、命名语义化
4、可以采用驼峰命名法
清除默认样式
清楚边距
*{
margin: 0;
padding: 0;
list-style: none;
}
a标签清楚下划线和颜色
a{
color: black;
text-decoration: none;
}
css中颜色的表示方式
css中颜色的表示方式：
1.预定义的颜色【关键字颜色】 red pink blue yellow
2.#6位数的色值 #00-00-00 红绿蓝
3.rgb（红，绿，蓝） ：rgb([0-255],[0-255],[0-255])
4.rgba（red，green，blue，透明度） ：rgba([0-255],[0-255],[0-255]，[0-1])
0-1: 0全透明，1不透明
html中的标签和属性
html：
标签：
按照语法分类：
1.单标签：只有开始标签
meta img a
2.双标签：有开始标签和结束标签
<html></html>
3.属性的语法
语法：
属性名 = "属性值"
属性名 = "属性值1 属性值2"
注意:
1、标签名和属性名之间要有空格
2、多个属性之间要有空格
3、多个属性值之间要有空格
4.开始标签 标签名后有空格
按照标签在页面中的呈现效果分类：
1、行内元素
行内元素定义:在一行内显示，只能设置左右间距，不可以设置上下间距。
举例：span del i em b strong a(title="鼠标移入时显示的文字";target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开) ...
2、块元素
块元素定义：可以设置宽高，独占一行。
举例：div 标题标签 列表标签 段落标签 ...
3、行内块元素
行内块元素定义：可以设置宽高，在一行显示。
举例：img 【title="鼠标移入时显示的文字" 】 表单控件
元素的转换
块元素： display:block;
行内块元素：display:inline-block;
行内元素： display:inline;
元素的级别
块元素 > 行内块元素 > 行内元素
元素嵌套规范
1、同一级别可以相互嵌套
2、级别高的元素可以嵌套级别低的元素
3、段落标签只能嵌套行内元素
4、a标签不可以嵌套a标签；p不能嵌套p
盒子模型及其问题
四部构成：
1、margin 外间距 盒子与盒子之间的距离
2、border 边框
3、padding 内填充（内间距） 边框与内容之间的距离。
4、content 内容
margin-top margin-right margin-bottom margin-left
margin: 50px; 上 右 下 左
margin: 50px 100px; 上下 左右
margin:0 auto; auto自动
margin: 50px 100px 150px; 上 左右 下
margin: 50px 100px 150px 200px; 上 右 下 左
border: 1px solid red;
border-top \ border-right \border-bottom \ border-left
border-top-width：上边框的宽度
padding:设置方法同margin
content: ;
width : 数值 百分比 auto
height: 数值 百分比 auto
盒子模型的问题：
1.大部分元素的margin和padding默认为0，但有一部分的margin和padding不为0，例如body 标题标签（h1-h6）（ul ol il等列表标签） 段落标签
2.想领的两个块元素的margin会重合，值会取最大值
3.margin可以为[负数] ，padding不可以设置[负数]。
4.行内元素margin只有左右，没有上下
5.如果（1）发生嵌套关系的元素，（2）父元素没有上边框，（3）上padding ，（4）父元素与子元素之间没有别的内容，此时子元素margin-top就会作用到父元素身上
margin-top的解决方式：
1.用父元素的padding-top代替子元素的margin-top；
2.给父元素添加overflow：hidden；
宽高的设置和计算
height：auto / 百分比 / px；
width：auto / 百分比 / px；
height：auto； 参照与父元素
width：auto；参照与内容
box-sizing：border-box； 将边框算入盒子内；
一个元素实际的宽高
实际宽度 = border-left + padding-left + width +paddint-right + border-right;
实际高度 = border-top + padding-top + height + padding-bottom + border-bottom;
浮动
作用：让块元素横排排列
样式： float：left；从左往右排列
float：right；从右往左排列
原理：让元素脱离文档流，让元素从文档层浮动到浮动层。
引发的问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素。（浮动的元素脱离文档流）
*解决方式一：给父元素添加 overflow：hidden；（超出部分隐藏）
*解决方式二：在父元素内容最后添加拥有清除浮动属性的元素。
clear：right/left/both ； 别的浮动对它的影响清除掉
例：
.box：after{
content: "";
display:block;
width: 0;
height: 0;
clear:both;
}
*解决方式三：父元素能设置高度的尽量设置高度
浮动之后的块元素参照内容：属性值 auto
定位
定位的元素脱离文档层，到达定位层
定位的元素会多出5个样式：
top right bottom left z-index：999
上 右 下 左 层级（层级越高，离用户越近）【只能在有定位属性的元素上才能用】
层级：
z-index：整数；
定位的几种方式：
1.相对定位：
相对于自身来定位，在文档层中保留原来的位置
用法：
position：relative；
2.绝对定位：
相对于最近的 定位的 祖先元素 来定位，完全脱离文档流（其他顶替其位置）
用法：
position：absolute；
+方向值
3.固定定位：
相对于浏览器的四条边，完全脱离文档流
用法：
position：fixed；
top与bottom同时定义，那个样式会作用到元素身上的判断关系：
top的权重比bottom的权重大
left的权重比right的权重大
元素作用时：
1.如果是
position：relative；
left：；
margin：；
先作用margin，在作用relative；
2.如果是
position：absolute；
left：；
margin：；
先作用absolute，在作用margin；
定位元素的居中方式：
方法一：
1.水平居中：
position：absolute；
left：50%；
margin-left：-自身长度的一半；
2.垂直居中：
position：absolute；
top：50%；
margin-top：-自身长度的一半；
3.绝对居中：
position：absolute；
left：50%；
top：50%；
margin-left：-自身长度的一半；
margin-top：-自身长度的一半；
方法二：
1.水平居中：
position：absolute；
left：0；
right：0
2D和3D
2D和3D属性：
1.平移样式
transform:translate(x,y); 向上为负， 向下为正
transform:translateX(100px);
transform：rotate（180deg） ； （1turn）转一圈
平移 transform:translate（） 例子：translate（x，y） translateX（）
旋转 transform:rotate（） 例子rotate（180deg）顺时针 -180deg 逆时针
transform：rotate（）空格translate（）；
transform-origin:px px;变换的中心点；
left center；
缩放 transform:scale（） 例子：scale（2） 放大为原来的2倍 scale（0.n）缩小为原 来的0.n scale（m，n） x轴m，y轴n
斜切 transform:skew（） 例子：skew（45peg） 左拉伸45° skew（45peg，m）
全部 时间
3.过渡的属性样式： transition-property: ， ;
可以为：属性的全部样式
4.过度的总时间： transition-duration：；
5.过渡的时间函数： transition-timing-function：；
linear（匀速） ease（开头结尾慢，中间快）
cubic-bezier（1，0.07，0.54，0.21） 贝塞尔曲线
6.延迟 transition-delay：；
3d效果：和2d的一样transition，transform；
prespective：给父元素加prespective（灭点的值）
prespective-origin：x y；灭点的位置 调整观察的角度（大多数情况不设置）
transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）
transform：ratateY（45deg）
transform：translate3d（0-1，0-1，px）
父元素：transform-style：preserve-3d；
动画
动画规则：
@keyframes 动画名（随便给）{
（动画规则）
from{}
to{}
}
@keyframes 动画名（随便给）{
（动画规则）
0%{}
50%{}
100%{}
}
@keyframes animation1{
from{
background-color:red;
}
to{
background-color:blue;
}
}
挂载动画:将动画加到元素身上
.元素{
animation：animation1 时间 步数 时间函数 延迟时间 次数 ；
}
挂载多个动画：
.元素{
animation：animation1 时间,animation2 时间,animation1 时间；
其他动画的相同的可以附件通过animation属性；
}
animation的样式
动画名：animation-name
时间： animation-duration
步数：animation-steps：8；
时间函数：animation-timing-function
延迟： animation-delay
动画次数： animation-iteration-count：infinite（无限次）/2；
指定下一次动画是否逆向：animation-direction：alternate（逆向）/ normal（常规）；
最后的状态：animation-fill-mode：backwards（默认（保持一开始的状态））/forwards（保持当前的状态）；
状态即指定动画是否运动： animation-play-state: running（运行）/paused（静止）;
元素分类
按照在页面中的呈现效果：
1.行内元素：在一行内显示 ，不可以设置宽高 ：（存放文字）
span a b i strong del
2.行内块元素：在一行内显示，可以设置宽高：（有缝隙 不常用）
img 表单控件
3.块元素 ：可以设置宽高，独占一行
div 标题标签（h1-h6） 列表标签（ul-li ol-li dl>dt+dd 段落标签 （p pre））
元素嵌套规范：
1.同一级别可以相互嵌套
2.级别高的可以嵌套级别低的元素
3.p标签只能嵌套行内元素
4.a链接不能相互嵌套
元素的转换：
1.块元素：display：block；
2.行内块元素：display：inline-block；
3.行内元素：display：inline；
背景图片以及浏览器内核
背景图
先设大小，在引background；
background: url('路径') no-repeat left bottom/contain；
//图片位置 禁止重复 位置（top bottom left right）
4. background-repeat：no-repeat，repeat；（无重复）
5. background-repeat：repeat-x（x方向重复）
background-repeat：repeat-y（y方向重复）
background-position：x y；（数值 方位值（top/bottom left/rightcenter（可以省略）） ）
8. padding-box；（默认）从padding位置开始渲染
9. border-box；从边框的位置开始渲染
content-box；从内容的位置开始渲染
11. padding-box；（默认）从padding位置结束渲染
12. border-box；从边框的位置结束渲染
content-box；从内容的位置结束渲染
8.可以简写：
background：空格隔开；
//渐变开始的方向（默认top） 类似25deg（25度）
10.浏览器内核//背景色渐变
1. /* 标准语法 */
例子：background: linear-gradient(top,#3bbcff,#47eaff);
2. /* 谷歌内核 -webkit- */
例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);
3. /* 火狐内核 -moz- */
例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff);
4. /* 欧鹏内核 -o- */
例子：background: -o-linear-gradient(top,#3bbcff,#47eaff);
5. /* IE内核 -ms- */
例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);
文件的读取方法路径
绝对路径：从盘符开始的一条完整路径
相对路径：两个文件的位置关系
边框的相关属性【圆角，边框形状】
border-radius：边框的半径 设置圆角 n%或者num像素
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
透明度
透明性的选择：（整个容器都变）
opacity：；0-1之间的值；
字体
font-family =“ 字体” //字体样式可以被继承
鼠标移入样式
span标签
cursor：pointer； 鼠标样式：手型
阴影
box-shadow：x轴偏移量 y轴偏移量 阴影的模糊程度 阴影的大小（0和本身一样大小） 阴影的颜色；
引入字符图标
引入字符图标：
行内元素 随意
span class=“iconfont 图标类名”
可调节样式： 同文字
文档流
文档流：
标准情况下 ，页面元素从左往右 从上往下 依次排列
flex布局(规范的设计稿)-弹性布局
容器（父元素）的属性：【display:flex;】
*flex-direction: 决定主轴方向。
row 主轴在水平方向，从左向右（默认）。
row-reverse 主轴在水平方向，从右向左
column 主轴在垂直方向，从上到下
column-reverse 主轴在垂直方向，从下到上
*flex-wrap: 决定项目换行
wrap: 项目换行
nowrap: 项目不换行（默认值）
wrap-reverse： 项目换行且反转
*justify-content: 决定项目在主轴的对齐方式
flex-start;主轴的起点
flex-end;主轴的终点
center;主轴的中心
space-between;两端对齐
space-around;项目两侧距离相等
*align-items：项目在交叉轴上的对齐方式（适用于一根轴线与多跟轴线）
flex-start:交叉轴的起点
flex-end：交叉轴的终点
Center：交叉轴的中心
baseline： 基线对齐（文本底部）
*align-content:定义项目在交叉轴上的对齐方式（仅适用于多根轴线）
flex-start;交叉轴的起点
flex-end;交叉轴的终点
center;交叉轴的中心
space-between;两端对齐
space-around;两侧距离相等
子元素（项目）的属性：
*order：定义项目的排列顺序，数值越小，越靠前，默认值为0（可以取负值）。
*flex-grow:定义项目的放大比例。默认值为0，即使存在剩余空间，也不放大。
*flex-shrik：定义项目的缩小比例，默认值为1，空间不足，项目缩小;值为0时,空间不足,项目也不缩小.
*flex-basis: 定义项目占据的主轴空间.默认auto或者自己添加像素;
*align-self:定义单个项目在交叉轴的对齐方式.
flex-start:交叉轴的起点
flex-end：交叉轴的终点
Center：交叉轴的中心
滚动条
overflow-x：auto；超出部分在x轴的表现形式。
auto：自动；（如果超出，就自动以滚动条的形式显示）
去滚动条： 加在具有overflow属性的元素身上
::-webkit-scrollbar{
height：0；
}
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
值 描述 测试
visible 不裁剪内容，可能会显示在内容框之外。 测试
hidden 裁剪内容 - 不提供滚动机制。 测试
scroll 裁剪内容 - 提供滚动机制。 测试
auto 如果溢出框，则应该提供滚动机制。 测试
no-display 如果内容不适合内容框，则删除整个框。 测试
no-content 如果内容不适合内容框，则隐藏整个内容。 测试
轮播图
swiper(.js).com
表格
[行] [列]
table身上的属性
table身上的属性：
border：表格边框 cellspacing：单元格间的间距
cellpadding：单元格的内容与其边框的内边距
bgcolor：表格的背景颜色 background：表格的背景图片
width：表格宽度 height：表格高度
border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于 前两个边框宽度之和
caption：表格标题
background:表格背景图
cellspacing:单元格之间的间隙宽度
align:表格的水平对齐方式，通常是left，center，right
表格的标题
<caption align="水平对齐方式" valign="标题与表格的相对位置"></caption>
单元格【tr】【td】
width：单元格宽度height：单元格高度
align：单元格内文本的对齐方式,通常是左，中，右 left，center，right
valign：单元格内文本的对齐方式,通常是上，中，下 top，middle，bottom
nowrap：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行
<tr align="center" valign="bottom">
<td align="center" nowrap>手机空中免费充值</td>
<td width="100px">IP卡</td>
<td width="100px" bgcolor="#006400" valign="top">网游</td>
</tr>
表格的跨行与跨列【td】
rowspan：跨行标签，表示跨了多少行
colspan：跨列标签，表示跨了多少列
表格标签拓展及其属性
thead：定义表格的表头。
tbody：定义表格主体（正文）。
tfoot：定义表格的页脚（脚注或表注）。
colgroup：标签用于对表格中的列进行组合，以便对其进行格式化。
注意：不管thead、tbody、tfoot的代码先后顺序如何，html显示时，始终是先显示thead，再显示tbody，最后显示tfoot。
1、<thead> 内部必须拥有 <tr> 标签！
2、<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。
3、<tbody> 元素内部必须包含一个或者多个 <tr> 标签。
4、必须在 table 元素内部使用这些标签。
5、当不同行间的单元格合并时各单元格所在的行不要加tbody标签。
标题栏
《tr》<th></th>《/tr》 用法和td相似 知识自动将单元格内容以粗体显示
表单控件表单标签
<form action=" " method=" ">
action:表单信息提交的位置；
method：提交的方式
get：地址栏，信息量少，安全性低
post：信息量多，比较安全
1.输入文本【输入框】：
用户名：<input type="text" placeholder="请输入用户名" maxlength="10" value=" " name="username" class="">
placeholder：默认提示文本;
maxlength:规定输入的最大字符数
name:本文本框的名字，与后台进行数据交互用
class:定义本文本框的样式，相当于盒子
placeholder下的缩进
text-indent：2em；缩进
2.输入密码【密码框】：
密码：<input type="password" placeholder="请输入密码" maxlength="10" value=" " name="psw" class="">
3.单选按钮[name的值必须相同]：
请选择你的性别：
<label for="man"> [label实现点什么就选中 ，for中的值和id中的值相同]
男：<input type="radio" name="sex" id="man" checked> //checked默认选项
</label>
<label for="woman">
女：<input type="radio" name="sex" id="woman">
</label>
4.多选按钮[name的值必须相同]：
请选择你喜欢的音乐：
摇滚：<input type="checkbox" checked>
摇滚：<input type="checkbox" checked>
摇滚：<input type="checkbox" checked>
5.下拉列表【下拉框】：
选择你的学历：
<select name="" id="">
<option value="">学士</option>
<option value="">博士</option>
<option value="">硕士</option>
</select>
6.上传文件：
选择你的照片：
<input type="file">
7.留言文本空间：
<textarea name="" id="" rows="" col="">
</textarea>
8.用户是否允许重新设置textarea大小css属性：
resize: none/both/vertical/horizontal;不允许/上下允许拖动/只能在垂直方向拖动/只能在水平方向 拖动
9.重置按钮：
<input type="reset">
10.提交按钮：
<input type="submit">
11.自定义按钮：
<input type="button" value="按钮">
<button>搜索</button>
12.颜色：
<input type="color">
13.时间日期：
年月：<input type="month">
年周：<input type="week">
时分：<input type="time">
年月日：<input type="date">
年月时分：<input type="datetime-local">
14.验证
<input type="email"> 邮箱验证
<input type="tel" autofocus> 电话
15. autofocus 自动获取焦点
</form>
文本模型
文本换行
使非中日韩文本换行
word-break: break-all ;
文本禁止换行
white-space:nowrap;
单行文本溢出部分以省略号显示
overflow: hidden;(放文本的容器)
text-overflow: ellipsis;
多行文本溢出
音频视频标签
音频标签
<audio src="" controls loop autoplay></audio>
controls 空间向用户显示：
loop 循环播放
autoplay当前页面加载完自动播放
视频标签
<video src="" controls loop autoplay></video>
H5语义化标签
<header>头部</header>
<nav>导航</nav>
<aside>侧导航<aside>
<section>页面中的某一部分</section>
<main>主体</main>
<footer>底部</footer>
meta标记【签】
name="关键字" cantent="内容"
<mate http-equiv="Refresh" content="10";url="跳转路径"> //每10s刷新一次并且跳转到跳转路径知识的文件
bgsound标签
<bgsound src="路径" loop="播放次数">
body属性
对文字操作的标签
列表标签
2. <li>
<li>
</ul>
4. <li>
<li>
</ol>
a标签
<a href="路径 " title="鼠标移入时显示的文字" target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开；_parent:在当前窗口的父窗口打开链接；_top:在整个浏览器窗口打开) ...
[字符实体]常用的转义字符
显示结果 描述 实体名称
空格
< 小于号
大于号
& 和号
" 引号
' 撇号 (IE不支持)
￠ 分（cent）
£ 镑（pound）
¥ 元（yen）
€ 欧元（euro）
§ 小节
© 版权（copyright）
® 注册商标
™ 商标
× 乘号
÷ 除号
选择器
分类
css选择器
1.通用选择器：
*｛｝//选择所有的标签
2.群组选择器：
E1,E2,E3..｛｝//选择E1 E2 E3
3.标签选择器
标签名｛｝
4.类名选择器：
.类名｛｝
5.后代选择器
.E1 .E2｛｝ //选择E1 的后代E2
6.交叉选择器
标签名.类名｛｝
7.id选择器
例如 创建id
<div id=“box”></div>
#id名｛｝ //选择页面中id为**的标签
8.伪类选择器：
鼠标移入状态
E：hover{ } E元素选择鼠标移入状态
E：hover .子类{ } 选择e元素下鼠标移入时子类的变化
获取焦点，用于表单的输入
E: focus{
outline: none;
}
9.伪结构选择器：
E：first-child｛｝ 作为子元素的第一个孩子的E标签
E：last-child｛｝ 作为子元素的最后第一个孩子的E标签
E: nth-child(n){} //作为子元素的第n个孩子的E标签
E: nth-last-child(n) 作为子元素的倒数第n个孩子的E标签
E：first-of-type｛｝ 作为子元素的同类型的第一元素
E：last-of-type｛｝ 作为子元素的同类型中的最后一个元素
E: nth-of-type（n） 作为子元素的同类型中的第n个元素
E: nth-last-of-type(n) 作为子元素的同类型中的倒数第n个元素
（n）n可以以为num/even（偶数）/odd(奇数)/3n（3的倍数）
例子：5.15/伪结构选择器
10.伪元素选择器：
::after{} 在元素之后加入一个
::before{
content：“内容之前”；
color：；
} 在元素之前
属于行内元素
::after{} ::before{}伪元素 content：""； 样式必须写
11.子类选择器
相邻兄弟选择器
E1+E2｛｝ 选择E1的下一个兄弟元素E2（不能选中上一个兄弟元素）
div.box>a+img a和img统计
子类选择器
E1>E2{} 选择E1的子类元素E2
例子：div.box>div.item{$}*20
div.box>a>img
12.属性选择器
[属性名]{} 选择所有拥有属性为 属性名 的元素
[属性名=“value”]｛｝ 选择拥有属性名的属性 且属性值为value
E[属性名=“value”]{} 选择拥有属性名的属性 且属性值为value的E元素
E[属性名~=“value”]{} 选择拥有属性名的属性 并且属性值一个或者多个，其中一个属性值为value的E元素
E[value^=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值以 1 开头的E元素
E[value$=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值以 1 结尾的E元素
E[value*=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值包含 1 的E元素
例子：属性选择器
选择器的优先级
宗旨：越具体的优先级越高
id (100 ) > class( 10 )> 标签名( 1)
.box .son{ } 10+10=20
abcde优先级（e为个位）：
a:行内样式
b:id选择器
c:类名选择器 伪类选择器（：hover） 属性选择器
d:标签选择器 伪元素选择器 （：：after）
e:通用选择器有一个
选择有中有一个abcde在其位置+1
移动端布局步骤
视口：视觉视口，布局视口，理想视口
em:当前字体的倍率 100px=10em
rem：html字体的倍率
移动端窗口 375*667
html{
font-size：0.5rem；
}
.box{
width： 750rem； //375px=750rem*0.5px ； 100px=1rem
height： 1334rem；
}
未完待续，感谢关注好程序员前端教程分享！
HTML历史
早在1969年，美国就建立了世界上第一个电脑网络—阿帕网。但由于当时的电脑网络只是为了数据运算而建，与人们的日常生活相距甚远，故而网络的发展非常缓慢，直到1985年，连接在阿帕网上的电脑主机也只有1961台。
相对于电脑网络来说，网站的出现要晚得多。1989年，欧洲粒子物理实验室研究员Tim Berners-Lee，发明了一种用于网上交换文本的格式，即基于标记的语言HTML，并创建了网上软件平台World Wide Web（万维网）。HTML最吸引人的地方，在于其超文本链接技术，通过超链接，可以非常方便地跳转到其他任何一个网页上。万维网实现了媒体思想家特德·纳尔逊于1965年提出的超文本设想。万维网的出现，带动了网站的裂变式发展，到2006年11月，全球互联网网站总数就已经超过了一亿大关。
1990年11月，第一个Web服务器nxoc01.cern.ch开始运行，Tim Berners-Lee在自己编写的图形化Web浏览器“World Wide Web”上，看到了最早的Web页面。
而世界上第一个网站（当时的网址是http://nxoc01.cern.ch/hypertext/www/theproject.html）早在1992年就关闭了，然而幸运的是这一界面却被保留了下来，只要单击下面这个链接：Multiple Choices
HTML基础
HTML是目前在网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文档是由HTML标签组成的描述性文本，HTML标签可以标识文字、图形、动画、声音、表格、链接等。
HTML语言作用
HTML作为一种网页内容标识语言，易学易懂，熟悉使用该语言可以制作功能强大、美观大方的网页。HTML语言的主要作用说明如下：
使用HTMl语言标识文本。例如，定义标题文本、段落文本、列表文本、预定义文本等。
使用HTML语言建立超链接，通过超链接可以访问互联网上的所有信息，当使用鼠标单击超链接时，会自动跳转到链接页面。
使用HTML语言创建列表，把信息有序地组织在一起，以方便浏览。
使用HTMl语言在网页中显示图像、声音、视频、动画等多媒体信息，把网页设计得更富冲击力。
使用HTML语言可以制作表格，以方便显示大量数据。
使用HTML语言制作表单，允许在网页内输入文本信息，执行其他用户操作，方便信息互动。
HTML文档基本结构
HTML文档一般都应包含两部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：<html>、<head>和<body>。其中<html>标签标识HTML文档，<head>标签标识头部区域，而<body>标签标识主体区域。一个完整的HTML文档基本结构如下：每个标签都是成对组成，第一个标签（如<html>）表示标识的开始位置，而第二个标签（如</html>）表示标识的结束位置。<html>标签包含<head>和<body>标签，而<head>和<body>标签是并列排列。
HTML基础
编写HTML文档时，必须遵循HTML语法规范。HTML文档实际上就是一个文本文件，它由标签和信息混合组成，当然这些标签和信息必须遵循一定的组合规则，否则浏览器是无法解析的。
HTML语言的规范条文不多，相信读者也很容易理解。从逻辑上分析，这些标签包含的内容就表示一类对象，也可以称为网页元素。从形式上分析，这些网页元素通过标签进行分隔，然后表达一定的语义。很多时候，我们把网页标签和网页元素混为一团，而实际上，网页文档就是由元素和标签组成的容器。
所有标签都包含在“<”和“>”起止标识符中，构个标签。例如，<style>、<head>、<body>和<div>等。
在HTML文档中，绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间包含的是元素主体。例如，<body>和</body>中间包含的就是网页内容主体。
起始标签包含元素的名称，以及可选属性，也就是说元素的名称和属性都必须在起始标签中。结束标签以反斜杠开始，然后附加上元素名称。例如：
<tag>元素主体</ta
元素的属性包含属性名称和属性值两部分，中间通过等号进行连接，多个属性之间通过空格进行分隔。属性与元素名称之间也是通过空格进行分隔。例如：
HTML常用标签
HTML定义的标签很多，下面对常用标签进行说明，随着读者学习不断深入，相信会完全掌握HTML所有标签的用法和使用技巧。
1．文档结构标签
文档结构标签主要用来标识文档的基本结构，主要标签说明如下。
<html>...</html>：标识HTML文档的起始和终止。
<head>...</head>：标识HTML文档的头部区域。
<body>...</body>：标识HTML文档的主体区域。
文本格式标签
文本格式标签主要用来标识文本区块，并附带一定的显示格式，主要标签说明如下。
<title>...</title>：标识网页标题。
<hi>...</hi>：标识标题文本，其中i表示1、2、3、4、5、6，分别表示一级、二级、三级等标题。
<p>...</p>：标识段落文本。
<pre>...</pre>：标识预定义文本。
<blockquote>...</blockquote>：标识引用文本。字符格式标签
字符格式标签主要用来标识部分文本字符的语义，很多字符标签可以呈现一定的显示效果。例如，加粗显示、斜体显示或者下划线显示等。
在HTML文档中，列表结构可以分为两种类型：有序列表和无序列表。无序列表使用项目符号来标识列表，而有序列表则使用编号来标识列表的项目顺序。
XHTML文档基本结构
完整的XHTML文档结构如下：
XHTML代码不排斥HTML规则，在结构上也基本相似，但如果仔细比较，它有两点不同。
定义文档类型
在XHTML文档第一行新增了<!DOCTYPE>元素。
声明命名空间
在XHTML文档根元素中必须使用xmlns属性声明文档的命名空间。xmlns是XHTML NameSpace的缩写，中文翻译为命名空间（也有人翻译为名字空间、名称空间）。命名空间是收集元素类型和属性名字的一个详细DTD，它允许通过一个URL地址指向来识别命名空间。
XHTML是HTML向XML过渡的标识语言，它需要符合XML规则，因此也需要定义名字空间。又因为XHTML 1.0还不允许用户自定义元素，因此它的命名空间都相同，就是“Er是根据XML语法简化而来的，因此它遵循XML文档规范。同时XHTML又大量继承HTML语言语法规范，因此与HTML语言非常相似，不过它对代码的要求更加严谨。遵循这些要求，对于培养良好的XHTML代码书写习惯是非常重要的。
XHTML文档类型
XHTML 1.0支持3种DTD（型定义）声明：过渡型（Transitional）、严格型（Strict）和框架型（Frameset）。
1．过渡型
这种文档类型对于标签和属性的语法要求不是很严格，允许在页面中使用HTML 4.01的标签（符合XHTML语法标准）。过渡型DTD语句如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2．严格型
这类文档类型对于文档内的代码要求比较严格，不允许使用任何表现层的标签和属性。严格型DTD语句如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在严格型文档类型中，以下元素将不被支持。
center：居中（属于表现层）。
font：字体样式，如大小、颜色和样式（属于表现层）。
strike：删除线（属于表现层）。
s：删除线（属于表现层）。
u：文本下划线（属于表现层）。
iframe：嵌入式框架窗口（专用于框架文档类型或过渡型文档）。
isindex：提示用户输入单行文本（与input元素语义重复）。
dir：定义目录列表（与dl元素语义重复）。
menu：定义菜单列表（与ul元素语义重复）。
basefont：定义文档默认字体属性（属于表现层）。
applet：定义插件（与object元素语义重复）。
在严格型文档类型中，以下属性将不被支持。
align（支持table包含的相关元素：tr、td、th、col、colgroup、thead、tbody、tfoot）。
language。
background。
bgcolor。
border（table元素支持）。
height（img和object元素支持）。
hspace。
name（在HTML 4.01 Strict中支持，在XHTML 1.0 Strict中的form和img元素不支持）。
noshade。
nowrap。
target。
text、link、vlink和alink。
vspace。
width（img、object、table、col和colgroup元素支持）。
框架型
这是一种专门针对框架页面所使用的DTD，
实际上，DTD是一套关于标签的语法规则。DTD文件是一个ASCII的文本文件，后缀名为.dtd。利用DOCTYPE声明中的URL可以访问指定类型的DTD详细信息。例如，对于XHTML 1.0过渡型DTD的URL为http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd，在Dreamweaver中打开XHTML 1.0过渡型DTD文档，代码显示如图2.4所示。
XHTML 1.0过渡型DTD文档
一个DTD文档包含元素的定义规则，元素间关系的定义规则，元素可使用的属性、实体或符号规则。这些规则用于标签Web文档的内容。此外还包括了一些其他规则，它们规定了哪些标签能出现在其他标签中。文档类型不同，它们对应的DTD也不相同。
DOCTYPE结构图
DOCTYPE声明中各个部分说明如下。
顶级元素：指定DTD中声明的顶级元素类型，这与声明的SGML文档类型相对应。HTML文档默认顶级元素为html。
可用性：指定正式公开标识符（FPI）是可公开访问的对象（PUBLIC）还是系统资源（SYSTEM）。默认为PUBLIC，SYSTEM系统资源包括本地文件或URL。
注册：指定组织是否由国际标准化组织（ISO）注册。“+”（默认）表示组织名称已注册，“-”表示组织名称未注册。W3C是属于非注册的ISO组织，所以显示为“-”符号。
组织：指定在!DOCTYPE声明引用的DTD（文档类型定义）的创建和维护的团体或组织的名称。HTML语言规范的创建和维护组织为W3C。
类型：指定公开文本的类，即所引用的对象类型。HTML默认为DTD。
标签：指定公开文本的描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。HTML默认为HTML，XHTML默认为XHTML，后面跟随的是语言版本号。
定义：指定文档类型定义，包含Frameset（框架集文档）、Strict（严格型文档）和Transitional（过渡型文档）。Strict（严格型文档）禁止使用W3C规范中指定将逐步淘汰的元素和属性，而Transitional（过渡型文档）可以包含除frameset元素以外的全部内容。
语言：指定公开文本的语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为ISO 639语言代码（两个字母要大写），默认为EN（英语）。
名字空间
在XHTML文档中，读者还需要注意另一个容易忽略的问题：给<html>标签定义名字空间。
HTML元信息
在HTML文档结构的头部区域，存储着文档的各种基本信，这些信息主要被浏览器所采用，不会显示在网页正文中。另外，搜索引擎也会检索这些信息，因此重视并设置这些头部信息将有助于提高网页的访问率。
、盒模型
我们在上篇文章<html5前端开发之基础篇>中已经对HTML有了基础的了解，都说‘盒模型’非常神奇，但是很多朋友始终不能掌握其原理。此事无碍，且看此图。
我们把这个盒子，类比成我们中秋节的时候包装月饼的月饼盒子。
其中两个月饼盒子之间的距离就是咱们要介绍的-->margin(外边距).
而咱们每个月饼都要有最外层的包装盒，
这个包装盒的厚度，就是咱们的--> border(边框).
那咱们的月饼不可能都是直接挨在一起的，对吧，
那每个月饼之间的间距，咱们就叫做--> padding(内边距).
那咱们介绍了月饼盒，咱们的月饼总应该有吧。
对的，咱们月饼的宽度就是 --> width.
高度就是 --> height.
而咱们的月饼就叫做 --> element(元素).
“那我们的盒模型的距离又该怎么去计算呢?”看下图
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。
如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素。
二、div标签
上篇文章中我们学习了 HTML 的入门基础，接下来我们该来一起学学最常用的标签 div了。
什么是div呢?说白了，div 是一个块级元素，在实际HTML文档应用中一个块通常是以<div>开头，以</div>结束，<div>的出现也意味着它的内容自动地开始一个新行。此外，还可以对 <div> 元素应用 class 或 id 属性。可以对同一个 <div>元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组(类似的元素，或者可以理解为某一类元素)，而 id 用于标识单独的唯一的元素。
三、块元素(block)
块元素基本特征
块元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
块元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
块元素可以设置margin和padding属性。
块元素支持所有的 CSS 样式
块元素基本可以划分以下几类：
div
无意义，主要是配合界面布局(双标签)
p
语义：段落(双标签)
h1~h6
定义一级标题至六级标题
注意
h1 权重非常高，一般一个页面只有一个H1
h2 权重非常高，一般一个页面不要超过10个，大型网站除外
h3 随便用
都是双标签
但是需要注意一点，假如使用 p 标签的时候，里面嵌套了 div 标签，这样会导致 p 标签里面的样式被分割掉，这点需要注意。
除此之外，块元素还包括有序列表 ol，无序列表 ul ，以及列表dl，dt，dd。
注：所有的标签全部有特定的样式，我们可以通过 CSS 去清掉所有的样式，建立属于自己的 reset.css 文件。
/*margin的样式初始化*/body,h1,h2,h3,h4,h5,h6,p,ol,ul { margin:0;
}/*padding的样式初始化*/ol,ul { padding:0;
}/*列表点点的样式初始化*/ul,ol { list-style: none;
}
四、内联元素(inline)
内联元素基本特征
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
内容撑开宽度
inline元素设置width,height属性无效。
inline元素不支持上下的margin和padding，只支持左右的margin和padding
代码换行被解析
内联元素中，有一个我们最常见的标签，那就是超链接 a 标签。它能从一个页面中跳转到另外一个界面，同时也可以在同一个页面之中设置空间‘锚点’，实现特定位置的跳转
注意：a 标签中一定不能嵌套 a 标签
a标签的锚点设置方法：
可以通过设置 href = “# + 锚点名称” 的方式进行跳转，注意，一定要加 #
例如：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body>
<span id=“top”></span>
<p>asdnajsd</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href=“#top”>回到顶部</a></body></html>
标签的初始化
下划线的样式初始化/*下划线的样式初始化*/a { text-decoration: none;
}/*字体样式初始化*/em { font-style:normal;
}
五、内联块元素
内联块元素基本特性
1.支持所有css的样式
2.除块属性的标签以外，同属性以及行属性标签排在一排
3.代码换行被解析
内联块元素同时具有了块元素可以设置宽度和高度的特点，同时又可以像内联元素一样，可以和其他行属性标签处于同一行。
虽然内联块元素能同时拥有块元素和内联元素的特性，但很多时候，在页面中还是要使用不同标签对应的特性。其次就是，内联块也并不是完美无缺的。因为设置内联块的时候，它的换行会被解析。
如下文所示：
从下图可以看见，img 的边上，并没有 margin，但是实际展示的时候，会存在一条白的间隙。
而当我们把两个 img 标签连在一起写的时候，就正常了，如第一个 img 和第二个 img。
具体解决方法会在下一篇文章中介绍
图片标签的初始化
img { border:none;
}
当然，你在网页中看到块元素，不一定就是块元素，他有可能已经是一个内联块元素了。
display 可以对它原本的特性进行一个修改，可以让原本是块属性的元素变成行属性元素，同时内联属性也同样可以转化为块属性。
本文链接：http://hn.lanou3g.com/lozx/2890.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
