HTML 定义和基本结构

定义

定义：HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

HTML 的基本结构如下

<!-- 第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。 -->
<!DOCTYPE html>   

<!-- <html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到<html>结束,也就是html文档的开始和结束标签。 -->
<html lang="en">   
    <!-- <head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。 -->
    <head>           
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <!-- <body>...</body>标签是编写网页上显示的内容。 -->
    <body>
          网页显示内容
    </body>
</html>

HTML 编写规范

1、标签小写
2、属性用双引号括起来
3、所有的标签闭合
   <div></div>  <br />
4、图片加alt属性；alt=“”加上属性，可以读图片信息
 

用 HTML 标签

双标签（闭合标签）

定义： 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
 

单标签 （空标签）

定义： 单标签是一个标签组成，没有标签内容， 比如: img标签

常用标签列举：

<!-- html标题 -->
<h1></h1>、<h2></h2>、<h3></h3>、
<h4></h4>、<h5></h5>、<h6></h6>

<!-- 标签定义一个文本段落 -->
<p></p>
 

<!-- 换行 -->
<br/>
 

<!-- 标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。 -->
<img src="images/pic.jpg" alt="产品图片" />
 

<!-- 字体标签 -->
<font></font>
 

 <!-- 粗体bold -->
<strong></strong>or<b></b>

 <!-- 斜体italic -->
<i></i>

 <!-- 下划线 -->
<u></u>

 <!-- 文字当中划线表示删除 -->
<del></del>

 <!-- 文字下划线表示插入 -->
<ins></ins>

<!-- 下标 -->
<sub></sub>
 

 <!-- 上标 -->
<sup></sup>

 <!-- 缩进表示引用 -->
<blockquote></blockquote>

<!-- 保留空格和换行 -->
<pre></pre>
 

 <!-- 表示计算机代码，等宽字体 -->
<code></code>

<!-- 设置字体大小、颜色等 -->
<font></font>
 

 <!-- 标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。 -->
<!-- 页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面 不会滚动。 -->
<a href="">：
注：
./：当前路径
../：上一级路径

 <!-- 定义一个有编号的内容列表 -->
<!-- ol标签定义有序列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li></li>
</ol>

 <!-- 定义一个无编号的内容列表 -->
<!-- ul标签定义无序列表 -->
<ul>
     <!-- li标签定义列表项目 -->
    <li></li>
</ul>

<!-- 定义列表通常用于术语的定义 -->
<!-- <dl>标签表示列表的整体 -->
<dl>
    <!-- <dt>标签定义术语的题目 -->
    <dt></dt>

    <!-- <dd>标签是术语的解释 -->
    <dd></dd>
    <dd></dd>
</dl>
 

<!-- 创建包含另外一个html文件的内联框架（即行内框架）-->
<!-- src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条 -->
<!-- a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中 -->
<iframe></iframe>
 

<!-- 声明一个表格 -->
<table></table>
对应的属性值：
   1、border： 定义表格的边框
   2、cellpadding： 定义单元格内内容与边框的距离
   3、cellspacing： 定义单元格与单元格之间的距离
   4、align： 设置单元格中内容的水平对齐方式,设置值有：left | center | right
   5、valign： 设置单元格中内容的垂直对齐方式 top | middle | bottom
   6、colspan： 设置单元格水平合并
   7、rowspan： 设置单元格垂直合并

<!-- 定义表格中的一行 -->
<tr></tr>

<!-- 定义一行中的一个单元格，td代表普通单元格，th表示表头单元格 -->
<th></th> 
<td></td>
 

HTML 存在的语义化的标签

定义

定义：语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

div 标签 块元素，表示一块内容，没有具体的语义

<div></div>

em 标签 行内元素，表示语气中的强调词

<em></em>

i 标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇

<i></i>

b 标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名

<b></b>

strong 标签 行内元素，表示非常重要的内容

<strong></strong>

常用的占位符

显示“空格”

&nbsp

显示“小于号”

&lt

显示“大于号”

&gt

显示“&符号”

&amp

显示“双引号”

&quot

显示“版权”

&copy

显示“注册商标”

&reg：注册商标

显示“乘号”

&times：乘号

显示“除号”

&divide：除号

常用表单

定义一个表单区域。

<!--   action属性定义表单数据提交的地址 -->
<!-- method属性定义提交的方式 -->
<from action="" method="">

</from>

定义表单控件的文字标注

<label></label>

input类型为text：定义了一个单行文本输入框

<input type = "text"/>

input类型为password：定义了一个密码输入框

<input type = "password"/>

input类型为radio：定义了单选框

<input type = "radio" />

input类型为checkbox：定义了单选框

<input type = "checkbox" />

textarea：定义多行文本输入

<input type = "textarea" />

select：定义下拉列表选择

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

input类型为submit：定义提交按钮

<input type = "submit" />

input类型为reset：定义重置按钮

<input type = "reset" />

HTML5 新结构标签（扩展）

HTML5 新增的主要语义化标签如下

HTML5 新增表单控件：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

HTML5 音频和视频

音频：audio 标签

格式：ogg、wav、mp3
对应属性：
  1、autoplay  如果出现该属性，则音频在就绪后马上播放。
  2、controls  如果出现该属性，则向用户显示控件，比如播放按钮。
  3、loop  如果出现该属性，则每当音频结束时重新开始播放。
  4、preload    如果出现该属性，则音频在页面加载时进行加载，并预备播放。
                如果使用 "autoplay"，则忽略该属性。
  5、muted  规定视频输出应该被静音。

案例：

 <!-- https://www.w3school.com.cn/tiy/t.asp?f=html5_audio_autoplay -->
 <audio  autoplay = "autoplay" controls = "controls">
    <!-- <source src="source/audio.mp3" type="audio/mpeg"> -->
    <source src="source/audio02.ogg" type="audio/ogg">
    您的浏览器不支持 audio 标签。
 </audio>

视频：video 标签

    格式：ogg、mp4、webM
    对应属性：
        1、width  设置视频播放器的宽度。
        2、height   设置视频播放器的高度。
        3、poster   规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
    可选第三方播放器：
    1、cyberplayer
    2、tencentPlayer
    3、youkuplayer

案例：

<!-- https://www.w3school.com.cn/tags/att_video_controls.asp -->
<video controls="controls" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  您的浏览器不支持 video 标签。
</video>