W94941
W94941

HTML5文件基本结构

​ HTML是一种超文本标记语言，如网页中的一个标题、一个段落、一张图片等都是利用一个个HTML标记完成的。HTML基本语法为：

<html>
<heabd>head>
<body>body>
html>

网页基本标签

标题标签

标题标签表示一段文字的标题或主题，并且支持多层次的内容结构。HTML共提供了六级标题

~

并赋予了标题一定的外观，所有标题字体加粗，字体最大的为

最小为

。

段落标签和换行标签

​ 段落标签：

……

表示一段文字等内容。一个段落可以包含多行文字，文字内容可以将随游览器窗口的大小自动切换。

​ 换行标签：
表示强制换行显示，该标签比较特殊，没有结束标签，直接使用表示换标签的开始和结束这种标签叫单标签。

水平线标签

水平线标签

表示一条水平线，该标签与换行标签一样，比较特殊没有结束标签，都是单标签，它主要用于让版面更加清晰直观，可以加在歌名或歌词之间。

字体样式标签

当我们网页中需要字体加粗或倾斜时，我们就要用到(加粗)和样式标签。标签不但能让字体加粗，它还有一个重要的“身份”，是一个带有语义的标签，它有强调、加强语气的作用。

注释和特殊符号

当页面的HTML结构复杂或内容较多时，需要添加必要的注释方便代码阅读和维护，同时为了强调，需要注释掉的一些不必要的代码，当游览器遇到注释时会自动忽略注释内容。

注释语法：

特殊符号：由于有一些符号已成为HTML的语法符号，如大于号（>）、小于号(<)……因此，这些特殊符号要在页面中显示必须要使用相应的HTML代码表示，而这些特殊符号在html对应的代码中被称为字符实体。这些实体符号都以“&”开头，以“;”结束。如表所示：

特殊符号 实体符号
空格  ；
大于号（>） >；
小于符号(<) <
引号（’’） "
权版符号 ©；
图像标签

图像标签语法如下：

图像的代替文字

注意：其中src属性表示图片路径，alt属性指定的代替文本，表示图片无法显示时替代显示的文本，这样就不用担心网页丢失的内容用户看不见。所以alt属性在制作网页时和src属性配合使用。

title属性可以提供额外的提示或帮助信息，当鼠标移至到图片上时显示提示信息。

width和heigth两个属性分别表示图片的宽度和高度，如果不设置那么图片默认显示原始大小。

超链接标签

超链接包含两部分，一是链接地址，即链接目标，可以是某个网址或文件的路径，对应的标签的href属性；用于建立页面间的导航链接，链接可分为页面间链接、锚链接、功能性链接，在此不做解释。

列表

简单来说列表就是信息资源的一种展示形式。在html5中的列表可以分为三种类型：无序列表、有序列表、定义列表。他们的不同之处如下：

无序列表

无序列表由

    和
  • 标签组成，使用
      作为无序列表的声明，使用
    • 标签作为每个列表的起始，结构语法如下：

      <ul>
	<li>第1项li>
	<li>第二项li>
	<li>第三项li>
ul>

      无序列表没有顺序，每一个

    • 标签独占一行，属于块元素。

      默认

    • 标签项前面有一个实心小圆点。

      一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文和模块等。

      ☆尊循W3C标准，

        标签里面必须只能嵌套
      • 标签，不能嵌套其他标签。
      • 标签可以嵌套任意标签。

        有序列表

        有序列表由

          标签和
        1. 标签组成，使用
            标签作为有序列表的声明，使用
          1. 标签作为使用
          2. 标签作为每个列表的起始，有序列表嵌套和无序列表一样，只能
              标签里面嵌套
            1. ,语法如下：

              <ol>
	<li>第1项li>
	<li>第二项li>
	<li>第三项li>
ol>

              ☆有序列表是有顺序的，跟无序列表相同的是，

            2. 标签也是独占一行。

              默认

            3. 标签项前面有顺序标记。

              一般用于排序类型的列表，如试卷、问卷选项等。

              定义列表

              ​ 定义列表是一种特殊的列表形式，它是标题及列表项的结合。定义列表的语法相对于无序列表和有序列表不太一样，它使用

              标签作为列表的开始，使用
              标签作为每个列表项的起始，定义列表则使用 
              <dl>
	<dt>标题1dt>
	<dd>第一项dd>
	<dd>第二项dd>
	<dt>标题2dt>
	<dd>第一项dd>
	<dd>第二项dd>
dl>

              ☆定义列表没有顺序，每个

              、
              标签独占一行。

              默认没有标记。

              一般用于一个标题下有一个标题或多个选项*n的情况下。

              表格

              表格基本语法如下：

              <table>
	<tr>
		<th>第一个单元格内容th>
		<th>第二个单元格内容th>
		……
	tr>
	<tr>
		<td>第一个单元格内容td>
		<td>第二个单元格内容td>
		……
	tr>
	table>

              表格是由指定数目的行和列组成的，创建表格一般分为四步。

              一、创建表格标签

              …
              。

              二、在表格标签

              里创建行标签，可以多行。

              三、在第一行标签

              里创建单元格标签里创建单元格标签
              用于1创建表格标题。

              四、在行标签

              ，可以有多个单元格。

              表格的跨列与跨行

              当在现实中需要复杂的表格的时，我们就要把多个单元格合并为一个单元格，也就是要用到表格的跨列与跨行。

              表格的跨列

              跨列是指单元格的横向合并，语法如下：

              <table>
	<tr>
		<td colspan="所跨的列数">单元格内容td>
	tr>
