天天看点
返回

HTML5HTML5HTML5的新特新

HTML5

学习目标

【了解】了解什么是HTML

【掌握】HTML的基本结构

【了解】ISO-639 语言代码

【掌握】HTML的编码规范

【掌握】HTML的行级元素与块级元素

【掌握】表单与表格的使用

【掌握】语义化与页面常见布局

【了解】多媒体元素

【了解】图像动画元素、数据列表

一、Web开发

1.1 概念

  1. 全称World Wide Web，缩写：www 全球广域网，又称万维网。
  2. World Wide Web Consortium，缩写：W3C，万维网联盟。其负责制定和维护Web行业标准，也叫W3C标准

说明:

  1. W3C标准包括：
    • HTML内容：HTML、XHTML
    • 样式美化：CSS
    • 结构文档访问：DOM（Document Object Model）
    • 页面交互：ECMAScript
  2. 通常情况下web主要指浏览器与web应用服务器的通信
  3. 通常web主要通过HTTP协议通信
  4. Web前端主要指浏览器端呈现内容的开发，由于浏览器是直接与用户打交道故称为Web前端

注意：

W3C 官方文档： https://www.w3.org/standards/webdesign/

Web开发技术 MDN文档：https://developer.mozilla.org/zh-CN/docs/Web

二、HTML基础

2.1 什么是HTML

HTML：(Hyper Text Markup Language) 超文本标记语言，通常情况下指代网页的源码

2.2 HTML的基本结构(3分钟练习时间) 

<!DOCTYPE html>
<!-- 网页的语言类型 -->
<html lang="zh_CN">

<!--网页的头部内容-->
<head>
    <!--网页编码设置-->
    <meta charset="UTF-8">
    
    <!-- 给搜索引擎提供信息 (项目完成上线后才开始书写) -->
    <!-- 关键字 -->
    <meta name="keywords" content="百货,数码,家电">
    <!-- 内容描述信息 -->
    <meta name="description" content="第一家网上交易,各类产品...">

    <!--网页标题-->
    <title>百度一下，你就知道</title>
    <!--设置网页的标题的图标-->
    <link rel="icon" href="img/favicon.ico" />
</head>
<!--网页的主体显示内容-->
<body>
    这是网页的内容
</body>
</html>

该结构满足W3C提倡的结构：

  1. 标签成对出现，特殊标签使用/>进行闭合
  2. 标签均为小写
  3. 元素结构层次清晰
  4. HTML内容结构 具有语义化

2.3 ISO-639 语言代码列表

如果只写前面部分，则代表通用，例如zh，代表zh_CN、zh_TW、zh_HK

2.3.1 常用的

国家地区 语言标识
简体中文(中国) zh_CN
繁体中文(台湾地区) zh_TW
英语(美国) en_US
英语(英国) en_GB
韩文(韩国) ko_KR
日语(日本) ja_JP
法语(法国) fr_FR
德语(德国) de_DE
俄语(俄罗斯) ru_RU

2.3.2 不常用的

国家地区 语言标识
繁体中文(香港) zh_HK
英语(香港) en_HK
英语(全球) en_WW
英语(加拿大) en_CA
英语(澳大利亚) en_AU
英语(爱尔兰) en_IE
英语(芬兰) en_FI
芬兰语(芬兰) fi_FI
英语(丹麦) en_DK
丹麦语(丹麦) da_DK
英语(以色列) en_IL
希伯来语(以色列) he_IL
英语(南非) en_ZA
英语(印度) en_IN
英语(挪威) en_NO
英语(新加坡) en_SG
英语(新西兰) en_NZ
英语(印度尼西亚) en_ID
英语(菲律宾) en_PH
英语(泰国) en_TH
英语(马来西亚) en_MY
英语(阿拉伯) en_XA
荷兰语(荷兰) nl_NL
荷兰语(比利时) nl_BE
葡萄牙语(葡萄牙) pt_PT
葡萄牙语(巴西) pt_BR
法语(卢森堡) fr_LU
法语(瑞士) fr_CH
法语(比利时) fr_BE
法语(加拿大) fr_CA
西班牙语(拉丁美洲) es_LA
西班牙语(西班牙) es_ES
西班牙语(阿根廷) es_AR
西班牙语(美国) es_US
西班牙语(墨西哥) es_MX
西班牙语(哥伦比亚) es_CO
西班牙语(波多黎各) es_PR
德语(奥地利) de_AT
德语(瑞士) de_CH
意大利语(意大利) it_IT
希腊语(希腊) el_GR
挪威语(挪威) no_NO
匈牙利语(匈牙利) hu_HU
土耳其语(土耳其) tr_TR
捷克语(捷克共和国) cs_CZ
斯洛文尼亚语 sl_SL
波兰语(波兰) pl_PL
瑞典语(瑞典) sv_SE
西班牙语 (智利) es_CL

