H5的标签

h5基本骨架

一个简单的H5代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个H5页面</title>
</head>
<body>
    Welcome to my first h5 page
</body>
</html>

<!DOCTYPE html>：文档类型声明，是为了避免不同厂商的浏览器的怪异模式
<html>：最外层的标签，代表这一段是个html文档，必选
<head>：定义文档头，定义文档属性、信息，信息一般不给用户看
- <title>：定义标题，用于SEO搜索引擎优化
- <meta>：定义文档的属性、关键词等，也可以定义编码格式，一般是utf-8
<body>：主体，存放文本、表格、图像、超链接等等，信息一般可以给用户看

标题

标题标签支持从<h1>到<h6>共6级标题

位置是在<body>里面

使用align属性可以调整标题标签位置，但不推荐使用，因为样式应该使用css

<body>
    <h1 align="center">一级标题</h1>
    <h2 align="right">二级标题</h2>
    <h3 align="left">三级标题</h3>
</body>

快速生成标题：h$*6

段落、换行、水平线

<p>：代表一个段落
<br>：代表同一个段落内的换行符
<hr>：代表一个水平线

<body>
    <p>段落1</p>
    <hr>
    <p>段落2第一行<br>段落2第二行</p>
</body>

<hr>标签支持的四种属性包括：color、width、size、align调整颜色、宽度、高度、位置

图片

<img>标签用于存放图片

<body>
    <img src="girl.webp" alt="美女图片">
</body>

图片标签的属性比较重要：

src：设置图片的路径、名称
alt：图片无法加载时显示的名字
width、height：图片的宽度和高度（px）
title：鼠标悬停时显示的图片信息

src路径

<img>标签的src属性支持三种路径：

绝对路径：包括网络路径和本地文件系统路径，本地文件系统路径要用file:开头
相对路径：html语言中支持java、linux里面的那些写法，例如./、../

<body>
    <img src="resource/girl.webp" alt="美女图片">
    <img src="file:///C:/Users/24607/Desktop/front/resource/girl.webp" alt="美女图片">
</body>

超链接

<a>用于超链接，href属性代表跳转目标

<body>
    <a href="https://www.baidu.com">百度</a>
</body>

超链接默认样式是未点击的蓝色字符下划线，访问过的紫色字符下划线，点击时的红色字符下划线，使用css可以对其进行修改

支持使用子标签的形式让将超链接修改为其他内容，例如图片：

<body>
    <a href="https://www.baidu.com">百度
        <img src="./resource/girl.webp" alt="美女图片">
    </a>
</body>

文本

文本标签有多个，定义不同的文本形式，常用的有：

<em>：定义着重文本
<b>：定义粗体文本
<i>：定义斜体文本
<strong>：定义加重语气
<del>：定义删除字
<span>：无特殊含义

<span>标签是最常用的，一般与css标签搭配使用，添加不同的样式

文本标签都可以嵌套在<p>段落中使用，例如：

<body>
    <p><em>这是一段着重文字</em></p>
    <p><strong>这是一段强调语气</strong></p>
</body>

列表

有序列表

<ol>标签代表有序列表，<li>标签代表列表项

<body>
    <ol type="I">
        <li>苹果</li>
        <li>鸭梨</li>
    </ol>
</body>

使用type属性可以修改列表项的展示样式：<ol type="I">

其可选值包括1、A、a、I、i，代表数字、英文、罗马数字

列表项中还可以进行列表嵌套

<body>
    <ol type="I">
        <li>水果</li>
        <li>蔬菜
            <ol>
                <li>黄瓜</li>
                <li>茄子</li>
            </ol>
        </li>
    </ol>
</body>

快速生成列表：ol>li*6

无序列表

<ul>标签代表无序列表，<li>标签代表列表项

<body>
    <ul type="circle">
        <li>水果</li>
        <li>蔬菜</li>
    </ul>
</body>

无序列表的属性list-style也有四种可选值：disc实心圆、circle空心圆、square方块、none什么都不加

无序列表的嵌套和有序列表一样