table>

              ☆col为column列的缩写，span为跨度，所以colspan的意思为跨列。

              表格的跨行

              ​ 跨行是指单元格在垂直方向上合并，语法如下：

              <table>
	<tr>
		<td rowspan="所跨行数">单元格内容td>
	tr>
table>

              ☆row为行的意思，rowspan即跨行。

              注意：一般而言，在需合并的第一个单元格，设置跨列或跨行的属性。跨行和跨列以后，并不改变表格的特点，同行的总宽度一致，因此，表格中单元格的宽度或高度互相影响，结构相对稳定，但缺点在于不能灵活进行布局控制。

              媒体元素

              视频元素

              ​ html5中的video元素是现在播放视频的一种标准方法，支持Ogg（Ogg Vorbis的缩写）、MPEG4、WebM等视频格式，语法如下：

              <video src="视频路径">controls="controls">video>

              ​ src属性用于指定要播放的视频文件的路径，controls属性用于提供播放，暂停和音量空件，此外，还可以使用width和heigth设置视频的宽度和高度。

              如果在游览器中不支持video元素，可以在video元素中间加1一段提示语。

              注意：在video中虽然可以使用src属性链接视频路径，可是只能链接一种格式的视频，这时候就可以使用source元素来解决问题，source元素嵌套在video里面，并且可以出现多次，每个suorce元素对应一种格式视频。

              音频元素

              html5中audio元素是用来播放音频文件的，支持Ogg、MP3、WAV等音频格式，语法如下：

              在audio中的src、controls、width和heigth和在视频元素的用途一样。

              注意：如果需要循环播放可使用loop属性。

              iframe框架

              ifame>
              iframe属性的使用

              <；iframe>；内联框架的常用属性包括name、width、heigth。name属性可以和锚链接结合起来实现页面间的互相跳转。

              表单

              表单就是一个将用户信息组织起来的容器。

              表单内容

              创建表单后，就可以在表单中放置控件以接收用户的输入，这些控件通常放在< form>标签对之间，也可以在表单之外用来创建用户界面。在网上冲浪时，经常会见到一些常用的表单控件。

              表单标签及表单属性

              不同的表单控件有不同的用途，如

              标签用来表单创建，该标签用于网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，便是其中的一个，用以设定各种输入资料的方法。标签有两个常用的属性，分别是：action、method。action语法为：action=“URL”,如果action属性的值为空，则默认表单提交到本页。method语法为：method=(get |past)。

              注意：post方法提交方式不会改变地址栏状态，表单数据不会被显示。get方法提交正好相反，表单数据会在URL信息中显示。区别就是post提交的数据安全性高于get提交方式的数据。

              表单元素及其格式

              在标签中有很多属性，下面是一些比较常用的属性

              属性 说明
              type 此属性指定表单元素的类型。可用类型有text、password、checkbox、radio、subnit、reset、file、email、number、url、hidden、image和button。默认为text
              name 此属性指定表单元素的名称有 usename、phone等
              value 此属性是可选属性，它定义表单元素的初始值。如果type为radio类型。则必须指定一个值
              size 指定表单元素的初始值宽度，如果type为text或password类型，则表单元素的大小字符为单位。
              maxlength 指定输入的长度
              checked 指定按钮是否被选中
              1文本框

              在表单中最常用、最常见的表单输入元素就是文本框（text），它用于输入单行文本框信息，如用户名输入文本框。在文本框输入数据时还可以使用maxlength属性指定输入的数据长度。

              2密码框

              在一些特殊情况下，用户希望输入的数据被处理，以免被他人得到，比如密码。这时候使用文本框无法满足要求，就需要使用密码框来完成。密码框与文本框类似，区别在于需要设置文本框控件的type属性为password，设置了type属性后，在密码框输入的字符全部都是以黑色实心的圆点来显示，从而实现了对数据的处理。

              3单选按钮框

              单选（radio）按钮控件用干一组相互排斥的值，组中的每一个单选按钮控件应具有相同的名称，用户一次只能选中一个单选按钮。只有从组中选中的单选按钮才会在提交的数据中提交应对的数值，在使用单选按钮，需要一个显式的value属性。

              4复选框

              复选框与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框。复选框的命名与单选按钮有些区别，它可以有相同的名称，也可以不同。一旦用户选中某个复选框，在表单中提交时，会将该复选框的name值和对应的value一起提交。

              ☆与单选按钮相同的是，他们都可以设置默认选项，同样使用checked属性进行设置。

              5列表框

              列表框的目的主要使用用户快速、方便、正确地选择一些选项，并且节省页面空间。它是通过标签用于显示可提供用户选择的列表框，每个选项由一个标签表示，