HTML5发展过程

什么是XHTML

XHTML 是更严格更纯净的 HTML 代码。

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。
XHTML 是一个 W3C 标准。
HTML和 XHTML之间有什么区别?

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持
XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。
文档类型<!DOCTYPE>

用法：

<!DOCTYPE html>

作用：

<!DOCTYPE> 
声明位于文档中的最前面的位置，处于 <html> 标签之前。
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

W3C代码标准规范

网页的概念

由浏览器识别的用于显示信息的文件
信息包括：新闻、微博、购物、邮件等

网站的概念

由众多网页组成的一个群体
网页之间可以相互调用实现信息查看

构成元素

文本：用于描述信息的文字
图像：增强信息的生动性和直观性
动画：强烈视觉冲击效果
表格：布局的合理性
其他：视频、背景音乐等

网页的访问

访问网页的三个要素

网站的存储空间
服务器用于网页的存放
网站的域名
通过域名指向需要访问的网页
网页的访问地址
通过域名访问，通常打开的是默认页面
通过域名+网页名称进行访问

HTML作用

网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析，就可以显示给用户了。

1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3、平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4、通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

拓展资料 HTML是超文本标记语言，HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。即平常上网所看到的的网页。

主流网站：京东，淘宝，小米，华为，头条，等网站都是HTML代码编写出来的。

HTML骨架标签

日常生活的书信，身为干饭人得遵循到点干饭的精神！

同道：在HTML中也有属于自己的语言骨架格式：要遵循格式，要专业的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>我是网站标题</title>
    </head>
    <body>
        我是网站网站网站主体，干啥的想显示啥的都在这里了
    </body>
</html>

HTML骨架标签总结

标签名	定义	说明
	HTML标签	页面中最大的标签,我们成为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	让页面拥有一个属于自己的网页标题
	文档的主体	元素包含文档的所有内容,页面内容基本都是放到body里面的

大小写约定

HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：

<head>     
        <title>我的第一个页面</title>
</head>

不推荐：

<HEAD>     
        <TITLE>我的第一个页面</TITLE>
</HEAD>

HTML元素标签分类

标签：

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的、、都是HTML骨架结构标签。

分类：

<标签名> 
      内容 
</标签名>   
比如 
<body>  
      我是文字
</body>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。
和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
HTML标签关系

主要针对于双标签 的相互关系分为两种：请大家务必熟悉记住这种标签关系，因为后面我们标签嵌套特别多，很容易弄混他们的关系。
嵌套关系：

<head> <title> </title> </head>

并列关系

<head></head>
<body></body>

注意：

如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

字符集

<meta charset="UTF-8" />
字符集(Character set)是多个字符的集合。
计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字 GUO BIAO
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则基本包含全世界所有国家需要用到的字符
这句代码非常关键，是必须要写的代码，否则可能引起乱码的情况。

团队约定：

一般情况下统一使用 “UTF-8” 编码, 请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。

HTML标签的语义化

所谓标签语义化，就是指标签的含义。

根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。( 裸奔起来一样好看 ) 遵循的原则：先确定语义的HTML ，再选合适的CSS。 HTML网页中任何元素的实现都要依靠HTML标签。

HTML常用标签

HTML标签有很多，在我们学习的过程中，学习的是代码结构，如何去使用，认识标签和使用标签即可
注：HTML和CSS 是两种完全不同的语言，CSS在后续的课程中会学习到

内容标题标签 h1-h6 （熟记）

使网页更具有语义化，我们会经常在页面中添加标题标签
在HTML中提供了6个等级的标题标签
基本语法定义：作为标题使用并且依据重要性递减从大到小

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

总结：

标题的文字会变的加粗，字体大小也会一次变大和缩小一行只能放一个标题哦！

段落标签 p （熟记）

单词：Paragraph 缩写 p 段落标签（双标签）
定义：可以把HTML文档分割为若干个段落

<P>段落标签，独占一行</P>

总结：

在实际网页开发中是非常常见的，把文字有条理的显示出来，离不开段落标签，就如同我们平时写文章一样整个网页，也可以分为若干个段落，而段落标签就是P标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

