HTML 是用来描述网页的一种语言,通过添加各种标签,达到在浏览器中展示期望的效果。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

浏览器不会显示 HTML 标签(HTML tag),而是使用标签来解释页面的内容:

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <p></p>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

⭐越多代表我觉得此标签越重要

标题标签 ⭐⭐⭐

HTML提供了6个等级的标题(head),即:h1、h2、h3、h4、h5和h6,h1是最高级的标题。其基本语法是:<hn> 标题信息 </hn>

注意:h1因为重要,尽量少用,一般都是给logo用,或者页面中最重要标题信息,其他5个级别标题在一个页面中都可以出现多次,h1只能出现一次。

段落标签 ⭐⭐⭐

在网页中要想把文字内容有条理地显示,离不开段落标签(paragraph),它是网页中文章内容的基本组成部分。其基本语法是:<p> 文本内容 </p>

注意:段落标签是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签 ⭐⭐

在网页中经常看到一些水平线将段落与段落间隔开,层次分明。这些水平线可以通过插入图片来实现,也可以简单地通过<hr/> 标签(horizontal)来完成。其基本语法是:<hr />是单标签

换行标签 ⭐⭐⭐

在HTML中,一个段落的文字会从左往右按顺序排列,直到浏览器窗口的右端,然后会自动换行,如果希望某段文字强制进行换行,就需要使用换行标签(break)。其基本语法是:<br />

注意:除了少数应用(比如诗歌的分行),应该尽量避免使用这个标签,因为它并没有特别的语义含义,而且分行的视觉效果完全可以通过p标签、列表标签和CSS命令达到。

div span标签 ⭐⭐⭐⭐

div 和 span是没有语义的,是现在网页布局用到的最主要的2个盒子,比如css+div的结合就可以基本上满足页面布局需要。其基本语法是:

<div> 这是头部 </div>     <span> 今日行情 </span>

文本格式化标签 ⭐⭐

在网页中,有时要为某些文字设置加粗、加斜或加下划线的效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。其基本语法是:

注意:b i s u 只有使用,没有强调的意思,strong em del ins的语义更强烈。

图像标签img ⭐⭐⭐⭐

要想在网页中显示图像就需要使用图像标签,下图详细介绍了图像标签<img /> 以及与其相关的一些属性。其基本语法是:

  1. 基本图像插入方式:
    <img src="wo.jpg"/>
  2. 带有alt的图像插入方式:
    <img src="wo.jpg" alt="这是我吴彦祖的照片"/>
  3. 带有title的图像插入方式:
    <img src="wo.jpg" title="吴彦祖"/>
  4. 带有宽度的图像插入方式:
    <img src="wo.jpg" title="吴彦祖" width="300" />
  5. 带有边框的图像插入方式:
    <img src="wo.jpg" title="吴彦祖" width="300" border="10" />

链接标签 ⭐⭐⭐⭐

在HTML中创建超链接比较简单,只需用链接标签(anchor)环绕需要被链接的对象即可。其基本语法是:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href:Hypertext Reference的缩写,意思是超文本引用,用于指定链接目标的url地址。

target:用于指定链接页面的打开方式,其取值有self(新链接页面覆盖原页面,为默认值)、blank(在新窗口打开)、_parent(载入父级窗口,与iframe结合用得到)、_top(载入顶级窗口,与iframe结合用得到),注意:

  1. 外部链接:需要添加 http://www.baidu.com
  2. 内部链接:直接链接内部页面名称即可,如首页;还有可以通过创建锚点链接,能够快速定位到内部页面的目标内容:①.使用链接文本 ②.使用相应的id名标注跳转到目标的位置
  3. 如果没有确定的链接目标时,通常将href属性定义为”#”(即href=”#”),表示该链接暂时为一个空链接。
  4. 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
  5. 当然也可以利用base标签来设置整体链接的打开状态,如网易这样设置让页面所有链接按新窗口打开:

特殊字符标签 ⭐

无序列表ul ⭐⭐⭐⭐

无序列表(unordered list)的各个列表项之间没有顺序级别之分,是并列的。其基本语法是:

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>

注意:

  • <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签内输入其他标签或者文字的做法是不被允许的。
  • <li></li>之间相当于一个容器,可以容纳所有元素。
  • 无序列表会自带样式属性,但还是让css来做!

有序列表ol ⭐⭐

有序列表(ordered list)即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义。其基本语法是:

<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>

所有特性基本和ul一致,且自带顺序。

定义列表 ⭐

定义列表(definition list)常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法是:

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
......
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
......
</dl>

表格table ⭐⭐

