HTML基础_lyc 文件解析-CSDN博客

本文链接：https://blog.csdn.net/qq_61748807/article/details/121070074

HTML

简介

HTML是用来描述网页的一种语言，它是一种超文本标记语言（Markup Language），不属于编程语言

发展史

超文本标记语言——在1993年6月互联网工程工作小组草案发布（并非标准）
HTML2.0——1995年11月作为RFC 1886发布，在RFC2854于2000年6月发布之后被宣布过时
HTML3.2——1996年1月14日，W3C推荐标准。
HTML4.0——1997年12月18日，W3C推荐标准
HTML4.01（微小改进）——1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法是国际化标准组织和国际电工委员会的标准
XHTML1.0——2000年1月26日发布，是W3C推荐标准，后来经过修订于2002年8月1日重新发布
XHTML1.1——2001年5月31日发布
XHTML2.0——W3C的工作草案，由于改动过大，学习这项新的技术成本过高而失败，现在最常用的还是XHTML1.0标准
HTML5——目前最新的版本，于2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，2008年1月22日公布HTML5第一份正式草案，2012年12月17日HTML5规范正式定稿，2013年5月6日，HTML5.1正式草案公布

优劣势

世界知名浏览器对HTML5的支持
- 微软：2010年3月16日，微软于拉斯维加斯举行了MIX10技术大会上宣布以推出Internet Exploror(IE)9浏览器开发预览版，此版本将更多的支持CSS3，SVG和HTML5等互联网浏览的通用标准
- Google：2010年2月19日，Google Gears项目经理伊安 · 费特通过博客宣布，谷歌将放弃对Greas浏览器插件项目的支持，重点开发HTML5项目
- 苹果：2010年6月7日，苹果在开发者大会的会后发布了Safari5.这款浏览器支持10个以上的HTML5的技术，包括全屏播放，HTML5的地理位置，HTML5的形式验证等
- Opera：2010年5月5日，Opera软件公司首席技术官Hakon Wium Lif先生在访华之际，接受了中国软件咨询网等少数几家媒体采访，他认为HTML5和CSS3将是全球互联网发展的未来趋势
- Mozilla：2010年7月，Mozilla基金发布了FireFox4浏览器的第一个测试版，从官方文档看，他对HTML5是完全级别的支持
市场需求

现在的市场已经迫不及待地要求有一个统一的互联网通用标准。HTML5之前的情况是，由于各浏览器之间的不统一，仅修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量时间，而HTML5的目标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频，音频，图像动画及同计算机的交互都被标准化
跨平台

HTML5可以做到跨平台开发，用户只用打开浏览器访问就可以，PC网站，各种移动设备，插件等核心代码就可以不需要重复编写，极大减少了开发人员的工作量

W3C标准

使用W3C标准的原因

因为在早期web开发语言标准并不统一，则需要一个组来指定和维护统一的国际化Web开发标准，确保多个浏览器都能兼容，HTML内容结构都是语义化的。在这样的背景下，万维网联盟（World Wide Web Consortium,W3C）诞生了，因此由W3C组织和维护的Web开发标准，也称为W3C标准。它是Web技术领域最据权威和具有影响力的国际中立性技术标准机构，为了能在不同的浏览器上看到同样的效果，就需要一个中间的开发者遵循一个统一的规范，标准经行网页开发，才能满足用户的需求
W3C标准介绍

W3C不是某一个标准，而是一系列的标准集合，一个网页一共由三个部分组成：结构（Structure），表现（Presentation），行为（Behavior）
- 在一个网页中同样可以分为很多部分，包括各级标题，正文，图片，列表等，这就是这个网页的结构。每个组成部分的字体，颜色，间距等属性构成了它的表现。用户通过单击让某个元素移动，消失等动画交互就称他为行为
- W3C的三个标准
  - 结构化标准语言（HTML，XML）
  - 表现标准语言（CSS）
  - 行为标准语言（DOM，ECMScript ）

HTML5文件的基本结构

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

<标记>内容</标记>

HTML5的基本结构分为两部分，整个HTML包括头部（head）和主体（body）两个部分，头部包括网页标签（title）等基本信息，主题包括网页内容信息，如图片，文字等

<html>
    <head>
        <titile>我的第一个网页</titile>	<!--网页标签-->
    </head>	<!--头部部分-->
    
    <body>
    我的第一个网页
    </body>	<!--主体部分-->
</html>	<!--HTML-->

网页的基本信息

DOCTYPE声明：为了约束HTML文档的结构，检验是否符合相关web的标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于文档的第一行
title标签：使用title标签描述的是网页的标题，类似一篇文章的标题
mate标签：使用该标签来描述网页摘要的重要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的详细描述等。mate标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，它采用"名称/值"的方法来描述重要信息

<mate charset = "UFT-8"/>

属性：charset表示字符集编码，常用的编码及有

gb2312：简体中文，一般用于包含中文和英文的页面
ISO-885901：纯英文，一般用于只包含英文的页面
big5：繁体，一般用于带有繁体字的页面
UFT-8：国际性通用的字符编码，同样适用于包含中文和英文的页面，和gb2312相比国际通用性更好

属性：中keywords表示搜索关键字，description表示网站具体内容的描述

网页的基本标签

标题标签：h1~h6;
段落标签：p
换行标签：br
水平线标签：hr
字体样式标签：粗体Strong或者b，斜体em或者i
注释：

特殊符号：

