devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML常用标记总结——HTML入门_html常用的段落标记有哪些

作者：weixin_40725706 | 2024-02-16 11:31:40

赞

踩

html常用的段落标记有哪些

HTML常用标记总结

HTML基础

HTML概念

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

html的文件结构

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

html的基本标记

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

body元素的属性

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

页面的注释

CSS注释

/*注释文字*/

  • 1

html注释

<!--注释文字-->

  • 1

JavaScript注释

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

  • 1
  • 2
  • 3

文本

标题

标题标记

一级标题

二级标题

三级标题

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

标题对齐方式

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

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

文字

斜体、下划线、删除线

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

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

  • 1
  • 2
  • 3

上标、下标

1 上标标记内容
1下标标记内容

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

  • 1
  • 2

特殊符号

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

段落

段落标记

<p>段落文字</p>

  • 1

段落的换行标记

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

  • 1

段落的原格式标记

<pre>文本内容</pre>

  • 1

水平线

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

  • 1
  • 2

图像与超链接

添加图像

图像的基本格式

  • 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"><!--相对路径，位于上一级目录-->

  • 1
  • 2
  • 3
  • 4

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

设置图像属性

图像大小与边框

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

  • 1
  • 2

边距与对齐方式

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

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

替换文本与提示文字

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

  • 1
  • 2

链接标记

文本链接

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

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

书签链接

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

  • 1
  • 2

图像的超链接

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
shape属性含义
rectcoords包含4个参数，分别为left、top、right、bottom
ciclecoords包含3个参数，分别为center-x、center-y、tadius
polycoords按顺序取各点的x、y的值

CSS3概述

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

CSS示例

CSS选择器语法格式：

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

  • 1
  • 2
  • 3
  • 4
  • 5

示例：
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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

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;/*设置文本缩进*/
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

[ 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;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

类和ID选择器

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

  • 1
  • 2
  • 3
<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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
#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;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

伪类和伪元素选择器

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

  • :link：表示对未访问的超链接应用样式。
  • :visited：表示对已访问的超链接应用样式。
  • :hover：表示对鼠标所停留的元素应用样式。
  • :active：表示对用户正在单击的元素应用样式。
a:link{
    color:#000;
}
a:visited{
    color:#f00;
}
.hov:hover{
    border:2px red solid; /*增加边框*/
}
.act:active{
    background:#ffff00;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

伪元素选择器

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

  • 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;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

其他选择器

选择器类型说明
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的标记，且匹配标记获取了焦点

常用属性

文本相关属性

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

name2，name3是备用字体。

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

  • 1
  • 2
  • 3
  1. font-size:length
长度单位说明
in英寸
cm厘米
mm毫米
pt印刷的点数，在一般的显示器中，1pt相当于1/72inch
pc1pc=12pt
  • 相对长度单位px，相当于1像素
  • 绝对长度单位em和ex，1em是表示父标记中字母m的标准宽度，1ex表示父标记中字母x的标准高度。
  1. 设置文字颜色属性color
    color:color
    color指具体的颜色值，表示方法为英文单词、十六进制、RGB或HSL。
  2. 设置文字的水平对齐方式属性text-align,
    text-align:left/center/right/justify
    left:左对齐；
    right:右对齐；
    center:居中对齐；
    justify:两端对齐；
  3. 设置段首缩进属性text-indent
    text-indent:length
    length是由百分比数值或者浮点数和单位标识符组成的长度值，允许为负值。

背景相关属性

  1. 添加背景颜色属性background-color
    backround-color:color
    color:color设置背景的颜色。它可以采用英文单词、十六进制、RGB、HSL、HSLA和RGBA等表示方法。
    transparent:表示背景颜色透明。
  2. 添加HTML5中标记的背景图片background-image。
    background-image:url()
  3. 设置图像的平铺方式background-repeat
    background-repeat:inherit/no-repeat/repeat/repeat-x/repeat-y
属性值含义
inherit从父标记集成background-repeat属性的设置
no-repeat背景图像只显示一次，不重复
repeat在水平和垂直方向上重复显示背景图像
repeat-x只沿x轴重复显示背景图像
repeat-y只沿y轴重复显示背景图像
  1. 设置背景图像是否随页面内容滚动background-attachment:
    background-attachment:scroll/fixed
  • scroll:随页面内容滚动。
  • fixed:背景图像固定。
  1. 设定背景图像在页面中的位置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

  1. 边框的颜色属性：border-color
    ① 四边框一种颜色时：border-color:color;
    ② 不同颜色时，同margin设置。
  2. 边框的样式属性：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没有边框
  1. 边框的宽度属性：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复合属性，以下属性的值的集合用于指定对象所应用的动画特效
animationname指定对象所应用的动画名称
animation-durationtime+单位（s）指定对象动画的持续时间
animation-timing-function其属性值与transition-timing-function属性值相关指定对象动画的过渡类型
animation-delaytime+单位s指定对象动画的循环次数
animation-itertion-countnumber或infinite指定对象动画的循环次数
animation-directionnoamal或alternate指定动画在循环中是否反向运动
animation-play-slaterunning或paused指定对象动画的状态
animation-fill-modenone：表示不设置动画之外的状态，默认值.forwards：表示设置对象状态为动画结束时的状态，backwards：表示设置对象状态为动画开始时的状态，both：表示设置对象状态为动画开始或结束的状态
指定对象动画时间之外的状态
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/92746?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号