学习目标

学习完本课程后，能够：

使用HTML进行网页布局
使用CSS3美化网页
制作精美的商业网站

一、HTML5基础

1.1 HTML简介

什么是HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

中文名：超文本标记语言	阅读方式：网页浏览器
外文名： Hyper Text Markup Language	外语缩写： HTML
类型：标记语言	文件扩展名： html 或 htm

HTML发展史

HTML历史上有如下版本：

HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0：1995年1 1月作为RFC1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2：1997年1月14日，W3C推荐标准。
HTML4.0：1997年12月18日，W3C推荐标准。
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

HTML5优势

世界知名浏览器厂商对HTML5的支持（微软，Google，苹果）
市场的需求
跨平台

W3C标准

W3C
     World Wide Web Consortium（万维网联盟）
    成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构
    http://www.w3.org/
    http://www.chinaw3c.org/
W3C标准包括
     结构化标准语言（HTML 、XML）
     表现标准语言（CSS3）
     行为标准（DOM 、ECMAScript）

1.2 HTML基本结构

入门案例

<!doctype html>
<html><head><title>hello</title><meta charset="UTF-8" /></head><body>hello html ~</body>
</html>

<title>标签

<meta>标签

注：gb2312 包含全部中文字符
utf-8 包含全世界所有国家需要用到的字符
页面编码应与页面文件保存时的编码一致

1.3 网页基本标签

标题标签

<!doctype html>
<html><head><title>基本标签</title><meta charset="UTF-8" /></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body>
</html>

段落标签

<!doctype html>
<html><head><title>基本标签</title><meta charset="UTF-8" /></head><body><h1>北京欢迎你</h1><p>北京欢迎你，有梦想谁都了不起</p><p>有勇气就会有奇迹</p></body>
</html>

换行标签

<!doctype html>
<html><head><title>基本标签</title><meta charset="UTF-8" /></head><body><h1>北京欢迎你</h1><p>北京欢迎你，有梦想谁都了不起 <br />有勇气就会有奇迹</p></body>
</html>

水平线标签

<!doctype html>
<html><head><title>基本标签</title><meta charset="UTF-8" /></head><body><h1>北京欢迎你</h1><hr /><p>北京欢迎你，有梦想谁都了不起!<br />有勇气就会有奇迹。</p></body>
</html>

字体样式标签

加粗：<strong>…</strong> 或 <b>…</b>
斜体：<em>…</em> 或 <i>…</i>

<!doctype html>
<html><head><title>基本标签</title><meta charset="UTF-8" /></head><body><strong>霍世元简介</strong><p><em>年龄: </em>24<br /><em>性别: </em>男<br /></p></body>
</html>

注释和特殊符号

1.4 插入图像标签

常见的图像格式：JPG ,GIF , PNG , BMP

<!doctype html>
<html><head><title>图像标签</title><meta charset="UTF-8" /></head><body><!-- img 图像标签src 图像地址； alt 图像的替代文字； title 鼠标悬停提示文字width 图像宽度； height 图像高度 --><img src="image/hetao.jpg" alt="text" title="哈哈哈" width="300px" height="350px" /><p>好吃不贵的核桃</p><p>10元3斤</p></body>
</html>

练习

练习1：使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作自我介绍。

1.5 超链接标签

超链接基本用法

_blank：新建空白页打开
_self：默认样式，更改当前页面的访问路径，不会打开新的页面

超链接应用场合

页面间连接

<!doctype html>
<html><head><title>页面间链接</title><meta charset="UTF-8" /></head><body><a href="demo03.html" target="_blank">链接到demo03图像标签案例</a><br/><a href="demo04.html" target="_self"><img src="image/hetao.jpg" alt="核桃图片" title="买核桃吗？走过路过不要错过" /></a></body>
</html>

锚链接

<!doctype html>
<html>
<head><title>锚链接</title><meta charset="UTF-8" />
</head>
<body><a name="_top">HTML从入门到精通</a><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><h6>你好HTML</h6><a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 --><br><br><br><br>
</body>
</html>

外部链接

<!doctype html>
<html><head><title>外部链接</title><meta charset="UTF-8" /></head><body><a href="http://www.baidu.com" target="_blank">百度</a><a href="http://www.csdn.com" target="_self">CSDN</a><a href="mailto:1691655063@qq.com">点击联系我</a></body>
</html>

1.6 行内元素和块元素的特性

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

<!-- 行内元素和块元素 -->
<!doctype html>
<html><head><title>行内元素和块元素</title><meta charset="UTF-8" /></head><body><p>我是P元素</p><h1>我是标题1</h1><a href="#">我是超链接a元素</a><strong>我是strong元素--加粗</strong><em>我是em元素--斜体</em></body>
</html>

练习

练习2：超链接

二、列表、表格与媒体元素

2.1 列表

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

无序列表