无序列表的一个典型应用场景是导航栏，使用<ul>+<li>+css进行样式调整可以实现列表项横排和字体样式

快速生成列表：ul>li*6

表格

表格相关的标签包括：

<table>表格
<tr>行
<td>单元格，正常情况下，每个<tr>中<td>的数量是等同的

<body>
    <table border="1" width="600" height="400">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>

使用table>tr*3>td{单元格}*3可以快速生成这个3*3的表格

表格属性包括：

border：设置边框，即单元格框的像素单位
width：宽度
height：高度

单元格合并

设置单元格合并的是两个属性：colspan水平合并、rowspan竖直合并

<body>
    <p>合并单元格6、7</p>
    <p>合并单元格15、20</p>
    <table border="1" width="600" height="400">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6、7</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td rowspan="3">单元格13、18、23</td>
            <td>单元格14</td>
            <td rowspan="2">单元格15、20</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">单元格16、17、21、22</td>
            <td>单元格19</td>
        </tr>
        <tr>
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>
</body>

合并单元格以左和上为基准，只保留最左边第一个或最上边第一个，再增加需要合并的长度，例如<td colspan="2" rowspan="2">单元格16、17、21、22</td> 实现四个块合并

表单

表单是用于填写信息，采集信息的，是网站具有交互性

登录注册、输入框等都是表单的使用场景

<body>
    <form action="url" method="get" name="myform">

    </form>
</body>

表单的常用属性包括：

action：服务器地址，对应后端地址
method：get、post，即对应后端接口的get/post方法
name：表单名称

表单元素

表单应该包含三个基本元素：

表单标签
表单域
表单按钮

<body>
    <form>
        用户名：<input type="text">
        密码：<input type="password">
        <input type="submit" value="登录">
    </form>
</body>

<input type="submit">和<button>都可以生成按钮

而<input type="text"> 生成的是输入框

文本域

<input type="text">

<form>
    用户名：<input type="text">
</form>

密码域

<input type="password">

<form>
    密码：<input type="password">
</form>

按钮

使用<input type="submit"> 生成按钮，增加value属性可以指定按钮显示的内容

块和内联（行内）

块元素是独占一行的（多个块元素是上下摆放的），可以通过width和height设置宽和高的元素，块元素中可以包含行内元素和其他块级元素

内联元素（行内元素）不会独占一行（多个行内元素是横向摆放的），只占其自身大小，行内元素不能设置width和height属性，一般内联元素不包含块级元素

行内块元素不独占一行，但是识别width和height属性

H5中把元素分的更细了，有了元数据类型（metadata）、区块型（sectioning）、标题型（heading）、文档流型（flow）、语句型（phrasing）、内嵌型（embedded）、交互型（interactive），如果不属于任何一个类型，则叫穿透的，如果属于多种类型，叫混合的

常见的块元素包括：<div>、<form>、<h1>-<h6>、<hr>、<p>、<table>、<ul>

常见的内联元素（行内元素）：<a>、<b>、<em>、<i>、<span>、<strong>

常见的行内块元素：<button>、<input>、<img>

div容器

<div>容器用于把页面分成不同的区域，或者说是不同的内容模块，例如主导航、banner、广告区域等等

<div>可以嵌套，将一个大模块分得更细，方便添加css样式

<body>
    <div id="header"></div>
    <div id="nav"></div>
    <div id="artical">
        <div id="section"></div>
    </div>
    <div id="silder"></div>
    <div id="footer"></div>
</body>

一个网站大体上可以分成header、nav（导航）、artical（独立完整的内容快）、section（子内容块）、silder（侧边栏）、footer（底部）

在h5中，增加了一些语义化标签

<body>
    <header></header>
    <nav></nav>
    <article>
        <section></section>
    </article>
    <aside></aside>
    <footer></footer>
</body>

其实就是对应把div+id的形式搞成了要给专门的标签，语义更清晰了，且利于SEO

但是关键问题是h5的新标签对于老版本的浏览器无法运行，例如ie8和以前，需要有兼容性高的，最好使用div标签进行设计

目录CONTENT

H5基础知识