html标签属性大全（什么是html属性，html常用的属性有哪些）

本文目录

• 什么是html属性，html常用的属性有哪些
• html标签的id属性是什么有什么用
• HTML常用标签
• html常用标签及作用
• HTML常用属性

什么是html属性，html常用的属性有哪些

所谓html属性，指的就是各个标签所具有的属性

最为常见的属性包括：id、class、name、style、type、value等

不同的标签还有各自的专属属性，比如表格元素所专用的 colspan rowspan

html属性是书写于标签当中的，如：

《input type="text" name="" id=""》

input是标签名，而type、name、id都是这个标签的属性

当然，用户还可以自定义属性。

如果是新手学习HTML5，建议弄本书把基础知识打扎实，推荐看看《HTML5布局之路》学习一下

html标签的id属性是什么有什么用

id 在HTML中的作用是给一个单元(元素,标签)一个独一无二的标识或标记,让流览器在分析处理网页时找到id所在的地方，常用于:

1、元素的风格(style sheet)选择

2、脚本语言用它作为标记 ,找到id 所在的单元。

3、用作声明OBJECT的单元的标识。

扩展资料：

特点

1、由尖括号包围的关键词，比如 《html》。

2、通常是成对出现的，比如 《div》 和 《/div》。

3、标签对中的第一个标签是开始标签，第二个标签是结束标签。

4、开始和结束标签也被称为开放标签和闭合标签。

5、也有单独呈现的标签，如：《img src="百度百科.jpg" /》等。

6、一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如《h1》标题《/h1》和 《input type="text" value="按钮" /》。

HTML常用标签

Html常用标签总结，具体可分为常用基础标签、常用表单基础标签、常用表格基础标签、常用列表标签、常用框架标签、常用链接标签和常用图像标签七大类。

• 01

  常用基本标签
  《html》《/html》 定义html文档
  《head》《/head》定义文章标题和其他在网页内不显示的信息
  《title》《/title》　定义文档标题
  《body》《/body》定义文档的主体内容
  《h1》《h1》定义最大标题，由1依次往后排开，1最大
  《!--…--》注释

• 02

  常用表单基础标签
  《form》《/form》定义表单
  《input》定义输入控件
  《textarea》《/textarea》定义多行文本输入
  《button》定义按钮
  《select》定义选择的下拉列表
  《optgroup》定义选择列表中的选项组合
  《option》定义选择列表的选项
  《label》定义input的标注
  《fieldset》定义围绕表单的边框
  《legend》定义fieldset的标题

• 03

  常用表格基础标签
  《table》定义表格
  《caption》定义表格标题
  《th》定义表格中的表单元格
  《tr》定义表格中的行
  《td》定义表格中的单元
  《thead》定义表格中的表头内容
  《tbody》定义表格中的主体内容
  《tfoot》定义表格中的脚注
  《col》d定义表格中一个或者多列的属性值
  《colgroup》定义表格中供格式化的列组

• 04

  常用列表标签
  《ul》《/ul》定义无序列表
  《ol》《/ol》定义有序列表
  《li》《/li》定义列表的项目
  《dl》定义列表
  《dt》定义列表中的项目
  《dd》定义列表中项目的描述
  《menu》定义命令列表
  《menuitem》定义用户可以从弹出菜单调用的命令

• 05

  常用框架标签
  《frame》定义框架集的窗口或者框架
  《frameset》定义框架集
  《noframes》定义针对不支持框架的用户代替内容。
  《iframe》定义内联框架

• 06

  常用链接标签
  《a》定义锚
  《linke》定义文档与外部资源的关系

• 07

  常用图像标签
  《img》《/img》定义图像
  《map》《/map》定义图像映射
  《area》《/area》定义图像地图内的区域

html常用标签及作用

