html5常用标记总结

Posted 2023-05-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5常用标记总结相关的知识，希望对你有一定的参考价值。

参考技术A 一、文本标签
1.1 标题标记：<hn align=”对齐方式”>标题文本</hn>
注意：
1.标题准备了<h1>----<h6>的标题，按照字号依次递减(块级元素)
2.align表示对齐方式，其值为left,center,right
1.2 字体标记：<font face=”字体名称” size=”字号” color=”字体颜色” >文字</font>
注意：中文网页以黑体，宋体，3号字的效果显示
1.3 段落标记：<p align=”对齐方式” >段落内容</p>
注意：<p>可以作为单标记或双标记：
单标记：段落与上文产生一个空行的间距。
双标记：段落与上下文之间产生一个空行的间距
1.4 换行标记：

注意：<br />表示换行，多次换行多次使用<br />
1.5 预格式化标记：<pre>.....</pre>
注意：预格式化标记可将空格、制表符、回车符等忽略
1.6 转义字符：转义字符让特殊字符显示出来。
语法：&实体名称;

二、列表标记
2.1 无序列表
<ul type=”列表项的标签符”>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
......
</ul>
注意： type表示了项目符号：
disc(默认) 实心圆
circle：空心圆
square：实心方块

2.2 有序列表：
<ol type=”列表项的标记符” start=”起始值”>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
......
</ol>

注意：1. 1:1,2,3,.......
a:a,b,c,d,e.......
A:A,B,C,D,E.......
i:i,ii,iii,iv......
I:I,II,III,IV......
2.start表示起始值,从第几个数开始计算

2.3 嵌套排列
<ol type="1">
<li>h</li>
<li>t</li>
<ul type="disc">
<li>m</li>
<li>l</li>
</ul>
<li>5</li>
</ol>

2.4 分割线标记：<hr align=”对齐方式” size=”水平线高度” width=”水平线宽度”
color=”水平线颜色”>

三、超链接标记
3.1 文本链接：<a href=”目标URL” target=”目标窗口”>指针文本</a>
注意： 1.href表示文本链接的目标资源的URL
绝对地址和相对地址
绝对地址：在任何情况下都可以找到的地址（例如：网址）
相对地址：必须知道当前所在，才能找到（../表示上一级目录，/表示下级目录）例子：../img/baidu.jpg 表示在当前位置的上一层目录下的img文件夹中的baidu.jpg 文件。

3.2 图片标记：<img src=”图片文件路径” alt=”提示文本” height=”图片高度” width=”图片宽度”/>

3.3 多媒体标记
3.3.1 滚动字幕标记：marquee可以实现文字或图片的跑马灯效果
<marquee>....</marquee>
marquee的属性：
behavior 指定了跑马灯的效果：scroll(滚动)、slide(滑动)、alternate(交替)
bgcolor:跑马灯的背景颜色
direction:跑马灯的移动方向，left（左）、right(右)、up(上)、down(下)
scrolldelay:每次移动的延迟时间，单位毫秒
loop:跑马灯运行次数，-1表示无限循环
height、width
hspace:左右空白宽度
vspace:上下空白宽度

3.3.2 嵌入音乐文件
<audio src=”文件地址” >提示文字</audio>

3.3.3 嵌入视频文件
<video src=”视频文件地址” controls=”controls”>提示文字</video>

四、表格
4.1 表格基本语法：
<table>
<tr>
......
<td>单元格内容</td>
......
</tr>
</table>
注意：
<table>:声明一个表格对象
<tr>:声明一行
<td>:声明一个单元格

4.2 表格的基本属性
1.align 对齐方式：left、center、right
2.border:表格边框
3.bordercolor:边框颜色
4.bgcolor:表格背景颜色
5.background:背景图片
6.height、width

4.3 单元格合并
1.rowspan:所跨的行数
2.colspan:所跨的列数
五、表单
5.1 表单标签：<form action=”URL” method=”get|post” target=”...”></form>
注意：<form>：该标记中包含的数据将被提交到服务器或者电子邮件中
action:指定服务器端处理提交表单信息的程序是什么。URL地址或电子邮件地址
method:get/post:数据传输到服务器的传递方法
target:服务器返回文档结果的显示位置：_blank:在新的浏览器窗口中打开
_self:在当前浏览器中显示