三、 HTML的内容标签

3.1 分类

  1. 块级元素，没有样式修饰的情况下，在浏览器中独占一行的标签。
  2. 行级元素，在没有样式修饰的情况下，在浏览器中从左向右逐个显示的标签。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p86Oh95x-1611910236929)(https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/HTML5&CSS3/01-HTML5标签/块级元素与行级元素.png )]

说明:

  1. W3C官方HTML教程

    https://www.w3.org/community/webed/wiki/HTML/Training

  2. 标签列表

    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

  3. 菜鸟教程

    https://www.runoob.com/html/html-tutorial.html

  4. w3school

    https://www.w3school.com.cn/index.html

后两个国内的工具网站，可能得到的不是最新或者有些时候会有一些瑕疵

3.2 网页标准文档流布局（重要）

在没有任何样式的修饰下，所有的元素，将从上至下，从左至右进行排列。

四、块级元素(标签)

4.1 标题

h1 ~ h6

示例

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

4.2 段落

<p></p>

示例

<body>
    <p>东海深处，有一仙岛，名曰蓬莱。在东汉末年张角，率领黄巾教众向汉室皇权三百余年的统治，发起了有史以来最强力的挑战。在这场战争中，张角最大的倚仗并非麾下数十万教众，而是蓬莱岛的至宝《南华经》。黄巾军点燃的战火，很快烧遍了神州大陆。装备精良的御林军，本以为能够轻松收拾这群手持木棒和农具的乱党，但却被张角通天彻地的法术几度迎头痛击。</p>
    <p>黄巾军攻势迅猛。短短数月间，从山东到河北一带，已被黄巾军悉数占领。只不过，纵然是手握《南华经》、命犯“天煞星”的张角，在曹操、刘备等乱世枭雄的围攻下，最终还是难逃兵败冀北的宿命。张角死后，收集四散的《南华经》残页，成了所有蓬莱弟子的至高使命。南华弟子以英雄骨血为凭，藉其生辰八字与命星的映照，幻化成一名拥有其全部战斗能力的化身英雄。就这样，一场场战斗便在《英雄三国》中发生了。</p>
    《英雄三国》中把英雄人物分为四种，分别是法术型英雄、物理型英雄、防御型英雄和辅助型英雄。同时每一个英雄还有自己的天命武器（类似被动技能），在游戏中只要金币足够可以用金币直接强化而不用回基地商店。不同的英雄强化效果不同。
    游戏中英雄可用的技能分为：单体指向性技能、区域指向性技能、即时使用技能、区域单位技能、被动技能。
</body>

4.3 分割线/水平线

<hr/>

 水平线是一个单标签

示例

<h1>金克斯</h1>
<hr/>
<p>神经狂躁、冲动任性、劣迹斑斑……</p>
<p>金克丝出身自祖安，生来就爱不计后果地大搞破坏。</p>
<p>她就是一座人形自走军火库，所经之处必定会留下夺目的火光和震耳的爆炸。</p>

4.4 列表

4.4.1无序列表

ul - li

可以使用Emmet表达式快速编写html代码

Emmet官网：https://emmet.io/

idea可以直接在Plugins中安装Emmet

HTML5HTML5HTML5的新特新
<h3>都市热新闻</h3>
<ul>
    <li>推荐| 倘若爱情有悖论 千年骨语 我的未婚夫白狐大人</li>
    <li>热文| 都市无敌医圣 最废女婿 爱不逢时，情无金坚</li>
    <li>优选| 总想渣自己怎么办 医流战神走巅峰 剑破苍穹</li>
    <li>新书| 影帝的绯闻女友 都市王牌豪婿 末日拯救计划</li>