一、常用的标签
《h1》~《h6》 表示是一个标题
《p》 段落标签
《hr/》 水平线标签
《br/》 换行标签
《sub》 下标
《sup》 上标
《pre》 原样标签： 原样标签会保留空格和换行符。
《ol》 《li》 有序的列表标签、
《ul》 《li》 无序的列表标签。
项目列表标签(dl dt dd)
行内标签(span)
块标签《div》 div标签的内容会独立占一行。
二、实体标签
空格
小于号 《
大于号 》
-----------------------------
人民币 ¥；
版权
商标
三、媒体标签
《embed》《/embed》
hidden ： 设置隐藏插件是否隐藏。
src ：用于指定音乐的路径
《embed src="*****" 》《/embed》
《marquee》 飘动标签direction : 指定飘动的方向
scrollamount : 指定飘动的速度。
loop :指定飘动的次数
四、超链接标签
《a》 超链接标签
a标签常用的属性：
href : 用于指定链接的资源
target: 设置打开新资源的目标。
_Blank 在独立的窗口上打开新资源
_self 在当前窗口打开新资源
file: file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。
格式：
file:///f:/美女/*****
邮件 的协议： mailTo迅雷的协议： thunder
超链接标签的作用：
1. 可以用于链接资源。
2. 锚点点位.
1. 首先编写一个锚点 锚点的格式： 《a name="锚点名字"》 数据《/a》
2. 使用a标签 的herf属性连接到锚点出。 href=”#锚点的名字“
五、图片标签
img标签常用的属性:
width： 设置图片宽度
height 设置图片高度
alt: 如果图片资源无法找到，那么就显示对应的文字对图片进行说明。
六、表格标签
表格使用到的标签：
《table》 表格
《tr》 行
《td》 单元格
《th》 表头 默认的样式是居中，加粗。
《caption》 表格的标题
表格常用的属性：
border 设置表格的边框
width : 设置表格的宽度
height: 设置表格的高度的。
colspan: 设置单元格占据指定的列数。
rowspan : 设置单元格占据指定的行数。
《thead》 标签用于组合 HTML 表格的表头内容。
《thead》 元素应该与 《tbody》 和 《tfoot》 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。
通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
《thead》 标签必须被用在以下情境中：作为 《table》 元素的子元素，出现在 《ca注意： 表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值 --》《/head》《body》《form action="*****" method="post"》 《!-- 文本输入框 单 行- -》 用户名：《input name="userName" type="text"/》《br/》《!-- 密码框 --》密码：《input name="password" type="password"/》《br/》《!-- 单选框 --》性别： 男《input checked="true" value="man" name="***" type="radio"/》女《input name="***" value="woman" type="radio"/》《br/》《 !-- 下拉框 --》来自的城市：《select name="city"》《option value="BJ"》北京《/option》《option value="SH"》上海《/option》《option value="GZ"》广州《/option》《option value="SZ"》深圳《/option》《/select》《br/》《!-- 复选框 同一组的复选框name的属性值要一致 --》兴趣爱好：java 《input value="java" name="hobit" checked="checked" type ="checkbox" /》javascript 《input type="checkbox" value="javascript" name="hobit" /》android 《input value="android" name="hobit" type="checkbox" /》《br/》 《!-- 文件上传框--》大头照：《input name="image" type="file" /》《br/》个人简介:《!-- 文本域 --》《textarea name="intro" rows="10" cols="30"》《/textarea》《br/》《!-- 提交按钮 --》《input type="submit" value="注册"/》《!-- 重置按钮 --》《input type="reset" value="重置"/》《/form》《/body》《/html》

HTML常用属性

行高 line-height:数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
显示 display:
none: 不显示，使用的场景非常多
block: 把内联标签变成块级标签
inline: 把块级标签变成内联标签
inline-block:变为行间块元素

宽度 width: 长度 | 百分比 | auto;
高度 height: 长度 | 百分比 | auto;
清除 clear: none | left | right | both;
外边距 margin: 上 右 下 左 ;
内边距 padding: 上 右 下 左 ;
定位 position: absolute | relative;
超出 overflow: visible | hidden | scroll auto;

浮动 float: left | right | none; 在页面布局的时候用的最多

fixed 一般用来写网页顶端的固定导航条，或者两侧的菜单。
absolute与relative 这两者一般配合使用，用于调整div之间的相对位置

opacity 0-1 表示透明度

颜色 color: 数值;
大小 font-size: 数值;
字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)

背景 background: transparent; /透视背景*/
颜色 background-color: 数值;
图片 background-image: url() | none;
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

大小写 text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow:数值;

边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度 border-width: ;
边框颜色 border-color: top值 right值 bottom值 left值;

类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;
位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写 list-style:目录样式类型 | 目录样式位置 | url;

margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;

padding-top:10px; / 上边框留空白 /
padding-right:10px; / 右边框留空白 /
padding-bottom:10px; / 下边框留空白 /
padding-left:10px; / 左边框留空白 /

vertical-align:sub; / 下标字 /
vertical-align:super; / 上标字 /
vertical-align:top; / 垂直向上对齐 /
vertical-align:bottom; / 垂直向下对齐 /
vertical-align:middle; / 垂直居中对齐 /
vertical-align:text-top; / 文字垂直向上对齐 /
vertical-align:text-bottom; / 文字垂直向下对齐 /

a / 所有超链接 /
a:link / 超链接文字格式 /
a:visited / 浏览过的链接文字格式 /
a:active / 按下链接的格式 /
a:hover / 鼠标转到链接 /

光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;
/ 也可以自定义 /
cursor: hand; / 链接手指 /
cursor: crosshair / 十字体 /
cursor: s-resize / 箭头朝下 /
cursor: move / 十字箭头, 朝右/
cursor: help / 加一问号 /
cursor: w-resize / 箭头朝左 /
cursor: n-resize / 箭头朝上 /
cursor: ne-resize / 箭头朝右上 /
cursor: nw-resize / 箭头朝左上 /
cursor: text / 文字型/
cursor: se-resize / 箭头斜右下 /
cursor: sw-resize / 箭头斜左下/
cursor: wait / 漏斗