HTML5和CSS3 WEB技术开发

B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/

课程目标：

使用HTML5进行网站布局
使用CSS3进行网站美化
开发精美的商业网站

第一章 HTML5基础

概念：

网页：互联网的基础，网络页面,网页：文字、图片、声音、视频、VR虚幻等；

网站：淘宝网、京东、亚马逊、腾讯、新浪、网易、哔哩哔哩等，网站就是网页的集合。

浏览器：查看网页的工具；主浏览器：谷歌浏览器Chrome、火狐浏览器、IE（Edge);360、2345、百度等这些浏览器，这些浏览器在国内使用，内核还是外国上述三种的；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]

1.HTML

HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup language)，是网页制作所必备的。“超文本**”**就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。目前版本是第5代，简称为HTML5，该技术结合了 HTML4.01 的相关标准并革新。

2.WWW

2.1 www来源

WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“‘W3’”，英文全称为“World Wide Web”），中文名字为“万维网”，"环球网"等，常简称为Web。分为Web客户端和Web服务器程序。 WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。是一个由许多互相链接的超文本组成的系统，通过互联网访问。

发明者：蒂姆·伯纳斯·李 (他是“互联网之父”、“千年技术奖”首位获奖者，他是被全球人赞扬的英国科学家。他，是蒂姆·伯纳斯·李。他是万维网的发明者，南安普顿大学与麻省理工学院教授。2017年，他因“发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法”而获得2016年度的图灵奖。)

2.2 W3C

World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/

2.3W3C标准

结构化标准语言（XHTML 、XML）：网页结构html
表现标准语言（CSS）:CSS
行为标准（DOM、ECMAScript ）：JS

3.协议

3.1http:

3.2 https:

HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性

4.HTML的基本结构

理解网页结构：

<!DOCTYPE html><!--告诉浏览器使用什么规范,html超文本规范-->
<html lang="en"><!--表示使用的语言是en,英文;utf-8-->
<head>    <title>Document</title>
</head>
<body>身体
</body>
</html>

5.第一个小程序

第一个小程序，都是“Hello World”。

使用记事本写个网页，显露一把。

使用更为快捷的开发工具：EditPlus、HBuilderX、VSCode。

html:标记性的语言，这里面的元素，主要是标签。

VSCode离线插件：https://marketplace.visualstudio.com/vscode，进去输入需要的插件，点安装会打开VScode。

6.标签

6.1.格式和常用标签

标签的规范，必须通过尖括号括起来；成对出现；双标记标签和单标记标签；

标签关系：父子关系；兄弟关系；

6.2 HTML标签、Head标签、BODY标签

title:

6.3.meta

meta:标记信息；

charset:表示字符编码，utf-8;en;GBK;
name=“author”:作者
name=“Keywords”:关键字;一般是baidu、谷歌搜索的时候，利于搜索喂食；
name=“description”:描述上面这些对应的另外内容是content

直接使用content="内容"来写;也是搜索用；

6.4 H1–>h6及hr标签

H1标题最大，H6标题最小;

6.5 p、br、pre标签

6.6无序列表和有序列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

无序列表：没有顺序的列表，默认有个小圆点。

应用场景：一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。

<!DOCTYPE html>
<html>    <head><meta charset="utf-8"><meta name="author" content="张晨光"><meta name="keywords" content="HTML5的介绍，全球直播"><meta name="description" content="比尔盖茨，扎克伯格，马云，马化腾亲自主持"><title></title></head><body><!-- ul:是无序列表，默认是实心圆点;ul:un order listul的属性是type;属性是描述该标签干嘛;值：circle:空心圆square:实心正方形disc:实心圆，默认格式，不写也会有--><ul type="circle"><li>华为</li><li>三星</li><li>一加</li></ul><ul type="square"><li>华为</li><li>三星</li><li>一加</li></ul><ul type="disc"><li>华为</li><li>三星</li><li>一加</li></ul></body>
</html>

有序列表：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kko1FN0b-1672665963245)(E:\政通路\课堂笔记\S1\HTML5\assets\image-20210814113109751.png)]

场景：一般用于排序类型的列表，如试卷、问卷选项等

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>有序列表</title></head><body><!-- 有序列表：ol:order listtype: 默认数字值:1  后面1 2 3A  后面A B CI  后面I II III IVreversed="reversed" 倒序start:表示从哪个开始,用于数字;--><ol type="A"><li>冠军</li><li>亚军</li><li>季军</li><li>四军</li></ol></body>
</html>