表格还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。其基本语法是:

<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>

上面的语法中包含三对HTML标签,分别为<table></table><tr></tr><td></td>,他们是创建表格的基本标签,缺一不可,下面对他们进行具体解释:

  • table用于定义一个表格。
  • tr用于定义表格中的一行,必须嵌套在table标签中,且只能嵌套<td></td>,在table中包含几对tr,就有几行表格。
  • td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对<tr></tr>中包含几对<td></td>,就表示该行中有多少”列”(或多少个单元格),但表格只有行tr和单元格td,行里面装单元格,没有列的概念;<td></td>标签像一个容器,可以容纳所有的元素。

表单标签 ⭐⭐

表单的目的是为了收集用户信息,在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息:一个表单中通常还需要包含一些说明性的文字,作用是提示用户进行填写和操作。

表单域:相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过它定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

input控件 ⭐⭐⭐⭐

<input />标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。其常见属性如下所示:

text语法:

<tr>
<td>所在地区</td>
<td><input type="text" value="北京" /></td> //value为默认值
</tr>

password语法:

<tr>
<td>密码</td>
<td><input type="password" value="123456" /></td>
</tr>

radio单选按钮语法:

<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" />
<input type="radio" name="sex" />
人妖<input type="radio" name="sex" />
</td>
</tr>

label标签 ⭐⭐

label标签为input元素定义标注,其中for属性规定了label与哪个表单元素绑定。其基本语法是:

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

点击Male会直接跳到右边的文本框内,label通过for和id建立联系快速找到。当然也可以简化成这种形式:

<label><input type="radio" name="sex" value="male">Male</label>

textarea文件域 ⭐⭐

text 文本框只能写一行文本,如果需要输入大量的信息,就需要用到textarea标签,可以轻松地创建多行文本输入框。其基本语法是:

<textarea cols="每行的字符数" rows="显示的行数">
文本内容
</textarea>

但是textarea的宽和高通常是通过css来控制的,cols和rows几乎不用。

下拉菜单 ⭐⭐

使用select标签定义下拉菜单的基本语法如下:

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

注意:

  • <select></select>中至少应包含一对<option></option>
  • 在option中定义selected=”selected”时,当前项即为默认选中项。

表单域 ⭐⭐

在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。其基本语法是:

<form action="url地址" method="提交方式" name="表单名称">    
各种表单控件
</form>

常见属性:

  • Action:在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接受并处理表单数据的服务器程序的url地址。
  • method:用于设置表单数据的提交方式,其取值为get或post。
  • name:用于指定表单的名称,以区分同一个页面中的多个表单。
    注意:每个表单都应该有自己的表单域。

HTML5常用新标签 ⭐⭐⭐

  • header:定义文档的页眉
  • nav:定义导航链接的部分
  • footer:定义文档或节的页脚
  • article:标签规定独立的自包含内容
  • section:定义文档中的节(section、区段)
  • aside:定义其所处内容之外的内容(侧边)
  • datalist:标签定义选项列表,与input元素配合使用
  • fieldset:可将表单内的相关元素分组,打包,与legend搭配使用

HTML5新增的input type属性

多媒体标签

  • embed:标签定义嵌入的内容
  • audio:播放音频
  • video:播放视频

多媒体embed ⭐⭐

embed可以用来插入各种多媒体(较大的),格式可以是Wav、AIFF、AU、MP3等。其中url为音频或视频文件的路径,可以是相对路径或绝对路径。其基本语法是:

<embed src='http://player.youku.com/player.php/sid/XMzk4MDUzNTA1Mg==/v.swf' allowFullScreen='true' 
quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='applicati
on/x-shockwave-flash'></embed>

多媒体audio ⭐⭐

HTML5通过<audio>标签来解决音频播放的问题。其基本语法是:

<audio src="./music/See You Again.mp3"></audio> //通过src指定音频文件路径即可

并且可以通过添加属性来更友好控制音频的播放,如:

  • autoplay 自动播放
  • controls 是否显示默认播放组件
  • loop 循环播放 ,loop=2就是循环2次 ,loop或者loop=“-1”无限循环

多媒体video ⭐⭐

同音频播放一样,<video>(通常插入较小的视频)使用也相当简单。其基本语法是:

<video src="./video/movie.mp4" controls="controls"></video> //通过src指定视频文件路径

同样,通过附加属性可以更友好的控制视频的播放:

  • autoplay 自动播放
  • controls 是否显示默认播放组件
  • loop 循环播放
  • width 设置播放窗口的宽度
  • height 设置播放窗口的高度


HTML  

HTML 标签

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!