</ul>

4.4.2 有序列表（用得较少）

ol - li

示例

<h3>都市热新闻</h3>
<ol>
    <li>推荐| 倘若爱情有悖论 千年骨语 我的未婚夫白狐大人</li>
    <li>热文| 都市无敌医圣 最废女婿 爱不逢时，情无金坚</li>
    <li>优选| 总想渣自己怎么办 医流战神走巅峰 剑破苍穹</li>
    <li>新书| 影帝的绯闻女友 都市王牌豪婿 末日拯救计划</li>
</ol>

用途

  1. 用于显示新闻列表
  2. 用于制作页面菜单
  3. 用于放置逻辑上归为一组的内容

4.4.3 定义列表

dl-dt-dd

注意：dl下只能放置dt、dt下只能放置dd、dd下最好只放置行级元素

示例

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
    
    <dt>蔬菜</dt>
    <dd>白菜</dd>
    <dd>黄瓜</dd>
    <dd>西红柿</dd>
</dl>

用途

  • 解释词语的意思
    • 图文混编的内容展示 - 商品介绍 - 图片-以及解释图片的文字

4.5 块级分区

<div></div>
  • 用途：通常当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用 。
    • 注意：一般需要配合CSS使用。

示例

<div>
    <h3>都市热新闻</h3>
    <ul>
        <li>推荐| 倘若爱情有悖论 千年骨语 我的未婚夫白狐大人</li>
        <li>热文| 都市无敌医圣 最废女婿 爱不逢时，情无金坚</li>
        <li>优选| 总想渣自己怎么办 医流战神走巅峰 剑破苍穹</li>
        <li>新书| 影帝的绯闻女友 都市王牌豪婿 末日拯救计划</li>
    </ul>
</div>
<div>
    <h3>都市热新闻</h3>
    <ol>
        <li>推荐| 倘若爱情有悖论 千年骨语 我的未婚夫白狐大人</li>
        <li>热文| 都市无敌医圣 最废女婿 爱不逢时，情无金坚</li>
        <li>优选| 总想渣自己怎么办 医流战神走巅峰 剑破苍穹</li>
        <li>新书| 影帝的绯闻女友 都市王牌豪婿 末日拯救计划</li>
    </ol>
</div>

五、行级元素（内联元素）

5.1 字体样式元素

5.1.1 加粗

strong与b

5.1.2 强调/倾斜

em与i

i标签现在基本上已经被用于配合CSS，绘制小图标

5.1.3 下划线

u

示例

<strong>鲁迅</strong>
<hr/>
<p>光绪七年<em>1881</em>年，生于<u>浙江绍兴城</u>内东昌坊新台门周家。</p>
<p>光绪十八年<em>1881</em>年，入<u>三味书屋</u>从寿镜吾读书，课余影描图画。</p>
<p>光绪十九年<em>1881</em>年，祖父周介孚因事下狱，家产中落，全家避难于乡下。</p>
<p>光绪二十二年<em>1881</em>年，父亲去世。家境益艰。于本年开始写日记。</p>
<p>光绪二十三年<em>1881</em>年，家族开会分房，分给鲁迅他们的既差且小。</p>

5.2 换行

<br/>
其作用是，强制换行，与p的区别在于其上下行文没有间隔

5.3 图像

<img/>

说明

  • src: 填写图片文件的路径
  • alt：填写当图片不存在时显示的提示文字
  • title：填写当鼠标悬停到图片时显示的提示文字
  • width：设置图片显示的宽度（一般不使用该数据，以后都使用CSS来控制）
  • height：设置图片显示的高度（一般不使用该数据，以后都使用CSS来控制）

5.4 超链接

<a></a>

 
<a href="./detail.html" target="_blank">
  <img src="./img/book.jpg" alt="心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血！" width="260" height="336"/>
</a>
<p>
  <a href="./detail.html" target="_self">心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血！</a>
</p>
<p>￥48.00</p>

说明

  1. 其内部可以放置块级元素也可以放置行级元素
  2. 标签的属性
  • href：跳转的页面地址**（既可以是相对链接，也可以是外网地址）**
  • target：新页面打开的方式
    • _self：在当前选项卡打开，默认值
    • _blank：在新选卡打开页面
    • title：鼠标悬停时的提示文字

