1. 云栖社区>
  2. PHP教程>
  3. 正文

html5——常用元素与属性

作者:用户 来源:互联网 时间:2017-12-01 11:23:34

html5属性元素常用

html5——常用元素与属性 - 摘要: 本文讲的是html5——常用元素与属性, html5是由标签组成的标记语言,本篇就介绍HTML5的部分标签 html5保留的常用标签<!---->定义HTML注释<html>HTML5文档的根元素<head>定义HTML文档的头部页面元素&lt


html5是由标签组成的标记语言,本篇就介绍HTML5的部分标签

html5保留的常用标签

<!---->定义HTML注释
<html>HTML5文档的根元素
<head>定义HTML文档的头部页面元素
<title>定义HTML5的页面标题
<body>定义HTML5文档的页面主体部分
<style>该元素用于引入样式定义
<h1>到<h6>定义标题一到标题六
<p>段落标签
<br>换行标签
<hr>定义水平线
<div>定义文档中的块
<span>与div标签基本相似,默认不会换行

代码示例:

<!DOCTYPEhtml>
<html>
<metacharset="utf-8"><!--定义编码方式-->
<head>
<title>标签代码示例</title>
<head>
<body>
<h1>标题一</h1><!--标题标签-->
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<hr><!--输出一条水平线-->
<span>php</span><span>mysql</span><span>html</span><!--定义三个span标签-->
<br><!--换行标签-->
<div>php</div><div>mysql</div><div>html</div>
<p>tomcat</p>
</body>
</html>

文本格式化标签

这些元素让文本在浏览器中呈现出特定的效果

<b>定义粗体文本
<i>定义斜体文本
<em>定义强调文本
<strong>定义粗体文本,与<b>标签的作用和用法基本相同
<sup>定义上标文本
<sub>定义下标文本
<bdo>定义文本的显示方向,该标签可以指定dir属性,该属性值只能是ltr或者是rtl

代码示例:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>文本格式化标签</title>
</head>
<body>
<span><b>加粗文本</b></span><br/>
<span><i>斜体文本</i></span><br/>
<span><b><i>粗斜体文本</i></b></span></br>
<span><em>被强调的文本<em><span><br/>
<big><span>大号字体文本</span></big><br/>
<p><strong>加粗文本</strong></p><br/>
<small><span>小号字体文本</span></small><br/>
<div>普通文本<sup>上标文本</sup></div>
<bdodir="ltr">从左向右排列</bdo><br/>
<bdodir="rtl">从右向左排列</bdo><br/>
</body>
</html>

语义相关元素

html5保留了如下相关元素<abbr>用于表示一个缩写
<address>用于表示一个地址
<blockquote>用于定义一段长的引用文本
<q>用于定义一段短的引用文本
<cite>用于表示作品的标题
<code>用于表示一段计算机代码
<dfn>用于定义一个专业术语
<del>定义文档中被删除的文本
<ins>定义文档插入的文本
<pre>预格式化标签
<samp>定义示范文本内容
<kbd>定义键盘文本
<var>用于表示一个变量

超链接和锚点

超链接<a.../>,该元素可以指定 id class style等核心属性,也可以指定onclick等各种事件属性,还可以指定如下三个重要属性

href:指定超链接所关联的另一个资源

target:指定使用框架集中的哪一个框架来装载另一个资源,该属性的属性值可以是_self _blank _top _parent

<ahref="target="_blank"">百度</a>
<ahref="#test">定位到test锚点</a>
<aname="test"></a>

列表相关标签

<ul>定义无序列表
<ol>定义有序列表该元素可以指定如下三个属性,start:指定列表项的起始数字type:哪种类型
的编号reversed该属性用于指定是否将排序反转(目前没有浏览器支持该属性)
<li>定义列表项目
<dl>用于定义列表
<dt>用于定义标题列表项
<dd>用于定义普通列表项

代码示例:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>列表相关标签</title>
</head>
<body>
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<olstart="2"type="I">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ol>
<dl>
<dt><dt>
<dd><dd>
<dd><dd>
<dt><dt>
<dd><dd>
<dd><dd>
<dl>
</body>
</html>

图像相关标签:

<img.../>
src:该属性指定图片的所在的位置
alt:作为改图片的提示信息
height:该图片的的高度
width:该图片的宽度
usemap="#mapname"
<map.../>
<mapname="">
<area=""coords=""href="">
<area=""coords=""href="">
</map>

表格相关标签:

<table>用于定义表格
属性:cellpadding:指定单元格内容和单元格边框之间的间距
cellspacing:指定单元格之间的间距,该属性可以是像素值也可以是百分比
width:表格的宽度
<caption>定义表格标题
<tr>定义表格行
<td>定义单元格
<th>定义表格页眉的单元格
<tbody>定义表格的主体
<thead>定义表格的头
<tfoot>定义表格的脚
rowspancolspan两个属性用于定义跨行跨列

框架相关元素:

<iframesrc=""width=""height="">

html5新增的通用属性:

contentEditable属性
该属性设置为true,那么浏览器将允许开发者直接编辑该HTML元素里的内容,可以继承,如果一
个HTML元素的父元素是可编辑的那么子元素默认也是可以编辑的
designMode属性
相当于一个全局的contentEditable属性,如果把真个页面的designMode属性设置为on时,该页面
上所有可支持contentEditabe都变成可编辑状态
hidden属性
hiddle设为true,就意味着浏览器不显示该组件,浏览器也不会保留该组件所占用的空间,相当于
在CSS中设置display:none;
spellcheck属性
设置spellcheck="true"浏览器将会对输入的文本内容执行输入检查

html5新增的常用元素:应用较少,略

html5头部和元信息

<script>该元素用于包含JavaScript脚本
链接外部js<scripttype="text/javascript"src="">
<style>用于定义内部CSS样式
<link>链接外部资源
链接外部CSS<linktype="text/css"rel="stylesheet"href="">
<meta>定义HTML页面的元数据
<matacharset="utf-8">
<matahttp-equiv="refreash"content="2;URL="http://www.baidu.com">

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索html5 , 属性 , 元素 常用 ,以便于您获取更多的相关知识。