6.7 字体标签

b、I、U、strong、em等标签。

<!-- font标签：属性：size：大小               face:字体样式color:颜色--><font size="1">学院开始进行篮球比赛</font><br><font color="red">学院开始进行篮球比赛</font><br><font face="楷体">学院开始进行篮球比赛</font>

6.8居中标签

center

班级:A135

6.9 图片标签

图片路径是重点，首先是找到图片，把图片放到和网页同一个文件夹，并且你要测试没有这个图片会出来叉号的效果.[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ptO5Z4b9-1672665963246)(E:\政通路\课堂笔记\S1\HTML5\assets\1567560186597.png)]

正确效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m1h1Kmys-1672665963247)(E:\政通路\课堂笔记\S1\HTML5\assets\1567560205426.png)]

title：当光标放上去的时候，会出来这个提示信息。

src：source来源

加上宽width

高 height;

格式：width/height=“数字 px” px:就是计算机或者手机，多少像素；

新的图片类型：bmp、png、jpg、gif、jfif、webp

WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买[On2 Technologies](https://baike.baidu.com/item/On2 Technologies)后发展出来，以BSD授权条款发布。

WebP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。2011年11月8日，Google开始让WebP支持无损压缩和透明色（alpha通道）的功能，而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45%的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28%的文件大小。

图片存储格式之一，由JPEG格式衍生而来，后缀为".jfif"。

JPEG本身只有描述如何将一个图像转换为字节的数据串流（streaming），但并没有说明这些字节如何在任何特定的储存媒体上被封存起来。一个由独立JPEG小组（Independent JPEG Group）所建立的额外标准，称为JFIF（JPEG File Interchange Format，JPEG档案交换格式），详细说明如何从一个JPEG串流，产出一个适合于电脑储存和传输（像是在因特网上）的档案。当有人称呼一个"JPEG档案"，一般而言他是意指一个JFIF档案，或有时候是一个Exif JPEG档案。然而，也有其他以JPEG为基础的档案格式，像是JNG。

JPEG/JFIF是最普遍在万维网（World Wide Web）上被用来储存和传输图片的格式。它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形，因为它的压缩方法用在这些图形的型态上，会得到不适当的结果（PNG和GIF格式通常是用来针对这种目的之图形；GIF每一像素只有8位元，并不很适合于用在彩色照片，PNG可以被用来无失真地储存照片，但是档案太大让它不适合在网页上放照片）。

路径问题：

<body><!-- 1.访问图片;src='en.jpg'2.src=./en.jpg; .:当前目录; ./：当前目录下;3.访问上级目录下的图片;当前目录：day01；../:    上级是html../shangji: html目录下的shangji问价夹
--><img src="en.jpg" width="300" height="200"><img src="./en.jpg"  width="302" height="201"><img src="img/2.png"  width="302" height="201"><img src="../shangjiimg/js.jpg"  width="302" height="201"><img src="../shangjiimg/js.jpg"  width="302" height="201">
</body>

6.10超链接

网站：有很多内容来组成，这些就是网页组成，信息孤岛。网页与网页之间、关联就是通过超链接，来实现。

<a href='网址'></a>

打开到新窗口: 属性target=“_blank”

连接到邮箱<a href=‘mailto:xx@yy.com’>联系我<a>

锚点案例

6.11 多媒体

了解多媒体包含的类型：音频、视频、动画、图片等

视频video

video,指定视频来源、是否播放。

浏览器格式	IE	Firefox	opera	Chrome	Safari
Ogg	不支持	3.5+	10.5+	5.0+	不支持
MPEG4	9.0+	不支持	不支持	5.0+	3.0+
WebM	不支持	4.0+	10.6+	6.0+	不支持

格式	文件	描述
AVI	.avi	AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
WMV	.wmv	Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG	.mpg.mpeg	MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
QuickTime	.mov	QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo	.rm.ram	RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash	.swf.flv	Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

<video controls><source src="video/video.webm" type="video/webm"/><source src="video/video.mp4" type="video/mp4"/>
</video>

<!-- 视频;播放不能播放；在谷歌浏览器要播放，需要设置muted；但是muted是静音播放；如果需要有声音，必须通过js来操作，放置声音。--><video src="./第九章-9.1.0-知识点概述.mp4" width="900" height="600" controls="controls" autoplay="autoplay" id="video" muted="muted"></video><button id="btn" onclick="play()">播放</button><script type="text/javascript">function play(){document.getElementById('video').muted=false;//如果设置非muted,不自动播放，则这里换成//document.getElementById('video').play();}</script>

音频audio

声音格式

MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的，你可以选择mp3格式。

<audio controls><source src="music/music.mp3" type="audio/mpeg"/><source src="music/music.ogg" type="audio/ogg"/>你的浏览器不支持audio元素
</audio>

格式	文件	描述
MIDI	.mid.midi	MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。点击这里播放 The Beatles。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio	.rm.ram	RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
Wave	.wav	Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
WMA	.wma	WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3	.mp3.mpga	MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

6.12 特殊符号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7NQB8qjd-1672665963248)(asseits/image-20210831220257983.png)]