5.5 行级分区

<span></span>

作用

在行的范围内产生一个分区
  • 注意事项：一般需要和CSS样式一起使用

5.6 注释

<!--注释内容-->

说明

被注释的内容不会显示

我们在书写HTML的时候，一定要习惯使用注释来表示一些关键结构所代表的意思

HTML5HTML5HTML5的新特新

六、表单

6.1 什么是表单

表单是一个用来组装用户填写信息的容器，同时提供发送数据到指定的服务器的功能

典型的应用案例：搜索引擎、在线翻译工具、各种网站的登录与注册

6.2 语法

<form></form>

示例:

<form action="" method="post" enctype="application/x-www-form-urlencoded">
    <p>
        <span>名字：</span>
        <input name="name" type="text"/>
    </p>
    <p>
        <span>密码：</span>
        <input name="pwd" type="password"/>
    </p>
    <p>
        <input type="submit" name="sub" value="提交"/>
        <input type="reset" name="res" value="重填"/>
    </p>
</form>

说明:

  • action：用于填写提交的处理数据的服务器地址
  • method：提交数据的方式
    • get：提交的数据会拼接到地址栏 ? 的后面
    • post：提交的数据会放在请求体中 格式为 FormData
  • enctype：用于指定表单在提交时，Content-Type的HTTP数据头的值
    • application/x-www-form-urlencoded：默认值，表示这是已编码为URL参数的表单数据
    • multipart/form-data ：数据将被分成多个部分，每个文件独占一个部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T9m86nBz-1611910236936)(https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/HTML5&CSS3/01-HTML5标签/FormData结构.png )]

6.3 表单输入元素

6.3.1 语法

<input name="" type="" placeholder="" value="" size="" maxlength="" checked=""/>

说明（以下属性，根据type的不同，所拥有的属性也不同）

  • name：用于表单提交数据到服务器后识别的名字
  • type：用于设置输入元素的类型，确定不同的功能和显示外观
  • placeholder：用于设置输入元素的提示文字
  • value: 用于设置元素的值
  • size：用于设置输入元素的宽度，默认指占几个字的宽度（一般不用，后续使用CSS来控制）
  • maxlength：用于设置输入元素能接收用户输入最大字符个数
  • checked：用于设置输入元素是否被选中

6.3.2 文本框元素

6.3.3 密码框元素

6.3.4 按钮元素 

<!-- 普通按钮 - 一般会和JS脚本一起使用 -->
<input type="button" value="普通按钮"/>

<!-- 必须放在表单form中才会起作用 -->
<!-- 表单提交按钮 -->
<input type="submit" value="提交表单数据"/>
<!-- 表单重置按钮 -->
<input type="reset" value="恢复表单输入元素初始默认数据"/>

6.3.5 单选按钮 

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

说明:

  • 单选按钮的value是作为交互用的，并不会显示，因此需要单独书写文本，作为显示
  • 单选按钮的互斥效果：name属性一样会分到同一组中，同组的按钮自动实现互斥
  • checked="checked"可以直接省略为checked

6.3.6 复选框 

<h3>为什么要卸载软件？</h3>
<ul>
    <li><input name="rea" type="checkbox" value="1" checked >不好用</li>
    <li><input name="rea" type="checkbox" value="2">占内存</li>
    <li><input name="rea" type="checkbox" value="3">要钱</li>
    <li><input name="rea" type="checkbox" value="4">经常死机</li>
</ul>

说明:

  • 复选框的name属性一样会被分到同一组，方便后端的服务器取出每一组数据

6.3.7 文件域 

<form method="post" enctype="multipart/form-data">
    <input name="head" type="file" accept="image/png, image/jpeg" multiple />
    <input type="submit" value="上传"/>
</form>

注意

  • 表单提交的方式必须是***POST***方式
  • 表单数据的编码格式必须是 enctype="multipart/form-data"
  • accept用于限制文件上传的类型，如果确实该属性，表示允许任何文件上传，详细说明：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#Unique_file_type_specifiers
  • multiple用于控制是否开启多选

6.3.8 下拉框（列表框）元素 

