HTML了解常用的标签,就可以写出大部分HTML页面,即使需要用到使用量较少的标签也可以Google或者MDN搜索。接下来介绍一下HTML常用的标签有哪些:
div
div标签用于组合其他HTML元素,本身无实在意义。常用于页面的布局,比如一个展开式的广告页面框架大致,如下:
<body>
<div id="wrap-container">
<div id="collapsed-container"></div>
<div id="expanded-container"></div>
</div>
</body>
h1~h6
标题(Heading)元素呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低。
p
表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。<p>是块级元素
span
<span> 元素是短语内容的通用行内容器,并没有任何特殊语义。<span>与<div>元素很相似,但<span>元素是行内元素。
strong
Strong 元素 (strong)表示文本十分重要,一般用粗体显示。
em
着重元素 (<em>) 标记出需要用户着重阅读的内容, <em> 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。通常的,该元素会被浏览器展示为斜体文本。
ul ol li
ol 元素 表示多个有序列表项,通常渲染为有带编号的列表; ul 元素 ( 或 HTML 无序列表元素 ) 代表多项的无序列表,即无数值排序项的集合,且它们在列表中的顺序是没有意义的;举例如下:
<ul class="nav-tools-list">
<li>
<div>
<img src="shoppingtools-icon-1.png" alt="">
<span>Build & Price</span>
</div>
</li>
</ul>
dl dt dd
dl是一个包含术语定义以及描述的列表;dt 元素用于在一个定义列表中声明一个术语,通常在该元素后面会跟着 dd 元素。使用方法与ol类似。
form表单相关
HTML <form> 元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。
重点介绍两个属性:
1.action:一个处理这个form信息的程序所在的URL。
2.method:浏览器使用HTTP 方式来提交 form. 可能的值有:get,post。
form表单中的button的用法
1.当在form表单中使用默认的button样式,即<button>按钮</button>
,按钮具有提交表单的作用。
2.当使用input的type属性时,若<input type="submit">
点击后也会提交表单,但<input type="button">
点击后并不会提交表单。
form表单中有多个标签联用,重点介绍下面几个:
input
<input> 元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。<input>的工作方式因其types类型属性的值而有很大差异:如
-checkbox: 复选框。
-button:无缺省行为按钮。
-submit:用于提交表单的按钮。
-text:单行字段;换行会将自动从输入的值中移除。
label
它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性。
label属性for:可标记的 form相关元素的ID,在同一文档中作为label元素。 第一个这样的元素在文档中有一个ID匹配属性值,作为这个label元素的labeled control。
一个简单的form表单的举例如下:
<!-- 一个简单的表单,发送 POST 请求 -->
<form action="" method="post">
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>
table表格相关
table常用的子元素有三个:
在每一个子元素中,也有三个常用的标签:
1.<tr> :table row 表格的一行
2.<td> table data 表格单元
3.<th> table head 表格头部
举例如下:
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
</table>
img
HTML Image 元素( <img> )代表文档中的一个图像。src属性:图像的 URL,这个属性对 <img> 元素来说是必需的。
a
<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
常用的属性:
1.download:此属性指示浏览器下载URL而不是导航到它,因此将提示用户将其保存为本地文件。
2.href:包含超链接指向的URL或URL片段。当href指向伪协议(假连接)时:有以下四种用法
<a href="#">点我没用啊</a> <!--点了就自动回到页面顶部:-->
<a href="javascript:">点我没用啊</a> <!--点了没反应,就左下角出个javascript:-->
<a href="javascript: alert(你错了哟);">点我没用啊</a> <!--点了弹出个1的提示-->
<a href="">点我没用啊</a> <!--点了后刷新当前页面-->
ifame
该元素表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中。name属性:嵌入的浏览上下文(框架)的名称。该名称可以用作
<a>
标签,<form>
标签的target
属性值。
参考资料:MDN