6.13 块元素和行内元素

块元素
无论内容多少，该元素独占一行（p、h1-h6…li ul）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)

7.重点

图片的插入

超链接的使用

8.难点

需要按照固定的步骤，把文件夹、图片、网页放到固定的目录。

9.作业

1.制作宋词《满江红》；

2.制作小米超链接；

3.音乐排行榜

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GcywpL3d-1672665963249)(asseits/image-20210901195307975.png)]

第二章表格和表单

知识点：

1.表格

2.表单

重点：

1.表格

web1.0当时比较火的标签元素，行、列结构。

excel,电子表格。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CblzUlDH-1672665963250)(E:\政通路\课堂笔记\S1\HTML5\assets\image-20210814151752725.png)]

默认格式：

<table><thead><tr><th>...</th></tr></thead><tfoot><tr><td></td></tr></tfoot><tbody><tr>...</tr></tbody>
</table>

table里面的居中：指的是table在网页中的居中

要设置字体的居中，tr td

去除间隙：

cellspacing=“0”,cell 单元格，spacing,单元格;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xzLUIFlJ-1672665963251)(E:\政通路\课堂笔记\S1\HTML5\assets\image-20210811151710899.png)]

cellpadding:内部填充;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nak5Z7LL-1672665963251)(E:\政通路\课堂笔记\S1\HTML5\assets\image-20210811151607805.png)]

跨越多列：colspan

跨越多行：rowspan

案例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5GMIl2xf-1672665963252)(E:\政通路\课堂笔记\S1\HTML5\assets\image-20210814154321757.png)]


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>作业一</title><style>a{text-decoration: none;}</style>
</head>
<body><table><tr><td width="50"><a href="#">游戏</a></td><td width="120">一刀9999亿</td><td width="120">冰雪私服</td><td width="120"><font color="red">0元充值私服</font></td><td width="120">超变999999亿</td><td width="120"><font color="red">页游前十名</font></td><td width="120">超变单职业</td><td width="120"><font color="#888888" size="1">换一换</font></td></tr><tr><td><a href="#">推荐</a></td><td>Max.超变版</td><td>今日一线头条</td><td>高爆打金服</td><td>爱奇艺</td><td>爱淘宝</td><td>1688评价进货</td><td><font color="#888888" size="1">换一换</font></td></tr><tr><td><a href="#">资讯</a></td><td>环球军事新闻</td><td>中华网军事</td><td>重大军事新闻</td><td>紧急新军事</td><td>今日新闻头条</td><td>特大突发军事</td><td><font color="#888888" size="1">换一换</font></td></tr></table>
</body>
</html>

2.定义列表

标签用于创建一个定义列表（definition list）。 <dl>标签是与<dt>和<dd>联合使用的。<dt>用于创建定义列表中的一项（术语），<dd>用于为定义列表中的项创建描述。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ejGm71gX-1672665963253)(E:\政通路\课堂笔记\S1\HTML5\assets\image-20210816092104098.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mH4rpb4x-1672665963254)(asseits/image-20210901174127959.png)]

3.表单

表单：同学们去饭店吃饭，需要点菜，饭店，菜单。美团：下单–处理做饭，送餐。

应用场景：网页、小程序当中，用处收集信息、注册、登录、问卷调查等等。

内容输入完毕，提交到服务器（小米服务器）

3.1 语法格式

<form  method="post" action="result.html"><p>  名字：<input name="name" type="text" >  </p><p>  密码：<input name="pass" type="password" >  </p><p><input type="submit" name="Button" value="提交"/><input type="reset" name="Reset" value="重填“/> </p>
</form>

3.2表单元素

<input  type="text"  name="fname" value="text"/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rf5bo6Xv-1672665963255)(asseits/image-20210902000302009.png)]

3.2.1 文本框

3.2.2 密码框

3.2.3 单选按钮

