HTML常用标记总结

HTML基础
文本
图像与超链接
- 添加图像
- - 图像的基本格式
CSS3概述
CSS3高级应用

HTML基础

HTML概念

HTML（超文本标记语言）是纯文本类型的语言，它是Internet上用于编写网页的主要语言，使用html编写的网页文件也是标准的纯文本文件。
单独标记成对标记

html的文件结构

<html>
<head>
<title>文件标题</title>
</head>
<body>
文件正文
</body>
</html>

html的基本标记

属性	描述
html	文件开始标记
head	文件头部标记
title	文件标题标记
meta	元信息标记
body	文件的主体标记

body元素的属性

属性	描述
text	设定页面文字的颜色
bgcolor	设定页面背景的颜色
background	设定页面的背景图像
bgproperties	设定页面的背景图像为固定状态，不随页面的滚动而滚动
link	设定页面默认的链接颜色
alink	设定鼠标正在单击时的链接颜色
vlink	设定访问过后的链接颜色
topmargin	设定页面的上边距
leftmargin	设定页面的左边距

页面的注释

CSS注释

/*注释文字*/

html注释

<!--注释文字-->

JavaScript注释

//单行注释
/*多行
注释*/

文本

标题

标题标记

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

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

标题对齐方式

<h2 align="left">文本内容</h2>

属性	含义
left	文字左对齐
center	文字居中对齐
right	文字右对齐

文字

斜体、下划线、删除线

斜体内容
带下划线的文字
~~带删除线的文字~~

<em>斜体内容</em>
<u>带下划线的文字</u>
<strike>带删除线的文字</strike>

上标、下标

1^{上标标记内容}
1_{下标标记内容}

1<sup> 上标标记内容</sup>
1<sub>下标标记内容</sub>

特殊符号

特殊符号	实体名称	含义
"	&quot ;	引号
<	&lt ;	左尖括号
>	&gt ;	右尖括号
×	&times ;	乘号
©	&copy ;	版权符号
(空格)	&nbsp ;	空格占位符
♥	&hearts ;	心形符

段落

段落标记

<p>段落文字</p>

段落的换行标记

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

段落的原格式标记

<pre>文本内容</pre>

水平线

<hr><!--默认水平线-->
<hr width="20" align="left">

图像与超链接

添加图像

图像的基本格式

GIF格式（LZW压缩，处理256色）
JPEG格式（有损失，处理256色）
PNG格式

添加图像

 <img src="D:/123/5.jpg"><!--绝对路径-->
 <img src="5.jpg"><!--相对路径，位于同一目录下-->
 <img src="next/5.jpg"><!--相对路径，位于下一级目录-->
 <img src="…/5.jpg"><!--相对路径，位于上一级目录-->

src用于设定图像文件的所在地址。

设置图像属性

图像大小与边框

<img src="图像路径" height="高度" width="宽度"><!--单位是像素-->
<img src="图像路径" border="图像边框大小"><!--单位是像素-->

边距与对齐方式

<img src="路径" hspace="图像水平间距" vspace="图像垂直间距"><!--单位是像素-->
<img src="路径" align="相对文字的对齐方式">

align取值	表示含义
top	把图像的顶部与同行最高部分对齐
middle	把图像的中部和行的中部对齐
bottom	把图像的底部和同行文本的底部对齐
texttop	由快到慢，逐渐减速
absmiddle	把图像的中部和同行最大项的中部对齐
baseline	把图像的底部和文本的基线对齐
absbottom	把图像的底部和同行中的最低项对齐
left	使图像和左边界对齐（文本环绕图像）
right	使图像和右边界对齐（文本环绕图像）

替换文本与提示文字

<img src="路径" title="图像提示文字"><!--鼠标放在图像上显示的提示文字-->
<img src="路径" alt="图像的替换文本"><!--图像无法显示时，显示的文字-->

链接标记

文本链接

<a herf="链接地址" target="打开窗口方式">链接文字</a>

target属性值	含义
_blank	新建一个窗口打开
_parent	在上一级窗口打开（常在分帧的框架页面中使用）
_self	在同一窗口中打开，默认值
_top	在浏览器的整个窗口打开，将会忽略所有的框架结构

