html经常使用标签及属性,经常使用英语单词

时间 2019-12-14

标签 html 经常使用标签属性英语单词栏目 HTML 繁體版

原文原文链接

目录css

欢迎评论点赞交流,转发请添加原博客链接谢谢!
Ctrl键+F 能够查找你想要的内容哦!html

html经常使用标签

htmi结构

<!DOCTYPE html> <!--文档声明头,它是指明了该页面使用哪一个 HTML 版本进行编译。-->
<html lang="en"><!--最外层的标签，它表示文档内容的开始.-->
<head><!--用于表示网页的中的一个基础的信息(元信息)--> 
    <meta charset="UTF-8"><!--meta标签共有两个属性，它们分别是http-equiv属性和name属性，不一样的属性又有不一样的参数值，
                                                                        这些不一样的参数值就实现了不一样的网页功能。-->
    <title>Title</title><!--当前网页的主题。-->
</head>
<body><!--标签包含页面中全部的可见元素，网页中的文本的展现内容-->
</body>
</html>

HTML全称HyperText Mackeup Language，超文本标记语言。好比网页的超连接、图片、音频、视频都称为超文本。

标签	做用
`<!DOCTYPE html>`	文档声明
`<!--注释-->`	注释
`<html></html>`	最外层的标签
`<head></head>`	元素包含了全部的头部标签元素
`<meta/>`	描述了一些基本的元数据。{单闭合}
`<title></title>`	标签订义了不一样文档的标题。
`<body></body>`	可见的页面内容
`<script></script>`	定义客户端脚本
`<h1></h1>到<h6></h6>`	标题标签,数字越小字体越大{独行}
`<p></p>`	段落标签{独行}
`<strong></strong>`(已废弃)	强调,粗体
`<em></em>`(已废弃)	斜体
`<i></i>`	斜体
`<img/>`	图片标签
`<a></a>`	超连接
`<form></form>`	表单
`<table></table>`	表格
`<tr></tr>`	表格中的行
`<td></td>`	表格的单元格
`<th></th>`	加粗的单元格
`<thead></thead>`	表格的标签
`<tbody></tbody>`	表格的标签
`<tfoot></tfoot>`	表格的标签
`<input/>`	输入框
`<select></select>`	下拉列表
`<option></option>`	定义下拉列表中的一个选项
`<textarea></textarea>`	多行文本输入框
`<abbr></abbr>`	定义首字母缩写
`<acronym></acronym>`	定义首字母缩写
`<label/>`	input元素定义标签,进行关系绑定
`<link/>`	文档与外部资源的关系
`<style></style>`	内部样式表与网页的关系
`<font></font>`(已废弃)	规定文本字体、大小和颜色
`<u></u>`	下划线
`<s></s>`(已废弃)	中划线
`<b></b>`	字体加粗
`<sup></sup>`	上标
`<sub></sub>`	下标
`<div></div>`	文档中的分区
`<span></span>`	组合文档中的行内元素
`<br/>`(已废弃)	强制换行{单}
`<hr/>`	分割线
`<center></center>`	内容居中
`<pre></pre>`	预约义
`<ul></ul>`	无序列表
`<ol></ol>`	有序列表
`<dl></dl>`	定义列表
`<li></li>`	列表项
特殊符号	表示意思
` `	空格
`<`	小于号
`>`	大于号
`&`	符号&
`"`	双引号
`'`	单引号
`©`	版权©
`™`	商标™

在早先发布的html规范中<br>/<hr>/<img>等标记元素是无需“封闭自身”的，这就形成了html规范自己的不严谨，
因此后来参考了更规范的XML语言的语法推出了xhtml。在xhtml中全部相似br这样的孤立标签都须要自行封闭，
具体的作法就是在标签名字的后面跟个“/”，例如<br />，所以，是没有</br>这个写法的。
从逻辑上讲<br />=<br>...</br>，这样作的目的是为了尽可能减小网页的代码量，同时保持逻辑严谨。 
因此在写这些单闭合标签,后边尽可能加/如,<br/>,<hr/>,<img/>让逻辑更加严谨.

若是还想知道其它的HTML特殊字符：特殊字符参考表前端

html经常使用标签属性