3.2.4 复选框

3.2.5 列表框

3.2.6按钮

3.2.7多行文本框

3.2.8文件域

3.2.9邮箱

3.2.10网址

3.2.11数字

3.2.12滑块

3.2.13搜索框

其他表单元素：

单选按钮：intput type=‘radio’,name一样的时候，才能够实现单选;

复选框：input type=‘checkbox’ ,name一样的才能够取值到一起。

下拉框：select标签，子标签是option

多行文本框：textarea,也称为文本域

上传:file

注册效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yt2Jzkpo-1672665963255)(E:\政通路\课堂笔记\S1\HTML5\assets\1567743949142.png)]

4.高级表单元素

隐藏域

只读

禁用

表单元素的标注label for=‘id’ id为某个表单元素值

表单验证

优点：

1.降低服务器压力；2.保证安全性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6B7qt7i1-1672665963257)(asseits/image-20210902231140900.png)]

初级验证：

属性：required和pattern，其中pattern,指定要验证的表达式.

昵称：pattern=“[-\w\u4E00-\u9FA5]{4,10}”
密码：pattern=“[\dA-Za-z]{6,16}”
手机号码：pattern=“1[3578]\d{9}”
年龄：pattern=“\d|[1-9]\d|1[0-2]\d”

6.H5的结构元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tru3N8Su-1672665963257)(asseits/image-20210902231546660.png)]

5.作业

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujXsZ0xT-1672665963258)(asseits/image-20210901205005533.png)]

首先是一个表格，边框为1，标题为 “ 购物车 ”
其次分为标题（th）和内容（tbody）
标题两行，内容三行，一共是五行四列

其中包含行合并（colspan）和列合并（rowspan）

<div align="center">
<p>购物车</p>
<table border="1"><tr><th rowspan="2">名称</th><th colspan="2">2016-11-22</th><th rowspan="2">小计</th></tr><tr><th>重量</th><th>单价</th></tr><tbody><tr><td>苹果</td><td>3公斤</td><td>5元/公斤</td><td>15元</td></tr><tr><td>香蕉</td><td>2公斤</td><td>6元/公斤</td><td>12元</td></tr><tr><td colspan="3">总价</td><td>27元</td></tr></tbody>
</table>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K7ecO39q-1672665963259)(asseits/image-20210910122753969.png)]

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 按照从上到下的顺序，依次进行即可; --><img src="img/163logo.gif" alt="" id="top"><a href="#">免费邮</a> <a href="#">企业邮</a><a href="#">VIP邮箱</a> <a href="#">帮助</a><br><img src="img/imap.jpg" alt=""><ul><li>63/126/yeah三大免费邮箱均默认开放</li><li>全面支持iPhone/iPad及Android等系统</li><li>客户端、手机与网页，实现发送、阅读邮件</li></ul><br><br><br><br><br><br><br><br><br><br><br><br><a href="#top">立即同步普通登录手机号登录</a><br><form action="#" method="GET"><label for="user">用户</label><input type="text" id="user" name="email">@163.com <br><label for="pwd">密码</label><input type="password" name="pwd"><br><label for="ver">版本</label><select name="" id="ver"><option value="默认">默认</option><option value="2020">2020</option><option value="2019">2019</option><option value="2019">2018</option></select><br><input type="checkbox">自动登录<input type="checkbox" checked>SSL<br /><input type="submit" value="登录" /><input type="button" value="注册" /></form><img src="img/netease_logo.gif" alt=""><a href="#">关于网易</a><a href="#">官方博客</a><a href="#">客户服务</a><a href="#">隐私政策</a><a href="#">版权所有&copy;2015-2021</a>
</body>
</html>

第三章：CSS3 样式基础

知识点：

1.CSS概念

2.CSS语法格式

3.CSS的使用

4.三类范围

为什么使用CSS

化妆前：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FxH5cSxC-1672665963260)(asseits/image-20210908192722654.png)]

化妆后：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFoUnyrc-1672665963261)(asseits/image-20210908192736294.png)]

HTML语法，在网页上显示数据，第一章p br b font 第二章 table form标签。

网页增加效果，就是样式，样式相当于女孩儿化妆。

1.CSS概念

层叠样式表（Cascading Style Sheet）

html是骨架，是内容。css是衣服，起到装饰的作用，花花绿绿的。

优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

2.语法格式

语法格式：

标签|ID|类选择器{属性：值; … n;}

范围分三类

行内样式、页内样式、外部样式这三类。

