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

目录

Ctrl键+F 可以查找你想要的内容哦!

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>

列表项

特殊符号

表示意思

&nbsp;

空格

&lt;

小于号

&gt;

大于号

&amp;

符号&

&quot;

双引号

&apos;

单引号

&copy;

版权©

&trade;

商标™

在早先发布的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);    

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

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

单词

中文意思

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

背景图

作 者:郭楷丰

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券