<!--maarquee相关-->
<marquee>...</marquee>普通卷动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回卷动
<marquee direction=down>...</marquee>向下卷动
<marquee direction=up>...</marquee>向上卷动
<marquee direction=right></marquee>向右卷动
<marquee direction='left'></marquee>向左卷动
<marquee loop=2>...</marquee>卷动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=30>...</marquee>设定滚动速度
<marquee scrolldelay=300>...</marquee>设定卷动时间
<marquee onmouseover="this.stop()">...</marquee>鼠标通过上面时中止滚动
<marquee onmouseover="this.start()">...</marquee>鼠标离开时开始滚动 

<!--连接格式 -->
<base href=位址>(预设好连结路径) 
<a href=位址></a>外部连结 
<a href=位址 target=’_blank’></a>外部连结(另开新视窗) 
<a href=位址 target=’_top’></a>外部连结(全视窗连结) 
<a href=位址 target=’页框名’></a>外部连结(在指定页框连结) 
A 全部超链接
A:link 超链接文字格式
A:visited 浏览过的链接文字格式
A:active 按下链接的格式
A:hover 鼠标移至链接

<!--图片/音乐 -->
<img src=图片位址>贴图 
<img src=图片位址 width=’180’>设定图片宽度 
<img src=图片位址 height=’30’>设定图片高度  (提醒:当之定义高或者宽时,图片会按照比例缩放)
<img src=图片位址 alt=’提示文字’>图片不显示的时候显示的文字
<img src=图片位址’ border=’1’>设定图片边框 
<bgsound src=MID音乐档位址>背景音乐设定 
<img src=图片位址 title='图片注释'>图片正常显示的时候鼠标放到图片上时显示的文字
（补充：）align：值有left、right、top（图片顶部与文字对齐）、bottom（图片底部与文字对齐）
middle（图片中间与文字对齐）
border属性定义图片边框的宽度，默认值为0 
align属性设置图片旁边文字的位置
语法格式：<img src="" align""/> 
可选值有： 
top图片和文字顶部对齐
middle图片和文字居中对齐
bottom图片和文字底边对齐（默认）
left图片居左对齐，文字沿图片绕排
right图片居右对齐，文字沿图片绕排
absmiddle图片对齐到目前文字行绝对中央
absbottom图片对齐到目前文字行绝对底部    

<!--表格-->
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字) 
<table bgcolor=颜色码>...</table>设定表格的背景颜色 
<table borderclor=颜色码>...</table>设定表格边框的颜色 
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色 
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色 
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数 
<table frame=参数>...</table>设定表格外框线的显示方式 
<table width=宽度>...</table>指定表格的宽度大小(使用数字) 
<table height=高度>...</table>指定表格的高度大小(使用数字) 
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字) 
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字) 
    
<!--font元素 -->
<font face="字体名称" size="字体大小" color="字体颜色"> 
字体大小可选值为1——7，默认为3 例：〈fontface="黑体"size="4" color="#ff00ff">....</font>    
    
<--div属性-->
color : #999999   文字颜色
font-family : 宋体 文字字型 
font-size : 10pt 文字大小 
font-style:itelic 文字斜体育
font-variant:small-caps 小字体
letter-spacing : 1pt 文字间距
line-height : 200% 设定行高
font-weight:bold 文字粗体
vertical-align:sub 下标字
vertical-align:super 上标字
text-decoration:line-through 加?h除线
text-decoration:overline 加顶线
text-decoration:underline 加底线
text-decoration:none ?h除链接底线
text-transform : capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文写
text-align:right 文字*右对齐
text-align:left 文字*左对齐
text-align:center 文字置中对齐 
这些是一些简单的文字效果，能够应用到css的页面中。

<!--背景-->
background-color:black 背景颜色 
background-image : url(image/bg.gif) 背景图片
background-attachment : fixed 固定背景
background-repeat : repeat 重复排列-网页预设
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x轴重复排列
background-repeat : repeat-y 在y轴重复排列
background-position : 90% 90% 背景图片x与y轴的位置     

<!--边框-->
border-top : 1px solid black 上框 
border-bottom : 1px solid #6699cc 下框 
border-left : 1px solid #6699cc 左框 
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四边框
虚线
<TEXTAREA STYLE="border:1px dashedpink">
实线
<TEXTAREA STYLE="border:1px solidpink">    
 
