好程序员HTML5培训教程-html和css的使用方法以及样式

程序员HTML5培训教程-html和css的使用方法以及样式，很好的基础知识系列，内容都是干货知识点，适合收藏下来！

布局步骤

第一步：清除默认样式

第二步：划分模块

第三步：设置模块的大小以及位置

第四步：划分下一级模块

html和css

引入网页头像

css样式表的引入方式

1、外链式

2、嵌入式

3、行内样式

@import url('')

文件命名以及变量命名

命名规范

1、严格区分大小写

2、可以采用字母数字下划线$,数字不开头

3、命名语义化

4、可以采用驼峰命名法

清除默认样式

清楚边距

margin: 0;

padding: 0;

list-style: none;

}

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.双标签：有开始标签和结束标签

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）

过渡transition
transition：all 0.5s；

全部时间

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）

路径：background-image：url（“”），url（“”）；加载多张背景图
背景图大小： background-size：100px auto，100px auto；会重复
背景的图重复：

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（可以省略）））

背景开始渲染的位置： background-origin: ;

8. padding-box；（默认）从padding位置开始渲染

9. border-box；从边框的位置开始渲染

content-box；从内容的位置开始渲染

图片结束渲染的位置：background-clip: ;

11. padding-box；（默认）从padding位置结束渲染

12. border-box；从边框的位置结束渲染

content-box；从内容的位置结束渲染

使得背景图加载到浏览器中
background-attachment: fixed;

8.可以简写：

background：空格隔开；

背景图渐变
background: linear-gradiend(top，颜色1，颜色2，颜色n)

//渐变开始的方向（默认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；

}

值描述测试

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

表格的标题

单元格【tr】【td】

width：单元格宽度height：单元格高度

align：单元格内文本的对齐方式,通常是左，中，右 left，center，right

valign：单元格内文本的对齐方式,通常是上，中，下 top，middle，bottom

nowrap：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行

<td align="center" nowrap>手机空中免费充值</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相似知识自动将单元格内容以粗体显示

表单控件表单标签

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>

女：<input type="radio" name="sex" id="woman">

</label>

4.多选按钮[name的值必须相同]：

请选择你喜欢的音乐：

摇滚：<input type="checkbox" checked>

5.下拉列表【下拉框】：

选择你的学历：

</select>

6.上传文件：

选择你的照片：

7.留言文本空间：

</textarea>

8.用户是否允许重新设置textarea大小css属性：

resize: none/both/vertical/horizontal;不允许/上下允许拖动/只能在垂直方向拖动/只能在水平方向拖动

9.重置按钮：

10.提交按钮：

11.自定义按钮：

12.颜色：

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;

多行文本溢出

指定为弹性盒子
display: -webkit-box;
在弹性盒模型中指定元素的排列顺序
-webkit-box-orient: vertical;
指定文本显示（溢出）的行数;
-webkit-line-clamp: 3;
height要是line-height的倍数
line-height: 70px;
overflow：hidden；

音频视频标签

音频标签

controls 空间向用户显示：

loop 循环播放

autoplay当前页面加载完自动播放

视频标签

H5语义化标签

<section>页面中的某一部分</section>

meta标记【签】

name="关键字" cantent="内容"

<mate http-equiv="Refresh" content="10";url="跳转路径"> //每10s刷新一次并且跳转到跳转路径知识的文件

bgsound标签

body属性

bgcolor:背景颜色
background：背景图片
text：文档中文字的颜色
link：超链接的颜色
alink：正在访问的超链接的颜色
vlink：已访问过的超链接的颜色
leftmargin/rightmargin/topmargin/bottommargin：左/右/上/下边距的像素值

对文字操作的标签

<p></p>开始一个新段落，可单可双
换行标签，单独标记
<pre></pre>预格式化【敲什么样式，显示什么样式】
<font></font> 用来设置文字的字体大小颜色粗细等
文字样式标记[均成对出现]
b 粗体 i 斜体 u 下划线 tt 等宽
sup 上标体 sub 下表体 strike 删除线 big 大号字样
small 小号字样 blink 闪烁字样 em强调字样 strong着重字样 cite引用字样

列表标签

