HTML5标签属性全在这里了
一、HTML5文档结构
HTML5文档的基本结构
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我的第一个网页</title></head><body>Hello World!</body>
</html>
<!DOCTYPE html> 声明这是一个html文档,必须在文档页面的第一行
二、HTML5常见的块级标签和行级标签
1、常见的块级标签
块级标签在网页中显示为块,块级标签独占一行,新的块级标签将从新的一行开始排列,它可以桶内内联元素和其他块级元素。
块级标签 | 作用 |
---|---|
< h1></ h1>……….< h6>< h6/> | 设置段落标题的大小,1~6级标题字体大小依次递减 |
< hr/> | 水平线标签,添加水平分割线 |
< p></ p> | 段落标签,区分段落 |
< br/> | 换行标签 |
< blockquote>< /blockquote> | 引用标签,同时会将标签内的文字缩进显示 |
< pre>< /pre> | 预格式标签,可以将文字按照原始的排列方式进行显示 |
< ul>< li>< /li></ ul> | 无序列表标签 |
< ol>< li>< /li></ ol> | 有序列表标签 |
< dl></ dl> | 定义列表标签 |
< div>< /div> | 分区标签 |
2、常见的行级标签
与块级标签不同,行级标签在页面中可以和其他元素在同行显示,知道一行不能放下一个完整的元素,并且通常行级元素内不会包含其他元素。
行级标签 | 标签含义 |
---|---|
< img/> | 图片标签 |
< a>< /a> | 超链接标签 |
< span> | 组合文档中的行内元素 |
< em> | 侧重点的强调,可嵌套使用,嵌套个数越多,强调级别越高 |
< strong> | 表示内容的重要性,嵌套递增重要性级别 |
< small> | 旁注(side comments),可以用在免责声明,使用条款和版权信息等需要小字体的场景 |
< s> | 有误文本,文本文字上加删除线的样式 |
< b> | 不仅仅是粗体文本,还可以定义一些需要引起注意却没有额外语义的内容,比如摘要的关键和文章导语 的加粗等 |
< i> | 不仅是单纯的斜体,还可表示“另一种叙述方式”,常见的场景有外来语、分类名称和技术术语等 |
< cite> | 浏览器显示为倾斜,常用于书、画作、作品的引用 |
< q> | 短引用,显示为文字用""引起来 |
< code> | 只是表示计算机代码,但是浏览器只会显示等宽字体,不会保留代码格式,需配合 |
2.1< img/>:图片标签
<img src = "logo.png" alt="图片logo" title="图片标识"/>
图片标签主要有如下 5 个属性。
src属性
src就是引用图片的路径地址,写法有三种
- 相对路径:以当前文件为准,去寻找图片地址
- 绝对路径:file:///盘符:/文件夹/图片.扩展名。但这种方 式严禁使用,原因有两点:
- 绝对路径只在当前计算机生效,若将网站转移服务器,则路径会失效。
- 通过绝对路径打开图片使用的是 file 协议,但网页中使用的是 http 协议,因此会出 现跨域问题,造成图片无法显示。
- 网络地址:使用网络上的图片链接
height 和 width 属性。设置图片的宽度和高度
title 属性。设置图片的标题。当鼠标指在图片上后显示的文字
alt 属性。设置由于图片无法加载时显示的文字
align属性。设置图片周围文字相对于图片的位置
2.2< a>< /a>:超链接标签
<a href="#">这是一个超链接</a>
超链接标签的属性
href属性:在标签中使用 href 属性来描述链接的地址,这个地址可以是网络链接,也可以是本 地文件。当用#时,表示这是一个空的超链接。
target属性:使用 target 属性可以定义通过超链接打开的文档在何处显示。
有两个属性:
- _self:在与连接相同的框架中打开被链接文档(默认属性值 )
- _blank:在新窗口中打开链接
锚链接的用法
本页面锚链接
使用#name跳转到对应锚点
<a href="#top" target="_self">这是一个超链接</a>
页面间锚链接
跳转到其他页面的指定位置,设置锚点
<a herf="t.html#nav"跳转到新页面指定部分</a>
2.3、块级标签与行级标签的特点与区别
- 块级标签自动换行,前后隔一行;行级标签不会自动换行,从左往右依次显示
- 块级标签的宽度默认是100%;行级标签的宽度由文字内容撑开
- 块级标签可以设置宽度、高度、边距等属性;行级标签不能设置上述属性
3、HTML5新增标签简介
三、HTML5 表格
3.1、表格内容
表格由< table>标签定义,行内由< tr>标签定义,每行被分割为若干个单元,列由标签定义
如果第一行为表头,< td>要换成< th>
代码展示为:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>表格的基本结构</title></head><body><table><tr><th>表头 1</th><th>表头 2</th><th>表头 3</th></tr><tr><td>第一行 1</td><td>第一行 2</td><td>第一行 3</td></tr><tr><td>第二行 1</td><td>第二行 2</td><td>第二行 3</td></tr></table>
</body>
</html>
3.2、表格属性
表格属性 | 使用方法 |
---|---|
border: (表格边框属性) | < table border=“1”></ table> |
width/height: 表格(宽度/高度)属性 | < table border=“1” width=“400” height=“200”></ table> |
bgcolor: 表格背景色属性 | < table border=“1” bgcolor=“red”></ table> |
background: 表格背景图属性 | < table border=“1” background=“img/img.png”>< /table> |
bordercolor: 表格边框颜色属性 | < table border=“1” bordercolor=“blue”></ table> |
cellspacing: 表格单元格间距属性 | < table border=“1” cellspacing=“10” ></ table> |
cellpadding: 表格单元格内边距属性 | < table border=“1” cellpadding=“10”></ table> |
align:表格对齐属性 | < table border=“1” align=“center”></ table> |
3.3、行和列的属性
当表格属性与行列属性冲突时,以行列属性为准
行、列属性 | 用法 |
---|---|
width/height:单元格宽度/高度属性 | < td width=“100” height=“50”> 第一行1</ td> |
bgcolor:单元格背景色属性 | < td bgcolor=“red”> 第一行1</ td> |
align:单元格内容水平对齐属性 | < td align=“center”> 第一行1</ td> |
valign:单元格内容垂直对齐属性 | < td valign=“center”> 第一行1</ td> |
colspan /rowspan:表格的跨行与跨列 | colspan 属性表示跨列,当某个格跨 N 列时,其右边 N-1 个单元格需删除。 rowspan 属性表示跨行,当某个格跨 N 行时,其下方 N-1 个单元格需删除。 |
3.4、表格的结构化与直列化
3.4.1、表格的结构化
1)caption:表格的标题,通常出现在表格的顶部。
2)thead:定义表格表头,通常表现为标题行。
3)tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组。
4)tfoot:定义表格的脚尾,通常表现为总计行。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格的结构化</title>
</head>
<body><table width="500" border="1"><caption>表格标题</caption><thead><tr><th>表格头部</th></tr></thead><tbody><tr><td>表格主体</td></tr></tbody><tfoot><tr><td>表格底部</td></tr></tfoot></table>
</body>
</html>
3.4.2、表格的直列化
基本语法如下:
<colgroup style="background-color: yellow;"> <!--前两列为一组--><col /> <!--第一列--><col /> <!--第二列-->
</colgroup>
<col style="background-color: blue;"/> <!--第三列-->
< colgroup>标签只能在< table>中使用.
代码实例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table width="500" border="1"><colgroup style="background-color: yellow;"> <!--前两列为一组--><col /> <!--第一列--><col /> <!--第二列--></colgroup><col style="background-color: blue;"/> <!--第三列--><thead><tr><th>头 1</th><th>头 2</th><th>头 3</th></tr></thead><tbody><tr><td>111</td><td>111</td><td>111</td></tr><tr><td>222</td><td>222</td><td>222</td></tr></tbody><tfoot><tr><td>尾 1</td><td>尾 2</td><td>尾 3</td></tr></tfoot></table>
</body>
</html>
四、HTML5表单
4.1、表单的常用属性
表单属性 |
---|
action 属性 用于指定表单提交时向何处发送表单数据,即需要发送的服务器地址。 |
method 属性用于指定表单向服务器提交数据的方法,包括两种方法,分别是 get 和 post。 |
enctype 属性指定表单发送的编码方式,只有 method="post"时才有效,共有三种属性值 |
method属性
method属性包括两种方法,分别是get和post
get方法与post方法的特点与区别
- get方法是使用URL传递参数,并且只能传递少量数据。同时URL传递参数并不安全,所有信息在地址栏可以看到,并且可以通过地址栏随意传递其他数据。为默认值
- post方法是使用http请求传递,传递的数量在理论上没有限制。并且信息在地址中不可见,比较安全
enctype 属性
enctype 属性共有三种属性值
- application/x-www-form-urlencoded:此为默认值,如果 enctype 属性省略不写,则表 示采取此种编码方式。
- multipart/form-data:不对字符编码,用于上传文件时使用
- text/plain:将空格转换为“+”符号,但不编码特殊字符,通常在将表单发送到电子 邮箱时使用。
4.2、input输入框
4.2.1、input常用属性
属性 | 含义 |
---|---|
type 属性 | 表示 input 输入框的类型,默认值是 text |
name 属性 | name 属性表示 input 输入框的名称,一般必填 |
value 属性 | value 属性表示 input 输入框的默认值 |
placeholder 属性 | placeholder 属性表示输入框中的提示信息,当输入框有 value 属性的时候,提示内容会 消失,转而显示 value 属性值。 |
tabindex 属性 | tabindex=“1” 此属性控制按 Tab 键时的跳转顺序 |
checked=“checked” | 默认选中 |
disabled=“disabled” | 设置控件不能使用。 |
hidden=“hidden” | 设置隐藏控件 |
4.2.2、type类型
text:文本输入框
password:密码输入框
radio:单选按钮
checkbox:复选按钮
file:文件上传按钮
submit:表单提交按钮
reset:重置按钮
image:图片提交按钮
button:可单击按钮
4.3、其他表单元素
4.3.1、select下拉选择控件
<form action="form.php" method="post">今天是星期:<select name="week" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option></select></form>
1.< select>标签的属性
1)name=“列表名”:所有选项只有一个 name。
2)multiple=“multiple”:设置 select 控件为多选,可在列表中使用 Ctrl 键+鼠标进行多 选。一般不用。
3)size=“1”:规定下拉列表中可见选项的数目。如果 size 属性的值大于 1,但是小于 列表中选项的总数目,下拉列表就会显示出滚动条,表示可以查看更多选项。
2.标签的属性
1)value=“”:分为两种情况。 当选项 option 没有 value 属性时,往后台传递的是标签中的文字;当 选项 option 有 value 属性时,往后台传递的是 value 属性的值。
2)title=“”:鼠标指上后显示的文字,与图片的 title 属性类似。
3)selected=“selected”:默认选中,即 select 的初始值。
3.利用标签分组
<form action="form.php" method="post">你所在的地区为:<select name="city"><optgroup label="河南"><option value="1" title="郑州">郑州</option><option value="2" title="安阳">郑州</option><option value="3" title="新乡">新乡</option></optgroup><optgroup label="北京市"><option>海淀区</option><option>朝阳区</option></optgroup></select></form>
4.3.2、textarea 文本域
与的 type="text"不同,创建的文本域是多行的,文本区中可容纳无限 数量的文本,其中文本的默认字体是等宽字体。
<form action="form.php" method="post"><textarea style="width: 200px; height: 150px;">这是文本域的内容</textarea>
</form>
文本域属性
- 设置宽高。cols 规定文本域内可见的列数,rows 规定文本域内可见的行数,但这种 方式并不常用。
- readonly=“readonly”:设置为只读模式,不允许编辑
- disable=“disable”:设置禁用文本域。
4.3.3、button按钮
<form action="form.php" method="post"><button type="button">这是一个按钮</button>
</form>
在< button> 内部可以放置内容,如文本或图像。这是该元素与使用< input>创建的按钮 之间的不同之处。
HTML5标签属性全在这里了相关推荐
- 解决ie8及低版本浏览器不支持html5标签属性
html5新标签<head>.<nav>.<footer>兼容性 - 经验小结,处理方案 IE支持: IE8或更早的版本不支持HTML5的<nav>标签 ...
- HTML5标签属性(含新增标签)
目录 1.HTML5新增的标签 : 传统 div方式布局 使用 HTML5新增的标签实现布局 2. 最常见的HTML标签属性: 分割视窗 贴图/音乐 表格语法 字体效果 区断标记 连结格式 贴图/音乐 ...
- html5标签属性大全_HTML/HTML5 知识点思维导图
HTML 1 - 浏览器 | 浏览器页面构成 2 - 浏览器 | 浏览器内核相关知识点 3 - W3C | 对WEB标准以及W3C的理解与认识? 4 - 标签 | Doctype相关知识点 5 - 标 ...
- html5标签属性大全_HTML5中video标签如何使用
HTML5中的video标签用于播放视频文件的,在video标签中我们可以设置窗口的宽高,视频的自动播放,循环播放以及视频的封面图片等等 HTML5是下一代HTML,新增了许多新的标签,这些标签实现了 ...
- html5标签属性大全_html5 文本相关标签
html5 文本相关标签 一.标题 h1.h1.hgroup(标题组) 1.什么情况下使用标题? 01.标题是概括性的简短文字 02.标题能概括随后的内容 2.主标题与副标题 01.主标题 02.副标 ...
- html5 meta标签属性整理
html5 meta标签属性整理 前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下 ...
- html5标签及属性大全,HTML5 标签 和属性 列表.pdf
HTML5 标签 和属性 列表 按字母顺序排列的标签列表 4: 指在HTML 4.01 中定义了该 元素 标签 描述 5: 指在HTML 5 中定义了该元 素 定义注释 4 5 定义文档类型 4 5 ...
- HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
随着主流浏览器对 HTML5 的不断支持和完善,越来越多的开发者开始使用 HTML5 来开发各种功能强大的 Web 应用程序,HTML5 正引领互联网新革命.为了方便大家更好的学习 HTML5,今天这 ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- 两院院士评选2020年中国、世界十大科技进展揭晓,「机器学习模拟上亿原子」等入选 | AI日报...
- MC, MCMC, Gibbs采样 原理实现(in R)
- 被遗忘和庸俗化的弗洛伊德:纪念弗洛伊德诞辰150周年(全文)
- Android之简单背景颜色渐变实现
- nyoj------20吝啬的国度
- 在matlab中对hsv进行均匀量化和非均匀量化
- java ror_Java会因为RoR的流行而过时吗?
- 一种基于C6748 DSP+FPGA的软件无线电平台的设计及应用
- python怎么画圆螺旋线_Python turtle 绘制彩色螺旋线
- Studio 3T 的Query Builder使用
- opengl编程基础篇
- 几个离散混沌映射系统(混沌函数)
- A. chino with string(ac自动机+floyd矩阵快速幂)
- symfony简单的博客练习,熟悉具体开发流程
- 【PCB开源分享】STC32G12K128/STC8H8K64U开发板
- 取消Rainbow Brackets彩色框
- 增值税电子发票识别-OCR
- postman配置https证书(手动生成的证书)
- MD5 到底算不算一种加密算法?
- 5G智慧医疗十大应用场景,你知道多少?