HTML常用标签总结

2018-06-24 01:45:58来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

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

什么是HTML

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

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

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

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

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

W3schoolhttp://www.w3school.com.cn/h.asp

1,基础标签

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

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

<html>   定义 HTML 文档。

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

<meta> 定义关于 HTML 文档的元信息。

<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标签在实际应用中用的是相当多的

<link> 定义文档与外部资源的关系。

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> 定义文档中的节。

 

<Iframe>   定义文档的内联框架。

 

<style> 定义文档的样式信息。

<script> 定义文档中的脚本信息

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

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

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

<footer> 定义 section 或 page 的页脚

<section> 定义 section。

<article> 定义文章。

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

 

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

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

<!--[if lte IE 8]>

<script src="libs/html5shiv/html5shiv.js"></script>

<![endif]-->

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

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML&amp;CSS——网站注册页面

下一篇:CSS边框外的小三角形+阴影效果的实现。