<!doctype html>
<html><head><title>列表</title><meta charset="UTF-8" /></head><body><!-- ul：声明无序列表   li：声明列表项   type : 符号样式disc：默认实心圆        circle：空心圆square： 方块          none：没有--><ul type="disc"><li>山西省</li><li>河北省</li><li>山东省</li><li>陕西省</li><li>......</li></ul></body>
</html>

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

有序列表

<!doctype html>
<html><head><title>列表</title><meta charset="UTF-8" /></head><body><!-- ol：声明有序列表   li：声明列表项 type="" 1(默认数字排序)  a(小写字母排序)  A(大写字母排序)start=""  列表项排序起始值 属性值只能为数字--><ol type="1" start="1"><li>太原市</li><li>长治市</li><li>晋城市</li><li>运城市</li><li>......</li></ol></body>
</html>

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

定义列表

<!doctype html>
<html><head><title>列表</title><meta charset="UTF-8" /></head><body><!-- dl ：声明定义列表 dt ：声明列表项  dd ：声明列表项内容 --><dl><dt>山西省</dt><dd>太原市</dd><dd>长治市</dd><dd>晋城市</dd><dd>......</dd><dt>河北省</dt><dd>石家庄市</dd><dd>邢台市</dd><dd>邯郸市</dd><dd>......</dd></dl></body>
</html>

一般用于一个标题下有一个或多个列表项的情况

小结

练习

练习1：热门活动
练习2：制作音乐排行榜

2.2 表格

表格基本使用方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格</title></head><body><!--table表格标签 tr 表格里的行td 表格里的列 --><table border="1px"><tr><td> 11 </td><td> 12 </td><td> 13 </td></tr><tr><td> 21 </td><td> 22 </td><td> 23 </td></tr><tr><td> 31 </td><td> 32 </td><td> 33 </td></tr></table></body>
</html>

跨行、跨列

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格</title></head><body><table border="1px"><tr><td colspan="2">11</td> <!-- colspan是列合并,合并2列--><td>13</td></tr><tr><td>21</td><td>22</td><td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 --></tr><tr><td>31</td><td>32</td></tr></table></body>
</html>

练习

练习3：学生成绩表

2.3 媒体元素

视频元素

<!doctype html>
<html><head><title>列表</title><meta charset="UTF-8" /></head><body><!-- video 视频元素标签  src 视频文件路径  controls 播放、暂停和音量控件 autoplay 自动播放属性 --><video src="video/html.mp4" controls></video></body>
</html>

音频元素

<!doctype html>
<html><head><title>音频</title><meta charset="UTF-8" /></head><body><!-- audio 音频元素标签  src 音频文件路径  controls 播放、暂停和音量控件autoplay 自动播放属性 --><audio src="video/music.mp3" controls></audio></body>
</html>

loop属性可以实现视频的循环播放

2.4 结构元素

页面结构

结构元素

<!doctype html>
<html><head><title>布局</title><meta charset="UTF-8" /><style>header,section,footer {height: 200px;border: 1px solid red;}</style></head><body><header><h2>网页头部</h2></header><section><h2>网页主体部分</h2></section><footer><h2>网页底部</h2></footer></body>
</html>

2.5 内联框架的使用

iframe用法

<!doctype html>
<html><head><title>iframe</title><meta charset="UTF-8" /></head><body><!-- iframe 内联框架src 引用页面地址  name 框架标识名 --><iframe src="demo04.html" name="mainFrame"></iframe></body>
</html>

设置src的属性值为 http://www.bdqn.cn 在这个页面中也可以打开一个线上的网页

<iframe>属性实现页面间的相互跳转

<!doctype html>
<html><head><title>iframe</title><meta charset="UTF-8" /></head><body><!-- target 目标窗口属性  希望显示的框架窗口名 --><a href="demo04.html" target="mainFrame">下边显示demo04页面</a> <br /><a href="demo03.html" target="mainFrame">下边显示demo03页面</a> <br /><a href="demo02.html" target="mainFrame">下边显示demo02页面</a> <br /><!-- name 框架标识名 --><iframe src="demo01.html" name="mainFrame"></iframe></body>
</html>

三、表单（重点）

3.1 常用的表单元素

案例1

表单基本结构

<!doctype html>
<html><head><title>表单</title><meta charset="UTF-8" /></head><body><!-- form 表单标签method 提交方式 规定如何发送数据 get(数据都在地址栏里 不安全) post(不显示数据 安全) action 表单提交的位置，可以是网站，也可以是一个请求处理地址--><form method="get" action="#"><!-- input 输入框标签    name 元素名称type 元素类型       value 元素初始值-->名字：<input name="name" type="text" value="霍" /> <br />密码：<input name="pass" type="password"> <br /><input type="submit" name="Button" value="提交" /><input type="reset" name="Reset" value="重填" /> <br /></form></body>
</html>

input 常用属性说明

案例2