符号列表
<ul type="circlr(空心圆点)/disc（实心圆点）【默认】/square（实心方块）">

2. <li>

<li>

</ul>

排序列表
<ol type="1(数字) /a（a，b，c..）/ A(A,B,C...)/ i(i,ii,iii,...)/ I(I,II,III,...)">

4. <li>

<li>

</ol>

a标签

<a href="路径 " title="鼠标移入时显示的文字" target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开；_parent:在当前窗口的父窗口打开链接；_top:在整个浏览器窗口打开) ...

[字符实体]常用的转义字符

显示结果描述实体名称

空格

< 小于号

大于号

& 和号

" 引号

' 撇号 (IE不支持)

￠分（cent）

£ 镑（pound）

¥ 元（yen）

€ 欧元（euro）

§ 小节

® 注册商标

™ 商标

× 乘号

÷ 除号

选择器

分类

css选择器

1.通用选择器：

*｛｝//选择所有的标签

2.群组选择器：

E1,E2,E3..｛｝//选择E1 E2 E3

3.标签选择器

标签名｛｝

4.类名选择器：

.类名｛｝

5.后代选择器

.E1 .E2｛｝ //选择E1 的后代E2

6.交叉选择器

标签名.类名｛｝

7.id选择器

例如创建id

#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

移动端布局步骤

修改视口
<meta name="viewport" content="width=device-width">

视口：视觉视口，布局视口，理想视口

em:当前字体的倍率 100px=10em

rem：html字体的倍率

移动端窗口 375*667

html{

font-size：0.5rem；

}

.box{

width： 750rem； //375px=750rem*0.5px ； 100px=1rem

height： 1334rem；

}

引入rem.js
<script src="路径"></script>
修改rem.js中设计稿的宽度
100px=1rem

未完待续，感谢关注好程序员前端教程分享！

成	语言	描述
结构	HTML	网页元素和内容
表现	CSS	网页元素页面样式
行为	JavaScript	网页交互

1 HTML概念

HTML，超文本标记语言（Hyper Text Markup Language），是一门描述性语言。标记，标签，元素，叫法不同，意思相同。HTML超文本标记语言主要通过标签的方式，对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML，就是学习各种标签，来搭建网页的结构。

2 HTML结构

结构：!DOCTYPE

说明：作用是告诉浏览器用哪个文档规范来解析文档

标签：html

说明：用于搭建HTML网页文档结构和网页布局

标签：head

说明：用于定义HTML网页文档的头部,它是所有头部元素的容器

标签：body

说明：用来定义HTML网页文档的主体区域

标签：meta

说明：用来描述HTML网页文档的属性

标签：title

说明：用来放到HTML网页文档的头部，是搜索引擎首要抓取的目标代码

2.1 标签

标签，也叫作标记，是由一对尖括号<>，里面包含单词组成

2.1.1 双标签

<html></html>

2.1.2 单标签

<br>

2.1.3 标签关系

嵌套关系

<html>
    <head>
    </head>
</html>

并列关系

<head>
</head>
<body>    
</body>

3 注释

注释用来帮助程序员记录程序设计方法，辅助程序阅读

4 head标签

4.1 title标签

双标签，定义网页的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta标签

是单标签，用来描述HTML网页文档的属性

4.2.1 name属性

属性值	说明
keywords	网页关键字，多个逗号隔开
description	网页描述
author	作者
copyright	版权信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网页关键字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 网页描述 -->
    <meta name="description" content="基础前端知识">
    <!-- 网页作者 -->
    <meta name="author" content="buddha">
    <!-- 网页版权信息 -->
    <meta name="copyright" content="版权所有，翻版必究">
</head>
<body>

</body>
</html>

标签属性：

1、标签的属性写在开始标签内部

2、标签名与属性之间要有空格隔开

3、一个标签可以同时存在多个属性

4、属性之间以空格隔开

5、属性没有先后顺序之分

4.2.2 http-equiv属性

属性值	说明
Content-Type	定义网页所使用编码
refresh	定义网页自动刷新跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置网页编码完整写法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 设置网页编码简写写法 -->
    <meta charset="UTF-8">
    <!-- 网页打开3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style标签

