HTML常用标记总结

2024-07-02 09:14| 来源: 网络整理| 查看: 265

HTML常用标记总结 HTML基础HTML概念html的文件结构html的基本标记body元素的属性页面的注释文本标题标题标记标题对齐方式文字斜体、下划线、删除线上标、下标特殊符号段落段落标记段落的换行标记段落的原格式标记水平线图像与超链接添加图像图像的基本格式添加图像设置图像属性图像大小与边框边距与对齐方式替换文本与提示文字链接标记文本链接书签链接图像的超链接 CSS3概述CSS示例CSS中的选择器属性选择器类和ID选择器伪类和伪元素选择器伪元素选择器其他选择器常用属性文本相关属性背景相关属性列表相关属性 CSS3高级应用框模型外边距margin内边距padding边框border 布局常用模型浮动定位相关属性动画与特效变换transform过渡transition动画animation

HTML基础 HTML概念

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

html的文件结构文件标题文件正文 html的基本标记属性描述html文件开始标记head文件头部标记title文件标题标记meta元信息标记body文件的主体标记 body元素的属性属性描述text设定页面文字的颜色bgcolor设定页面背景的颜色background设定页面的背景图像bgproperties设定页面的背景图像为固定状态，不随页面的滚动而滚动link设定页面默认的链接颜色alink设定鼠标正在单击时的链接颜色vlink设定访问过后的链接颜色topmargin设定页面的上边距leftmargin设定页面的左边距页面的注释

CSS注释

/*注释文字*/

html注释

JavaScript注释

//单行注释 /*多行注释*/ 文本标题标题标记一级标题二级标题三级标题四级标题五级标题六级标题一级标题二级标题三级标题四级标题五级标题六级标题标题对齐方式文本内容属性含义left文字左对齐center文字居中对齐right文字右对齐文字斜体、下划线、删除线

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

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

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

1 上标标记内容 1下标标记内容特殊符号特殊符号实体名称含义" ;引号 ;右尖括号×× ;乘号©© ;版权符号(空格) ;空格占位符♥&hearts ;心形符段落段落标记段落文字段落的换行标记一段文字一段文字段落的原格式标记文本内容水平线图像与超链接添加图像图像的基本格式 GIF格式（LZW压缩，处理256色）JPEG格式（有损失，处理256色）PNG格式添加图像

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

设置图像属性图像大小与边框边距与对齐方式 align取值表示含义top把图像的顶部与同行最高部分对齐middle把图像的中部和行的中部对齐bottom把图像的底部和同行文本的底部对齐texttop由快到慢，逐渐减速absmiddle把图像的中部和同行最大项的中部对齐baseline把图像的底部和文本的基线对齐absbottom把图像的底部和同行中的最低项对齐left使图像和左边界对齐（文本环绕图像）right使图像和右边界对齐（文本环绕图像）替换文本与提示文字链接标记文本链接链接文字 target属性值含义_blank新建一个窗口打开_parent在上一级窗口打开（常在分帧的框架页面中使用）_self在同一窗口中打开，默认值_top在浏览器的整个窗口打开，将会忽略所有的框架结构书签链接 hello 回到顶部回到hello 图像的超链接 shape属性含义rectcoords包含4个参数，分别为left、top、right、bottomciclecoords包含3个参数，分别为center-x、center-y、tadiuspolycoords按顺序取各点的x、y的值 CSS3概述

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

CSS示例

CSS选择器语法格式：

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

示例： hello.html

我想做你的太阳 You are my sunshine! You are my thousands of stars. You are my moonpie. You born in the Mar.

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中的选择器属性选择器

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

鬼吹灯 PHP 破敌之域

[ 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属性只能定义一个*/ 特价连衣裙￥189.00 秒杀牛仔裤￥299.00 秒杀 #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标记，且该标记显示内容的语言类型为frE: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/72inchpc1pc=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复合属性，以下属性的值的集合用于指定对象所应用的动画特效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：表示设置对象状态为动画开始或结束的状态指定对象动画时间之外的状态

【本文地址】

公司简介

联系我们