书签链接

<a name="123">hello</a> <a herf="#top">回到顶部</a>
<a herf="#123">回到hello</a>

图像的超链接

<a herf="链接地址" target="目标窗口的打开方式"><img src="路径"></a>
<!--图像的超链接-->
<img src="图像地址" usemap="映射图像名称">
<map name="映射图像的名称">
<area shape="热区形状" coords="热区坐标" herf="链接地址">
</map>
<!--图像的热区链接-->

shape属性	含义
rect	coords包含4个参数，分别为left、top、right、bottom
cicle	coords包含3个参数，分别为center-x、center-y、tadius
poly	coords按顺序取各点的x、y的值

CSS3概述

CSS（层叠样式表）是一种样式表语言，各主流浏览器支持其大部分特性。
CSS是一种网页控制技术，采用CSS技术，可有效地对页面布局、字体、颜色、背景和其他效果实现更加精准的控制。

CSS示例

CSS选择器语法格式：

selector {
    
    property:value}
/*selector:选择器，CSS可以通过某种选择器选择想要改变样式的标记。
property:CSS属性。
value:CSS属性值。
*/

示例：
hello.html

<html>
<head>
<meta charset="UTF-8">
<link herf="css/css.css" type="text/css" rel="stylesheet">
<!--将css文件连接到HTML文件-->
</head>
<body>
<p>我想做你的太阳</p>
<p class="sun">You are my sunshine!</p>
<p class="star">You are my thousands of stars.</p>
<p class="moon">You are my moonpie.</p>
<p claas="Mar">You born in the Mar.</p>
</body>
</html>

css.css

p{
    
    
    text-align:center;/*设置文本居中显示*/
}
.sun{
    
    
    text-transform:capitalize;/*设置每个单词的首字母大写*/
    line-height:30px;/*设置行高为30像素*/
    color:#ff6437;/*设置文字颜色*/
    font-weight:500;/*设置文本的粗细*/
    cursor:help;/*设置鼠标放置文字上时光标的形状*/
}
.star{
    
    
    letter-spacing:10px;/*设置文字间距*/
    color:#00B2ED;/*设置文字颜色*/
    text-decoration:underline;/*为文字添加下划线*/
}
.moon{
    
    
    color:red;/*设置文字颜色*/
    font-weight:bold;/*加粗*/
}
.Mars{
    
    
    font-size:30px;/*设置文字的字体大小*/
    background-color:red;/*设置文字的背景颜色*/
    cursor:pointer;/*设置鼠标放在文字上时光标的形状*/
    text-indent:30px;/*设置文本缩进*/
}

CSS中的选择器

属性选择器

属性选择器是用属性进行标记，这些属性可以是标准属性，也可以是自定义的属性。

<p font="fontsize" >鬼吹灯</p>
<p color="red" font="fontsize">PHP</p>
<p color="green">破敌之域</p>
<div class="num">
<img src="images/1.jpg" alt="1" att="a">
<img src="images/2.jpg" alt="2" att="b">
<img src="images/3.jpg" alt="3" att="c">
<img src="images/4.jpg" alt="4" att="d">
<img src="images/5.jpg" alt="5" att="e">
</div>

[ att = val ] { }
其中att代表属性，val代表属性值。0

[att=a],[att=b],[att=c],[att=d],[att=e]{
    
    
    width:108px;
    height:182px;
}
[att=a]{
    
    
left:140px;
top:20px;
}
[att=b]{
    
    
left:700px;
top:20px;
}
[att=c]{
    
    
left:400px;
top:180px;
}
[color=red]{
    
    
    color:red;
}
[color=green]{
    
    
    color:green;
}
[font=fontsize]{
    
    
    font-size:20px;
}

类和ID选择器

#into{
    
    color:red; }/*ID选择器*/
.into{
    
    color:red; }/*类选择器*/
/*class属性可以定义多个，但id属性只能定义一个*/