常用属性与属性值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form表单</title></head><body><form method="post" action="#"><h3>注册表单</h3><!-- size 输入框宽度  maxlength 输入最大字符数 -->用户名：<input type="text" name="user" size="8" maxlength="8" /> <br />密码：<input type="password" name="pwd" /> <br /><!-- 多选框  name必须配 ,提交的值就是1 2 3 -->爱好：<input type="checkbox" name="like" value="1" />篮球<input type="checkbox" name="like" value="2" />足球<input type="checkbox" name="like" value="3" checked />排球 <br /><!-- checked 用在单选和多选框中 选中当前选项 -->性别：<!-- 单选框  不配name属性,性别是多选!!  sex属性的值按照1 2 提交--><input type="radio" name="sex" value="1" checked />男<input type="radio" name="sex" value="2" />女 <br /><!-- select 列表框  option 列表选项 selected 默认选中项 -->城市:<select name="city"><option value="1">北京</option><option value="2" selected>上海</option></select> <br /><!-- 文本域 cols 显示列数 rows 显示行数-->自我描述：<textarea name="text" cols="20" rows="3">文本内容</textarea> <br /><!-- 文件域 -->头像:<input type="file" name="path" /> <br /><!-- 提交按钮  按照form标签action属性值进行提交 --><input type="submit" name="butSubmit" value="提交" /><!-- 清空当前表单已填信息  恢复默认 --><input type="reset" name="butReset" value="重填" /><!-- 普通按钮 --><input type="button" name="butButton" value="按钮" /> <br /><!-- 图片按钮 --><input type="image" src="image/login.gif" /> <br /></form></body>
</html>

案例3

输入框格式校验

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form表单</title></head><body><form method="get" action="#"><!-- 邮箱 自动验证email地址格式是否正确 -->邮箱：<input type="email" name="email" /> <br /><!-- 验证网址格式 -->输入网址：<input type="url" name="userUrl" /> <br /><!-- min 允许的最小值   max 允许的最大值   step 合法的数字间隔 -->输入数字：<input type="number" name="num" min="0" max="100" step="10"> <br /><!-- type属性值：number(数字)  range(滑块) -->输入数字：<input type="range" name="num" min="0" max="100" step="10"> <br /><!-- 搜索框 -->输入关键词：<input type="search" name="sousou" /> <br /><input type="submit" value="提交" /></form></body>
</html>

练习

练习1：注册表单

3.2 表单的高级应用

案例4

隐藏域；只读；禁用相关属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form表单</title></head><body><form method="get"><!-- type="hidden"  隐藏域 --><input type="hidden" value="666" name="userid" /> <br /><!-- readonly 只读文本框 --><input name="name" type="text" value="张三" readonly /> <br /><!--  disabled 禁用 --><input type="button" disabled value="保存" /> <br /><input type="submit" value="提交" /></form></body>
</html>

案例5

表单元素的标注

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form表单</title></head><body><form method="get"><!-- 增强鼠标的可用性 自动将焦点转移到与该标注相关的表单元素上单机文字 可以选中该选项 -->性别：<label for="man">男</label><input type="radio" name="sex" id="man" value="1" /><label for="woman">女</label><input type="radio" name="sex" id="woman" value="0" /></form></body>
</html>

练习

练习2要求：

邮箱文本框中默认文本为“student@bdqn.cn “ ，且文本框不可修改
单击文字“电子邮箱”、“设置密码”、“真实姓名”、“验证”时鼠标的光标焦点移动到对应的文本框里
单击“男”选中其对应的单选按钮，单击“女”选中其对应的单选按钮
选择身份的下拉列表框被禁止使用

3.3 表单的初级验证

表单验证的好处：减轻服务器的压力；保证数据的可行性和安全性；

案例6

placeholder ；required ； pattern 用法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form表单</title></head><body><form method="get"><!-- placeholder  文本框输入内容提示适用于input标签：text search url email password 等类型 -->搜索：<input type="text" name="name" placeholder="请输入要搜索的关键字" /><br><!-- required 文本框内容不能为空，否则不允许用户提交表单适用于input标签：text search  url email password  numbercheckbox radio  file 等类型--><input type="text" name="username" required /> <br><!-- pattern验证规则 正则表达式 -->手机号: <input type="text" name="phone" required pattern="1[3578]\d{9}" /><br><input type="submit" value="提交" /></form></body>
</html>

四、初识CSS3（重点）

4.1 CSS概念

简介

层叠样式表: 是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

中文名：层叠样式表	外语缩写：CSS（也作文件扩展名）
外文名： Cascading Style Sheets	其他称呼：级联样式表

CSS发展史

css优势

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

4.2 CSS语法规则

CSS基本语法结构

CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

style标签

4.3 HTML中引入CSS样式

行内样式

<!doctype html>
<html><head><title>CSS</title><meta charset="UTF-8" /></head><body><h1 style="color: red;">style属性的应用</h1><p style="font-size: 14px; color:green">style行内样式</p></body>
</html>

内部样式

<!doctype html>
<html><head><title>CSS</title><meta charset="UTF-8" /><style>h1 {color: red;}p {font-size: 14px;color: green}</style></head><body><h1>style标签的应用</h1><p>style内部样式</p></body>
</html>