特殊符号	字符实体	示例
空格	&nbsp;	这里是&nbsp;中国
大于号(>)	&gt;	我今天&gt;8点中回家，就吃不到晚饭
小于号(<)	&lt;	我今天&lt;7点中回家，就能迟到晚饭
引号(")	&quot;	这里是：&quot;中国&quot;（W3C的规范中，属性值需要用引号括起来）
版权符号(©)	&copy;	&copy;中国腾讯 2008-2021

图像标签

常见的图像格式：

JPG格式
GIF格式
BMP格式
PNG格式

图像标签语法：

<img src = "图片地址" alt = "图像代替文字" title = "鼠标悬停提示文字" width = "图像宽度" height = "图像高度"/>

绝对路径：从别的服务器中使用绝对路径提取的图片

相对路径：电脑中自己的图片路径（提取相对链接时可以使用“../”回到上一级调取图片）

超链接标签

使用href属性跳转到属性指定地址

基本语法：

<a href = "链接地址" target = "目标窗口位置">链接文本或图像</a>

href：表示链接地址路径
target：指定连接在哪个窗口打开，常用的取值有_self(自身窗口)和_blank(新建窗口)

超链接既可以是文本超链接，也可是图像超链接

超链接的应用场合

页面间链接：A页到B页，最常用，用于网站导航
```
<a href = "www.baidu.com" title = "百度">百度</a>
```
锚链接：A页甲位置到A页乙位置或A页甲位置到B页乙位置

设置标记
```
<a name = "marker">目标位置乙</a>
```
跳转链接
```
<a href = "#marker">当前位置甲</a>
```

功能性链接：在页面中调用其他程序功能，如电子邮件，qq，MSN等

跳转到邮件

邮箱链接的用法为：mailto

<a href = "mailto:mail.qq.com">联系我们</a>

列表标签

列表它可以时信息结构化和条理化并以列表的样式显示出来

列表分为：无序列表，有序列表，定义列表

无序列表

ul作为列表的开始，li作为列表的内容
```
<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>
```
ul中只能嵌套li标签，li中能嵌套任意标签（W3C标准）

无序列表的特性
- 没有顺序，每个li标签中都要独占一行（块元素）
- 默认li标签项面前有个实心小圆点
- 一般用于无序类型的列表，如导航，侧边栏新闻，有规律的图文组合模块等

有序列表

ol作为列表的开始，li作为列表的内容
```
<ol>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>
```
和无序列表相同：ol中只能嵌套li标签，li中能嵌套任意标签（W3C标准）

有序列表的特性：
- 有顺序，并且每个li标签中都要独占一行（块元素）
- 默认li标签项面前有顺序标记
- 一般用于排序类型的列表，如试卷，问卷选项等

定义列表

定义列表的开始使用dl标签，dt作为列表的起始项，dd作为内容项
```
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
</dl>
```
- 没有顺序，每个dt标签，dd标签独占一行（块元素）
- 默认没有标记
- 一般用于（一个标题下有一个或多个列表项）*n情况

表格

为什么使用表格

简单通用：由于表格行列的简单结构，以及在生活中的广泛应用，因此对他的理解和编写都很方便
结构稳定：表格通常每行的列数一致，同行的单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐，这种严格的约束形成了一个不易变形的长方形盒子结构，堆叠排列起来结构很稳定

表格的基本结构

单元格：单元格时表格中最小的单位，一个或多个单元格纵横排列组成了表格
行：一个或多个单元格横向堆叠形成了行
列：由于表格单元格宽度必须一致，因此单元格纵向排列形成了列

表格的基本语法

<table> <!--表格开始-->
    <tr>    <!--行-->
        <th>第一行第一列单元格内容<th> <!--列-->
        <th>第一行第二列单元格内容<th>
    </tr>
    <tr>    <!--行-->
        <th>第二行第一列单元格内容<th> <!--列-->
        <th>第二行第二列单元格内容<th>
    </tr>
</table>

border是表格边框属性，表格边框属性写在变迁table中

表格的跨行与跨列

表格的跨列

跨列是指单元格的横向合并
```
<table>
    <tr>
        <td colspan = "所跨的列数">单元格内容</td>
    </tr>
</table>
```
col是column的缩写，span为跨度，所以colspan的意思为跨列

表格的跨行

跨列是指单元格在垂直方向上的合并

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

row是行的意思，rowspan为跨行

媒体元素

HTML5支持网页播放音频视频元素

视频元素

视频英译video，而在HTML中的video元素是用来播放视频的，支持Ogg，MPEG4，WebM等视频格式，其用法如下

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

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

如果浏览器不支持video元素，可以在video元素中的插入一段文字用于提示，这样旧的浏览器就可以显示这段文字给用户

video元素的应用

<video controls>
    <source src="video/video.wemb"/>
    <source sre="video/video.mp4">
    你的浏览器不支持video标签
</video>

使用了source元素来链接到不同的视频文件，浏览器会自动选第一个可以识别的格式
autoplay属性可以使视屏文件自动播放

音频元素

音频元素在HTML5问世之后，终于可以使音频播放领域实现统一的标准，让用户告别插件的繁琐

audio元素的基本语法

HTML5中的audio元素使用来播放音频文件的，支持Ogg，Mp3，WVM等音频格式

<audio src="音频路径"controls="controls"></audio>

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

如果浏览器不支持audio元素，可以在audio元素中的插入一段文字用于提示，这样旧的浏览器就可以显示这段文字给用户

audio元素的应用

<audio controls>
    <source src="music/music.mp3"/>
    <source src="music/music.ogg"/>
</audio>

使用了source元素来链接到不同的视频文件，浏览器会自动选第一个可以识别的格式

autoplay属性可以使视屏文件自动播放