2.1行内样式

描眉：

<font color='red'><p>静夜思</font></font>
<p style="font-style: italic;font-size: 24px;">内容<p

style=“属性:值;属性2:值2;属性3:值3;”

这种风格，仍然不太友好，就是HTML5标签里面包含了样式，我们的目的是让二者尽量分离,分离的好处，就是格式更为清晰。

2.2页内样式

脸上涂粉;

页内样式的范围，比行内样式要大，在整个网页内部可以使用。

<style>p{font-size:18px;color:green;}
</style>

设计了一个行内样式，写了一个p标签的样式，好处是只要是p标签，都变色了。坏处呢？都变了。

h1{text-align: center;}

超链接样式+导航效果：

<!--1.网页格式--><table id="daohang"><tr><td><a href="复习.html">二次元</a></td><td><a href="index.html">脑残</a></td><td><a href="">科幻</a></td><td><a href="">搞笑</a></td><td><a href="">鬼畜</a></td></tr></table>

样式：

<!--2.样式;border-collapse: collapse;去除间隙，出来一条线;text-decoration: none;去除a标签的下划线 ；a:hover:悬停效果;--><style>table{width:100%;border:1px solid #f00;border-collapse: collapse;}tr{text-align: center;}td{border:1px solid #f00;height: 50px;}a{text-decoration: none;font-size: 18px;}a:hover{color: red;}</style>

2.3 外部样式

比如: 化妆；行内样式，像描眉一样，非常的细腻；

页内样式：像化妆的时候，向脸部图白色；

外部样式：相当于变脸的，抖音看下，男的可以变女；买个皮；faceU，APP

外部样式也可以相当于婚纱影楼的婚纱等

多个网页可以使用同一个外部样式；

3.选择器类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OMM7Y5Rn-1672665963261)(asseits/image-20210908194054949.png)]

1.标签选择器

标签{ 属性:值;属性2:值2;属性3:值3}

命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于id命名
id选择器不可重复独一无二

2.类选择器

类样式选择：就是给标签分类；

在设计CSS样式;text-align:center:文本居中;right:文本居右.;类样式选择器，定义之后，可以在下面多个地方进行

调用。定义的语法格式：

.类样式名{属性：值；属性2：属性2：值2；属性3：值3}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NGiVcoaL-1672665963262)(E:\政通路\课堂笔记\S1\HTML5\assets\1567994953288.png)]

调用的时候：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUdBdW5l-1672665963263)(E:\政通路\课堂笔记\S1\HTML5\assets\1567995010554.png)]

class=“类样式名”

3.ID选择器

ID：编号，学号、考号，都是唯一的。网页当中，我们一般用唯一标识的一个标签，使用ID选择器，用来和其他标签做区分，一般使用ID选择器的都是大范围的标签。

定义ID选择器使用#选择器名 {属性：值；属性2：值2；属性3：值3}

使用，在html里面，标签后面加id=

命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于class命名
一个标签可用多个类名共性样式可以巧用

作业：大家可以使用截图的方式，来实现一个简单的网站页面.

4.通配符选择器

通配符选择器是用来选择所有元素。比如下面将页面上所有元素的 margin 和 padding 都设置为 0。

* {``marigin: ``0``; 外边距，元素与元素``padding``: ``0``;
}

总结一下：

如果设置块大范围，一般使用ID选择器，它是唯一的；

如果设置多个类别的时候，就使用类别选择器（类样式选择器）

如果网页中有很多同类的标签有共同的样式，可以使用标签选择器。

4.选择器使用范围

行内样式：眼影;行内样式是style属性

页内样式：自己新衣服;页内样式，是style标签;也可以多次使用，被当前页面内的多个标签多次使用。

外部样式：租用婚纱;外部样式没有了style

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UJ2TllyR-1672665963264)(E:\政通路\课堂笔记\S1\HTML5\assets\1568002542568.png)]

<link rel="stylesheet"  href="css/wai.css" type="text/css"/>
//方法二
<style>@import url(./waibu.css);</style>

外部样式的好处是，定义一次，可以被多个网页使用。

5.选择器的优先级*

外部<页内<行内，距离最近的样式优先使用

id选择器>class选择器>标签选择器

优先级的提升

值后+！important（仅可直接选中）：使得优先级最大

6.字体样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JFsqpeSb-1672665963265)(assets\image-20210817094325827.png)]

修改字体时，只要电脑内有的字体都可以进行修改

怎么看电脑内装的字体，计算机，c盘，Windows，fonts,就可以看到我们电脑上装的所有字体