是双标签，用来定义标签的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css内联样式写这里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link标签

是单标签，是用来引入外部css样式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script标签

是双标签，是用来写JavaScript代码的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 这里写JavaScript代码 */
    </script>

</head>
<body>

</body>
</html>

4.6 base标签

是单标签，是用来设置整个网页的基础路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

开发中很少用到，有人使用知道就行

上面所述标签是放在head标签里的，接下来接触的标签都是放在body标签内的

5 文本标签

5.1 标题标签

是双标签，h是header的缩写

<h1>h1标签：一级标题</h1>
<h2>h2标签：二级标题</h2>
<h3>h3标签：三级标题</h3>
<h4>h4标签：四级标题</h4>
<h5>h5标签：五级标题</h5>
<h6>h6标签：六级标题</h6>

特点：

1、字体加粗

2、独占一行

3、从h1到h6，字体逐渐减小

4、使用<h>标签的主要意义是告诉搜索引擎这是一段文字的标题

5、<h1>在一个页面最多只能有一个，不要用多个

5.2 段落标签

是双标签，p是paragraph的缩写

<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>

特点：

1、独占一行

2、段落与段落之间，存在间隙

5.3 换行标签

是单标签，br是break的缩写

<p>这是一段<br>文字</p>

特点：

1、强制换行

2、单标签

5.4 水平线标签

是单标签，hr是horizon地平线的缩写

<p>这是一段文字</p>
<hr>
<p>这是一段文字</p>

特点：

1、在页面中显示一条水平线

2、单标签

6 文本格式化标签

标签1	标签2	说明
b	strong	加粗
u	ins	下划线
i	em	倾斜
s	del	删除线

<b>这是一段文字</b>
<strong>这是一段文字</strong>
<br>
<u>这是一段文字</u>
<ins>这是一段文字</ins>
<br>
<i>这是一段文字</i>
<em>这是一段文字</em>
<br>
<s>这是一段文字</s>
<del>这是一段文字</del>

特点：

1、不会独占一行

2、推荐使用标签2所在列标签

6.1 上标标签

sup是superscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下标标签

sub是subscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	与	&
"	双引号	"
x	乘号	×
÷	除号	÷
-	长破折号	—
\|	竖线	\|
‘	左单引号	‘
‘	右单引号	’
©	版权符	©
®	注册商标	®
™	商标	™
°	度	°

7 媒体标签

7.1 图片标签

<img src="./001.jpg" alt="">

img标签常见属性：

属性名	说明
src	图片路径（绝对路径、相对路径）
alt	图片加载失败时，显示的文字
title	鼠标悬停时，显示的文字
width	图片宽度
height	图片高度

只设置宽或高，会自动等比缩放，宽高只需要数字，不需要'px'

<img src="./001.jpg" alt="图片加载失败" title="这是程序兔" width="200" height="200">

绝对路径：指目录下的绝对位置，比如从根目录开始的路径，或完整的网络地址
相对路径：从当前文件开始出发找目标文件的过程

7.2 音频标签

<audio src="music.mp3" controls autoplay loop></audio>

audio标签常见属性：

属性名	说明
src	音频路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

支持mp3、wav、ogg三种音频格式

7.3 视频标签

<video src="video.mp4" controls loop autoplay></video>

属性名	说明
src	视频路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

支持mp4、webm、ogg三种视频格式

7.4 超链接标签

超链接，是双标签，实现各个独立页面之间进行跳转，可以跳去站外也可以在站内之间跳转

<a href="链接地址">文本或图片</a>

站外跳转，采用绝对路径

<a href="http://www.baidu.com" target="_blank">百度</a>

站内跳转，采用相对路径

<!-- a页面 -->
<a href="b.html">跳去b页面</a>

<!-- b页面 -->
<p>b页面</p>

页面内跳转

<a href="#ms">美食</a>
<a href="#jd">景点</a>
<h3 id="ms">推荐美食</h3>
<!-- 省略n个br标签 -->
<br>
<h3 id="jd">推荐景点</h3>

属性名	说明
href	跳转链接
target	链接打开方式

target属性值

属性值	说明
_self	默认，原窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

target属性值一般使用_self（默认）和_blank