<div id="OnlineShop">
  <div class="top">特价</div>
  <div class="bottom">
    <div class="part1"><img src="images/1.jpg" class="img"><!--商品图1-->
      <p class="title">连衣裙</p>
      <div>
        <div class="money">￥189.00</div>
        <div class="minute">秒杀</div>
      </div>
    </div>
    <div class="part2"><img src="images/2.jpg" class="img"><!--商品图2-->
    <p class="title">牛仔裤</p>
      <div>
        <div class="money">￥299.00</div>
        <div class="minute">秒杀</div>
      </div>
    </div>
  </div>
</div>

#OnlineShop{
    
    
    width:1090px;
    height:390px;
    margin:0 auto;
    background:#ffd800;
    border:1px solid red;
    text-align:left;
}
.top{
    
    
  width:1073px;
  height:60px;
  padding:20px 0 0 10px;
  color:#8a5223;
  font-size:32px;
  font-weight:bolder;
}
.bottom{
    
    
    width:1200px;
    height:336px;
}
.part1{
    
    
    width:260px;
    height:300px;
    float:left;
    text-align:center;
    margin-left:10px;
    background:#FFF;
}

伪类和伪元素选择器

伪类选择器是CSS已经定义好的选择器，用来对某种特殊状态的目标元素应用样式。

:link：表示对未访问的超链接应用样式。
:visited：表示对已访问的超链接应用样式。
:hover：表示对鼠标所停留的元素应用样式。
:active：表示对用户正在单击的元素应用样式。

a:link{
    
    
    color:#000;
}
a:visited{
    
    
    color:#f00;
}
.hov:hover{
    
    
    border:2px red solid; /*增加边框*/
}
.act:active{
    
    
    background:#ffff00;
}

伪元素选择器

伪元素选择器是用来改变文档中特定部分的效果样式，而这一部分是通过普通的选择器无法定义到的部分。

first-letter：对指定对象内第一个字符起作用。
first-line：对指定对象内的第一行内容起作用。
before：与内容相关的属性结合使用，用于正在指定对象内部的前端插入内容。
after：用于在指定对象内部的尾端插入内容。

.txt:first-line{
    
    
    font-size:35px;
    height:50px;
    line-height:50px;
    color:#000;
}
p:first-letter{
    
    
    font-size:30px;
    margin-left:20px;
    line-height:30px;
}
.txt:after{
    
    
    content:url("··/img/1.png");
    position:absolute;
    top:55px;
    left:777px;
}

其他选择器

选择器	类型	说明
E{}	标记选择器	指定该CSS3样式对所有E标记起作用
EF	包含选择器	匹配所有包含在E标记内部的F标记。注意，E和F不仅仅是指类型选择器，还可以是任意合法的选择器组合
*	通配选择器	选择文档中所有的标记
E>F	子包含选择器	选择匹配E标记的子标记中的F标记。注意，E和F不仅仅是指类型选择器，还可以是任意合法的选择符组织
E+F	相邻兄弟选择器	匹配与E标记同级，且位于E标记后面相邻位置的F标记。注意，E和F不仅仅是指类型选择器，还可以是任意合法的选择符组合
E~F	通用兄弟标记选择器	匹配所有的与E同级且位于E后面的所有F标记。注意，这里的同级是指子标记和兄弟标记的父标记是同一个印记
E:lang（fr）	:lang()伪类选择器	选择匹配E标记，且该标记显示内容的语言类型为fr
E:first-child	结构伪类选择器	选择E标记的第一个子标记
E:focus	用户操作伪类选择器	选择匹配E的标记，且匹配标记获取了焦点

常用属性

文本相关属性

字体属性font-family
font-family:name1,[name2],[name3];

name2，name3是备用字体。

.font{
    
    
    font-family:"宋体","黑体","楷体";
}

font-size:length

长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	印刷的点数，在一般的显示器中，1pt相当于1/72inch
pc	1pc=12pt

相对长度单位px，相当于1像素
绝对长度单位em和ex，1em是表示父标记中字母m的标准宽度，1ex表示父标记中字母x的标准高度。

