table of Contents
Comments are welcome thumbs exchange, please add a forwarding original blog connection Thank you!
html commonly used tags
- htmi structure
<!DOCTYPE html> <!--文档声明头,它是指明了该页面使用哪个 HTML 版本进行编译。-->
<html lang="en"><!--最外层的标签,它表示文档内容的开始.-->
<head><!--用于表示网页的中的一个基础的信息(元信息)-->
<meta charset="UTF-8"><!--meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。-->
<title>Title</title><!--当前网页的主题。-->
</head>
<body><!--标签包含页面中所有的可见元素,网页中的文本的展示内容-->
</body>
</html>
- HTML stands for HyperText Mackeup Language, HTML. For example, hyperlinks to web pages, images, audio, video is called hypertext.
label | effect |
---|---|
<!DOCTYPE html> |
Document declaration |
<!--注释--> |
Note |
<html></html> |
The outermost label |
<head></head> |
Element contains all the elements of the head tag |
<meta/> |
It describes some basic metadata. Single closing} { |
<title></title> |
Tag defines the title of different documents. |
<body></body> |
Visible page content |
<script><script> |
Define client-side script |
<h1></h1>到<h6></h6> |
Title tag, the lower the number the larger fonts alone} { |
<p></p> |
} {Paragraph tag alone |
<strong></strong> (Obsolete) |
He emphasized in bold |
<em></em> (Obsolete) |
Italic |
<i></i> |
Italic |
<hr></hr> |
Level horizontal line |
<br/></br> |
Branch display |
<img> |
Picture tags |
<a></a> |
Hyperlink |
<div></div> |
Block Label |
<form></form> |
Forms |
<table></table> |
form |
<tr></tr> |
Table row |
<td></td> |
Cell of the table |
<th></th> |
Bold cells |
<thead></thead> |
Form of the label |
<tbody></tbody> |
Form of the label |
<tfoot></tfoot> |
Form of the label |
<input/> |
Input box |
<select></select> |
drop-down list |
<option></option> |
A defined drop-down list of options |
<textarea><textarea> |
Multi-line text input box |
<abbr></abbr> |
Define acronyms |
<acronym></acronym> |
Define acronyms |
<label> |
input element defines the label, the relationship binding |
<link></link> |
Documents relationship with external resources |
<style></style> |
The relationship between internal pages and style sheets |
<font></font> (Obsolete) |
The provisions of the text font, size and color |
<u></u> |
Underline |
<s></s> (Obsolete) |
Underlined |
<b></b> |
Bold font |
<sup></sup> |
Superscript |
<sub></sub> |
Subscript |
<div></div> |
Document partition |
<span></span> |
Combination of document inline elements |
<br> (Obsolete) |
Forced Line mono {} |
<hr/> |
Dividing line |
<center></center> |
Content middle |
<pre></pre> |
Predefined |
<ul></ul> |
Unordered list |
<ol></ol> |
Ordered list |
<dl></dl> |
Definition list |
<li></li> |
List items |
Special symbols | Express meaning |
|
Blank |
< |
Less than sign |
> |
Greater than sign |
& |
symbol& |
" |
Double quotes |
' |
apostrophe |
© |
Copyright © |
™ |
Trademarks ™ |
在早先发布的html规范中<br>/<hr>/<img>等标记元素是无需“封闭自身”的,这就造成了html规范本身的不严谨,所以后来参考了更规范的XML语言的语法推出了xhtml。
在xhtml中所有类似br这样的孤立标签都需要自行封闭,具体的做法就是在标签名字的后面跟个“/”,例如<br />,因此,是没有</br>这个写法的。从逻辑上讲<br />=<br>...</br>,这样做的目的是为了尽量减少网页的代码量,同时保持逻辑严谨。 所以在写这些单闭合标签,后边尽量加/如,<br/>,<hr/>,<img/>让逻辑更加严谨.
If you want to know other HTML special characters: Special characters refer to Table
Visit each tab for use with the front Tutorial: Label Usage
Front-end common English word list (to be continued)
word | Chinese meaning |
---|---|
coding information charset {} | Character set, character set |
style | Style; fashion; type; font |
stylesheet | Style sheets; an external style sheet document |
href | Hypertext references; hyperlinks |
index | Indexing is ...; ... will be indexed; |
background color background-color {} | background color |
src | Code standards |
only | Language (language) |
images | Image, image |
alt {ID} failed to load | Treble, the highest-profile |
Wide width {} | Width, breadth |
ordered | Orderly, neat |
bordersquare {li} square tag | Quadratic; square basis |
action {form to leave a single data which} | Action; activity; function; fighting; plot |
method {} method for obtaining Form | Method; coherent; class function |
text | Text; texts; topics |
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 | 背景图 |