换行标签 br (熟记)

单词：break 打断换行缩写为br（单标签）
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才会自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

我是换行标签<br>

P标签和br结合案例

<p>
    我是字母P,我是段落标签,我后面有跟班叫不然(br)换行<br>
</p>

水平线标签hr（熟悉和使用）

单词：horizontal 横线
缩写：hr
在页面中常常看到一些水平将段落与段落之间隔开，使得文档结构清晰，层次分明，可以通过插入图片实现，也可以通过简单的HR水平线标签来完成

<hr>

在网页中默认显示是水平线

粗体标签 Strong

定义：文本以粗体的方式显示

<strong>我是字体加粗</strong>

斜体标签 em

定义：文本以斜体方式显示

<em>我是斜体</em>

结合案例

<p><strong><em>字体斜体加粗</em></strong></p>

特殊符号（理解）

一些特殊的符号，在代码中很难实现或直接使用某符号，HTML提供了特殊符号，可以使用特殊符号替换代码

符号名称	表示方法
空格	& nbsp;
<	& lt；
>	& gt；
&	& amp;
©	& copy;

<p> Copy right &copy 2021 版权所有</p>

总结：

是以运算符&开头,以分号运算符;结尾。
他们不是标签，而是符号。
HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

约定推荐：

<a href="#">more &gt;&gt;</a>

不推荐：

<a href="#">more >> </a>

标签的属性

HTML（基础完结） - 图11
所谓属性就是特征，手机有颜色，尺寸。不管咋的都是手机

颜色紫色
尺寸 8寸
长度 200
宽度 300

在HTML中，如果想让标签添加更多信息，（例如大小，尺寸）可以在HTML标签的属性中加以设置

语法：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

图像标签img (重点)

单词：image 图像
若想在网页中显示图像就需要使用图像标签，（单身狗标签，单标签）

<img src="图像URL" />
如果图片位于当前页面的同一级目录，则图像地址就是图像的文件名
<img src="img/图像URL" />
如果图像是位于当前网页目录下img目录，则图像地址需要在文件名前面家上所在目录的名称
<img src="../img/图像URL" />
如果图像是位于当前网页的上一级目录，则图像地址需要在文件夹前面加上"../"用来表示上一级目录

语法中src 属性用于指定图像文件的路径和名称。（必备属性）

标签可以拥有多个属性，必须写在开始标签中，位置标签名后面
属性之间不分先后顺序，标签名，属性，属性与属性之前用空格隔开

采用键值对的格式 key = “value”的格式代码

      正常的<br />
  <img src="图片" width="300" height="300" /><br />
   带有边框的<br />
  <img src="图片" width="300" height="300" /><br />
  有提示文本的<br />
  <img src="图片" width="300" height="300" title="我这是一张图片" /><br />
  有替换文本的<br />
  <img src="图片" width="300" height="300" alt="照片丢了" />

链接标签(重点)

单词缩写：anchor 缩写：a
在HTML中创建超链接非常简单，只需要用标签把文字包裹起来就欧克了

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

注意：

外部链接需要添加http://
内部链接直接链接内部网页名称即可比如 < a href=”index.html”> 首页
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

第一种 网站地址
href="https://www.baidu.com/"
第二种 源码之间的跳转
href="new_file.html"
第三种 跳转到图片
href="img/4.png"

什么是列表？

表格是用来显示数据的，那么列表就是用来布局的，因为非常整齐和自由
概念：容器里面装载着结构，样式一致的文字或图表的一种形式，叫经列表
特点：列表最大的特点就是，整齐，整洁，有序

无序列表 ul （重点）

解析：例如下面新闻页面，是没有顺序的，不需要排队，先到先得，后发布就后显示出来

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。

有序列表 ol （了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义

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

所有特性基本与ul 一致。但是实际中比无序列表用的少很多。

自定义列表（理解）

<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

语法解释：
首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

<dl>
    <dt>欢迎来到divcss5</dt>
    <dd>这里有，html教程</dd>
    <dd>这里有，css模块</dd>
    <dd>这里有，css教程</dd>
</dl>

列表总结

