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> |
列表项 |
| 特殊符号 | 表示意思 |
|
空格 |
< |
小于号 |
> |
大于号 |
& |
符号& |
" |
双引号 |
' |
单引号 |
© |
版权© |
™ |
商标™ |
在早先发布的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 | 背景图 |
作 者：郭楷丰
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力！
自 勉：生活，需要追求；梦想，需要坚持；生命，需要珍惜；但人生的路上，更需要坚强。带着感恩的心启程，学会爱，爱父母，爱自己，爱朋友，爱他人。
html常用标签及属性,常用英语单词的更多相关文章
- HTML常用标签-<head>内常用标签
HTML常用标签-<head>内常用标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML是什么 1>.超文本标记语言(Hypertext Ma ...
- HTML初学者常用标签及属性
1.HTML5头部结构 [DOCTYPE html] 声明文档类型为HTML5文件. 文档声明在HTML5文档必不可少,且必须放在文档的第一行. [meta标签] 1-charset属性:单独 ...
- HTML之常用标签及属性
标签 标签分类 标签名 英文 英文含义 标签类型 备注 HTML页面结构 < html> HyperText Markup Language 超文本标记语言 < head> h ...
- HTML常用标签及属性
标签格式 格式: 双边:<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名> 单边:<标签名 属性1="值1&quo ...
- Web前端——Html常用标签及属性
html 常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性 表格 table td 单元格 tr 表的行 th 表头 td或th可以下面的两个属性达到跨行或跨列 表格跨行 rowspan ...
- css常用标签及属性
css样式表常用的形式有三种,一.行内样式表.二.内部样式表.三.外部样式表 一. <p style="color:red;">nice to meet you< ...
- html中一些常用标签及属性
html中标签分为块级标签和行级标签 块级标签常用的有 <div> <p> <h1><hr><pre><table><ul ...
- 4.HTML 常用标签及属性
1. 链接 标签: <a></a> 属性: href:链接地址 target:打开方式 _blank:新标签页打开 _self:当前页面打开(默认) title:链接提示 2. ...
- Html 常用标签及属性
<html>…</html> 定义 HTML 文档<head>…</head> 文档的信息<meta> ...
随机推荐
- python环境的caffe配置
基本按照这个教程来 http://blog.csdn.net/zb1165048017/article/details/52980102 步骤 安装Anaconda2,去官网上下载,注意下载对应自己p ...
- BZOJ 2819 Nim 树链剖分+树状数组
这题真没什么意思. 不过就是将普通的求Min,Max,求和等东西换成Xor,偏偏Xor还有很多性质. 算是刷道水题吧. #include<iostream> #include<cst ...
- oops信息的分析【转】
本文转载自:https://blog.csdn.net/zhangchiytu/article/details/8303172 oops是英语口语"糟糕"的意思,当LINUX 内核 ...
- STM32 Flash Download failed
笔者使用Keil开发环境对STM32L Discovery进行开发,更新一次firmware后就不能连接目标板了,报错Internal command error Flash download fai ...
- python类初探
class human: is_alive=True is_man=True def __init__(self,age): print('this is __init__() method, whi ...
- 安装与设置hexo
普通用户(非全局)安装nodejs和npm wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh nvm ins ...
- 利用Python+阿里云实现DDNS(动态域名解析)
引子我想大家应该都很熟悉DNS了,这回在DNS前面加了一个D又变成了什么呢?这个D就是Dynamic(动态),也就是说,按照传统,一个域名所对应的IP地址应该是定死的,而使用了DDNS后,域名所对应的 ...
- Zabbix监控华为交换机
一. 监控交换机首先要在交换机开通snmp协议. 有两种方式开通,web界面,及交换机的配置界面 Web界面开通: 交换机配置界面 有web界面的,使用web界面相对简单,本项目就是用web界面 ...
- 基类的两个派生类再派生一个派生类 用virtual避免二义性
class vehicle{ int MaxSpeed; int Weight;public: vehicle(int maxspeed, int weight) :MaxSpeed(maxspeed ...
- UNR #1 火车管理
很简单 用一个线段树维护 1.答案 2.当前栈顶是什么时候push进来的 然后用一棵以时间为版本的可持久化线段树维护每个操作之后第一个覆盖到他的操作是哪个 就可以了 询问直接在线段树上询问,修改在两棵 ...