前端学习-HTML5
一、Web开发
1.1 概念
- 全称World Wide Web，缩写：www 全球广域网，又称万维网。
- World Wide Web Consortium，缩写：W3C，万维网联盟。其负责制定和维护Web行业标准，也叫W3C标准
说明:
- W3C标准包括：
- HTML内容：HTML、XHTML
- 样式美化：CSS
- 结构文档访问：DOM（Document Object Model）
- 页面交互：ECMAScript
- 通常情况下web主要指浏览器与web应用服务器的通信
- 通常web主要通过HTTP协议通信
- 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的基本结构
<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提倡的结构：
- 标签成对出现，特殊标签使用/>进行闭合
- 标签均为小写
- 元素结构层次清晰
- 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 分类
- 块级元素，没有样式修饰的情况下，在浏览器中独占一行的标签。
- 行级元素，在没有样式修饰的情况下，在浏览器中从左向右逐个显示的标签。
说明:
W3C官方HTML教程
https://www.w3.org/community/webed/wiki/HTML/Training
标签列表
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element菜鸟教程
https://www.runoob.com/html/html-tutorial.htmlw3school
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 段落
示例
<body>
<p>东海深处，有一仙岛，名曰蓬莱。在东汉末年张角，率领黄巾教众向汉室皇权三百余年的统治，发起了有史以来最强力的挑战。在这场战争中，张角最大的倚仗并非麾下数十万教众，而是蓬莱岛的至宝《南华经》。黄巾军点燃的战火，很快烧遍了神州大陆。装备精良的御林军，本以为能够轻松收拾这群手持木棒和农具的乱党，但却被张角通天彻地的法术几度迎头痛击。p>
<p>黄巾军攻势迅猛。短短数月间，从山东到河北一带，已被黄巾军悉数占领。只不过，纵然是手握《南华经》、命犯“天煞星”的张角，在曹操、刘备等乱世枭雄的围攻下，最终还是难逃兵败冀北的宿命。张角死后，收集四散的《南华经》残页，成了所有蓬莱弟子的至高使命。南华弟子以英雄骨血为凭，藉其生辰八字与命星的映照，幻化成一名拥有其全部战斗能力的化身英雄。就这样，一场场战斗便在《英雄三国》中发生了。p>
《英雄三国》中把英雄人物分为四种，分别是法术型英雄、物理型英雄、防御型英雄和辅助型英雄。同时每一个英雄还有自己的天命武器（类似被动技能），在游戏中只要金币足够可以用金币直接强化而不用回基地商店。不同的英雄强化效果不同。
游戏中英雄可用的技能分为：单体指向性技能、区域指向性技能、即时使用技能、区域单位技能、被动技能。
body>
4.3 分割线/水平线
水平线是一个单标签
示例
<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
<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>
用途
- 用于显示新闻列表
- 用于制作页面菜单
- 用于放置逻辑上归为一组的内容
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 块级分区
- 用途：通常当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用 。
- 注意：一般需要配合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>1881em>年，生于<u>浙江绍兴城u>内东昌坊新台门周家。p>
<p>光绪十八年<em>1881em>年，入<u>三味书屋u>从寿镜吾读书，课余影描图画。p>
<p>光绪十九年<em>1881em>年，家产中落，全家避难于乡下。p>
<p>光绪二十二年<em>1881em>年，家境益艰。于本年开始写日记。p>
<p>光绪二十三年<em>1881em>年，家族开会分房，分给鲁迅他们的既差且小。p>
5.2 换行
其作用是，强制换行，与p的区别在于其上下行文没有间隔
5.3 图像
<img src="./img/shop.jpg" width="200" height="200" alt="口水娃" title="口水娃"/>
说明
- src: 填写图片文件的路径
- alt：填写当图片不存在时显示的提示文字
- title：填写当鼠标悬停到图片时显示的提示文字
- width：设置图片显示的宽度（一般不使用该数据，以后都使用CSS来控制）
- height：设置图片显示的高度（一般不使用该数据，以后都使用CSS来控制）
5.4 超链接
<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.00p>
说明
- 其内部可以放置块级元素也可以放置行级元素
- 标签的属性
- href：跳转的页面地址**（既可以是相对链接，也可以是外网地址）**
- target：新页面打开的方式
- _self：在当前选项卡打开，默认值
- _blank：在新选卡打开页面
- title：鼠标悬停时的提示文字
5.5 行级分区
<p>光绪七年<em>1881em>年，生于<span style="color: red;">浙江span>绍兴城内东昌坊新台门周家。p>
作用
在行的范围内产生一个分区
- 注意事项：一般需要和CSS样式一起使用
5.6 注释
说明
被注释的内容不会显示
我们在书写HTML的时候，一定要习惯使用注释来表示一些关键结构所代表的意思
六、表单
6.1 什么是表单
表单是一个用来组装用户填写信息的容器，同时提供发送数据到指定的服务器的功能
典型的应用案例：搜索引擎、在线翻译工具、各种网站的登录与注册
6.2 语法
示例:
<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 ：数据将被分成多个部分，每个文件独占一个部分
6.3 表单输入元素
6.3.1 语法
说明（以下属性，根据type的不同，所拥有的属性也不同）
- name：用于表单提交数据到服务器后识别的名字
- type：用于设置输入元素的类型，确定不同的功能和显示外观
- placeholder：用于设置输入元素的提示文字
- value: 用于设置元素的值
- size：用于设置输入元素的宽度，默认指占几个字的宽度（一般不用，后续使用CSS来控制）
- maxlength：用于设置输入元素能接收用户输入最大字符个数
- checked：用于设置输入元素是否被选中
6.3.2 文本框元素
<input name="" type="text" placeholder="" value="" maxlength=""/>
6.3.3 密码框元素
<input name="" type="password" placeholder="" value="" maxlength=""/>
6.3.4 按钮元素
<input type="button" value="普通按钮"/>
<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选择0暂时继续使用Firefox返回。
- 根据HTML5规范，大小的默认值应为
- option元素的selected属性：表示当前选中的项
6.3.9 文本域（多行文本框）元素
<textarea name="" cols="10" rows="5">textarea>
- 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 普通表格
表格：
行：
标题列:
普通列：
7.1.2 语义化表格
表格的标题：
表格的表头：
表格的主体数据：
表格的表尾：
7.2 特征
同一行的高度是一样的
同一列的宽度是一样的
td标签可以设置的属性
colspan：一个格子占几列
rowspan：一个格子占几行
width：宽度（一般不用，后续用CSS来控制）
height：高度（一般不用，后续用CSS来控制）
align：水平对齐方式 left、center、right（一般不用，后续用CSS来控制）
注意： 在使用表格布局内容的时候一定要把边框显示出来
7.3 示例
<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>1254545454td>
<td>5456456456.3td>
tr>
<tr>
<td>内部转款td>
<td>3432432.23432td>
<td>34432111.2212td>
tr>
<tr>
<td>内部转款td>
<td>3432432.23432td>
<td>34432111.2212td>
tr>
<tr>
<td rowspan="5">支出td>
<td>采购支出td>
<td>1254545454td>
<td>5456456456.3td>
tr>
<tr>
<td>基建支出td>
<td>3432432.23432td>
<td>34432111.2212td>
tr>
<tr>
<td>工资支出td>
<td>3432432.23432td>
<td>34432111.2212td>
tr>
<tr>
<td>其他支出td>
<td>3432432.23432td>
<td>34432111.2212td>
tr>
<tr>
<td>支出合计td>
<td>3432432.23432td>
<td>34432111.2212td>
tr>
tbody>
<tfoot>
tfoot>
table>
HTML5的新特新
一、页面语义化标签(记忆)
- 为什么要用语义化标签：语义化标签能够更好的表示某个区域的含义，我们能够更加清晰的看出整个HTML的结构
- header：表示页面的头部内容
- section：表示页面的主体内容
- article：独立的文章内容
- aside：表页面的侧边栏，通常用于菜单
- footer：表示页面的底部，通常用于版权和友情链接，及底部的帮助
- nav：用来表示导航，通常用于横向菜单
二、常见的布局(理解)
2.1 上中下布局
京东、淘宝就是典型的上中下布局
示例
<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="#">顶部菜单1a>
<a href="#">顶部菜单2a>
<a href="#">顶部菜单3a>
<a href="#">顶部菜单4a>
nav>
header>
<section>
<span>中间内容span>
section>
<footer>
<nav>
<a href="#">底部菜单1a>
<a href="#">底部菜单2a>
<a href="#">底部菜单3a>
<a href="#">底部菜单4a>
nav>
footer>
body>
html>
2.2 上中下+左右
各种后台管理系统经常会用到这种布局
示例
<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="#">顶部菜单1a>
<a href="#">顶部菜单2a>
<a href="#">顶部菜单3a>
<a href="#">顶部菜单4a>
nav>
header>
<section>
<aside>
<ul>
<li>左部列表一li>
<li>左部列表二li>
<li>左部列表三li>
<li>左部列表四li>
ul>
aside>
<div>右侧内容div>
section>
<footer>
<nav>
<a href="#">底部菜单1a>
<a href="#">底部菜单2a>
<a href="#">底部菜单3a>
<a href="#">底部菜单4a>
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 脚本 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 介绍
- 英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形
- SVG 使用 XML 格式定义图像
- SVG 是万维网联盟的标准
- 相关API文档：https://developer.mozilla.org/zh-CN/docs/Glossary/SVG
4.2.2 直接使用img标签导入图像
矢量图标获取地址：https://www.iconfont.cn/home/index
<img src="./img/female.svg" width="100">
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绘制地图统计
<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>
随堂练习1（15分钟练习时间）
今日头条文章：https://www.toutiao.com/a6911237828580098568/
- 书写文章正文部分
- 标题与内容之间需要用水平线分割
- 右侧的文章推荐列表放在正文的最后面（只写列表，不需要写名称那部分）
- 所有的英文缩写、名字之类的需要加粗并斜体处理
随堂练习2（15分钟练习时间）
新浪微博登录：https://weibo.com/
- 只需要完成账号登录部分即可
- 输入框颜色以及其中的图标不用实现
- 按钮颜色、宽度等效果不用实现
- 超链接颜色不用实现
t=“200” fill=“red”/> |
| 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>