<!--输入框-->
<input,type="checkbox",name="name">,建立一个复选框,文字在标签后面;
<input,type="radio",name="name",value="">,建立一个单选框,文字在标志后面;
<input,type=text,name="foo",size=20>,建立一个单行文本输入区域,size设置以字符串的宽度;
<input,type="submit",value="name">,建立提交(submit)按钮;
<input,type="image",border=0,name="name",src="name.gif">,建立一个使用图象的提交(submit)按钮;
<input,type="reset">,建立重置(reset)按钮;
<BUTTON></BUTTON>,建立一个按钮;
disabled="...",把按钮的状态设置为不能;
name="...",按钮的控制名,value="...",按钮的值;
type="...",按钮的类型(button,,submit,,reset);

查看更多标签及用法:标签用法api

前端经常使用英语单词表(未完待续)

单词	中文意思
charset{编码信息}	字符集,字元集
style	风格;时尚;类型;字体
stylesheet	样式表;文档的外部样式表
href	超文本引用;超连接
index	为…编索引;将…编入索引;
background-color{背景色}	背景颜色
src	标准要求代码
lang	语言(language)
images	图像,影像
alt{加载失败显示}	高音,最高调的
width{宽}	宽度,广度
ordered	有序的,整齐的
bordersquare{li标签方形}	平方的;正方形的
action{form 向哪发表单数据}	行动;活动;功能;战斗;情节
method{表单获取方法}	方法;条理;类函数
text	文本;课文;主题
radio	收音机;选择钮;单选钮
sex	性;性别;性行为;色情
checked{input默认选中}	选中的;已选取
datetime-local{input选择}	时间选择器
cols{多文本输入列}	报表列数
rows{多文本输入行}	行数
submit{input提交}	提交
active	积极的;活跃的
color{颜色}	颜色
yellow	黄色;黄皮肤
green	绿色的;青春的
red	红的;红色的
font-size{字体大小}	字体大小
height{style 元素高度}	高度;身高
display{style标签显示}	展出;展现;显示
left	左边,左边的
right	右边,右边的
inline	行内的;排成一条线的
block	块;街区;障碍物;大块的
text-align	文本对齐
center{style标签参数}	居中
line-height{style标签元素}	行高
text-decoration{style 元素}	文字修饰;文本装饰
underline{文本修饰参数}	下划线
none{文本修饰参数}	无修饰
line-through{文本修饰参数}	文字删除线
margin{style元素}	设置元素的边距 (可设置四个值)
padding{style 元素}	设置元素的填充 (可设置四个值)
border{style 标签参数}	在一行设置四个边框的全部属性
outline{style 标签参数}	在一行设置全部的outline属性
darkred	深红
greenyellow	黄绿色
!important{color后+优先调用}	重要的,重大的
border-radius{style 元素}	圆角;边框圆角
padding-top	顶部属性
solid{border参数方边框}	一致的;可靠的;立方体
visited{a标签访问时颜色}	访问(互联网上的网站)
link{a标签没访问的颜色}	链接;联系
hover{a标签悬浮时颜色}	盘旋;悬浮
deeppink	深粉红色;深粉色;深粉红
deepskyblue	深天蓝色;深天藍色
float{div 重要元素}	浮动;漂流;飘动
checkbox{input type 参数}	勾选框(方形)
first-letter{css 第一个字}	第一个字母样式
before{在..以前}	在……以前
after{在...之后}	在…之后
content	内容
padding-left	左填充
border-width{四边}	边框宽度(上右下左)
border-style{四边}	边框样式{上右下左}
dotted{border-style参数}	点线
dashed{border-style参数}	虚线
double{border-style参数}	双实线
border-color{四边}	边框宽度(上右下左)
border-top	上边框
border-left	左边框
border-right	右边框
border-bottom	底部边框;下边框
purple	紫色的
auto{margin 参数}	自动
visibility hidden	可见度隐藏的
overflow hidden	漫出;扩展出界;隐藏
scroll{overflow 参数}	滚屏;滚动
inherit	继承
position	位置;地方;正确位置
relative{position 参数}	相对定位
absolute{position 参数}	绝对定位
vertical-align	垂直对齐
list-style	列表样式
z-index	层级
background-image	背景图
background-repeat	调整背景图的位置
no-repeat	不平铺
background-position{两个参数}	背景位置{水平位置;垂直位置}
font-weight	字体加粗
transition: all .2s linear{移动}	所有直线过渡0.2秒
box-shadow{四个参数0 0 大小颜色}	边框阴影
table-cell	单元格
middle	中间的;中部的
bottom	底部;末端
child	孩子
url("地址") no-repeat center top	背景图