标签名	定义	说明
	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	有序标签	里面只能包含li 有顺序，使用情况较少
	自定义列表	里面有2个兄弟， dt （标题）和 dd（内容）

下拉列表

标签名称	属性名称	说明
	name	下拉列表的名称
	size	显示个数
	value	当前选择的值
	selected	默认选中的状态

        <select name="province">
            <option value="北京市">北京市</option>
            <option value="上海市" selected="selected">上海市</option>
            <option value="河南省">河南省</option>
        </select>

表格 table （熟练使用）

表格作用：
存在即是合理的。表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。
因为它可以让数据显示的非常的规整，可读性非常好。
特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。

表格的基本结构
1.单元格：表格的最小单位，一个或多个单元格纵横排列组成了表格
2.行：一个或多个单元格横向堆叠形成了行
3.列：一个或多个单元格纵向划分形成了列

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

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

语法中包含基本的三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在标签中。
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。
总结：

表格的主要目的是用来显示特殊数据的
一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
中只能嵌套类的单元格
标签，他就像一个容器，可以容纳所有的元素
表格属性

表格有部分属性我们不常用，这里重点记住 cellspacing 、 cellpadding。

我们经常有个说法，是三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
   <tr>  <td>刘德华</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>张学友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>刘晓庆</td> <td>女</td> <td>63</td>  </tr>
</table>

合并单元格(难点)

合并单元格是我们比较常用的一个操作，但是不会合并的很复杂。

合并单元格2种方式

跨行合并：rowspan=”合并单元格的个数”
跨列合并：colspan=”合并单元格的个数”

合并单元格顺序

合并的顺序我们按照先上后下先左后右的顺序

跟我们以前学习汉字的书写顺序完全一致。

合并单元格三步曲

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格然后写上合并方式还有要合并的单元格数量比如：
删除多余的单元格单元格
总结表格

标签名

定义

说明

表格标签

就是一个四方的盒子

表格行标签

行标签要再table标签内部才有意义

单元格标签

单元格标签是个容器级元素，可以放任何东西

clospan 和 rowspan

合并属性

用来合并单元格的

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。
表格的学习要求：能手写表格结构，并且能简单合并单元格。
表单标签（掌握）

目标：

能写出最常用的注册类表单
能说出input表单常见属性

作用：

表单目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url访问地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(重点)

语法：

<input type="属性值" value="你好">

input 输入的意思
标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

常用属性：

type 属性

这个属性通过改变值，可以决定了你属于那种input表单。
比如 type = ‘text’ 就表示文本框可以做用户名，昵称等。
比如 type = ‘password’ 就是表示密码框用户输入的内容是不可见的。
```
用户名: <input type="text" /> 
密  码：<input type="password" />
```
value属性值

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

用户名:<input type="text"  name="username" value="请输入用户名">

name属性

用户名:<input type="text"  name=“username” />

name表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。

name属性后面的值，是我们自己定义的。
radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
```
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
```
checked属性

表示默认选中状态。较常见于单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

默认选中了男这个单选按钮

bgcolor 属性

bgcolor 属性规定规定表格的背景颜色。

<body bgcolor="value">

元素绑定标签

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

For属性值与input表单id所一一对应

input 属性小结

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了
bgcolor	背景颜色	bgcolor 属性规定规定表格的背景颜色。

Form表单域

收集的用户信息怎么传递给服务器？

通过form表单域

目的：

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
```
<form action="url地址" method="提交方式" name="表单名称">  各种表单控件</form>
```
| 属性 | 属性值 | 作用 | | —- | —- | —- | | action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 | | method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 | | name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |

注意:
每个表单都应该有自己表单域。

多行文本框

标签名称	属性名称	说明
</td> <td>name</td> <td>多行文本框的名称</td> </tr> <tr> <td></td> <td>rows</td> <td>多行文本框的宽度</td> </tr> <tr> <td></td> <td>cols</td> <td>多行文本框显示的行数</td> </tr> </tbody> </table> <pre><code class="lang-html"> <textarea rows="5" cols="45"> 请输入评论内容 </textarea> </code></pre>

HTML（基础完结）