优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

外部样式

链接外部样式

<!doctype html>
<html><head><title>CSS</title><meta charset="UTF-8" /><link href="css/style.css" rel="stylesheet" type="text/css"></head><body><h1>link标签引入css样式</h1><p>外部样式--链接外部样式</p></body>
</html>

导入外部样式表

<!doctype html>
<html>
<head><title>CSS</title><meta charset="UTF-8" /><style type="text/css">@import url("css/style.css");</style>
</head>
<body><h1>style标签引入css样式</h1><p>外部样式--导入外部样式</p>
</body>
</html>

链接式与导入式的区别

标签属于XHTML，@import是属于CSS2.1
使用链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

3种样式的优先级

就近原则行内样式>内部样式表/外部样式表（谁后加载使用谁）

4.4 CSS3的选择器

基本选择器

标签选择器；类选择器； ID选择器；

<!doctype html>
<html><head><title>CSS</title><meta charset="UTF-8" /><style type="text/css">/* 标签选择器：h1 p img a ..... 直接应用于HTML标签*/h2 {color: blue;}/* 类选择器 可在页面中多次使用*/.name {color: aqua;}/* id选择器 同一个页面中只能使用一次（自觉遵守）*/#gc {color: yellow;}</style></head><body><h2>童话</h2><h3 class="name">光良</h3><p id="gc">我愿变成童话里 你爱的那个天使</p><p>张开双手 变成翅膀守护你</p></body>
</html>

优先级：ID选择器>类选择器>标签选择器

练习

练习一要求：

制作影视简介，标题使用<h2>标签，其他文本均放在段落标签<p>中，超链接使用<a>，图片使用<img>
使用外部引入CSS样式的方式为网页设置样式
使用标签选择器设置标题h2的字体颜色为#003580
使用ID选择器设置p段落的文字，字体为14px，颜色为#000033
使用类选择器设置p段落文字中的不同颜色值，从左到右颜色值分别为#F00、#1F87CC、#FAA53B、#0D7114
使用类选择器设置第一张图片的宽度为100px，高度为160px
使用类选择器设置最后两张图片的宽度为200px，高度为130px

高级选择器

层次选择器

后代选择器；子选择器；相邻兄弟选择器；通用兄弟选择器

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>层次选择器</title><style type="text/css">p,ul {border: 1px solid red;/*边框属性*/}/*后代选择器*//* body p {background: red;} *//*子选择器*//* body>p {background: pink;} *//*相邻兄弟选择器 只有一个，相邻（向下）*//* .active+p {background: green;} *//* 通用兄弟选择器 *//* .active~p {background: yellow;} */</style></head><body><p class="active">1</p><p>2</p><p>3</p><ul class="c4"><li><p>4</p></li><li><p>5</p></li><li><p>6</p></li></ul></body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>结构伪类选择器</title><style>/*ul的第一个子元素*//* ul li:first-child {background: red;} *//*ul的最后一个子元素*//* ul li:last-child {background: green;} *//* 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效 顺序*//* p:nth-child(1) {background: yellow;} *//*父元素里第2个类型为p的元素 类型*//* p:nth-of-type(2) {background: blue;} */</style></head><body><p>p1</p><p>p2</p><p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li></ul></body>
</html>

使用F:nth-child(n)和F:nth-of-type(n)的关键点

F:nth-child(n)在父级里从一个元素开始查找，不分类型
F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>属性选择器</title><style type="text/css">.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;text-align: center;background: #aac;color: blue;font: bold 20px/50px Arial;margin-right: 5px;text-decoration: none;margin: 5px;}/* 存在属性id的元素 *//* a[id] {background: yellow;} *//* 属性id=first的元素 *//* a[id=first] {background: red;} *//* 属性class="links"的元素 *//* a[class="links"] {background: red;} *//* 属性class里包含links字符串的元素 *//* a[class*=links] {background: red;} *//* 属性href里以http开头的元素 *//* a[href^=http] {background: red;} *//* 属性href里以png结尾的元素 *//* a[href$=png] {background: red;} */</style></head><body><p class="demo"><a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links active item" title="test website" target="_blank">2</a><a href="sites/file/test.html" class="links item">3</a><a href="sites/file/test.png" class="links item"> 4</a><a href="sites/file/image.jpg" class="links item">5</a><a href="efc" class="links item" title="website link">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abcdef.doc" class="links">9</a><a href="abd.doc" class="linksitem last" id="last">10</a></p></body>
</html>

= 绝对等于 *=包含这个元素 ^=以这个开头 $=以这个结尾

五、CSS3美化网页元素（重点）

css优点：

有效的传递页面信息
使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
具有良好的用户体验

5.1 编辑网页文本

<!doctype html>
<html><head><title>CSS 字体样式</title><meta charset="UTF-8" /><style>#title1 {color: aqua;font-size: 20px;}</style></head><body><!-- span标签 行标签 重点要突出的字 -->我喜欢学习，<span id="title1">学习使我快乐</span></body>
</html>

