常用标签极其属性
- 格式:doc
- 大小:34.00 KB
- 文档页数:2
html标签大全一、文字1.标题文字<h#>..........</h#> #=1~6;h1为最大字,h6为最小字2.字体变化<font>..........</font>【1】字体大小<font size=#>..........</font> #=1~7;数字愈大字也愈大【2】指定字型<font face="字体名称">..........</font>【3】文字颜色<font color=#rrggbb>..........</font>rr:表红色(red)色码gg:表绿色(green)色码bb:表蓝色(blue)色码rrggbb也可用6位颜色代码数字3.显示小字体<small>..........</small>4.显示大字体<big>..........</big>5.粗体字<b>..........</b>6.斜体字<i>..........</i>7.打字机字体<tt>..........</tt>8.底线<u>..........</u>9.删除线<strike>..........</strike>10.下标字<sub>..........</sub>11.上标字<sup>..........</sup>12.文字闪烁效果<blink>..........</blink>13.换行(也称回车)<br>14.分段<p>15.文字的对齐方向<p align="#"> #号可为left:表向左对齐(预设值)center:表向中对齐right:表向右对齐P.S.<p align="#">之后的文字都会以所设的对齐方式显示,直到出现另一个<p align="#">改变其对齐方向,遇到<hr>或<h#>标签时会自动设回预设的向左对齐。
HTML中主要标签有哪些-文字标签-布局常用标签在HTML中的主要标签有这些:文件开始标签“html〞、文件头部标签“head〞、文件主体标签“body〞。
如果想具体了解HTML 中主要标签有哪些,那无妨接着往下看吧!一、HTML中主要标签有哪些1、文件开始标签“html〞在HTML文件中,最先出现的是HTML标签就是“html〞,它表示这是HTML文件,它是双标签,首标签和尾标签分别位于文件的最前面和最后面,文件所有标签和文本都包涵在其中,该标签不带任何属性。
2、文件头部标签“head〞“head〞表示文件头部的标签,它是双标签,它包涵文件的标题、编码方式及URL等信息,可省略。
3、文件主体标签“body〞“body〞表示文件主体内容,它是双标签。
文件头部标签用以存储重要信息,而只有主体部分会被显示,所以大部分标记都位于文件主体部分。
该标签可带属性。
二、网页〔制定〕的常用文字标签1、标题文字标签“hn〞“hn〞为标题文字标签,它是一个双标签,其作用是设置网页中的标题文字。
“hn〞标签一共6级,“h1〞和“h1〞之间的文字是第1级标题,“h6〞和ch6〞之间的文字是第6级标题,由“hl〞到“h6〞逐渐变小。
每个标题标记所标示的字句将独占一行且上下留一空白行。
“hn〞有一个属性align,其属性可选值为:right、left、center。
2、文字格式控制标签“font〞“font〞为文字格式控制标签,它是一个双标签,其作用是设置文字的字体、大小和颜色。
“font〞的属性有face、size、color。
face:设定文字字体,其属性为字体名称。
size:设定文字大小,取值1~7,默认值为3。
也可用“+〞“-〞来设置相对值。
color:设定文字颜色。
可以用和#nnnnnn,也可以采纳颜色的名称。
三、页面布局常用标签1、换行标签“br〞“br〞为换行标签,它是一个单标签,作用是令其后的内容在下一行显示。
form(表单)标签常⽤标签及属性1.表单标签语法:<form method="传送⽅式" action="服务器⽂件"></form>(1)<form>标签成对出现,(2)两种数据传送⽅式(get/post)2.⽂本框,密码框:语法:<form><input type="text/password" name="名称" value="⽂本"></form>(1)type="text"时,输⼊框为⽂本框(2)type="password"时,输⼊框为密码框(3)name,命名⽂本框(4)value,⽂本框输⼊的默认值例:<form>姓名:<input type="text">密码:<input type="password"></form>3.多⾏⽂本:语法:<form><textarea rows="⾏数" cols="列数"></textarea></form>例:<form><textarea rows="10" cols="10"></textarea></form>4.单选框,多选框语法:<form><input type="radio/checkbox" value="值" name="名称"> </form>type=“radio”时,输⼊框为单选框type=“checkbox”时,输⼊框为多选框例:<form><input type="radio" value="' name="">是<input type="radio" value="" name="">否</form><form><input type="checkbox" value="" name="">1<input type="checkbox" value="" name="">2<input type="checkbox" value="" name="">3</form>5.下拉列表框:语法:<form><select><option value="值"></option><option value="值"></option><option value="值"></option></select></form>6.下拉列表多选框:语法:<form><select multiple><option></option><option></option><select></form>7.普通,提交,重置按钮:语法:<form><input type="button" value="普通按钮"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"></form>。
Css+div总结的一些常用CSS标签及属性CSS中的长度绝对单位:几乎不用在网页中in 英寸 1in = 2.54cmcm 厘米 1cm = 0.394inpt 磅 1in = 72ptpc pica 1in = 6pc相对单位:较常用em 1em = 相应字体的font-size值ex 1ex = 相应字体中的小写x字母的高度值,较难求得,一般取0.5em px 最为常用的CSS中的元素分类display 设定元素所属类别,不可继承none(设定为不显示在屏幕上)block(块级元,包括 P,H1-H6,list,div,body)inline(内联元,包括 a,em,span)list-item(列表元,如 LI)颜色与背景类color 设置文字颜色#rgb #rrggbb rgb(255,255,255) rgb(100%,100%,100%)H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color 设置背景颜色,格式同上;不可继承,可用于所有元BODY{background-color:red}BODY{background-color:#f00}BODY{background-color:#ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)}background-image 设置背景图片,默认为none,不可继承,可用于所有元url(imageURL) nonebody{backround-image:url(back.jpg);}background-repeat 设置背景图片是否重复排列,不可继承,用于所有元repeat(XY轴均重复) repeat-x(X轴重复排列) repeat-y(Y轴重复排列) No-repeat(不重复排列,默认值)BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;}background-attachment 设定背景图片是否卷动,不可继承,用于所有元scroll(随网页卷动,默认值) fixed(不随网页卷动)BODY{background-attachment:fixed;}background-position 设定背景图片或背景颜色开始显示的位置,不可继承,用于块级元和可替换元top,buttom,left,right,center(用关键字)70px 10px(用长度值)50% 30%(用百分比)BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;}background 定义背景综合属性,不要求顺序,各属性值以空格分开BODY{background:#ffcc00 url(bg.jpg) fixed center}字型类font-family 设置字型属性,取值可以是任何字型名称,缺省为浏览器内定字型,可以设多个以逗号(,)分开,有空格的英文字型可用单引号或双引号括起来。
maven常用标签【一、简介】Maven是一个开源的构建工具,它使用XML文件来配置和描述项目的依赖、构建过程等信息。
Maven的配置文件中包含了许多标签,这些标签可以方便地定制项目的各种属性。
【二、常用标签介绍】1.`<groupId>`:定义项目的唯一标识,通常采用组织域名反写的形式。
例如:com.example.myproject。
2.`<artifactId>`:定义项目的名称,通常为项目的主类名反写,不含包名。
例如:myproject。
3.`<version>`:定义项目的版本,通常采用主版本号和次版本号的形式,如1.0或1.0.1。
4.`<packaging>`:定义项目的打包方式,默认值为pom,表示项目为POM文件。
其他可用的值包括:jar、ear、war等。
5.`<name>`:定义项目的显示名称,通常为项目名称加上版本号。
例如:My Project 1.0。
6.`<description>`:定义项目的简短描述,用于说明项目的作用和用途。
7.`<url>`:定义项目的长期唯一标识,通常为项目的GitHub仓库地址。
8.`<properties>`:定义项目的属性,如编译插件的版本、编码格式等。
例如:```<properties><piler.source>1.8</piler.source><piler.target>1.8</piler.target><piler.plugin.version>3.8.1</piler.plugin.version ></properties>```9.`<dependencies>`:定义项目依赖的其他项目,包括依赖的jar包、版本等信息。
meta标签常⽤属性整理概要标签提供关于HTML⽂档的元数据。
元数据不会显⽰在页⾯上,但是对于机器是可读的。
它可⽤于浏览器(如何显⽰内容或重新加载页⾯),搜索引擎(关键词),或其他 web服务。
——必要属性属性值描述content some text定义与http-equiv或name属性相关的元信息可选属性属性值描述http-equiv content-type / expire / refresh / set-cookie把content属性关联到HTTP头部。
name author / description / keywords / generator / revised / others把 content 属性关联到⼀个名称。
content some text定义⽤于翻译 content 属性值的格式。
### SEO优化页⾯关键词,每个⽹页应具有描述该⽹页内容的⼀组唯⼀的关键字。
使⽤⼈们可能会搜索,并准确描述⽹页上所提供信息的描述性和代表性关键字及短语。
标记内容太短,则搜索引擎可能不会认为这些内容相关。
另外标记不应超过 874 个字符。
<meta name="keywords" content="your tags" />页⾯描述,每个⽹页都应有⼀个不超过 150 个字符且能准确反映⽹页内容的描述标签。
<meta name="description" content="150 words" />搜索引擎索引⽅式,robotterms是⼀组使⽤逗号(,)分割的值,通常有如下⼏种取值:none,noindex,nofollow,all,index和follow。
确保正确使⽤nofollow和noindex属性值。
<meta name="robots" content="index,follow" /><!-- all:⽂件将被检索,且页⾯上的链接可以被查询; none:⽂件将不被检索,且页⾯上的链接不可以被查询; index:⽂件将被检索; follow:页⾯上的链接可以被查询; noindex:⽂件将不被检索; nofollow:页⾯上的链接不可以被查询。
标记及属性标记及属性⼀、通⽤标签及属性1.基础标签(1)<head></head>(头标签)(2)<meta/> (编码格式)(3)<body></body>(主题标签)属性:bgcolor背景⾊;text字体颜⾊;background背景图⽚;margin(⽹页的4个边距数值):topmargin上边距;leftmargin左边距;rilghtmargin右边距;bottommargin下边距2.路径(1)绝对路径(从根开始的)/:从磁盘开始如:file:///F|/(2)相对路径(从⾃⾝开始)./ :当前⽬录; ../ :上级⽬录;/ :代表根(当前⽬录⾥⾯另⼀个⽂件夹⾥⾯的⽂件)例如:../⽂件夹/要找的⽂件3.格式控制类<font> 属性: color字体颜⾊;face字体样式;size字体⼤⼩;<b>、<strong>加粗;<i> 、<em>倾斜;<u>下划线;<s>删除线;<br/>换⾏; 空格;sub下标记;sup上标记例如:<font face="微软雅⿊" size="+4"><b><sub> 20170308</sub></b></font>4.<h1>--<h6> (做标题的由⼤到⼩)5.<p></p> (做段落)6.<span></span> (层标签)(1)内容多⼤占多⼤地(2)加属性、样式表⽤的7.<div></div> (层标签)(1)不管内容多⼤默认占⼀⾏(2)加属性、样式表⽤的8. <ol><li>有序列表 <ol>属性:type="a、A、1、i、I "例如:<ol type="a"><li>第⼀</li><li>第⼆</li></ol>9.<ul><li>⽆序列表 <ul>属性:type="square"⽅格、 type="circle"空⼼圆、type="disc"圆点例如:<ul type="square"; type="circle";type="disc"><li>第⼀</li><li>第⼆</li></ul>⼆、常⽤标签1.<a></a> 超级链接(<a href="http://⽹址"></a>)属性:(1) target=_blank (重新打开⼀个新的窗⼝)(2) target=_parent (在本窗⼝打开并覆盖)做锚点:<a name="D1"> </a> (要定的点)< a href="#D1"> 跳转到D1</a>< a href="#"> 跳转到定点</a> (#这⾥表⽰定点)2.<img/>导⼊图⽚(单标签)属性:width 宽度;height ⾼度;title 图⽚的标题,⿏标放上显⽰;alt 坏图显⽰名字例如:<img src="图⽚" width="100px" height="100px" alt="坏图显⽰名字" title="图⽚的标题,⿏标放上显⽰"/>图⽚超级链接:<a href="http://⽹址"><img src="图⽚" width="100px" height="100px" alt="坏图显⽰名字" title="图⽚的标题,⿏标放上显⽰"/></a>三、表格标签1.<table></table>表格属性:border(边框粗细);cellspacing(单元格间距);cellpadding(单元格边距);bordercolor(边框颜⾊);width(宽度);height(⾼度)2.<tr></tr>⾏属性:align=left(此⾏全部⽔平左对齐);align=right(此⾏全部⽔平右对齐);align=center(此⾏全部⽔平居中对齐)valign=left(此⾏全部垂直左对齐);valign=right(此⾏全部垂直右对齐);valign=center(此⾏全部垂直居中对齐)3.<td></td>列属性:width单元格宽度;height单元格⾼度;bgcolor背景颜⾊;rowspan合并单元格(⾏);colspan合并单元格(列)align=left(⽔平左对齐);align=right(⽔平右对齐);align=center(⽔平居中对齐)valign=left(垂直左对齐);valign=right(垂直右对齐);valign=center(垂直居中对齐)4.<th></th>表题,默认单元格内容⾃动居中、加粗 (尽量不要跟<thead></thead>⼀起出现)5.<tfoot></tfoot>显⽰效果都会在最后⼀⾏6.<thead></thead>显⽰效果都会在最上⾯⼀⾏。
【前端HTML 】常⽤标签及属性路径r相对路径绝对路径标签ⅡⅢⅢⅡ<small>small⼩号字<strong>strong加重语⽓<sub>SUBscript下标<sup>SUPerscript上标<u>Underline下划线列表标签<ul>Unorder List⽆序列表块标签<ol>Order List有序列表块标签<li>LIst列表项⽬块标签<dl>Define List定义列表块标签<dt>Define Title定义标题块标签<dd>Define Describtion定义描述块标签表格相关<table>表格块标签<tr>Table Row表⾏块标签<td>Table Data cell单元格<th>Table Head表头<caption>caption标题<thead>Table head表头部分<tbody>Table body主体部分<tfoot>Table foot底部业脚部分表单相关<form>form表单<input>input表单元素(输⼊框)空标签<select>select选择(下拉框)<option>option选项(下拉列表项)<textarea>text area⽂本域框架相关<frameset>frame set框架集<frame>frame框架空标签<iframe>iframe内嵌框架容器<div>division 分隔(容器标签(块))<span>span跨度(容器标签(⾏内))标签分类标签名英⽂英⽂含义标签类型备注属性属性名英⽂英⽂含义取值应⽤场景备注src SouRCe资源位置资源的路径border border边框数字(像素) size size尺⼨数字(像素) width width宽度数字(像素) height height⾼度数字(像素)bgcolor BackGroundCOLOR背景颜⾊颜⾊值:red或#ffffffbackground background背景图⽚图⽚路径list-style list-style设置列表的所有属性列表list-style-image list-style-image将图像设置为列表项标记Noneurl列表list-style-type list-style-type设置列表项标记的类型Disc(实⼼圆)Cirle(空⼼圆)Square(实⼼⽅块)列表line-height line-height⾏⾼(⾏间距)数字(像素)布局多⾏⽂本text-align text-align对齐⽅式Left、right、center各种元素对齐letter-spacing letter-spacing字符间距数字(像素)加⼤字符间间隔text-decoration text-decoration⽂本修饰Underline、none加下划线、中划线等margin-top(right、bottom、left)margin外边距数字(像素)padding-top(right、bottom、left)padding内边距数字(像素)Ⅱbottom 、left)displaydisplay改变块级元素与⾏内元素的默认显⽰⽅式block(⾏变块)inline(块变⾏)none(该元素不显⽰在⽹页中)position position 定位static(静态定位)relative(相对定位)absolute(绝对定位)fixed(固定定位)⽤于定位float float 浮动None 、left 、right clearclear处理浮动塌陷left(清除左边浮动)right(清除右边浮动)both(清除两边浮动)none(不清除浮动)type type 列表类型Disc(实⼼圆)Cirle(空⼼圆)Square(实⼼⽅块)⽤于列表alignalign对齐Left 、right 、center top 、middle 、bottom 段落内容⽔平对齐⽂字与图⽚垂直对齐type type 表单元素类型text(⽂本)checkbox(复选)radio(单选)password(密码)file(⽂件)submit(提交)reset(重置)button(按钮)image(图⽚按钮)hidden(隐藏)表单元素method method 表单数据的提交⽅式get postalt alter 改变、替换(图⽚不显⽰时提⽰信息)图⽚cellpadding cell padding 单元格内边距数字表格cellspacing cell spacing 单元格之间距离数字表格href Hypertext REFerence 超⽂本引⽤(跳转到⽂件位置)relRELationship关系(⽤于定义链接的⽂件和HTML ⽂档之间的关系)StyleSheet 样式表link 链接⼀个⽂件时target target ⽬标(⽹页打开的位置)_blank(新窗⼝打开)_self(⾃⾝窗⼝打开)_top(以整个浏览器作业作为窗⼝显⽰新页⾯)_parent(在⽗窗⼝中打开新的页⾯)colspan COLumn span 单元格跨列数字(跨的列数)表格rowspan row span 单元格跨⾏数字(跨的⾏数)表格readonly read only 只读value value 输⼊框的初始值maxlength max length 最⼤长度scrolldelay scroll delay 滚动延时<m arquee>directiondirection⽅向(滚动⽅向)<m arquee属性名英⽂英⽂含义取值应⽤场景备注块级标签<div>、<h1>~<h6>、<p>、<hr>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>、<table>⾏级标签<a>、<font>、<img>、<input>、<select>、<textarea>、<label>、<span>ⅡⅡ选择器简单选择器属性选择器复合选择器关系选择器伪类选择器ⅡⅢⅢⅢⅢⅢ伪类:(不存在的类,特殊的类)⼀般是使⽤:开头,⽤来描述⼀个标签元素的特殊状态(很像是类)。
常用的CSS 标签标记属性翻译注释1、字体属性(type)font-family (使用什么字体)font-style(字体的样式,是否斜体):normal/italic/obliquefont-variant (字体大小写):normal/small-capsfont-weight (字体的粗细):normal/bold/bolder/lithterfont-size(字体的大小):absolute-size/relative-size/length/percentage2、颜色和背景属性(backgroud)color(定义前景色,例如:p{color:red})background-color ( 定义背景色)background-imag e(定义背景图片)background-repeat( 背景图案重复方式):repeat-x/repeat-y/no-repeatbackground-attachment (设置滚动):scroll( 滚动)/fixe( 固定的)background-position( 背景图案的初始位置):percentage/length/top/left/right/bottom3、文本属性:(block)定义间距:word-spacing(单词之间的距离)letter-spacing(字母之间的距离)text-decoration (定义文字的装饰):nore/underline/overline/line-through/blinkvertical-align ( 元素在垂直方向的位置) :baseline( 基线)/sub/super/top/text-top/middle/bottom/text-bottomtext-transform ( 使文本转换为其它方式) :capitalize( 大写)/uppercase(首字母大写)/lowercase( 小写)/nonetext-align (文字的对齐):left/right/center/justifytext-indent( 文本的首行缩进)length/percentageline-height( 文本的行高):normal/numbet/lenggth/percentage( 百分比)定义超链接:a:link {color:green;text-decoration:nore}( 未访问过的状态) a:visited {color:ren;text-decoration:underline;16pt}( 访问过的状态)a:hover {color:blue;text-decoration:underline;16pt}( 鼠标激活的状态)4、块属性(block)边距属性:margin-top (设置顶边距)margin-right( 设置右边距)margin-bottom (设置底边距)margin-left (设置左边距)填充距属性:padding-top 设置顶端真充距)padding-right 设置顶端真充距)padding-bottom 设置顶端真充距)padding-left 设置顶端真充距)5、边框属性(border )border-top-width (顶端边框宽度)border-right-width (右端边框宽度)border-bottom-width (底端边框宽度)border-left-width (d 左边框宽度)border-width (一次定义边框宽度)border-color (设置边框颜色)border-style(设置边框样式)border-top (一次定义顶端各种属性)border-right (一次定义右端各种属性)border-bottom (一次定义底端各种属性)border-left (一次定义左端各种属性)图文混排:width (定义宽度属性)height(定义高度属性)float (文字环绕在一个元素的四周)clear(定义某一边是否有环绕)6、项目符号和编号(list)display(定义是否显示)white-space(怎样处理空白部分):normal/pre/nowraplist-style-type(在列表前加项目符号)disc( 圆点)/circle( 圈)/square(方形)/decima l (阿拉伯数字)/lower-roman ( 小写罗马数字)/upper-roman ( 大写罗马数字) /lower-alpha (小写英文字母)/upper-alpha (大写英文字母)/norelist-style-tyle(在列表前加图案): <url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style( 一次性定义所有属性)7、定位(positioning)即层属性Type:设定对象的定位方式。
⼀、HTML中常⽤标签及属性⼀、HTML基础语法 ---> 单标签、双标签、块级元素、⾏内元素 单双标签其实就是HTML⽂档中标签书写的格式,页⾯中最常见的是双标签; 单标签就是只有⼀个标签,也就是⼀个空元素:meta、img、hr、br 双标签有开始标签和结束标签 块级元素:独占⼀⾏,对宽⾼的属性值⽣效,如果不给宽度,块级元素就默认浏览器的宽度,(即就是100%宽) 例如:div p ul h1~h6 ..... ⾏内元素:对宽⾼属性值不⽣效,完全靠内容撑开宽⾼,可以跟其他标签存在⼀⾏ 例如:span b strong em a img input ...... ⾏内块元素:结合⾏内和块级元素的特点,不仅对宽⾼的属性值⽣效,还可以跟多个标签存在⼀⾏ 例如:input img⼆、HTML中常⽤标签 ---> ⽂档头部<!DOCTYPE html><!-- 申明,这⾏以下的⽂档都是html⽂档 --><html lang="en"><head><!-- 设置字符集编码 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 定义⽹页头部 --><title>Document</title><!-- link标签引⼊外部⽂件 rel定义⽂档与被链接⽂档的关系 shortcut icon:链接图⽚ type规定链接⽂档的类型 image/x-icon 图⽚类型 --><link rel="shortcut icon" type="image/x-icon" href=""><!-- link标签引⼊外部⽂件 rel定义⽂档与被链接⽂档的关系 stylesheet:层叠样式表 type规定链接⽂档的类型 text/css CSS样式表 --><link rel="stylesheet" type="text/css" href=""></head><body></body></html>三、HTML中常⽤标签 ---> ⽂本标签级属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 块级元素,段落标签 text-indent:段落缩进 1个em就是1个字体的长度; --><!-- font-size:字体⼤⼩设置 1px⼀个像素点⼤⼩;color:字体颜⾊;font-weight:bold 字体加粗;font-family:字体类型 --><p style="text-indent: 2em;font-size:15px;color: red;font-weight: bold;font-family: monospace;"></p><!-- ************ --><!-- ⾏内元素标签 --><!-- 斜体标签1 --><em></em><!-- 斜体标签2 --><i></i><!-- 删除线标签 --><del></del><span></span><!-- ************ --><!-- 换⾏标签,单标签,内部没有属性,上⾯的段落、⾏内标签可以通过br换⾏ --><br><!-- 预格式标签,保留⽂本中的换⾏或者空格 --><pre></pre><!-- 标题标签,h1~h6,块级元素,从⼤到⼩,h1最⼤ --><!-- text-align:设置⽂本位置 left:靠左 center:居中 right:靠右 --><h1 style="text-align: center;"></h1><!-- background:背景颜⾊ height:标签⾼度 line-height:设置⾏⾼ --><h2 style="background: pink;height: 50px;line-height: ;"></h2><h3></h3><h4></h4><h5></h5><h6></h6></body></html>四、HTML中常⽤标签 ---> 超链接<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 去掉a链接下划线 */a{text-decoration: none;}/* 伪属性,⿏标移上字体变红,下划线显⽰ */a:hover{color: red;text-decoration: underline;}div{height: 1000px;background: pink;width:400px;}</style></head><body><!-- 链接标签 href:链接地址,"#"本页⾯跳转,默认⾃带下划线 --><a href="#">我是⼀个链接</a><!-- 图⽚链接 --><a href=""><img src="" alt=""></a><!-- 设置锚点定位 --><a href="top">页⾯顶部</a><div></div><a href="" id="top">回到顶部</a></body></html>五、HTML中常⽤标签 ---> 列表标签<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标签</title><style type="text/css">/* 清空li样式;⽂化素质宽⾼;设置边框线 */ul li{list-style: none;height: 40px;width: 200px;border: 1px solid #ccc;margin: 5px 0px;text-align:center;line-height: 40px;} /* 设置前⾯样式为图⽚,但是⽆法调整图⽚与⽂字的间距 */ul li{list-style: url(图⽚地址);}/* 伪元素;在⽂字前⾯设置图⽚与⽂字的间距 */ul li::before{content: url(图⽚地址);margin-right: 30px;}/* 伪元素;在⽂字前⾯设置图⽚与⽂字的间距 */ul li::after{content: url(图⽚地址);}</style></head><body><!-- 有序列表 --><ol><li>web前端</li><li>JavaScript</li><li>jQuery</li></ol><!-- ⽆序列表 --><ul><li>西⽠<ul><li>有籽西⽠</li><li>⽆籽西⽠</li></ul></li><li>苹果</li><li>西柚</li></ul></body></html>六、HTML中常⽤标签 ---> form表单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title><style type="text/css">/* padding内边距 */input{height: 8px;width: 258px;border: 1px solid #ccc;margin-top: 20px;padding: 20px;} /* border: none去掉按钮⾃带的边框线 */button{height: 50px;width: 300px;margin-top: 20px;background: #FF6A00;border: none;color: #fff;} </style></head><body><!-- method在后端传输数据⽤到,传值⽅式get/post --><!-- action传值url地址 --><form method="" action=""><!-- type类型,输⼊域的类型:text⽂本型,password密码类型 --><!-- placeholder⽂本框内部的提⽰信息 --><input type="text" name="username" placeholder="请输⼊⽤户名"><br><input type="password" name="pwd" placeholder="请输⼊⽤密码"><br><button>登陆</button></form></body></html>七、HTML中常⽤标签 ---> 表格(table)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title><style type="text/css">/* 清除默认样式 */*{margin: 0px;padding: 0px;}/* border-collapse: collapse;合并多余的边框线 */table{border: 1px solid #ccc;border-collapse: collapse;}tr th{height: 200px;border: 1px solid #ccc;width: 100px;}tr td{height: 200px;border: 1px solid #ccc;width: 100px;}</style></head><body><table><!-- 表头定义⽤th --><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr><!-- 定义⾏⽤tr --><tr><!-- 定义列⽤td --><!-- colspan="5"合并5列 --><td colspan="5"></td></tr><tr><!-- 定义列⽤td --><!-- rowspan="2"合并两⾏,同时删除合并⾏的列 --><td rowspan="2"></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body></html>。
新增及删除标签一、结构标签1.section :一个内容区域块2.article:一块与上下文不相关的内容,如一篇文章3.asider:article以外,与article有关的辅助信息4.header:页面的标题5.hgroup:对整个页面或页面中一个内容区块的标题进行组合6.footer:脚注7.nav:导航链接8.figure:一块独立的内容二、媒体标签:1.video,<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.如果浏览器不支持video标签,将在这个位置显示出来</video>video 元素支持三种视频格式:Ogg = 带有Theora 视频编码和Vorbis 音频编码的Ogg 文件MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件属性值描述autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。
HTML常用标签属性汇总1.全局属性:- class: 为当前HTML元素指定一个或多个类名- id: 为当前HTML元素指定唯一的标识符- style: 为当前HTML元素指定样式属性,如颜色、字体、大小等- title: 为当前HTML元素指定鼠标悬停时显示的文字提示2.文本相关属性:- align: 用于指定文本在元素中的对齐方式,如left、right、center等- dir: 用于指定文本的方向,如ltr、rtl等- lang: 用于指定文本的语言,如en、zh等- translate: 用于指定是否需要对文本进行翻译处理3.超链接相关属性:- href: 用于指定链接地址,可以是相对路径或绝对路径- target: 用于指定链接在何处打开,如_blank、_self、_parent、_top等- rel: 用于指定链接与当前页面之间的关系,如nofollow、noopener等4.图像相关属性:- src: 用于指定图像的路径- alt: 用于指定图像显示失败时的替代文本- width: 用于指定图像的宽度- height: 用于指定图像的高度5.表格相关属性:- border: 用于指定表格边框的宽度- cellpadding: 用于指定表格的内边距- cellspacing: 用于指定表格的间距- rowspan: 用于指定单元格的行合并- colspan: 用于指定单元格的列合并6.表单相关属性:- action: 用于指定表单提交的URL地址- method: 用于指定表单提交的方式,如GET、POST等- name: 用于指定表单的名称- value: 用于指定表单元素的默认值7.多媒体相关属性:- autoplay: 用于指定音频或视频自动播放- controls: 用于指定音频或视频是否显示控制条- loop: 用于指定音频或视频是否循环播放- poster: 用于指定音频或视频的封面图像8.其他常用属性:- disabled: 用于指定元素是否禁用- readonly: 用于指定元素是否只读- required: 用于指定元素是否为必填项- maxlength: 用于指定元素输入的最大长度。
前端面试知识点总结1. HTML基础知识
HTML基本结构
常用标签及其属性
HTML5新特性
表单元素和表单控件
2. CSS基础知识
CSS选择器
CSS盒模型
常见布局方式(如Flex、Grid等)
CSS3动画与过渡
CSS预处理器(如Sass、Less)
3. JavaScript基础知识
数据类型和变量
函数和闭包
DOM操作和事件处理
BOM操作
异步编程(如Promise、async/await)
ES6新特性(如箭头函数、模板字符串等)
4. 前端框架与库
React(组件化开发、生命周期方法、状态管理) Vue(组件化开发、指令、生命周期钩子)
Angular(依赖注入、双向数据绑定等)
jQuery(选择器、DOM操作、插件等)
5. 前端工程化与工具
Webpack(模块打包、插件机制等)
Gulp(任务自动化、流处理等)
Babel(ES6转ES5)
ESLint(代码质量检查)
6. 浏览器兼容性
常见兼容性问题及解决方案(如IE8及以下版本兼容性处理)
浏览器渲染引擎和版本差异
跨浏览器测试工具(如BrowserStack、CrossBrowserTesting等)7. 安全问题与防护措施
XSS攻击与防护措施
CSRF攻击与防护措施
其他常见安全问题及解决方案(如HTTPS、CSP等)。
常用的CSS标签标记属性翻译注释这里收藏一些编写网页的常用属性,便于以后编写网页查询。
" "这里收藏一些编写网页的常用属性,便于以后编写网页查询。
1、字体属性(type)font-family(使用什么字体)font-style(字体的样式,是否斜体):normal/italic/obliquefont-variant(字体大小写):normal/small-capsfont-weight(字体的粗细):normal/bold/bolder/lithterfont-size(字体的大小):absolute-size/relative-size/length/percentage2、颜色和背景属性(backgroud)color(定义前景色,例如:p{color:red})background-color(定义背景色)background-image(定义背景图片)background-repeat(背景图案重复方式):repeat-x/repeat-y/no-repeatbackground-attachment(设置滚动):scroll(滚动)/fixe(固定的)background-position(背景图案的初始位置):percentage/length/top/left/right/bottom3、文本属性:(block)定义间距:word-spacing(单词之间的距离)letter-spacing(字母之间的距离)text-decoration(定义文字的装饰):nore/underline/overline/line-through/blinkvertical-align(元素在垂直方向的位置):baseline(基线)/sub/super/top/text-top/middle/bottom/text-bottomtext-transform(使文本转换为其它方式):capitalize(大写)/uppercase(首字母大写)/lowercase(小写)/nonetext-align(文字的对齐):left/right/center/justifytext-indent(文本的首行缩进)length/percentageline-height(文本的行高):normal/numbet/lenggth/percentage(百分比)定义超链接:a:link {color:green;text-decoration:nore}(未访问过的状态)a:visited {color:ren;text-decoration:underline;16pt}(访问过的状态)a:hover {color:blue;text-decoration:underline;16pt}(鼠标激活的状态)4、块属性(block)边距属性:margin-top(设置顶边距)margin-right(设置右边距)margin-bottom(设置底边距)margin-left(设置左边距)填充距属性:padding-top设置顶端真充距)padding-right设置顶端真充距)padding-bottom设置顶端真充距)padding-left设置顶端真充距)5、边框属性(border)border-top-width(顶端边框宽度)border-right-width(右端边框宽度)border-bottom-width(底端边框宽度)border-left-width(d左边框宽度)border-width(一次定义边框宽度)border-color(设置边框颜色)border-style(设置边框样式)border-top(一次定义顶端各种属性)border-right(一次定义右端各种属性)border-bottom(一次定义底端各种属性)border-left(一次定义左端各种属性)图文混排:width(定义宽度属性)height(定义高度属性)float(文字环绕在一个元素的四周)clear(定义某一边是否有环绕)6、项目符号和编号(list)display(定义是否显示)white-space(怎样处理空白部分):normal/pre/nowraplist-style-type(在列表前加项目符号)disc(圆点)/circle(圈)/square(方形)/decimal(阿拉伯数字)/lower-roman(小写罗马数字)/upper-roman(大写罗马数字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/norelist-style-tyle(在列表前加图案):<url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style(一次性定义所有属性)7、定位(positioning)即层属性Type:设定对象的定位方式。
HTML5中常⽤的标签(及标签的属性和作⽤)1、标签:<!DOCTYPE>作⽤:声明是⽂档中的第⼀成分,位于<html>标签之前。
2、标签:<html>作⽤:此元素可告知浏览器其⾃⾝是⼀个HTML⽂档。
属性:manifest:值(url)为脱机使⽤定义缓存信息。
3、标签:<head>作⽤:标签⽤于定义⽂档的头部,它是所有头部元素的容器。
属性:profile:值(URL)⼀个有空格分隔的URL列表,这些URL包含着有关页⾯的元数据信息。
4、标签:<title>作⽤:元素可定义⽂档的标题。
属性:dir:值(rtl,ltr)规定元素中内容的⽂本⽅向。
lang:值(language_code)规定元素中内容的语⾔代码。
xml:lang:值(language_code)规定XHTML⽂档中元素内容的语⾔代码。
5、标签:<body>作⽤:元素定义⽂档的主体。
属性:alink:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使⽤,请使⽤样式取代它。
规定⽂档中活动链接(active link)的颜⾊。
background:值(URL)不赞成使⽤。
请使⽤样式取代它。
规定⽂档的背景图像。
bgcolor:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。
请使⽤样式取代它。
规定⽂档中的背景颜⾊。
link:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。
请使⽤样式取代它。
规定⽂档中未访问链接的默认颜⾊。
text:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。
请使⽤样式取代它。
规定⽂档中所以⽂本的颜⾊。
vlink:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。
请使⽤样式取代它。
规定⽂档中已被访问链接的颜⾊。
6、标签:<h1>到<h6>标签作⽤:<h1>-<h6>标签了定义标题。
Maven是一种强大的项目管理工具,其核心是一个名为pom.xml的文件,该文件中有许多标签用于配置项目的各种属性和参数。
以下是一些常用标签的说明:-`groupId`:这是项目所属的组织或公司的标识符,通常是公司网址的反向表示形式加上项目名。
- `artifactId`:这是项目的标识符,通常与项目名称相对应。
-`version`:这表示项目的版本号,类型可以包括快照版本、内测版、公测版、稳定版或正式发布版。
- `packaging`:这个标签定义了项目的打包类型,默认是jar,但也可以配置为war、zip、pom 等类型。
- `name`:这个标签表示当前项目的名称。
- `url`:项目的地址。
- `description`:项目的描述信息。
- `developers`:开发者的信息。
- `licenses`:项目许可证信息,用于发布时授予别人使用此项目的权利。
- `organization`:组织信息,通常是企业信息。
- `properties`:这个标签用来定义一些属性值,也称为变量。
- `dependencies`:这个标签用于声明项目所依赖的其他库或模块。
- `build`:这个标签用于配置项目的构建方式和构建过程。
- `modules`:这个标签用于定义多模块Maven项目中的子模块。
- `repositories`:这个标签用于配置项目的依赖库的存储位置。
- `pluginRepositories`:这个标签用于配置插件的存储位置。
- `dependencyManagement`:这个标签用于管理项目中所有依赖库的版本号,确保版本号的一致性。
- `reporting`:这个标签用于配置生成的各种报告类型和格式。
-`profiles`:这个标签用于配置不同环境下的项目参数,例如开发环境、测试环境和生产环境等。
- `modules`:这个标签用于定义多模块Maven项目中的子模块。
HTML 常用标签属性汇总<body> 标签 (1)<a> 标签 (2)1.可选的属性 (2)2.标准属性 (3)键盘属性 (4)<p> 标签 (4)1.可选的属性 (4)2.标准属性 (4)<a> 标签 (5)1.可选的属性 (5)2.标准属性 (6)键盘属性 (7)<img> 标签 (7)1.必需的属性 (7)2.可选的属性 (7)3.标准属性 (8)<table> 标签 (9)1.可选的属性 (9)2.标准属性 (10)<input> 标签 (11)1.可选的属性 (11)2.标准属性 (12)注:表示颜色的有三种方式; (13)<body> 标签1.背景属性:包括:bgcolor,background<body background-color:black> 背景颜色<body background-image : url(image/bg.gif)> 背景图片<body background-attachment : fixed> 固定背景<body background-repeat : repeat> 重复排列-网页预设<body background-repeat : no-repeat> 不重复排列<body background-repeat : repeat-x> 在x轴重复排列<body background-repeat : repeat-y> 在y轴重复排列<body background-position : 90% ,90%> 背景图片x与y轴的位置2,文字属性:包括:text,link,alink,vlink,<body text="red">字体颜色插入隐藏域<input name=”” type=”hidden” value=””>注:表示颜色的有三种方式;1,16进制颜色代码语法:#RRGGBB例:<font color="#ff0000">红色</font>2,10进制RGB码语法:RGB(RRR,GGG,BBB)例:<font color="rgb(255,000,000)">红色</font> 3,直接用颜色的英文名称例:<font color="red">红色</font>。
简述文本元素的基本标签及含义文本元素是计算机网络中传输和处理数据的基本单位。
在文本传输协议中,文本元素通常被分为不同的标签,用于标识和分类不同的文本数据。
以下是一些常见的文本元素标签及其含义:1. HTML标签:HTML 标签用于标识 HTML 文档中的文本元素。
常用的 HTML 标签包括 `<p>` 用于段落、 `<h1>` 用于标题、 `<a>` 用于链接等。
2. CSS 标签:CSS 标签用于定义文本元素的样式。
常用的 CSS 标签包括`<img>` 用于图像、 `<font>` 用于字体、 `<code>` 用于代码等。
3. 文本格式标识符:文本格式标识符用于定义文本的格式,如 `<br>` 用于换行、 `<li>` 用于列表项等。
4. 元数据:元数据是描述文本数据的属性和信息的文档。
常用的元数据标签包括 `<param>` 用于参数、 `<return>` 用于返回值等。
5. 链接标签:链接标签用于标识链接到另一个网页的文本元素。
常用的链接标签包括 `<a>` 和 `<i>`。
6. 图像标签:图像标签用于标识图像元素。
常用的图像标签包括 `<img>`。
7. 脚本标签:脚本标签用于嵌入 JavaScript 和其他脚本语言,动态地改变文本元素的样式和内容。
常用的脚本标签包括 `<script>` 和 `<![CDATA[`。
这些标签是文本元素的基本标识符,它们的含义和用法对于正确理解和处理文本数据非常重要。
随着网络技术的发展,越来越多的文本元素标签将得到广泛应用,这些标签也将不断地被更新和扩展。
VUE常⽤的标签属性和指令VUE常⽤标签属性和指令是带有 v- 前缀的特殊属性。
指令属性的值预期是单⼀ JavaScript 表达式。
指令的职责就是当其表达式的值改变时相应地将某些⾏为应⽤到 DOM 上 1、数据绑定最常见的形式就是使⽤:{{data}};<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title></head><body><div id="app1"><h1>Message:{{name}}</h1></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">let vue = new Vue({el: '#app1',data: {name: 'rous'}});</script></body></html>结果: 2、通过使⽤ v-once 指令,你也能执⾏⼀次性地插值,当数据改变时,插值处的内容不会更新。
<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title></head><body><div id="app1"><h1>Message:{{name}}</h1><br/><h1 v-once>只会渲染⼀次,之后修改该data值还是不变{{name}}</h1></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">let vue = new Vue({el: '#app1',data: {name: 'rous'}});</script></body></html>结果: 3、v-text指令:更新元素的 textContent(该标签的全部上下⽂)。
所有标签通用属性:
Color:设置字体颜色,例:color:#ff0000;
Font-size:设置字体大小,例:font-size:12px;
Font-family:设置字体样式,例:font-family:”宋体”;
Font-weight:设置字体粗细,例:font-weight:bold;
text-align:设置文本对齐方式,例:text-align:center;
Display:设置标签显示方式(block块显示,display行内显示,none不显示),例:display:none;
Background-color:设置字体颜色;
Width:设置标签的宽度;
Height:设置标签的高度;
Margin:设置标签模块上下左右边距(顺序为上右下左),例:margin:0px 0px 0px 0px;
Padding:标签内容距离标签上下左右边距的距离(顺序为上右下左),例:padding:0px 0px 0px 0px;
Background:url(图片路径):设置背景图片;
Border:标签边框样式(块级元素才有边框),例:border:1px solid #ff0000; Border-left:左边框,border-right:又边框,border-top:上边框,border-bottom:下边框;
Position:标签的定位方式;例:position:absolute;
Left:距离指定元素的左边距,top:距离指定元素的上边距,right:距离指定元素的右边距,bottom:距离指定元素的下边距。
Left,top,right,bottom与属性position联用;
Float:设置元素的浮动,例:float:left;左浮动;
a标签:
<a href=”” style=”color:#ffffff.font-size:12px;font-family:”
宋体”;font-weight:bold;text-decoration:none”></a>
text-decoraiong:设置链接有无下划线,例:text-decoraion:none;
a:hover{color:#ffffff;}:设置鼠标滑动到链接上时,链接的样式;
列表标签ul,ol ,li:
<ul>
<li style=”list-style:square;”></li>
<li></li>
</ul>
List-style:设置列表样式,例:list-style:square;
<b></b>加粗字体标签
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>:六种默认的字体样式
form表单标签:
<form>
<input type=”text” size=”” style=”width:10px;height:10px;”/>/*文本输入框*/
<input type=”password” size=”” />/*密码框*/
<input type=”reset” size=”” />/*重置按钮*/
<input type=”summit” size=”” />/*提交按钮*/ <input type=”radio”/>/*单选按钮*/
<input type=”checkbox”/>/*复选按钮*/
<select>/*下拉框*/
<option></option>
<option></option>
</select>
</form>
Size:设置表单元素的大小;
Width:设置表单元素的宽度;
Height:设置表单元素的高度;
Img标签:
<img src=”” alt=”文字” width=”” height=”” /> Alert:设置鼠标滑到图片上时显示的文字Width:设置图片的宽度
Height:设置图片的高度。