一、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的基本结构

<!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提倡的结构：

标签成对出现，特殊标签使用/>进行闭合

标签均为小写

元素结构层次清晰

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.html

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

<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 块级分区

<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/>

<img src="./img/shop.jpg" width="200" height="200" alt="口水娃" title="口水娃"/>

说明

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>

说明

其内部可以放置块级元素也可以放置行级元素
标签的属性

href：跳转的页面地址**（既可以是相对链接，也可以是外网地址）**
target：新页面打开的方式
- _self：在当前选项卡打开，默认值
- _blank：在新选卡打开页面
- title：鼠标悬停时的提示文字

5.5 行级分区

<span></span>

<p>光绪七年<em>1881</em>年，生于<span style="color: red;">浙江</span>绍兴城内东昌坊新台门周家。</p>

作用

在行的范围内产生一个分区

注意事项：一般需要和CSS样式一起使用

5.6 注释

<!--光绪十八年<em>1881</em>年，入三味书屋读书...<br/>-->

说明

被注释的内容不会显示

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

六、表单

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 ：数据将被分成多个部分，每个文件独占一个部分

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 文本框元素

<input name="" type="text" placeholder="" value="" maxlength=""/>

6.3.3 密码框元素

<input name="" type="password" placeholder="" value="" maxlength=""/>

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选择0暂时继续使用Firefox返回。
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 普通表格

表格： <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 示例

<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：用来表示导航，通常用于横向菜单

二、常见的布局(理解)

2.1 上中下布局

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

示例

<!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 上中下+左右

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

示例

<!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 介绍

英文全称为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"><rectx="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>

随堂练习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>

前端学习-HTML5相关推荐

前端学习—HTML5
前端HTML5基础学习基本语法网页基本标签基本标签的学习图片标签链接标签页面间链接锚链接功能性链接行内元素和块内元素列表表格标签媒体元素页面结构 iframe内联框架表单语 ...
前端学习 HTML5和CSS3新特性高级技巧 JavaScript基础语法
HTML5和CSS3提高 HTML5的新特性 HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签,新的表单和新的表单属性等: 这些新特性都有兼容性问题,基本是IE9+以上的版本浏览器才支持 ...
前端学习——HTML5
新增语义化标签新增布局标签 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charse ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...
前端H5怎么切换语言_「自学系列一」HTML5大前端学习路线+视频教程完整版
全新Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我是谁? 我该从哪里开始 ...
零基础自学html5要多久？Web前端学习路线的6点建议
学习html5的同学很多都在考虑.没有计算机基础能不能学会呢?在html5开发领域中没有特别的专业区分,能不能学会?跟有没有计算机专业知识也没有太大的关系,只能说有计算机专业,上手会快一点,并不能代表 ...
IT入门？推荐首选学习HTML5大前端
随着当下IT技术的蓬勃发展,越来越多的人想入行或转行至"程序员"梯队.对于零基础的小伙伴来说,综合各方面原因考量,. HTML5到底是什么?HTML5是指第5代HTML(超文本标记 ...
前端学习笔记 HTML5 保姆级教程
HTML5 保姆级教程前端学习路线: HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js 除了掌握这些技术,后期我还需要 ...

前端学习-HTML5

一、Web开发

1.1 概念

二、HTML基础

2.1 什么是HTML

2.2 HTML的基本结构

2.3 ISO-639 语言代码列表

2.3.1 常用的

2.3.2 不常用的

三、 HTML的内容标签

3.1 分类

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

四、块级元素(标签)

4.1 标题

4.2 段落

4.3 分割线/水平线

4.4 列表

4.4.1无序列表

4.4.2 有序列表（用得较少）

4.4.3 定义列表

4.5 块级分区

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

5.1 字体样式元素

5.1.1 加粗

5.1.2 强调/倾斜

5.1.3 下划线

5.2 换行

5.3 图像

5.4 超链接

5.5 行级分区

5.6 注释

六、表单

6.1 什么是表单

6.2 语法

6.3 表单输入元素

6.3.1 语法

6.3.2 文本框元素

6.3.3 密码框元素

6.3.4 按钮元素

6.3.5 单选按钮

6.3.6 复选框

6.3.7 文件域

6.3.8 下拉框（列表框）元素

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

6.3.10 表单元素的通用属性

6.3.11 语义化表单元素

七、表格

7.1 语法

7.1.1 普通表格

7.1.2 语义化表格

7.2 特征

7.3 示例

HTML5的新特新

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

二、常见的布局(理解)

2.1 上中下布局

2.2 上中下+左右

三、多媒体元素(了解)

3.1 音频元素

3.2 视频元素

3.3 常用属性

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

4.1 画布

4.2 矢量图

4.2.1 介绍

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

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

4.2.3 svg元素图形混合使用

4.2.4 svg绘制地图统计

4.2.5 矢量图常用的形状

五、数据列表 (了解)

随堂练习1（15分钟练习时间）

随堂练习2（15分钟练习时间）

五、数据列表 (了解)

前端学习-HTML5相关推荐

最新文章

热门文章