7.文本样式

letter-spacing:字母间距

color颜色取值的格式

1、直接写颜色也要复合写法 yellowgreen 黄绿色

2、16进制

3、RGB 红绿蓝三原色

颜色不需要记，ui会给你的
文字对齐方式

text-align: center 居中 right 右对齐 left 左对齐

对齐参照点不同，对齐的方式也不同，以父级元素为标准，不设宽度，默认为浏览器宽度。暂时有这个概念text-indent 首行缩进

单位可以是px，像素，也可以是em，即缩几个字体，根据全部字体的大小来变化，首行缩进用em比较合适

开启控制台进行调整
line-height：设置行高，设置文字的垂直居中 line-height，和父元素的高度保持一致，即垂直居中.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XD5T6NTF-1672665963266)(asseits/image-20210915171300794.png)]
设置文本装饰

text-decoration: line—throw 中划线

underline 下划线

overline 上划线

8.伪类

概念：

格式，选择器后面加冒号

ul>li:first-child、last-child等伪类。

:link 未访问过的颜色;

:visited 已经访问过的颜色;

:hover 鼠标悬停到上面的时候颜色;

:active 鼠标点的时候颜色;

a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！

在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。这样，浏览器在显示元素时，才会从特殊到一般、逐级向上验证条件，才会使你的每一个CSS语句都起到效果。当然，如果故意打乱顺序，也会造成一些特殊的效果。比如，可以为链接制造出下划线颜色与文字颜色的差异。

其实这个CSS问题早已有高人提出啦，还是个老外呢。他给总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。未访问/已访问/悬停/点击

再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .

最后经验补充：

1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；

2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

所以说，a:hover定义一定要放在a:link、a:visited的后面！
最常用的是啥？？？

9.鼠标

鼠标指针变化

直接在style下面写属性cursor：值；

其中的值分别代表：

pointer:指针变小手

move: 移动

wait: 等待（不要用）

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

10.作业

使用CSS类来制作京东导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJf3gqE3-1672665963267)(asseits/jd1.png)]

第四章：CSS3深入选择器

知识点：

1.并集选择器（多个）

2.交集选择器（组合选择器）

3.子代选择器

4.后代选择器

5.属性选择器

6.结构伪类选择器

7.伪元素选择器

8.案例作业

1.并集选择器

语法：

选择器1，选择器2，选择器n{共同的属性1：值1;…n;}

含义：

将选择器1，选择器2，选择器n，共同的属性，一次性，统一设置。

优点：

可以节省我们的代码，提高工作效率。

h1,h2,p{font-size: 18px;color: red;}
当多个标签的样式一样的时候，可以使用“，”隔开，这样这些标签定义的样式，就一模一样。

2.交集选择器

既要符合选择器1的特点，也要符合选择器2的特点；

优点：

可以精确定位到某个网页元素。

精确定位：

如何写这个标签；

选择器1选择器2{属性：值;}

p.yuebing{color:blueviolet;font-weight: bolder;}
这种定义，表示：类样式是yuebing的p标签。它既符合p的样式规则，又符合yuebing的样式规则。
font-weight:课设置加粗或细；span:小区域的标签，比p段落范围小。

3.子代选择器

元素：父子关系；兄弟关系；

父元素下的子元素，如何进行修饰，进行查找定位.

格式：

父元素>子元素{样式声明；}

子代选择器：只包含直接儿子层级

<ul id="father"><li>唐诗<ul><li>李白</li><li>杜甫</li></ul></li><li>宋词</li><li>元曲</li>ul#father>li{border:1px solid #f00;        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BBWR7TuL-1672665963268)(asseits/image-20220710120711777.png)]

4.后代选择器

祖代元素后代元素的关系;

语法：

祖代元素后代元素{样式声明;}

注意：

1.祖代元素和后代元素之间是有空格的；

2.后代元素包括子级元素，孙子级元素，重孙子，玄孙子…

<ul id="father"><li>唐诗<ul><li>李白</li><li>杜甫</li></ul></li><li>宋词</li><li>元曲</li>ul#father  li{border:1px solid #f00;        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MpwsqclF-1672665963268)(asseits/image-20220710120651295.png)]

5.兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（。