字体样式

<!doctype html>
<html><head><title>CSS 字体样式</title><meta charset="UTF-8" /><style>body {/* 字体类型 Times New Roman*/font-family: "Times New Roman", "楷体";}h1 {/* 字体大小 px em rem */font-size: 30px;}.p1 {/* 字体粗细 bold(加粗) bolder(更粗) lighter(更细) normal(默认 标准)*/font-weight: bold;/* 字体风格 italic(斜体) normal(默认 正常) oblique(倾斜) */font-style: oblique;}h3 {/* 斜体  加粗 字号 字体  */font: italic bold 20px "微软雅黑";}</style></head><body><h1>京东商城――全部商品分类</h1><h3>图书、音像、电子书刊</h3><p class="p1">电子书刊 电子书 网络原创 数字杂志 多媒体图书目音像音乐 影视 教育音像经管励志 经济 金融与投资 管理 励志与成功</p></body>
</html>

文本样式

<!doctype html>
<html><head><title>CSS 文本样式</title><meta charset="UTF-8" /><style>body {/* 文本颜色 十六进制方法表示颜色（红绿蓝）*/color: blue;color: #EEFF66;/* 控制alpha透明度的参数 值0-1 越小越模糊 */color: rgba(0, 0, 255, 0.5);}h1 {/*  元素水平对齐方式  left right center justify(两端对齐)*/text-align: right;}.p1 {/* 首行文本缩进 em px */text-indent: 20px;/* 文本行高 px */line-height: 25px;/* 文本装饰 none(默认) underline(下划线) overline(上划线) */text-decoration: underline;}img,#align {/* 垂直对齐方式 middle(中) top(上) bootom(下) */vertical-align: middle;}h3 {/* text-shadow: 阴影颜色 x轴水平位移量 y轴垂直位移量 模糊半径 */text-shadow: aqua 10px 10px 10px;}</style></head><body><h1>京东商城――全部商品分类</h1><h3>图书、音像、电子书刊</h3><p class="p1">电子书刊 电子书 网络原创 数字杂志 多媒体图书目音像音乐 影视 教育音像经管励志 经济 金融与投资 管理 励志与成功</p><img src="image/icon.gif" /><span id="align">图片与文本垂直对齐方式</span></body>
</html>

练习

练习一：

使用外部样式表创建页面样式（链接式引用）
标题 18px 、楷体、加粗显示
正文 12px 、行高 20px 、英文字体：Times New Roman 或 Times 中文字体：宋体
序号颜色为红色

练习二：

使用外部样式表创建页面样式
标题行距40px，加粗显示
正文大小12px，行距20px
图片与文本居中对齐
标题字体添加文字阴影
设置一级标题水平居中对齐

5.2 超链接伪类

<!doctype html>
<html><head><title>CSS 超链接伪类 </title><meta charset="UTF-8" /><style>/* 未单击访问时超链接样式 */a:link {color: red;}/* 单击访问后超链接样式 */a:visited {color: yellow;}/* 鼠标悬浮其上的超链接样式 */a:hover {color: black;}/* 鼠标单击未释放的超链接样式 */a:active {color: aqua;}</style></head><body><a href="http://www.baidu.com" target="_blank">百度</a></body>
</html>

5.3 列表list-style

<!doctype html>
<html><head><title>CSS 项目符号 </title><meta charset="UTF-8" /><style>li {/*  list-style-type 设置项目符号类型disc：默认实心圆        circle：空心圆square： 方块          none：没有 */list-style-type: circle;}</style></head><body><h3>喜欢的歌手</h3><ul><li>薛之谦</li><li>周杰伦</li><li>邓紫棋</li></ul></body>
</html>

5.3 背景样式

背景颜色

<!doctype html>
<html><head><title>CSS 背景颜色 </title><meta charset="UTF-8" /><style>li {list-style-type: circle;}div {width: 120px;/* 背景颜色 */background-color: aqua;}h3 {width: 120px;background-color: salmon;}</style></head><body><div><h3>喜欢的歌手</h3><ul><li>薛之谦</li><li>周杰伦</li><li>邓紫棋</li></ul></div></body>
</html>

背景图像

<!doctype html>
<html><head><title>CSS 背景图像 </title><meta charset="UTF-8" /><style>div {width: 400px;height: 400px;border: 1px solid red;/* 设置背景图像 */background-image: url("image/1.jpg");}.div1 {/* 背景图像重复方式  repeat(沿水平垂直两个方向平铺) no-repeat(不平铺) repeat-x(只沿水平方向平铺) repeat-y(只沿垂直方向平铺) */background-repeat: no-repeat;/* 背景定位  background-position *//* 1. s y 坐标表示位置  单位px  x(水平)  y(垂直) *//* background-position: 10px 30px; *//* 2. 百分比表示位置  *//* background-position: 10% 50%; *//* 3.x y 方向关键词 水平(left  center  right)垂直(top  center bottom) *//* background-position: right bottom; */}.div2 {/* background: 背景颜色   背景图像     图像位置    是否重复显示*/background: #c00 url(image/icon.gif) left center no-repeat;}</style></head><body><div class="div1"></div><div class="div2"></div></body>
</html>

背景尺寸

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>背景尺寸</title><style>div {width: 200px;height: 130px;border: 1px solid red;background: url("image/1.jpg") no-repeat;/* background-size(背景图片尺寸设置) auto(默认 保持图片原样)*//* background-size: auto; *//* background-size: 120px 60px; *//* background-size: 120px; *//* background-size: 50% 80%; *//* cover(整个背景图片放大填充了整个元素) *//* background-size: cover; *//* contain 保持原图像尺寸比例，最大限度显示整张图片 */background-size: contain;}</style></head><body><div></div></body>
</html>

5.4 CSS3渐变

线性渐变

颜色沿着一条直线过渡：从左到右，从右到左，从上到下等

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>CSS3线性渐变</title><style>div {width: 100px;height: 100px;/*to top*/background: linear-gradient(to top, orange, blue);/* background: -webkit-linear-gradient(to top, orange, blue); *//*-webkit-*//*to bottom*//* background: linear-gradient(to bottom, orange, blue); *//*background: -webkit-linear-gradient(to bottom, orange, blue);*//*to left*//* background: linear-gradient(to left, orange, blue); *//*background: -webkit-linear-gradient(to left, orange, blue);*//*to right*//* background: linear-gradient(to right, orange, blue); *//*background: -webkit-linear-gradient(to right, orange, blue);*//*to top left*//* background: linear-gradient(to top left, orange, blue); *//*background: -webkit-linear-gradient(to top left, orange, blue);*//*to top right*//* background: linear-gradient(to top right, orange, blue); *//*background: -webkit-linear-gradient(to top right, orange, blue);*//*to bottom left*//* background: linear-gradient(to bottom left, orange, blue); *//*background: -webkit-linear-gradient(to bottom left, orange, blue);*//*to bottom right*//* background: linear-gradient(to bottom right, orange, blue); *//*background: -webkit-linear-gradient(to bottom right, orange, blue);*/}</style></head><body><div></div></body>
</html>

径向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

练习

练习三：

页面总宽度300px
一级题字体大小为18px、白色、加粗显示、行距为35px，背景使用线性渐变
二级标题字体大小为14px、加粗显示、行距为30px，背景使用线性渐变、二级标题超链接字体无下划线、鼠标移入出现下划线
内容字体大小为12px、行距为26px、超链接字体颜色为灰色、无下划线、鼠标移入时颜色为棕红色并且显示下划线

练习四：

设置页面内容宽度260px
设置页面背景渐变颜色（#F9FBCB #F8F8F3）
设置标题：16px、缩进1字符、行距30px、字体颜色、绿色背景#518700、设置背景图像
无序列表去除项目符号、12px、行距28px、字体颜色(#1a66b3)、缩进2字符
超链接无下划线，鼠标悬浮至超链接时显示下划线
利用结构伪类选择器设置列表图标

六、盒子模型（重难点）

6.1 盒子模型的使用

边框

border-color(颜色）

border-width(边框宽度)：px
border-style(样式)：solid(实线)；dashed(虚线)；double(双线);
dotted(圆点虚线); hidden(隐藏); none(无边框);
border：粗细样式颜色

内边距(padding)

外边距(margin)

margin :0
margin:0 auto; 网页居中对齐
margin: 0 1px 上下左右;
margin：0 1px 2px 3px 上右下左

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>边框</title><style>.box{width: 298px;                 /* 盒子宽度298px*//* border：粗细  样式 颜色*/border:1px solid #3a6587;    /* 设置盒子边框*/margin:0 auto;                /* 网页元素居中对齐 *//* margin:0 auto; 居中要求：块元素，块元素有固定的宽度 */}h2{font-size:16px;background-color:#3a6587;height:35px;line-height:35px;color:#FFF;/* margin :0 margin:0 auto; 网页元素居中对齐  margin: 0 1px  上下  左右;margin：0 1px 2px 3px  上 右 下 左 */}form{background: #c8ece3;}div:nth-of-type(1)>input{border: 3px solid black;     /* 第一个div下面的input元素设置边框3px 实线 黑色*/}div:nth-of-type(2)>input{border: 1px dashed red;  /* 第二个div下面的input元素设置边框1px 虚线 红色*/}div:nth-of-type(3)>input{border: 2px dotted red;   /* 第三个div下面的input元素设置边框2px 点线 红色*/}</style>
</head>
<body><div class="box"><h2>会员登录</h2><form action="#"><div><strong class="name">姓名：</strong><input type="text"/></div><div><strong class="name">邮箱：</strong><input type="text"/></div><div><strong class="name">电话：</strong><input type="text"/></div></form>
</div>
</body>
</html>

盒子总尺寸

元素大小=border+padding+margin+内容宽度

6.2 圆角边框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>圆角边框</title><style>div{width: 100px;height: 100px;border: 1px solid red;/* 设置圆角边框   四个属性值按顺时针排列 *//* border-radius: 20px  10px  50px  30px; *//* 椭圆 水平/垂直 *//* border-radius: 10px / 30px; *//* 圆  圆角=半径 *//* border-radius: 50%; *//* 半圆  元素的宽度是高度的2倍，而且圆角半径为元素的高度值 *//* border-radius: 100px 100px  0 0; *//* 扇形  元素宽度、高度、圆角半径相同  圆角取值位置不同 *//* border-radius: 100px 0 0 0; */}</style></head><body><div></div></body>
</html>

6.3 盒子阴影

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>阴影</title><style>div{width: 100px;height: 100px;border: 10px solid red;/* 阴影：类型(内阴影)  x轴位移  y轴位移  模糊半径  颜色 */box-shadow: inset 10px 10px 50px yellow;/* 不写类型为外阴影 */}</style></head><body><div></div></body>
</html>

七、浮动（重难点）

7.1 标准文档流

指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。
标准文档流组成

块级元素：独占一行 h1-h6 ; p ; div ; 列表
行内元素：不独占一行 span； a ; img ; strong …
行内元素可以被包含在块级元素中。

7.2 display属性

可以改变块级元素与行级元素

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>浮动</title><style>div{width:100px;height:100px;border:1px solid red;display: inline; /* 将div设置为行内元素 */}span{width:100px;height:100px;border:1px solid red;display:block; /* 将span设置为块元素 */}</style>
</head>
<body><div>div 块元素</div><span>span 行内元素</span>
</body>
</html>

7.3 float 属性浮动

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>浮动</title><style>div {margin:10px;padding:5px;}#father {border:1px #000 solid;}/* float 浮动  left 左浮动  right 右浮动  none 无浮动*/.layer01 {border:1px #F00 dashed;float: right;}.layer02 {border:1px #00F dashed;float: right;}.layer03 {border:1px #060 dashed;float: right;}.layer04 {border:1px #666 dashed;font-size:12px;line-height:23px;float: right;}</style>
</head>
<body><div id="father"><div class="layer01"><img src="image/hd.jpg" alt="前端"/></div><div class="layer02"><img src="image/qd.jpg" alt="后端"/></div><div class="layer03"><img src="image/sjk.jpg" alt="数据库"/></div><div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。</div></div>
</body>
</html>

7.4 解决父级边框塌陷

clear

  /* clear:right; 右侧不允许有浮动元素clear:left; 左侧不允许有浮动元素clear:both; 两侧不允许有浮动元素clear:none;*/

解决方案：

增加父级元素的高度

 #father {border:1px solid #000;height: 600px;}

增加一个空的div标签，清除浮动

<div class="clear"></div>.clear{clear: both;}

使用overflow 属性

在父级元素中增加一个 overfow: hidden;

   #father {overflow: hidden;}

父类添加一个伪类：after （推荐使用）

 #father:after{content: '';display: block;clear: both;}

小结：

浮动元素后面加空div
简单，空div会造成HTML代码冗余
设置父元素的高度
简单，元素固定高会降低扩展性
父级添加overflow属性
简单，下拉列表框的场景不能用
父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用

7.5 display和float对比

display ：方向不可控制
float ：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

八、定位网页元素（重难点）

8.1 定位

position属性
static (默认值，没有定位)；relative (相对定位) ；
absolute (绝对定位) ； fixed (固定定位)

相对定位

position: relative; 相对于原来的位置，进行指定的偏移。相对定位的话，它任然在标准文档流中，原来的位置会被保留

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>相对定位</title><!-- 相对定位相对于自己原来的位置进行偏移--><style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #666;padding: 0;}#first{border: 1px dashed #b27530;background-color: #a13d30;/* 相对定位 */position: relative;top: -20px; /* 向上移 */left: 20px; /* 向右移 */}#second{border: 1px dashed #255066;background-color: #255066;}#third{border: 1px dashed #1c6615;background-color: #1c6699;position: relative;bottom: -10px;  /* 向下移 */right: 20px;   /* 向左移 */}</style>
</head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div></div>
</body>
</html>

练习

使用 <div>和<a>布局页面
每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标移上去时变为蓝色
使用相对定位改变每个超链接的位置

绝对定位

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>绝对定位</title><style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #666;padding: 0;/* 父级元素 相对定位 */position: relative;}#first{border: 1px dashed #b27530;background-color: #a13d30;}#second{border: 1px dashed #255066;background-color: #255066;/* 绝对定位 */position: absolute;right: 30px;top:-10px;}#third{border: 1px dashed #1c6615;background-color: #1c6699;}</style>
</head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div></div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>固定定位</title><style>body{height: 100px;}/* 绝对定位；相对于浏览器 */div:nth-of-type(1){width: 100px;height: 100px;background: red;position: absolute;right: 0;bottom: 0;}div:nth-of-type(2){width: 50px;height: 50px;background: yellow;/* 固定定位 */position: fixed;right: 0;bottom: 0;}</style>
</head>
<body><div>div1</div><div>div2</div>
</body>
</html>

8.2 z-index

调整元素定位时重叠层的上下位置

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>z-index</title><style>#content{width: 300px;padding: 0px;margin: 0px;overflow: hidden;font-size: 12px;line-height: 25px;border: 1px solid #000;}ul,li{padding: 0px;margin: 0px;list-style: none;}/* 父级元素相对定位 */#content ul{position: relative;}.tipText, .tipBg{position: absolute;width: 300px;height: 25px;top: 120px;}.tipText{color: white;/* 设置层级 数值大的在上面 */z-index: 2;}.tipBg{background-color: #000;/* 设置背景透明度  值为0-1 值越小越透明*//* opacity: 0.5; */}</style>
</head>
<body><div id="content"><ul><li><img src="images/hd.jpg" alt=""/></li><li class="tipText">html java mysql</li><li class="tipBg" ></li><li>2022-11-12</li><li>yyds_it_huo</li></ul></div>
</body>
</html>

九、CSS3制作网页动画

浏览器私有前缀

CSS3是CSS(层叠样式表)技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。

内核	前缀	浏览器
Gecko内核	-moz-	火狐
Webkit内核(谷歌)	-webkit-	chrom；360；世界之窗等
Trident内核	-ms-	IE
Presto内核	-o-	opera

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>浏览器私有前缀</title><style>div{font-size: 100px;-webkit-text-stroke: 1px #f00;}</style>
</head>
<body><div>哈哈哈</div>
</body>
</html>

在实际使用中通常将所有前缀写一遍后，标准的写在最后

9.1 CSS3变形

CSS3变形是一些效果的集合如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。
Transform 2D的属性

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>transform 的使用</title><style>#box1{width: 200px;height: 200px;margin: 100px;border: 1px solid blue;background-color: aqua;}#box1:hover{/* 水平和垂直方向移动函数：translate*//* 向右移动 *//* transform: translate(30px); *//* 向右下角移动 *//* transform: translate(30px,30px); *//* 向上移动 *//* transform: translate(0px,-10px); *//* 旋转函数：rotate *//* 顺时针旋转20度 *//* transform: rotate(20deg); *//* 缩放函数：scale *//* 值为1 大小不变   小于1 缩小   大于1 放大 支持两个参数 水平方向和垂直方向的缩放*//* transform: scale(0.5); *//* 倾斜函数：skew *//* transform: skew(40deg,30deg); */}</style>
</head>
<body><div id="box1"></div>
</body>
</html>

使用HTML语言和CSS开发商业站点相关推荐

html css 开发商业站点,《使用HTML语言和CSS开发商业站点》
其中包含了html文本语言的全部单词第一学期英语单词--<使用HTML语言和CSS开发商业站点> chapter1 head [hed]头 title ['taitl] 标题 body ...
accp使用html语言,Accp6.0_S1.使用HTML语言和CSS开发商业站点
课程"Accp6.0_S1.使用HTML语言和CSS开发商业站点"题库试题汇编 [001]以下()是HTML常用的块状标签 (选择一项) A) B) C) D) [002]以下( ...
使用HTML语言和CSS开发商业站点_HTML基础
使用HTML语言和CSS开发商业站点第一章 HTML基础 WEB页面呈现信息已成为各种信息共享和发布的主要形式超文本标记语言(Hyper Text Markup Lanuage,HTML)或超文本 ...
《使用HTML语言和CSS开发商业站点》学习笔记
第一章 1.public 公共的 2.static 静态的 3.void 无返回值的 4.main 主方法 5.class ...
HTML语言和CSS开发商业站点错题
1.关于css为什么会出现Bug说法不正确的是(). (选项两项) A.编写CSS样式是需要在不同浏览器中实现表现一致 B.各大主流浏览器由于不同厂家开发,浏览器使用的内核不同,支持CSS的程度不同 ...
使用HTML语言和CSS开发商业站点_初识CSS
第4章初识CSS 一.CSS概述 1.什么事CSS CSS全称为层叠样式表(Cascading Style Sheet),通常又称为风格样式表(Style Sheet),它是 ...
题库明细使用HTML+CSS开发商业站点
题库明细使用HTML+CSS开发商业站点 HTML5基础列表.表格与媒体元素表单初识CSS3 CSS3美化网页元素盒子模型浮动定位网页元素利用CSS3制作网页动画
使用HTML语言和 CSS 开发一到三总结
使用HTML语言和 CSS 开发一到三章总结第一章:HTML5 基础 1.1 HTML文件的基本结构和 W3C 标准在网络已经完全融入大家的生活的时代,从网络上获取信息或通过网络反馈个人信息,这些 ...
R语言和RStudio开发环境的下载与安装
文章目录 R的下载和安装 RStudio的下载与安装 R的下载和安装进入官网:https://www.r-project.org/ 下载完成后双击运行安装包,注意这里全部点击下一步默认即可,不要更改 ...