设置文字颜色属性color
color:color
color指具体的颜色值，表示方法为英文单词、十六进制、RGB或HSL。
设置文字的水平对齐方式属性text-align,
text-align:left/center/right/justify
left:左对齐；
right:右对齐；
center:居中对齐；
justify:两端对齐；
设置段首缩进属性text-indent
text-indent:length
length是由百分比数值或者浮点数和单位标识符组成的长度值，允许为负值。

背景相关属性

添加背景颜色属性background-color
backround-color:color
color:color设置背景的颜色。它可以采用英文单词、十六进制、RGB、HSL、HSLA和RGBA等表示方法。
transparent:表示背景颜色透明。
添加HTML5中标记的背景图片background-image。
background-image:url()
设置图像的平铺方式background-repeat
background-repeat:inherit/no-repeat/repeat/repeat-x/repeat-y

属性值	含义
inherit	从父标记集成background-repeat属性的设置
no-repeat	背景图像只显示一次，不重复
repeat	在水平和垂直方向上重复显示背景图像
repeat-x	只沿x轴重复显示背景图像
repeat-y	只沿y轴重复显示背景图像

设置背景图像是否随页面内容滚动background-attachment:
background-attachment:scroll/fixed

scroll:随页面内容滚动。
fixed:背景图像固定。

设定背景图像在页面中的位置background-position:
background-position:length/percentage/top/center/bottom/left/right

属性值	含义
length	设置背景图像与页面边距水平和垂直方向的距离，单位为cm、mm、px等
percentage	根据页面标记框的宽度和高度的百分比放置背景图像
top	设置背景图像顶部居中显示
center	设置背景图像居中显示
bottom	设置背景图像底部居中显示
left	设置背景图像左部居中显示
right	设置背景图像右部居中显示

列表相关属性

list-style：简写属性，把所有勇于列表的属性设置于一个声明中。
list-style-image：将图像设置为列表项标志。
list-style-position：设置列表项的标志在文本以内或以外。
list-style-type：设置列表项标志的类型。

CSS3高级应用

框模型

外边距margin

外边距是元素与元素之间的距离，包括四部分：margin-top,margin-right,margin-bottom,margin-left。
语法格式如下：margin-top:/auto
① auto:表示默认的外边距。
② length:使用百分比或者长度数值表示上边距。
可以只设置部分外边距的值的值。
只有一个数值时，默认四个都为该值。
只有两个，默认对应值相同。
有多个时，表示从顶端开始，按照顺时针的顺序，依次描述各外边距的值。

内边距padding

内边距就是元素的内容与对象边框之间的距离。它可以通过padding属性进行设置。
① List item
包括padding-top,padding-right,padding-bottom,padding-left.
② 方法同上margin.

边框border

边框的颜色属性：border-color
① 四边框一种颜色时：border-color:color;
② 不同颜色时，同margin设置。
边框的样式属性：border-style
border-style:dashed/dotted/double/groove/hidden/inset/outset/ridge/solid/none.

属性值	含义
dashed	边框样式为虚线
dotted	边框样式为点线
double	边框样式为双线
groove	边框样式为3D凹槽
hidden	隐藏边框
inset	设置线条样式为3D凹边
outset	设置线条样式为3D凸边
ridge	设置线条样式为菱形边框
solid	设置线条样式为实线
none	没有边框

边框的宽度属性：boeder-width
border-width：medium/thick/length
① medium：默认边框宽度
② thin：比默认边框窄
③ thick：比默认边框宽
④ length：指定具体的线条的宽度

布局常用模型

浮动

float是CSS3表中的浮动属性
float:left/right/none

left:元素浮动在左侧
right:元素浮动在右侧
none:元素不浮动

定位相关属性

position:static/absolute/fixed/relative

static:无特殊定位，元素遵循HTML规则。使用该属性时，top、right、bottom、left等属性无效
absolute:绝对定位，使用top、right、bottom、left指定绝对位置。使用该属性值可以让元素漂浮于页面上。
relative:绝对定位，遵循HTML规则，并由top、right、bottom、left决定位置。
fixed:绝对定位，且元素位置固定，不随滚动条移动而改变位置。