选择器+标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p { background-color: antiquewhite;     }/* 类别选择器+标签选择器兄弟：他们要相邻；+：表示相邻下一个兄弟;~: 表示后面所有的兄弟；*//* .zhugong+p {background-color: aquamarine;} */.zhugong~.xiongdi {background-color: blue;}</style>
</head>
<body><div><p class="xiongdi">关羽</p><p class="zhugong">刘备</p><p class="xiongdi">张飞</p><p class="xiongdi">吕布</p></div>
</body></html>

6.属性选择器

属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助类选择器或者 id选择器。

语法：

E:元素；Element; att:表示attribute 属性;

E [ att ] 匹配具有 att 属性的 E 元素例如：input [ value ]

E [ att = ‘val’ ] 匹配具有 att 属性且属性值等于 val 的 E元素

E [ att ~= ‘val’ ] 匹配具有 att 属性且属性值包含 val词的 E元素

E [ att ^= ‘val’ ] 匹配具有 att 属性且属性值以 val 开头的 E元素

E [ att $= ‘val’ ] 匹配具有 att 属性且属性值以 val 结尾的 E元素

E [ att *= ‘val’ ] 匹配具有 att 属性且属性值包含 val 的 E元素

注意：^以xx开头 href ^=‘www’

$以xx结尾

*包含xx

为了更好的演示：

<div class="demo clearfix"><a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a><a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a><a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a><a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a><a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a><a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a><a href="" class="links item" title="open the website" lang="cn">7</a><a href="" class="links item" title="close the website" lang="en-zh">8</a><a href="" class="links item" title="http://www.jd.com">9</a><a href="" class="links item last" id="last">10</a>
</div>

.demo {width: 300px;border: 1px solid #ccc;padding: 10px;
}.demo a {float: left;display: block;height: 20px;line-height: 20px;width: 20px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;text-decoration: none;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KDLlza8C-1672665963269)(asseits/image-20210910210746883.png)]

7.结构伪类选择器

1、同级别（不区分类型）

父元素 E:first-child 父元素中的第一个子元素 E

父元素 E:last-child 父元素中的最后一个子元素 E

父元素 E:nth-child( n ) 父元素中的第 N 个子元素 E

注意：

ul :first-child{ color:pink; } // 选择 ul 下的第一个子元素（第一个子元素可以是 div，p，span任何子元素）

ul li:first-child{ color: pink; } // 选择 ul 下的第一个元素名是 li 的子元素

nth-child( n ) 注意点：（n 可以是数字，关键字和公式）

数字：选择第 n 个子元素，里面数字从 1 开始

关键字： even 偶数，odd 奇数

ul li:nth-child( even ) // 选择 ul 中所有偶数行的 li 子元素

公式：常见公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素或者超出了元素的个数会被忽略）

ul li:nth-child( n ) // 从 0 开始每次加1 往后计算，相当于选择了所有的孩子这里面必须是 n 不能是其他字母

偶数：2n 奇数：2n+1 5的倍数：5n 从第5个开始（包含第5个）到最后：n+5 前5 个（包含第5 个）：-n + 5

2、同类型（区分类型）

E:first-of-type：指定类型 E 的第一个

E:last-of-type：指定类型 E 的最后一个

E:nth-of-type( n )：指定类型 E 的第 n 个

区别：（两种相反的查找模式）

1. nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配

nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E 类型，然后再根据 E 找第 n 个孩子

8.其他伪类选择器

选择器	描述
E:enabled	选择匹配E的所有可用UI元素。
E:disabled	选择匹配E的所有不可用UI元素。
E:checked	选择匹配E的所有可用UI元素。
:empty	选中既没文本也无子元素（空格都不能有）的指定元素
:not(x)	找到不符合当前选择器的元素

9.伪元素选择器

::first-line 选择元素的第一行

::first-letter

::selection

用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。

::before和::after

这两个主要用来给元素的前面或后面插入内容。

（1）这个最常用的便是是清除浮动了，无需再添加一个空的 div 并应用 clear:both; 样式，只需如下样式即可在元素尾部自动清除浮动。

(2)与"content"配合使用，可以实现许多特效。比如下面样式，当鼠标移动到链接上方，链接左右会出现悬浮方括号。

10.选择器的覆盖和继承

覆盖特性：

样式里面定义多个同样的标签，后面会覆盖的前面的定义。“就近原则”

继承特性：

1.只能把自己的样式继承给后代节点，但是不影响自己的父节点和兄弟节点。优点是有利于我们的开发

2.以下属性能被继承：
color, text-, font- , line-.
不能继承的属性：
有关盒子模型的属性，定位的属性，背景属性。

11.选择器的权重

注：一般只有选择器直接选中才会用到权重计算