8 列表标签

8.1 无序列表

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

解释：

1、ul，unordered lists，无序列表，li，list item，列表项

2、ul标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值	说明
disc	默认，实心圆
circle	空心圆
square	实心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

解释：

1、ol，ordered lists，有序列表，li，list item，列表项

2、ol标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值	说明
1	默认，阿拉伯数字，1,2,3......
a	小写英文字母，a,b,c......
A	大写英文字母，A,B,C......
i	小写罗马数字,i,ii,iii......
I	大写罗马数字,I,II,III......

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定义列表

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

解释：

1、dl，definition lists，自定义列表；dt，definition term，自定义列表组；dd，definition description，自定义列表描述

<dl>
    <dt>称呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格标签

9.1 表格基本结构

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

解释：

1、tr，table row，表格行；td，table data cell，表行单元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格标签属性

属性名	属性值	描述
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格标题标签

<caption>标题内容</caption>，位于表格内第一行

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表头单元格标签

<th></th>，th，table header cell，表头单元格

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <th>序号</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格语义化结构标签

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
        </tr>
    </tfoot>
</table>

9.6 合并单元格

属性名	属性值	说明
rowspan	合并单元格个数	合并行，单元格垂直合并
colspan	合并单元格个数	合并列，单元格水平合并

<td rowspan="跨越的行数"></td>

<td colspan="跨越的列数"></td>

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>金额</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表单标签

10.1 form标签

双标签，包裹其它表单标签

<form>
    // 表单
</form>

form标签的常用属性

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

name属性

一个页面中，表单可能不止一个。name属性，用来区分不同的表单

<form name="myForm"></form>

method属性

用来指定表单数据使用哪种提交方式给后端

属性值	说明
get	get方式
post	post方式

<form method="get"></form>

action属性

用来指定表单数据提交到哪个地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target属性

该属性跟a标签的target属性一样，其属性值也是四个，一般情况只用到_blank属性值，默认也是这个值

<form target="_blank"></form>

enctype属性

属性值	说明
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
text/plain	空格转换为 "+" 加号，但不对特殊字符编码

<form enctype="multipart/form-data"></form>

10.2 input标签

input是单标签

<input type="表单类型">

属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button	普通按钮
submit	提交按钮
reset	重置按钮
file	文件上传

单行文本框常用属性

属性	说明
value	设置文本框的默认值
size	设置文本框的长度
maxlength	设置最多可输入字符

<form>
    <input type="text" value="默认值" size="长度" maxlength="可输入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密码文本框常用属性

密码文本框常用属性和单行文本框常用属性相同

<input type="password" value="默认值" size="长度" maxlength="可输入字符">

<form>
    <label>密码：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

单选框

属性	说明
name	组名，同组单选框，组名要相同，必要属性
value	单选框选项取值，必要属性
checked	默认选中项，同组单选框，可以有一个默认选中项

<input type="radio" name="组名" value="取值" checked="checked">

<form>
    性别：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

复选框

复选框和单选框的属性都相同，区别复选框可以多选

<form>
    爱好：
    <input type="checkbox" name="hobby" value="篮球" checked>篮球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="台球">台球
</form>

普通按钮

<input type="button" value="取值">

<form>
    <input type="button" value="普通按钮">
</form>

<button>普通按钮</button>

区别：

1、input是单标签，button是双标签

2、button标签的信息除了文本，还可以是图像、其它标签等

3、button有type属性，属性值可以是button、submit、reset等

提交按钮

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把对应表单数据提交给后端服务器

重置按钮

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

点击重置后，所在form表单里所有内容被清空了

文件上传

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名称" cols="列数" rows="行数"></textarea>

<form>
    <textarea name="文本名称" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>选项内容</option>
    <option>选项内容</option>
</select>

下拉列表标签是为了节省页面空间

select标签属性

属性名	说明
name	数据提交后端所需字段
size	下拉选项显示个数
multiple	默认只允许选一个，选多个得加这个属性
disabled	所有下拉选项禁止选中

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18岁以下</option>
        <option>18-28岁</option>
        <option>28-38岁</option>
        <option>38岁以上</option>
    </select>
</form>

option标签属性