<form method="post" action="">
    出生日期：
    <input type="text" name="byear" placeholder="yyyy" maxlength="4"/>年
    <select name="bmon" size="5">
        <option value="">[选择月份]</option>
        <option value="1" selected>一月</option>
        <option value="2">二月</option>
        <option value="3">三月</option>
        <option value="4">四月</option>
        <option value="5">五月</option>
        <option value="6">六月</option>
        <option value="7">七月</option>
        <option value="8">八月</option>
        <option value="9">九月</option>
        <option value="10">十月</option>
        <option value="11">十一月</option>
        <option value="12">十二月</option>
    </select>月
    <input type="text" name="bday" placeholder="dd" maxlength="2"/>日
</form>
  • size属性：表示列表框需要显示几个列表项的内容在页面（该属性一般不会使用）
    • 根据HTML5规范，大小的默认值应为

      1

       ; 但是，在实践中，发现它破坏了某些网站，并且当前没有其他浏览器这样做，因此Mozilla选择 暂时继续使用Firefox返回。
  • option元素的selected属性：表示当前选中的项

6.3.9 文本域（多行文本框）元素

  • cols属性：表示文本域宽度占几个字的大小（本质是多少列）
  • rows属性：表示文本域高度占几行的大小（本质是多少行）
  • 注意：高度超过了rows的大小会显示垂直的滚动条

6.3.10 表单元素的通用属性 

- readonly：表示表单输入元素不允许修改内容，只读
- disabled：表示表单输入元素不允许使用，禁用

6.3.11 语义化表单元素

  • label元素：表单输入元素的提示文本，提供点击文本元素获得焦点或者选中 
<form>
    请选择性别：
    <label for="male">男</label>
    <input type="radio" name="gender" id="male"/>
    <label for="female">女</label>
    <input type="radio" name="gender" id="female"/>
</form>

这里需要注意：id的值要与for对应（不过我们也可以，把表单元素直接放到label里面）

  • fieldset元素：对多个表单输入元素进行分组
  • legend元素：对表单分组后显示提示性文字 
<form>
    <fieldset>
        <legend>个人信息:</legend>
        <label for="name">姓名:</label><input type="text" id="name"><br>
        <label for="mail">邮箱:</label><input type="text" id="mail"><br>
        <label for="birthday">生日:</label><input type="text" id="birthday">
    </fieldset>
</form>

七、表格

7.1 语法

7.1.1 普通表格

表格：

<table></table>

行：

<tr></tr>

table row

标题列:

<th></th>

table header ， 加粗并居中

普通列：

<td></td>

table data 表格的每个数据占一个格子

7.1.2 语义化表格

表格的标题：

<capation></capation>

表格的表头：

<thead></thead>

表格的主体数据：

<tbody></tbody>

表格的表尾：

<tfoot></tfoot>

7.2 特征

同一行的高度是一样的

同一列的宽度是一样的

td标签可以设置的属性

​ colspan：一个格子占几列

​ rowspan：一个格子占几行

​ width：宽度（一般不用，后续用CSS来控制）

​ height：高度（一般不用，后续用CSS来控制）

​ align：水平对齐方式 left、center、right（一般不用，后续用CSS来控制）

注意： 在使用表格布局内容的时候一定要把边框显示出来

7.3 示例

HTML5HTML5HTML5的新特新
<table border="1">
    <!--表格的标题-->
    <caption>员工信息表</caption>
    <!--表格的表头-->
    <thead>
        <tr>
            <th colspan="2" rowspan="2">项目</th>
            <th colspan="2">本周发生</th>
        </tr>
        <tr>
            <th>收入</th>
            <th>支出</th>
        </tr>
    </thead>
    <!--  表格的主体 填写数据  -->
    <tbody>
        <tr>
            <td rowspan="3">收入</td>
            <td>贷款收回</td>
            <td>1254545454</td>
            <td>5456456456.3</td>
        </tr>
        <tr>
            <td>内部转款</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td>内部转款</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td rowspan="5">支出</td>
            <td>采购支出</td>
            <td>1254545454</td>
            <td>5456456456.3</td>
        </tr>
        <tr>
            <td>基建支出</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td>工资支出</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td>其他支出</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td>支出合计</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
    </tbody>
    <!-- 表格尾部，用得很少 -->
    <tfoot>

    </tfoot>
