HTML常用标签简介
1. 一些简单的常见标签
-
<h1>- <h6>标题元素 -
<p>段落元素 -
<ul>无序列表 -
<ol>有序列表 -
<small>不重要的文字 -
<strongv重要的文字 -
<kbd>键盘输入元素 -
<video>视频元素audio>音频元素 -
<svg>可缩放矢量图形 -
<div>区块元素 -
<span>短语内容
2. <a>&&<ifram>
-
<a>锚点，在http中进行get请求，有以下常用属性
（1）href 属性：必需属性，为锚定义一个超文本链接来源
==> href="qq.com" 会当成文件打开（因未设定打开协议）
==> href="//qq.com" 无协议绝对地址，当前时什么协议就以什么协议打开
==> href="index.html" 相对路径，以ftp协议
==> href="#XX" 定义当前页面的锚点
==> href="?xx=yy" 查询参数
==> href="javascript:alert('1')" JavaScript伪协议
==> href="javascript:;" 为达到点击链接不做跳转的效果
（2）target 属性：该属性指定在何处显示链接的资源，可以<iframe>标签连用，指向iframe的name
==> target=_blank 在新的页面打开
==> target=_self 在自身打开
==> target=_top 若在iframe中，在其最外层打开
==> target=_parent 若在iframe中，在其上一层iframe打开
（3）download 属性：当网页的响应Content-Type设置为“application/octet-stream”时，可以不用download
当Content-Type设置为“text/html”时，若想下载如<a href="index.html" download>link</a>必须用download -
<iframe>内联框架元素，有以下常用属性
==> src 属性 iframe指向的路径
==> name 属性 与<a>标签配合使用，用于<a>标签的指向链接
==> frameborder 属性 iframe标签外边框，一般设置为0
3. 表单标签
注：表单元素若要正常提交至服务器，需有name属性
-
<form>在http中一般进行post请求
==> action 属性 用于制定表单提交的目标
==> method 属性 用于表示表单以何种方式发至目标
==> target 属性 同<a>标签的target -
<input type="submit">&&<input type="button">&&<button>
PS：一个表单中，必须得有提交按钮，否则表单数据无法提交
==> <input type="submit"> 提交按钮，输入完数据 <kbd>Enter</kbd> 即可上传表单数据
==> <button> 一个表单中若没有提交按钮，仅有button标签，该标签会自动升级为submit
==> <input type="button"> 这么写就仅仅是一个普通的按钮，即使表单没有提交按钮也不会自动升级 -
<input typt="checkbox>"&&<label>
==> <input type="checkbox"> 复选框
==> 达到点击文字就可以选中复选框时可以和<label>连用，如：
<input type="checkbox" id="btn"> <label for="btn">apple</label>
不过常用下面这种写法：
<label>apple<input type="checkbox"></label> -
<input type="radio">单选框，也可以同复选框一样与<label>标签连用
若达到几个单选框只能选择一个的效果，要设置一样的name属性 -
<select>下拉表单，常用的有name属性，multiple（可多选）属性 -
<option>下拉表单中的选项，有以下常用属性
==><optgroup>为多个option标签划分一个组，用label属性设置组名，如:
<optgroup label="x1">
<option value="1">10</option>
<option value="2">12</option>
</optgroup>
==> <option>标签的常用属性有value,设置选项上传至服务器的值
disabled 属性 设置选型不可选
selected属性 设置该选项默认选中
-
<textarea>多行文本域
==> 虽然该标签有cols属性和rows属性分别控制列数和行数，但都不是很准确，所以一般<texrtarea>标签的大小用css的height和width来控制
==> 在css中，还可以设置其resize=none;用来控制该多行文本域不可被用户拉动，防止影响网页布局
4. <table>表格元素
- <table>表格标签中只能有
<thead>、<tbody>、<tfoot>三种标签。 - 如果没有<thead>和<tfoot>标签，所有的内容默认添加在<tbody>标签中，如果没有<tbody>标签，浏览器会自动添加。
- 在设置了
<thead>、<tbody>、<tfoot>三种标签后，三种标签在代码中的顺序将不会影响网页渲染的效果，永远以<thead>、<tbody>、<tfoot>顺序进行展示。 -
<td>表示表的数据、<th>表示表头(默认样式包括加粗和居中)，<tr>表示每一行 - 所有的
<td>、<th>标签都要在<tr>标签里面 -
<colgroup>(有闭合标签)、<col>(空标签)
代码实例参上，以观标签效果
<table border=1>
<colgroup>
<col width=100> <!-- 控制第一列的宽度-->
<col width=100 bgcolor="blue"><!-- 控制第二列的宽度和背景颜色-->
<col width=100>
<col width=100>
</colgroup>
<thead>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tbody>
<tfoot>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
</tfoot>
</table>
- css中，设置标签的边框合并
table{
border-collapse:collapse;
}
5. 常用的内容分区语义化标签
-
<article>表示文档、页面、应用或网站中的独立结构 -
<aside>其通常表现为侧边栏或者嵌入内容 -
<footer>表示最近一个章节内容或者根节点元素的页脚 -
<header>表示一组引导性的帮助，可能包含标题元素 -
<nav>导航栏，描绘一个含有多个超链接的区域 -
<section>表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题 -
<dl>、<dt>、<dd>
==><dl>是一个包含术语定义以及描述的列表
==><dt>用于在一个定义列表中声明一个术语
==><dd>用来指明一个描述列表<dl>元素中一个术语的描述 -
<main>表示文档的主体内容，由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。 -
<address>可以让作者为它最近的<article>或者<body>]祖先元素提供联系信息。在后一种情况下，它应用于整个文档。
网友评论