属性名	说明
selected	默认选中
value	被选中，数据提交后端的值
disabled	该下拉选项禁止选中

<form>
    <select name="age" size="5">
        <option value="1">18岁以下</option>
        <option value="2" disabled="disabled">18-28岁</option>
        <option value="3" selected="selected">28-38岁</option>
        <option value="4">38岁以上</option>
    </select>
</form>

11 框架标签

<iframe src="URL" width="数值" height="数值"></iframe>

框架标签常用属性

属性名	说明
src	嵌入的文档地址
width	标签宽度
height	标签高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文档禁止被嵌入

12 标签类型

HTML标签分为三种，行内标签、块级标签和行内块级标签。

12.1 行内标签

特点：

1、在页面内只占据刚好能包裹自己内容的空间

2、没有宽高，内容多大就多大，行内标签不能嵌套块级标签（a标签除外）

3、行内标签设置宽高无效，可以对行高line-height进行设置

4、可以设置外边距margin和内边距padding，但只对左右边距有效果，上下无效

5、常见行内标签span、a、strong、ins、del、br等

span标签

双标签，行内标签，本身没有固定样式

<p>我是<span>中国人</span></p>

12.2 块级标签

特点：

1、独占一行

2、高度、宽度、外边距、内边距都可以设置生效

3、宽度默认是父级宽度的100%

4、是一个容器盒子，可以嵌套多层子级行内标签、块级标签，文本类块级标签除外

5、常见块级标签div、p、h1~h6、ol、ul、li等

div标签

双标签，块级标签，本身没有固定样式

<!-- 头部区域 -->
<div></div>
<!-- 内容区域 -->
<div></div>

12.3 行内块级标签

特点

1、在页面内只占据刚好能包裹自己内容的空间

2、高度、宽度、外边距、内边距都可以设置生效

3、常见块级标签img、input、td

12.4 标签类型转换

通过css样式display属性转换，这是css的内容

每个页面都是一个独立的HTML文档，每个HTML文档的主体结构又都是相同的，而且在一个文档中这样的主体结构只能声明一次。可以简单的将HTML文档主体结构分为两部分，一部分是定义文档类型，HTML5中声明文档类型可比以前的版本简单多了，只需要15个字符就可以搞定。另一部分则是定义文档主体的结构框架标签，因为标签并不是任意排放的，需要有一定的嵌套规则。就像一颗树是从树根到树干、树枝、树叶这样的结构生长，而不能在树叶上长出树根来，HTML文档的结构也是如此，整个文档是一个整体，最外层标签只有一个，第二层标签有两个，是这样固定的结构，第三层以后可以任意嵌套，就像一颗倒立的树形结构。如图所示：

图 HTML文档的树状结构

在线咨询

上一篇：第12天 - 16天搞定前端，CSS的边距，内外有别？
下一篇：如何合并视频文件？教你一招，3秒搞定

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

好程序员HTML5培训教程-html和css的使用方法以及样式

1 HTML概念

2 HTML结构

​2.1 标签

2.1.1 双标签

2.1.2 单标签

2.1.3 标签关系

3 注释

4 head标签

4.1 title标签

4.2 meta标签

4.2.1 name属性

4.2.2 http-equiv属性

4.3 style标签

4.4 link标签

4.5 script标签

4.6 base标签

5 文本标签

5.1 标题标签

5.2 段落标签

5.3 换行标签

5.4 水平线标签

6 文本格式化标签

6.1 上标标签

6.2 下标标签

6.3 字符实体

7 媒体标签

7.1 图片标签

7.2 音频标签

7.3 视频标签

7.4 超链接标签

8 列表标签

8.1 无序列表

8.2 有序列表

8.3 自定义列表

9 表格标签

9.1 表格基本结构

9.2 表格标签属性

9.3 表格标题标签

9.4 表格表头单元格标签

9.5 表格语义化结构标签

9.6 合并单元格

10 表单标签

10.1 form标签

10.2 input标签

10.3 多行文本框

10.4 下拉列表

11 框架标签

12 标签类型

12.1 行内标签

12.2 块级标签

12.3 行内块级标签

12.4 标签类型转换

您的项目需求

2.1 标签