</table>

HTML5的新特新

一、页面语义化标签(记忆)

  • 为什么要用语义化标签：语义化标签能够更好的表示某个区域的含义，我们能够更加清晰的看出整个HTML的结构
  • header：表示页面的头部内容
  • section：表示页面的主体内容
  • article：独立的文章内容
  • aside：表页面的侧边栏，通常用于菜单
  • footer：表示页面的底部，通常用于版权和友情链接，及底部的帮助
  • nav：用来表示导航，通常用于横向菜单
HTML5HTML5HTML5的新特新

二、常见的布局(理解)

2.1 上中下布局

京东、淘宝就是典型的上中下布局

示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qIzZ15wN-1611910236940)(https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/HTML5&CSS3/01-HTML5标签/上中下布局.png )]

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上中下布局</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        header, footer {
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        header {
            background-color: #0060ba;
            top: 0;
        }

        a {
            text-decoration: none;
        }

        header nav a {
            color: #fff;
        }

        section {
            background-color: lightgreen;
            height: calc(100vh - 120px);
            color: #1f991f;
            font-size: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        footer {
            background-color: #fff;
        }
    </style>
</head>
<body>
<header>
    <nav>
        <a href="#">顶部菜单1</a>
        <a href="#">顶部菜单2</a>
        <a href="#">顶部菜单3</a>
        <a href="#">顶部菜单4</a>
    </nav>
</header>
<section>
    <span>中间内容</span>
</section>
<footer>
    <nav>
        <a href="#">底部菜单1</a>
        <a href="#">底部菜单2</a>
        <a href="#">底部菜单3</a>
        <a href="#">底部菜单4</a>
    </nav>
</footer>
</body>
</html>

2.2 上中下+左右

各种后台管理系统经常会用到这种布局

示例

HTML5HTML5HTML5的新特新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上中下布局</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        header, footer {
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        header {
            background-color: #0060ba;
            top: 0;
        }

        a {
            text-decoration: none;
        }

        header nav a {
            color: #fff;
        }

        section::after {
            content: '';
            display: block;
        }

        section aside ul {
            margin: 0;
            padding: 0;
            color: #fff;
        }

        section aside, section div {
            height: calc(100vh - 120px);
            float: left;
        }

        section aside {
            width: 10%;
            background-color: cornflowerblue;
        }

        section div {
            width: 90%;
            background-color: lightgreen;
            color: #1f991f;
            font-size: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        footer {
            background-color: #fff;
        }
    </style>
</head>
<body>
<header>
    <nav>
        <a href="#">顶部菜单1</a>
        <a href="#">顶部菜单2</a>
        <a href="#">顶部菜单3</a>
        <a href="#">顶部菜单4</a>
    </nav>
</header>
<section>
    <!--左侧菜单-->
    <aside>
        <ul>
            <li>左部列表一</li>
            <li>左部列表二</li>
            <li>左部列表三</li>
            <li>左部列表四</li>
        </ul>
    </aside>
    <div>右侧内容</div>
</section>
<footer>
    <nav>
        <a href="#">底部菜单1</a>
        <a href="#">底部菜单2</a>
        <a href="#">底部菜单3</a>
        <a href="#">底部菜单4</a>
    </nav>
</footer>
</body>
</html>

三、多媒体元素(了解)

3.1 音频元素

常用的格式：OGG,MP3,WAV

<audio controls>
    <source src="./sound/bgm.mp3">
    <source src="./sound/bgm.ogg">
    对不起浏览器不支持，请升级浏览器
</audio>

3.2 视频元素

常用格式：OGG,MPEG4,MP4,WEBM,WAV

<video autoplay loop muted controls>
    <source src="./video/intro.mp4">
    不支持视频播放，请升级浏览器
</video>

3.3 常用属性

  • controls：设置视频和音频元素的控制界面
  • autoplay：设置视频和音频自动播放 - 默认自动播放会失效
  • loop：设置循环播放
  • muted：设置静音，当视频静音后可以实现自动播放

四、图像动画元素(了解)

4.1 画布

<canvas></canvas>
需要使用Canvas 脚本 API 或者WebGL API在画布上进行绘制

简单的示例：

<body>
<canvas id="myCanvas" width="200" height="100"
        style="border:1px solid #000000;">
</canvas>
</body>
<script type="text/javascript">
    let c = document.getElementById("myCanvas");
    let ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

4.2 矢量图

4.2.1 介绍

  1. 英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形
  2. SVG 使用 XML 格式定义图像
  3. SVG 是万维网联盟的标准
  4. 相关API文档：https://developer.mozilla.org/zh-CN/docs/Glossary/SVG

4.2.2 直接使用img标签导入图像

矢量图标获取地址：https://www.iconfont.cn/home/index

4.2.3 直接使用svg标签在页面中绘制

矢量图常用属性

  • width：图形的宽度
  • height：图形的高度
  • x：图形的水平坐标
  • y：图形的垂直坐标
  • fill：图形填充的颜色
  • fill-opacity：图形填充颜色的透明度
  • stroke：图形边框绘制颜色
  • stroke-width：图形边框绘制的宽度
  • stroke-opacity：图形边框绘制的颜色的透明度 
<svg width="300" height="300">
    <rect
      x="20"
      y="50"
      width="200"
      height="200"
      fill="#FF0000"
      fill-opacity=".5"
      stroke="#0000FF"
      stroke-width="10"
      stroke-opacity=".7"
    />
</svg>

4.2.3 svg元素图形混合使用 

<svg width="300" height="300">
    <rect width="300" height="300" fill="red"/>
    <circle cx="150" cy="150" r="150" fill="blue" fill-opacity=".5"/>
</svg>

4.2.4 svg绘制地图统计 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用来演示使用矢量图绘制地图</title>
    <style>
        path:hover{
            fill: yellow;
        }
    </style>
</head>
<body>
<svg width="600" height="600">
    <!--  黑龙江  -->
    <path fill="red" fill-opacity="1" stroke="white" d="M464.838,96.639l6.787-1.19l2.854,5.241l4.285,3.095l2.856-1.188h2.386l4.285-2.501l3.094,3.094l2.024,0.357l5.357-2.023l3.813,2.023l1.666,4.288h2.857l1.43,1.904l3.689,4.049l1.426-0.833l-0.594-5.12l2.026-1.432l2.854,5.716l2.621,1.074l2.858,3.212l2.021-0.357l0.836-1.427l4.523-5.12l2.022,1.428l1.43-2.022l1.431,2.619l4.283,1.429h2.86l2.07,0.088l-1.238-2.113l-0.598-6.906l-5.115-7.978l2.855-2.857l2.616-4.883h9.646l1.785-1.665l-0.597-3.69l2.025-3.691l-0.596-2.024l0.832-3.451l-0.236-17.742l2.855-5.715l-3.214-3.692l0.595-2.261l-1.427-2.024l-3.69,1.429l-4.289,4.884l-4.283,2.023l-4.289,5.951l-10.598,3.692l-4.879-3.692l0.594-2.262l-2.5-3.689l-1.191-3.811l-4.047-0.239l-7.145-3.69l-2.859,1.071l-3.33-1.667l-4.887,0.834l-4.283-1.429l-2.621-3.69l-2.498-2.857l-0.951-2.857l-3.334-3.452l-2.026-3.099l-4.644-6.31l-1.428-3.69l-5.119-6.548l-1.432-3.454l-6.549-3.216l-4.287,1.429l-3.689-0.833l-8.336-1.668l-11.07,3.932l-2.024,1.786l2.262,3.096l-2.856,7.499l0.834,0.835l4.881,3.096l2.621-4.286l4.524,2.856l-0.235,2.022l1.664,5.119l2.854,3.218l5.717,0.833l1.668-1.787l3.451-0.477l6.547-5.476l8.576,6.31l-2.858,11.669l0.594,8.333v5.119l-2.26,1.191l-0.238,13.335l-0.597-0.476l-2.26-2.858h-1.192l-0.595,1.073c0,0-8.797,13.044-7.146,10.596c1.652-2.448-3.451,4.523-3.451,4.523l0.357,1.428l7.145,4.886l3.926-1.071l0.599,1.071l-0.834,1.189l-3.689,1.667l-0.359,3.214L464.838,96.639z"/>
    <text x="480" y="80">黑龙江</text>
    <path fill="red" stroke="white" d="M544.896,113.042l-2.07-0.088h-2.858l-4.285-1.431l-1.43-2.619l-1.431,2.024l-2.022-1.428l-4.523,5.12l-0.834,1.427l-2.022,0.357l-2.859-3.214l-2.621-1.072l-2.854-5.715l-2.027,1.431l0.594,5.12l-1.426,0.833l-3.689-4.05l-1.432-1.903h-2.854l-1.666-4.288l-3.813-2.023l-5.354,2.023l-2.025-0.357l-3.098-3.094l-4.285,2.5h-2.383l-2.857,1.191l-4.285-3.096l-2.854-5.24l-6.787,1.189l-2.621,3.099l-0.238,3.45l-7.502-2.023l-1.074,2.381l0.601,1.667l3.928,2.859v4.046l0.594,3.929l2.265,3.456l0.356,3.095l1.666,1.191l5.717-5.479l5.953,7.502v4.288l3.213,1.667l0.238-1.431l4.885,1.431l3.451,4.046l1.666-1.784l0.357-1.074l8.217,11.075l0.594,4.286l4.527,5.239l0.592,4.761l4.051-2.499l3.689-10.598l1.67-0.595l4.047,2.263l6.549-0.834l2.26-2.024l-3.092-4.763l0.832-1.191c0,0,7.84-2.611,6.072-2.022c-1.766,0.588,2.5-4.883,2.5-4.883l3.215-1.428l0.238-4.766l0.832-3.212l1.785-0.596l1.668,1.789l1.668,1.426l4.287-5.715l1.188-4.288L544.896,113.042z"/>
    <path fill="red" stroke="white" d="M491.15,173.2l6.783-10.002l4.287-4.881l-0.595-4.763l-4.524-5.239l-0.594-4.286l-8.216-11.075l-0.358,1.074l-1.666,1.786l-3.453-4.05l-4.883-1.429l-0.236,1.429v2.264l-2.022,2.022l-4.047,4.05H467.1l-1.666,2.856h-1.789l-3.094,3.096h-1.787l-3.691,3.691l-2.262,0.596l-4.881,7.5l-3.096-4.644l-3.453-2.262l-1.666,1.667l1.903,10.002l-1.666,3.453l-1.668,5.12l4.763,3.215l2.621,0.238l3.45,4.881l2.5-1.429c0,0,2.857-2.881,4.05-4.882c1.192-2.002,4.049-6.788,4.049-6.788l6.787-1.429l4.287,4.286l-3.099,6.787l-4.049,6.311l3.688,2.62l-0.233,3.098l-2.857,2.855l0.597,1.19l4.881-2.619l7.143-9.407l10.836-6.072L491.15,173.2z"/>
</svg>
</body>
</html>

4.2.5 矢量图常用的形状

形状元素 描述 示例
rect 矩形
circle 圆形
ellipse 椭圆
line 线条
polygon 多边形
path 路径

五、数据列表 (了解)

用来给文本框提供可用值搜索和选择,一定要和文本框配置使用

<p>
    <span>选择省份：</span>
    <input type="text" list="identity"/>
</p>
<datalist id="identity">
    <option>北京市</option>
    <option>天津市</option>
    <option>上海市</option>
    <option>重庆市</option>
    <option>河北省</option>
    <option>山西省</option>
    <option>广东省</option>
    <option>四川省</option>
    <option>台湾省</option>
</datalist>

6-6.072L491.15,173.2z"/>

```

4.2.5 矢量图常用的形状

形状元素 描述 示例
rect 矩形
circle 圆形
ellipse 椭圆
line 线条
polygon 多边形
path 路径

五、数据列表 (了解)

用来给文本框提供可用值搜索和选择,一定要和文本框配置使用

<p>
    <span>选择省份：</span>
    <input type="text" list="identity"/>
</p>
<datalist id="identity">
    <option>北京市</option>
    <option>天津市</option>
    <option>上海市</option>
    <option>重庆市</option>
    <option>河北省</option>
    <option>山西省</option>
    <option>广东省</option>
    <option>四川省</option>
    <option>台湾省</option>
</datalist>
html标签 html html5
上一篇: html5加载xml之1
下一篇: html5写入xml,自定义html标签(XML)Title

继续阅读