HTML常用标签有:a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg等等。
组成文档结构的标签
主要用来构成整个文档大概的框架:<head>、<title>、<body>、<h1>、<p>、<ul>、<ol>、<li>、<div>、<span>等等。
-
<head>
、<body>
标签
组成整个页面的头和身体,大部分内容放在<body>
中,<head>
中有一般只有一个标题<title>
。 -
<h1>
标题标签,
一共有6个从<h1>
~<h6>
,对应着6级标题,反正够你用了。
其中<h1>
~<h3>
对浏览器友好,意思就是这三个标题能够更容易被浏览器搜索到。 -
<p>
段落标签(paragraph)
用来标识一段段落的。 -
<div>
盒标签(盒模型)
我们常说的盒模型就指的<div>
,主要作用就是把页面划分成一块一块,就像一个盒子般,里面嵌套其它内容。 -
<span>
块标签
作用类似于<div>
,但是<span>
是把一行里面的内容分块。 -
<ul>
、<ol>
、<li>
列表标签
<ul>
或<ol>
包含几个<li>
组成一个列表。
<ul>
(unordered list)无序列表,展现的列表是无序的,<li>
前面一般是一个标志。而<ol>
(ordered list)是有序列表,<li>
前面会自动排序。
多媒体嵌入
主要用来插入一些多媒体内容:<img>
、<video>
、<audio>
、<ifram>
、<svg>
。
-
<img>
插入图片
src
图片的来源。
alt
图片无法正常加载时显示的内容。
title
鼠标悬停在图片上显示的内容。 -
<video>
插入视屏、<audio>
插入音频
src
视屏来源 -
<ifram>
插入网页(少用) -
<svg>
插入画板
文本内容修饰的标签
主要用来修饰文本内容:<a>、<small>、<strong>、<em>等等
-
<a>
(anchor锚点)超链接标签(使用GET方法跳转页面)
可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。- href属性:
a. 如果指向域名则跳转对应的域名(http://qq.com) ,如果指向文件(http中存在Content-Type:application)则下载文件。(不支持file协议)。
b. #锚点,页面跳转后不发起请求,跳转到顶部。
c. 伪协议:后接一段JavaScript代码,直接实现代码。javascript: alert('1')
弹出对话框1,javascript: ;
点击后什么都不做。 - target属性:
a. "_blank" 在新页面打开
b. "_self" 在当前页面打开
c. "_parent" 当存在<ifram>
时会在父页面打开
d. "_top"当存在多个<ifram>
(≥3)时,会在最外层页面打开 - download属性:表示a标签不再跳转链接,而是强制下载文件,href是域名则下载网页。
- href属性:
-
<strong>
加粗标签
表示文本十分重要,一般用粗体显示。不同于<b>
标签(同样加粗文本),<strong>
强调内容与形式,内容很重要,而<b>
强调形式。 -
<small>
缩小标签
使文本的字体变小一号,一般被定义为表示边注释和附属细则。 -
<em>
斜体标签
使文本内容变成斜体,标记出需要用户着重阅读的内容。与<strong>
类似,<em>
也有一个<i>
标签表示斜体。同样的,<em>
强调内容与形式,内容很重要,而<i>
强调形式。
HTML表单
常用来提交内容:<form>
、<input>
、<button>
、<label>
-
<form>
主要用来提交内容(使用POST方法跳转页面,提交的内容放在请求的第四部分)- action属性:发起请求后跳转的页面。
-
method="post"
(默认为GET)使用POST发起请求。 -
target
同<a>
标签
-
<input>
标签-
type="submit"
:提交按钮(如果<form>
没有submit则无法提交)
如果一个只有一个按钮<button>
,会自动升级为提交按钮。
如果该标签明确定义type=“button”,则不会升级,依然为按钮。 -
type="checkbox"
多选框<type=“radio”>
单选框
a. 两者均必须使用 value 属性定义此控件被提交时的值,使用 checked 属性指示控件是否被选择。
b.<label>
标签:通常将按钮囊括在里面,点击囊括在内的任何区域都视为被选择。
<label><input type="checkbox">爱我</label>
当点击爱我时,没有点击按钮,也会被视为被选中了。
也可以把<label>
放在里面将内容囊括起来,利用for属性与id属性达到同样的效果.
<input type="checkbox" id="xxxx"><label for="xxx">爱我</label>
-
type="select"
下拉菜单选择
a.<option>
标签下拉菜单的选项,selected
属性表示默认选择,disabled
表示不可选中。
b.mutiple
属性表示多选 -
type="textarea"
输入文本框
a.resize:none
文本框默认宽高不固定,该属性表示固定宽高。一般利用css固定宽高。
b.height: 100; width: 200;
设定文本框宽高,一般利用css固定宽高。
c.rows:10
文本框输入的内容设定的行数。
-
HTML表格
常用来表示数据(少用):<table>
标签里只能有以下标签
-
<thead>
表头><tr>
行(table row)><th>
标题单元格 -
<tbody>
表格><tr>
行><td>
单元格(table data) -
<tfoot>
表注