动画与特效

变换transform

值/函数	含义
none	表示无变换
translate（length1，[lenth2]）	实现2D平移，第一个参数对应水平方向，第二个对应y轴
translateX（length）	表示在水平方向上实现平移
translateY（length）	表示在垂直方向上实现平移
scaleX（number）	表示在x轴上进行缩放
scaleY（number）	表示在x轴进行缩放
scale（number1，number2）	表示进行2D缩放
skew（angle1，angle2）	表示进行2D倾斜。第一个参数对应水平方向，第二个参数对应垂直方向。
skewX（angle）	表示在x轴上进行倾斜
skewY（angle）	表示在y轴上进行倾斜
rotate（angle）	表示进行2D旋转。参数angle用于表示旋转的角度
matrix（number1，number2，number3，number4，number5，number6）	代表一个基于矩阵变换的函数，以一个包含6个值的变换矩阵形式指定一个2D变换，相当于直接应用一个变换矩阵。也就是基于X轴和Y轴重新定位标记。

过渡transition

参与过渡的属性transition-property
transiton-property：all|none|property[property]
all:默认值，表示所有可以过渡的CSS属性
none:表示不指定过渡的CSS属性
property:表示指定要进行过渡的CSS属性。可以同时指定多个属性值。
指定过渡持续的时间
transition-duration:time1，[time2]
time用于指定过渡持续的时间，默认值都为0。
指定过渡的延迟时间的属性
transiton-delay:time1，[time2]
time用于指定延迟过渡的时间，默认值都为0。
制定过渡的订花类型属性
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(x1,x2,x3,x4)[,linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(x1,x2,x3,x4)]

属性	说明
linear	线性过渡，也就是匀速过度
ease	平滑过渡，过渡的速度会逐渐慢下来
ease-in	由慢到快，也就是逐渐加速
ease-out	由快到慢，也就是逐渐减速
ease-in-out	由慢到快再到慢，也就是先加速后减速
cubic-bezier（x1,x2,x3,x4）	特定的贝塞尔曲线类型

动画animation

（1）关键帧
@keyframes name（keyframes-blocks）
name:定义一个对话名称，该对话名称将用来被animation-name属性所使用。
keyframes-blocks：定义动画在不同时间段的样式规则。

属性	属性值	说明
animation	复合属性，以下属性的值的集合	用于指定对象所应用的动画特效
animation	name	指定对象所应用的动画名称
animation-duration	time+单位（s）	指定对象动画的持续时间
animation-timing-function	其属性值与transition-timing-function属性值相关	指定对象动画的过渡类型
animation-delay	time+单位s	指定对象动画的循环次数
animation-itertion-count	number或infinite	指定对象动画的循环次数
animation-direction	noamal或alternate	指定动画在循环中是否反向运动
animation-play-slate	running或paused	指定对象动画的状态
animation-fill-mode	none：表示不设置动画之外的状态，默认值.forwards：表示设置对象状态为动画结束时的状态，backwards：表示设置对象状态为动画开始时的状态，both：表示设置对象状态为动画开始或结束的状态
指定对象动画时间之外的状态

HTML常用标记总结——HTML入门

HTML常用标记总结

HTML基础

HTML概念

html的文件结构

html的基本标记

body元素的属性

页面的注释

文本

标题

标题标记

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

标题对齐方式

文字

斜体、下划线、删除线

上标、下标

特殊符号

段落

段落标记

段落的换行标记

段落的原格式标记

水平线

图像与超链接

添加图像

图像的基本格式

添加图像

设置图像属性

图像大小与边框

边距与对齐方式

替换文本与提示文字

链接标记

文本链接

书签链接

图像的超链接

CSS3概述

CSS示例

CSS中的选择器

属性选择器

类和ID选择器

伪类和伪元素选择器

伪元素选择器

其他选择器

常用属性

文本相关属性

背景相关属性

列表相关属性

CSS3高级应用

框模型

外边距margin

内边距padding

边框border

布局常用模型

浮动

定位相关属性

动画与特效

变换transform

过渡transition

动画animation

猜你喜欢