5.2 表单标记
5.2.1 input标签：<input type=”类型” name=”服务器获取用户输入信息的名字” value=”初始值”>
注意：1.type类型（输入类型）:
1. text:单行文本框
2. password:密码输入框
3. radio:单选按钮 checked表示默认
4. checkbox:复选框 checked表示默认
5. submit:提交按钮
6. reset:重置按钮
7. button:普通按钮
2.maxlength：输入的最大长度
5.2.2 select标签
<select name=”” size=”” multiple>
<option value=”选项1” > 选项1
.......
<option value=”选项n” > 选项n
</select>
注意：name:服务器获取用户输入信息的名字
value ：初始值
option：下拉框的内容
multiple:多选，若没有multiple则是单选
selected:表示默认选项
size:表示长度

5.2.3 textarea 标签：<textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”>
</textarea>

注意: name：多行文本框的名称
cols：一行可容纳的字符数
rows：表示可显示额的行数
wrap:virtual和phycal控制自动换行

HTML常用标签总结

学习前端开发，第一步要学习的绝对是HTML。

什么是HTML？

HTML 是(Hyper Text Markup Language)四个单词的缩写，翻译过来就是超文本标记语言，所以它不是一门编程语言，只是一门标记语言。

学习html的第一步就是需要学习它的标签如何使用。这个没有什么技巧，全靠平时多练习多用，才能达到熟能生巧的境界。

Html一共有一百一十多个标签（包含html5的新标签），如果想要全部掌握还真得费不少功夫，但是实际开发中经常用到的也就四五十个，有很多都是不常用的，如果一个不落的去学习反而浪费了宝贵的时间。

以下就结合自己实际开发中经常用到的标签做一个说明和总结。如果对一些标签不是很理解，暂时可不必深究。我现在只是做一个标签的罗列，具体用法可查阅手册。

更详细的信息请参阅下面这个网站

W3school：http://www.w3school.com.cn/h.asp

1，基础标签

基础标签是必须全部掌握的，因为在每个html网页中几乎都可以看到他们的身影。

<!DOCTYPE> 定义文档类型。请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

<html> 定义 HTML 文档。

<head> 定义关于文档的信息。

<title> 定义文档的标题。

<body> 定义文档的主体。

<h1> 一级标题

<h2> 二级标题

<h3> 三级标题

<p> 定义段落。

定义注释

2，格式标签

格式标签现在用的不是很多，因为现在样式修饰都交给css去做了。

<b> 定义粗体文本。

<del> 定义被删除文本。

<em> 定义强调文本。

<i> 定义斜体文本。

<sup> 定义上标文本。

<sub> 定义下标文本。

<hr> 定义水平线。

<br> 定义简单的折行。

3，多媒体链接

<img> 定义图像。

注意其alt属性，title属性

<canvas> 定义图形。

<audio> 定义声音

<video> 定义视频

<a> 定义超链接

a标签在实际应用中用的是相当多的

4，列表

<ul> 定义无序列表。

<ol> 定义有序列表。

<li> 定义列表的项目。

<dl> 定义定义列表。

<dt> 定义定义列表中的项目。

<dd> 定义定义列表中项目的描述。

5，表单

<form> 定义供用户输入的 HTML 表单。

<input> 定义输入控件。

属性非常多，也很常用，详情请查阅手册。

<textarea> 定义多行的文本输入控件。

<button> 定义按钮。

<select> 定义选择列表（下拉列表）。

<option> 定义选择列表中的选项。

<label> 定义 input 元素的标注。

<datalist> 定义下拉列表。

6，表格

<table> 定义表格

<caption> 定义表格标题。

<thead> 定义表格中的表头内容。

<tbody> 定义表格中的主体内容。

<tfoot> 定义表格中的表注内容（脚注）。

<th> 定义表格中的表头单元格。

<tr> 定义表格中的行。

<td> 定义表格中的单元。

表格在现在的网站中用的倒不是很多了。

7，其他常用标签

<div> 定义文档中的节。

<span> 定义文档中的节。

<base> 定义页面中所有链接的默认地址或默认目标。

以下标签为html5新增的语义化标签

<header> 定义 section 或 page 的页眉。

<footer> 定义 section 或 page 的页脚

<section> 定义 section。

<article> 定义文章。

<aside> 定义页面内容之外的内容。

注意：html5新标签不被ie浏览器识别问题

需要引入html5shiv包，使用条件注释解决

<!--[if lte IE 8]>

<![endif]-->

好吧，简单的HTML常用标签就这么多了，希望对前端新人有所帮助。

至于HTML5的新特性后续再继续总结。

以上是关于html5常用标记总结的主要内容，如果未能解决你的问题，请参考以下文章

HTML5新特性总结

Javascript学习总结 - html5实现定位地理位置