!importent ------------infinity 无限大

权重计算规则

第一等：代表行内样式，如: style=””，权值为1000。或8
第二等：代表ID选择器，如：#content，权值为0100。称为100,有的称为4
第三等：代表类选择器，伪类和属性选择器，如.content，权值为0010。或2
第四等：代表标签选择器和伪元素选择器（:

HTML5和CSS3 WEB技术开发相关推荐
1. 云课堂HTML5作业,智慧职教云课堂APPHTML5+CSS3 Web前端开发技术答案
  智慧职教云课堂APPHTML5+CSS3 Web前端开发技术答案更多相关问题 [单选题]在Windows 7中,"剪切"命令的组合快捷键是 [单选题]仲裁裁决书自( )之日起发生 ...
2. html5web前段页面,HTML5+CSS3 Web前端开发
  HTML5+CSS3 Web前端开发编辑锁定讨论上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪.ISBN为97873024 ...
3. Html css是前端吗,HTML5 CSS3 Web前端开发
  HTML5 CSS3 Web前端开发语音编辑锁定讨论上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪[1] . 书中的图片 ...
4. 视频教程-HTML5和CSS3移动端开发全套教程-HTML5/CSS
  HTML5和CSS3移动端开发全套教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强, ...
5. 《HTML5和JavaScript Web应用开发》——第 2 章　移动Web 2.1移动优先
  本节书摘来自异步社区<HTML5和JavaScript Web应用开发>一书中的第2章,第2.1节,作者:[美]Wesley Hales著,更多章节内容可以访问云栖社区"异步社区 ...
6. 《HTML5和JavaScript Web应用开发》——第 1 章　客户端架构 1.1了解HTML5
  本节书摘来自异步社区<HTML5和JavaScript Web应用开发>一书中的第1章,第1.1节,作者:[美]Wesley Hales著,更多章节内容可以访问云栖社区"异步社区 ...
7. 极客技术专题【009期】：web技术开发小技巧
  为什么80%的码农都做不了架构师?>>> 日期:2013-8-26 来源:GBin1.com 技术专题:Seajs介绍 (分享人:choaklin) 专题演讲稿:SeaJS的 ...
8. 镇江php开发,myweb 我的家乡镇江，web技术开发的网站，三层架构，5大模块设计 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
  文件名称: myweb下载收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 8226 KB 上传时间: 2015-04-11 下载次数: 0 提供者: min 详细 ...
9. Python Web技术开发软件安装
  关于博主努力与运动兼备-~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步! 微信公众号: 啃饼思录 QQ: 2810706745(i思录) 今天,博主正好有空,看到网上那么多求助 ...
最新文章
热门文章

HTML5和CSS3 WEB技术开发

HTML5和CSS3 WEB技术开发

课程目标：

第一章 HTML5基础

1.HTML

2.WWW

2.1 www来源

2.2 W3C

2.3W3C标准

3.协议

3.1http:

3.2 https:

4.HTML的基本结构

5.第一个小程序

6.标签

6.1.格式和常用标签

6.2 HTML标签、Head标签、BODY标签

6.3.meta

6.4 H1–>h6及hr标签

6.5 p、br、pre标签

6.6无序列表和有序列表

6.7 字体标签

6.8居中标签

6.9 图片标签

6.10超链接

6.11 多媒体

音频audio

6.12 特殊符号

6.13 块元素和行内元素

7.重点

8.难点

9.作业

第二章 表格和表单

知识点：

重点：

1.表格

2.定义列表

3.表单

3.1 语法格式

3.2表单元素

4.高级表单元素

6.H5的结构元素

5.作业

第三章：CSS3 样式基础

知识点：

为什么使用CSS

1.CSS概念

优势

2.语法格式

2.1行内样式

2.2页内样式

2.3 外部样式

3.选择器类型

1.标签选择器

2.类选择器

3.ID选择器

4.通配符选择器

4.选择器使用范围

5.选择器的优先级*

6.字体样式

7.文本样式

8.伪类

9.鼠标

10.作业

第四章：CSS3深入选择器

知识点：

1.并集选择器

2.交集选择器

3.子代选择器

4.后代选择器

5.兄弟选择器

6.属性选择器

7.结构伪类选择器

1、同级别（不区分类型）

2、同类型（区分类型）

8.其他伪类选择器

9.伪元素选择器

10.选择器的覆盖和继承

11.选择器的权重

HTML5和CSS3 WEB技术开发相关推荐

第二章表格和表单