标签：网页 color 标签 笔记 height HTML margin CSS
一、互联网技术概念入门
1.1CS/BS模式
互联网软件的两种模式
Client/Server
客户端/服务器模式
王者荣耀 手机QQ 手机微信 极品飞车系列 使命召唤系列 CF
1需要下载安装客户端
2软件有客户端和服务端两部分组成
3软件更新比较麻烦 所有的客户端都需要更新
4运算压力可以分摊给各个终端 服务器承担的运算压力可以大大减轻
Browser/Server
浏览器/服务器模式
各种网站 b站 尚学堂官网 京东 淘宝
1不需要下载安装客户端 只需要有一个浏览器即可
2软件全部部署在服务器端
3软件更新比较简单 只要更新服务器即可
4运算压力基本在服务端 一般不会用来做大型游戏
1.2互联网三大基石
三大基石：URL，HTTP协议，HTML
互联网软件依赖的三种基础技术
URL：在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。
HTTP协议：http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使得开发和部署是那么的直截了当。
HTML：HTML称为超文本标记语言。
假设 小明给小红 传纸条
URL : 小红的地址 小红的座位
HTTP协议: 以中文发送 “中文”就是一个共同遵守的解析数据的规范
HTML: 纸条上的内容 信息的载体 >>> 晚上去看电影呀
二、HTML入门
2.1什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
a) 超文本：比普通文本更牛逼的文本 不仅仅可以展示文字 可以展示各种媒体内容
b) 一般由前端工作人员来完成,后台研发人员不需要编写
c) 标记：(标签/元素/标记)
标记通常被称为 HTML 标签 (HTML tag)。
· HTML 标签是由尖括号包围的关键词，比如 <html>
· 封闭类型标记（也叫双标记），必须成对出现,如<p></p>
· 标签对中的第一个标签是开始标签，第二个标签是结束标签
· 开始和结束标签也被称为开放标签和闭合标签
· 非封闭类型标记，也叫作空标记，或者单标记，如<br/>
总结：我们学习HTML就是学习各种各样的标签，可以达到比普通文本更厉害的功能。那么后续浏览器可以对html文件做解析，就可以在浏览器上展示好看的效果 。
2.2 HTML的作用
通过使用HTML的各种标签，然后生成一个HTML文件，这个文件可以被浏览器解析，浏览器内部有一个专门的HTML的解析器，解析后我们就可以看到炫酷的页面。(编写网页的超文本标记语言)
文件拓展名 windows 上每个文件都是有拓展名
文件拓展名代表着文件的类型 windows 可以根据文件的拓展名去自动选择文件打开的程序
一般win7和win10 默认隐藏文件拓展名 xp默认显示文件拓展名
网页文件 拓展名为 .html 或者.htm 的纯文本文件
2.3 HTML版本
2.4 HTML的标准结构
创建一个HTML文件
通过记事本编辑代码即可，用该语言编写的文件，以 .html或 .htm为文件拓展名。
HTML不区分大小写，建议小写
开始写代码：
步骤：
（1）新建一个文本文档，将文本文档的后缀改为.html
（2）右键-用记事本打开，编写代码
<html>
<head>
</head>
<body>
这是我的第一个html页面，入门页面，就是最基本的结构
</body>
</html>
（3）下载谷歌浏览器
（4）选择文本文档，右键-打开方式-谷歌浏览器
（5）展示页面效果
根标签 html 最外层的标签 所有其他的标签都放入该标签中
html根标签有两个一级子标签 分别是head body
head中一般放的是不显示在网页上 但是又比较重要的信息
body中一般放的是显示在页面上的内容
2.5 IDE介绍
集成开发工具 >>>> IDE
编码工具：
辅助程序员编写源代码的工具，它类似word，我们写文档会打开word文档来编写。
写代码也一样，需要借助工具来开发。
常见的编码工具有记事本、sublime Text、notepad++
集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual Studio系列，Borland的[C++ Builder](https://baike.baidu.com/item/C++ Builder)、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE（如webstorm、DreamWeaver等），因为很多项任务会自动生成。
我们使用的是Hbuilder。
2.6用Hbuilder开发步骤
(1) 将我提供的Hbuilder.zip压缩包解压
(2) 在解压后的文件夹中找到Hbuider.exe,直接双击使用，无需安装
(3) 用邮箱注册，用的功能会更多一点
(4) 选择视觉效果(选择你能看到的最浅的颜色)
(5) 新建项目：
(6) 在项目下新建一个html文件：
(7) 编写代码：
<html>
<head>
<title></title>
</head>
<body>
this is my second html...
</body>
</html>
(8) 用谷歌浏览器运行：
(9) 在浏览器上可以看到效果：
2.7 HTML基本结构
HTML标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
</body>
</html>
head标签
Head标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>。
应该把 标签放在文档的开始处，紧跟在 后面，并处于 标签之前。
文档的头部经常会包含一些 标签，用来告诉浏览器关于文档的附加信息。
title标签
1.可定义文档的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.title写和你网页相关的关键词有利于SEO优化
<html>
<head>
<title>我是页面的题目</title>
</head>
<body>...</body>
</html>
SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。
网站都有目标群体，通过title、meta标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。
meta标签
META标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。
元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的meta有：
Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords" content="web前端,尚学堂培训">
description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
<meta name="description" content="北京尚学堂,web前端培训">
author作者 标注网页的作者
<meta name="author" content="root,root@xxxx.com">
代码：
<html>
<head>
<!--
title 标题标签 定义显示在网页左上角的标题
-->
<title>第一个小网页</title>
<!--meta
一般定义一些当前网页的特殊属性
通过meta标签的属性定义页面的特征
<标签名 属性1='' 属性2=''></标签名>
charset属性 定义当前页面的字符集 告诉浏览器以什么字符集解析当前页面
name属性 一般用于定义当前网页的一些简单描述 便于在搜索引擎上根据描述搜索到当前网页
keywords 关键字
author 作者
description 描述 一段陈述文字,描述当前网页
html 属性值使用单引号或者是双引号 皆可
-->
<!—告诉浏览器以UTF-8字符集解析文字-->
<meta charset="UTF-8" />
<meta name="keywords" content="尚学堂,北京尚学堂"/>
<meta name="author" content="许佳奇" />
<meta name='description' content="北京尚学堂目前有JAVA,大数据,人工智能python,PHP等主流的培训课程,为中国的IT行业培养了大量的技术人才" />
<!--在**秒后 对网页进行刷新 -->
<meta http-equiv="refresh" content="5;http://www.baidu.com" />
<!--
link 学习 CSS样式的 引入外部CSS样式文件
script 学习 js 脚本语言 引入脚本语言文件
-->
<link />
<script></script>
</head>
<body bgcolor="red">
<!--
注释:给人看的提示 不显示出来的内容 不执行的代码
选中文字 按 ctrl +shift + / 注释/取消注释
-->
武汉加油
</body>
</html>
2.8回顾
HTML入门
做网页的 网页的主体结构
HTML的基本结构
一个根标签 <html></html>
两个一级子标签
<head></head>不显示在网页中 但是又比较重要的内容
<meta />
charset='utf-8' 设置页面解析的使用的字符集 告诉浏览器以什么字符集解析
设置的字符集要和文件本身存储所使用的字符集保持一致
name keywords 用来设置页面的搜索关键字
author 设置页面的作者
discription 简单描述页面
content 上述属性的内容
http-equiv='refresh' content='5;https://www.baidu.com'
<title></title> 定义网页小标题
<body>
</body>
三、HTML常见基础标签
第一节、HTML专业词汇和概念
在线帮助文档 https://www.w3school.com.cn/
查看全部标签地址 https://www.w3school.com.cn/tags/index.asp
标签
Tag <html> <head> <meta>
单标签meta 双标签html head body title
1.标记(签)是HTML语言的基本部分
2.标签是分层次的；多数标记总是成对出现，包括开始标签和结束标签；
3.根标签是html，包括两个子标签head和body
4.标签不区分大小写。例<html> <HTML>都可以
属性和属性值
Attribute
<hr width="50%" align="right" size="5" color="red">
1.附属于标签，对标签的特征进行设置
2.属性的值可以用双引号引起来（单引号也可以）
3.属性和属性值不区分大小写
4.属性之间无先后次序，属性也可省略（即取默认值）
5.属性都是写在开始标签中
文本
Text
标签的内容可以是子标签或者普通文本
最内层标签的内容称为文本
外层标签的内容也可以统称为文本
<html>
<head>
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<body>
<hr width="50%" align="center" size="5" color="red">
<font size="3" color="blue">helloworld!!!</font>
</body>
</html>
元素
Element
开始标记+中间内容+结束标记
<p align="center">HTML文档包括两部分：头部部分和主体部分</p>
一个完整的标签我们也称之为为网页上的一个元素
标题标签和段落标签
标题标签
段落标签
格式化标签
文档地址 https://www.w3school.com.cn/html/html_formatting.asp
font >>> 字体 CSS样式
字符实体标签
字符实体查询地址 https://www.w3school.com.cn/html/html_entities.asp
特殊符号插叙地址 https://www.w3school.com.cn/tags/html_ref_symbols.html
第二节、超链接和多媒体标签
超链接标签
多媒体标签
<body>
<!--
图片
img src source图片的资源路径
src 可以是本地资源 也可以是网络资源
title 鼠标悬停于图片之上时 显示的文字
alt 图片加载失败 提示的文字
-->
<a href="http://www.bjsxt.com" target="_blank">
<img src="img/sxtlogo.png" width="400px" height="200px" title="尚学堂logo" alt="此处是尚学堂logo"/>
</a>
<img width="300px" height="180px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583225718398&di=4155d8f0a18c5fe06467a82890ea6c6b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F1712%2F124R5B11-9.jpg" />
<hr />
<!--
音频
audio
src 音频文件的路径
controls 在页面上显示 功能控件
loop 控制循环播放
-->
//音频标签的第一种写法
<audio src="audio/aaa.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
//音频标签的第二种写法
<audio controls loop autoplay>//属性跟后面的属性值相同的时候 只写属性就可以了
<source src="audio/aaa.mp3"></source>
你的浏览器不支持该类型文件
</audio>
<!--
视频
video
-->
<video src="video/05_HTML_图片标签.mp4" width="30%" autoplay="autoplay" controls="controls" loop="loop"></video>
<video controls loop autoplay width="30%">
<source src="video/05_HTML_图片标签.mp4"></source>
你的浏览器不支持该类型文件
</video>
</body>
<!--
img
img不会换行
alt：图片不存在时的替换文本
title：鼠标移到图片上的提示文字
互联网图片类型
jpg：有损压缩 支持的颜色多
gif：无损压缩 颜色只支持256色
如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画
png：新一代网络图片格式 无损压缩，支持的颜色多
H5 Audio
音频 H5才开始支持
之前播放音频和视频，都需要利用第三方插件，比如flash player，而H5提供的音频和视频标签不需要外置插件，浏览器自己提供播放功能
当前，audio 元素支持三种音频格式：mp3 wav Ogg Vorbis
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
H5 Video
当前，video 元素支持两种视频格式：mp4 ogg
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
有时候也会看到使用embed来播放音频视频
-->
第三节、列表标签
有序列表
Order list
无序列表
Unorder list
列表嵌套
尚学堂课程
*JAVA
1预科阶段
2初级阶段
3中级阶段
4高级阶段
5就业期
*Python
*大数据
*AI
定义列表
Defination list 一般用于图文混排
第四节、表格标签
Table tr td
table 代表整张表格、tr 代表一行、td 代表每一个单元格
<body>
<table align="center" width="50%" border="1px" cellspacing="0px" cellpadding="0px">
//border表格线 cellspacing td间的空隙 cellpadding 文字跟边线之间的距离就为0px了
//cell有细胞的意思
<tr>
<td>姓名</td>
<td>年龄</td>
<td>班级</td>
<td>分数</td>
</tr>
<tr>
<td>张三丰</td>
<td>100</td>
<td>武当001</td>
<td>100</td>
</tr>
<tr>
<td>张翠山</td>
<td>30</td>
<td>武当002</td>
<td>30</td>
</tr>
<tr>
<td>name1</td>
<td>10</td>
<td>一班</td>
<td>20</td>
</tr>
<tr>
<td>name1</td>
<td>10</td>
<td>一班</td>
<td>20</td>
</tr>
<tr>
<td>name1</td>
<td>10</td>
<td>一班</td>
<td>20</td>
</tr>
</table>
</body>
thead tbody tfoot th
<body>
<!--
thead 表头
tbody 表体 如果不写 浏览器会自动给我们添加
tfoot 表尾
th 相当于自带 加粗 和 居中 效果的 td
-->
<table align="center" width="50%" border="1px" cellspacing="0px" cellpadding="0px">
<thead bgcolor="greenyellow">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>分数</th>
</tr>
</thead>
<tbody bgcolor="gray">
<tr>
<td>张三丰</td>
<td>100</td>
<td>武当001</td>
<td>100</td>
</tr>
<tr>
<td>张翠山</td>
<td>30</td>
<td>武当002</td>
<td>30</td>
</tr>
<tr>
<td>name1</td>
<td>10</td>
<td>一班</td>
<td>20</td>
</tr>
<tr>
<td>name1</td>
<td>10</td>
<td>一班</td>
<td>20</td>
</tr>
<tr>
<td>name1</td>
<td>10</td>
<td>一班</td>
<td>20</td>
</tr>
</tbody>
<tfoot bgcolor="coral">
<tr>
<td>总人数</td>
<td>10</td>
<td>总分数</td>
<td>20</td>
</tr>
<tr>
<td>及格人数</td>
<td>10</td>
<td>高分人数</td>
<td>20</td>
</tr>
</tfoot>
</table>
</body>
表格的跨行和跨列
<body>
<table border="1px" cellspacing="0px" width="30%" align="center">
<tr>
<!--column span 表格跨列 横向跨列 -->
<th colspan="3">学生成绩单</th>
</tr>
<tr>
<td>姓名</td>
<td>学科</td>
<td>分数</td>
</tr>
<tr>
<!--row span 表格的跨行 纵向跨行-->
<td rowspan="2">张三</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>数学</td>
<td>98</td>
</tr>
<tr>
<td>语文</td>
<td>62</td>
</tr>
</table>
</body>
表格的嵌套
<body>
<table border="1px" cellspacing="0px" width="30%" align="center">
<tr>
<th colspan="3">学生成绩单</th>
</tr>
<tr>
<td>姓名</td>
<td>学科</td>
<td>分数</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td rowspan="4" colspan="2">
<table border="1px" cellspacing="0px" width="100%">
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>99</td>
</tr>
<tr>
<td>语文</td>
<td>99</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2">李四</td>
</tr>
<tr>
</tr>
</table>
</body>
回顾
标签
属性 用于设置标签的一些特征的 一般放于开始标签
你好,今天是3月5日
文本 双标签中间的内容
元素 一对完整的标签 DOM解析
h1 >>>> h6 六级标题 (独占一行)
p 段落标签 (独占一行)
big small b i em … sub sup (不会独占一行)
字符实体 对于HTML有特殊含义的符号 (不会独占一行)
<< >> &
特殊的不常见符号(不会独占一行)
img src title 鼠标悬停图片上显示的文字 alt 图片加载失败提示的文字 (不会独占一行)
audio src controls 显示播放控件 autoplay loop width height (不会独占一行)
video (不会独占一行)
列表标签 (独占一行)
有序列表 order list ol 列表项 li type =“1” a A i I
无序列表 unorder list ul 列表项 li type =circle disc square
定义列表 dl >>>> dd dt 一般用于图文混排
表格标签
table 整张表格
tr 代表一行
td 代表一个单元格
thead 表头
tbody 表体 就算不加,浏览器在解析代码时也会加上
tfoot 表尾
th >>>> 自大文字加粗居中的 td
colspan 表格的跨列 横向跨多少列
rowspan 表格的跨行 纵向跨多少行
第五节、输入标签和表单标签
输入标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
账号:<input type="text" /><br />
密码:<input type="password" /><br />
<!--设置多个单选框name属性使用同一个值 就可以形成互斥的效果-->
性别:<input type="radio" name="gender" checked="checked"/>男
<input type="radio" name="gender" />女
<br />
爱好:
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>羽毛球
<input type="checkbox" name="hobby"/>乒乓球
<input type="checkbox" name="hobby"/>弹溜溜
<br />
请选择照片:<input type="file" />
<br />
个人简介:
<textarea style="width: 400px;height: 200px;"></textarea>
<br />
籍贯:
<select multiple="multiple">
<option>吉林</option>
<option>黑龙江</option>
<option>辽宁</option>
<option>河北</option>
<option selected>--请选择省份--</option>
</select>
<br />
<input type="button" value="注册" />
</body>
</html>
练习 结合表格标签对输入标签进行处理
<table width="30%" align="center" border="1px" cellspacing="0px">
<tr>
<td>
账号:
</td>
<td>
<input type="text"/>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="gender" checked="checked"/>男
<input type="radio" name="gender" />女
</td>
</tr>
<tr>
<td>
爱好
</td>
<td>
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />羽毛球
<input type="checkbox" />各种球
</td>
</tr>
<tr>
<td>请选择照片</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>
个人简介
</td>
<td>
<textarea style="width: 200px; height: 100px;">请介绍一下你自己</textarea>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select>
<option selected>-请选择省份-</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</td>
</tr>
</table>
表单标签
Form表单标签在网页上没有任何的显示效果
将页面上输入的数据向后台传递数据所使用的标签
form表单标签包裹的范围就是可以向后台传递的范围
action 属性 数据提交的地址
method 属性 数据提交的方式
get 数据量小 数据显示在地址栏上 不安全
post 数据量大 数据是不显示在地址栏上的 安全
form表单中提交的数据来自于标签 要提交数据的标签必须有name属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1使用 form标签 包裹数据提交的范围
2通过action属性确定数据要提交的地址
3通过method属性确定提交的方式
get方式
1数据通过地址栏传递 地址栏有长度限制 传递的数据量有限
2地址栏只能放文字 get方式只能提交文本类型的数据 不能上传文件
3数据显示在地址栏上 数据相对不安全
post方式提交
1数据不通过地址栏 单独打成数据包发送 数据包大小一般认为没有限制 传输的数据量大
2数据包可以放文字 也可以放文件 可以上传文件
3数据不显示在地址栏上的 数据相对安全
4准备一个提交按钮
不能是button button只是一个简单的按钮 不具备提交功能
应该用submit submit具备提交数据的功能
submit 必须在form表单内部 标志提交的是当前所在的表单
5给需要提交数据的输入框添加name 和 value属性
name属性给数据起名字的 为了让后台区分不同数据的含义
value用于定义提交的数据
-->
<form action="https://www.baidu.com" method="get">
<!--value属性 其实就是输入框上我们实际输入的值-->
账号:<input type="text" name="username" /> <br />
密码:<input type="password" name="pwd" /> <br />
性别:
<input type="radio" name="gender" value="1" checked />男
<input type="radio" name="gender" value="0" />女
<br />
爱好:
<input type="checkbox" name="hobby" value="1" />篮球
<input type="checkbox" name="hobby" value="2" checked/>足球
<input type="checkbox" name="hobby" value="3" />乒乓球
<input type="checkbox" name="hobby" value="4" />羽毛球
<input type="checkbox" name="hobby" value="5" />玻璃球
<br />
请选择照片
<!--后续文件上传再处理-->
<input type="file" />
<br />
个人简介:
<textarea style="width: 200px; height: 200px;" name="intro" >请介绍一下你自己</textarea>
<br />
籍贯:
<select name="pro" >
<option value="1">吉林</option>
<option value="2">黑龙江</option>
<option value="3">辽宁</option>
<option value="0" selected="selected">-请选择省份-</option>
</select>
<br />
<!--button 按钮-->
<input type="submit" value="提交"/>
<input type="reset" value="清空" />
</form>
</body>
</html>
地址栏上显示的数据
https://www.baidu.com/?username=111&pwd=&gender=0&hobby=1&hobby=2&hobby=3&intro=asdfasdf&pro=1
第六节、框架标签
作用:将多个不同的页面组织后显示在同一个页面上
iframe标签
可以在当前网页上引入其他的网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="http://www.baidu.com" width="49%" height="400px"></iframe>
<iframe src="http://www.bilibili.com" width="49%" height="400px"></iframe>
<br />
<a href="http://www.baidu.com" target="ifr">百度一下</a>
<a href="http://www.bjsxt.com" target="ifr">北京尚学堂</a>
<br />
<iframe name="ifr" width="50%" height="400px"></iframe>
</body>
</html>
frame和frameset
上下划分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<body>-->
<frameset rows="71px,260px,46px" border="1px">
<frame src="head.html" />
<frame src="http://www.baidu.com" />
<frame src="bottom.html" />
</frameset>
<!--</body>-->
</html>
左右划分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<body>-->
<frameset cols="71px,260px,46px" border="1px">
<frame src="head.html" />
<frame src="http://www.baidu.com" />
<frame src="bottom.html" />
</frameset>
<!--</body>-->
</html>
frameset嵌套
使用frameset时候的注意事项：当前网页上面不能存在body标签！
frameset.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<body>-->
<frameset rows="71px,260px,46px" border="1px">
<frame src="head.html" />
<frameset cols="200px,*">
<frame src="left.html" />
<frame src="http://www.baidu.com" name="right"/>
</frameset>
<frame src="bottom.html" />
</frameset>
<!--</body>-->
</html>
left.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" target="right">百度</a>
<a href="http://www.bjsxt.com" target="right">尚学堂</a>
<a href="http://www.taobao.com" target="right">淘宝</a>
</body>
</html>
四、CSS入门
第一节、CSS介绍和三种引入方式
块标签 >>>> 块元素 在页面上独占一行的标签
行内标签 >>>> 行内元素 在页面上不会独占一行的标签
span 行内标签 一般用于在网页上划定一个范围 一般结合CSS样式 帮助我们确定某些现实效果的作用范围
div 块标签 一般用于做网页的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<span style="color: red;">2021年2月17日0-24时，山西无新增境外输入确诊病例，新增治愈出院2人。</span>
<span style="color: blue;">累计报告境外输入性确诊病例101例，治愈出院99例，现有在院隔离治疗病例2例。</span>
<span style="color: yellow;">现有疑似病例0例</span>
</p>
<div style="border: 1px red solid;width: 200px;height: 200px;">
这里是文字！！！
</div>
</body>
</html>
网页显示：
什么是CSS
HTML 搭建网页的主体结构 毛坯房
CSS 修饰网页 让网页更漂亮 精装修
JS 做交互 智能家电
CSS的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--链接式-->
<link rel="stylesheet" href="css/mycss.css" />
<!--内嵌式-->
<style>
/* 选择器 */
span{//通过span标签名定义到所有的span标签
font-size: 20px;
color: green;
background-color: bisque;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<!--
1行内式引入
借助标签的style属性引入
style属性中的值语法为 样式名:样式值; 样式名:样式值;... ...
2内嵌式
将css样式的代码抽取出来,通过选择器确定样式作用范围
在head标签中 使用一对style标签 定义css样式
在style标签中 注释写法 /* */
减少相同代码的编写量 减少代码的维护工作量
3链接式
行内式只能将样式作用于当前标签
内嵌式可以将样式作用于多个标签不能作用于其他网页
链接式可以将样式的作用范围扩大多个不同网页
链接式可以将CSS代码放入独立的.css文件中 可以使当前页面更加简洁
每一个需要引入样式 的HTML 在head标签中使用 link标签引入css文件即可
4当三种引入方式同时作用于同一个标签 如果样式有冲突 谁的优先级更高
优先级原则 就近原则
-->
<span style="font-size: 40px; color: blue; background-color: aqua;">
欢迎来到尚学堂
</span>
<br />
<span >
欢迎来到尚学堂
</span>
<br />
<span >
欢迎来到尚学堂
</span>
<br />
<span >
欢迎来到尚学堂
</span>
<br />
<span >
欢迎来到尚学堂
</span>
</body>
</html>
CSS 外部样式文件
第二节、CSS的选择器
三大基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
*
标签名选择器
给页面所有同名的标签定义样式的选择器
语法 标签名{样式}
* */
span{
background-color: skyblue;
font-size: 40px;
font-family: "楷体";
color: orangered;
}
/*
id选择器
一般body中的任何一个标签都有id属性
id属性的值一般在同一个网页上是不允许有重复值
id属性一般用于帮助我们定位到页面上唯一的一个标签
id属性值命名有规则
不能有空格和一些特殊符号
特殊符号中仅可以使用_ 不推荐 $ 会和jquery命名冲突
不能以数字为开头
推荐写法 应为字母开头 数字放在后面
语法: #id值{样式}
*/
#p1{
border: 1px dotted blue;
background-color: gray;
color: red;
width: 100px;
height: 100px;
}
/*
类选择器
一般body中的所有标签都有class属性
多个不同的标签可以有相同的class属性值
通过标签的class属性确定样式的作用范围
语法 .class属性值{样式}
*/
.c1{
background-color: cadetblue;
font-size: 50px;
font-family: "微软雅黑";
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<span id="s1">今天是2020年3月5日</span>
<br />
<span id="s2">今天是2020年3月5日</span>
<p id="p1">今天是2020年3月5日</p>
<p id="p2">今天是2020年3月5日</p>
<p id="p3" class="c1">今天是2020年3月5日</p>
<h1 id="ha" class="c1">今天是2020年3月5日</h1>
<a href="#" class="c1">百度</a>
</body>
</html>
其他选择器
了解熟悉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
层级选择器
通过层次关系定位样式的作用范围
层级选择器的每个层级的确定可以是标签名 id class
* */
#p1 .s1{
color: red;
}
/*
* 属性选择器
* 根据标签的某个属性的特定属性值确定样式的作用范围
*/
input[type=password]{
width: 300px;
height: 40px;
}
/*
* 分组选择器
* 可以将多个不同层级关系 不同class属性 id 标签名同时使用相同的样式效果
* */
h1,.ch,.s2,#pa{
color: green;
}
</style>
</head>
<body>
<span>今日全国新增确诊人数为143人</span>
<p id="p1">
<font>
<span class="s1">其中湖北新增确诊134</span>
</font>
<span >非湖北新增9例</span>
</p>
<input class="i" type="text" />
<input class="i" type="password" />
<input class="i" type="password" />
<input class="i" type="password" />
<h1 id="ha">今日疫情通报</h1>
<h2 class="ch">今日疫情通报</h2>
<span class="s2">今日疫情通报</span>
<p id="pa">今日疫情通报</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
* 伪类选择器可以四同时使用 也可以单个使用
* 如果是四个一块使用 注意顺序
*/
a:link{
color: black;
text-decoration: none;
}
a:visited{
color: darkgray;
}
a:hover{
color: yellow;
}
a:active{
color: darkred;
}
div{
border: 1px double green;
width:100px;
height: 100px;
background-color: lightyellow;
}
div:hover{
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div></div>
</body>
</html>
悬停前：
悬停后：
注意：
回顾
输入标签
input
type
text 文本框
password 密码框
radio 单选框
checkbox 复选框
button 按钮
file 文件上传
文本域
textarea
下拉框 select >>> option
表单标签
在页面上没有显示效果 用于划定数据的提交范围
form
action 用于定义提交的地址
method 用于定义数据提交的方式
get 数据通过地址栏提交 数据量小 只能提交文本 相对不安全
post 数据单独打包发送 数据量大 可以提交文本和文件 相对安全
要求form内部的所有输入框有name 属性 通过value定义提交的值
name属性用于让服务器区分数据的含义
提交按钮 input type='submit' 提交 type=reset
框架标签
用于在当前网页引入其他网页
可以将多个网页整合到一个网页上
iframe src 引入网页的地址
frameset 将网页划分上下 rows=“20%,*,200px” /左右 cols=“第一部分的宽度,…,…” 的几个部分
frame src 引入网页的地址
使用frameset要求当前网页不能有body标签
CSS >>> 做网页美化的
三种引入方式
行内式 通过标签的style属性引入 直接定义当前标签的CSS样式
内嵌式 在head标签中 使用一对style标签引入 通过选择器定位样式的作用范围
链接式 单独定义css外部样式文件 在head中 使用link标签 引入外部样式文件
三大基本选择器
标签名选择器 定位到页面上所有的同名标签 标签名{样式名:样式值;样式名:样式值; … …}
id选择器 通过id定位到页面上唯一的一个标签 #id值{样式名:样式值;样式名:样式值; … …}
class选择器 通过class属性定位到页面多个可以是不同名字的标签 .class值{样式名:样式值;样式名:样式值; … …}
层级选择
通过父级元素逐层找到子元素
父级元素选择器 子元素选择器{}
属性选择器
通过指定标签名和属性值的方式
标签名[属性名=属性值]{}
分组选择器
选择器1,选择器2,…,选择器n{}
伪类选择器
用于分别定义标签的四种状态
未访问过 :link{}
访问过 :visited{}
鼠标悬停 :hover{}
鼠标激活(鼠标按住不放) :active{}
hover 必须在 link 和 visited 之后
active必须在hover之后
第三节、盒子模型
什么是网页的布局
房子 >>> 格局
网页 >>> 格局 网页内容的主体规划
1盒子模型 >>>> 标签和标签存在包含关系时 位置的调整
2浮动 >>>> 多个块标签处于同一行的位置处理问题
3定位 >>>> 块标签在页面指定位置的处理问题
块标签>>>> 独立占用一行的标签
行内标签>>>> 不会独立占用一行的标签
网页的布局基本都是用块标签来完成的
一般做布局 使用的标签是 div 帮助我们将网页划分成多个小方块
Div边线的类型
盒子模型基本用法
其实就是通过标签的内边距和外边距的特点调整两个有包含关系的标签的位置
width 宽度 内部的容量横向为 **像素
height 高度 内部的容量纵向为 **像素
盒子模型无论是内边距还是外边距的调整都不会影响块标签内部的容量
内边距
设置完内边距后，其内边不会向内占用空间，而是将快标签放大！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div1{
border: 1px groove red;
width: 400px;
height: 400px;
/*内边距 内部元素距离当前块元素边界的距离*/
/*同时设置上下左右四个内边距都是100px*/
/*padding:100px;*/
/*设置上下内边距为50px 左右内边距为100px */
/*padding:50px 100px;*/
/*设置 上 右 下 左 四个内边距*/
/*padding: 10px 20px 30px 40px;*/
/*分别单独设置四个内边距*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
</style>
</head>
<body>
<div id="div1">
asdfasdfasdf
</div>
</body>
</html>
外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
border: 1px solid red;
background-color: darkseagreen;
width: 300px;
height: 300px;
/*外边距 当前块标签外部的和父级块标签之间的距离*/
/*设置当前模块上下左右四个外边距都是200px*/
/*margin: 200px;*/
/*设置上下外边距为50px 设置左右外边距为100px*/
/*margin: 50px 100px;*/
/*设置 上 右 下 左 四个外边距*/
/*margin: 10px 20px 30px 40px;*/
/*单独设置四个外边距*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="div1"></div>
asdfasdfasdf
</body>
</html>
使用盒子模型设置居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outerdiv{
width: 400px;
height: 400px;
border: 1px solid red;
/*调整外边盒子的内边距*/
/*padding-top: 20px;
padding-left: 20px;*/
/*通过外边距设置横向居中*/
margin: 0px auto;
}
.innerdiv{
width: 200px;
height: 200px;
border: 1px solid green;
/*设置盒子的外边距*/
/*margin-top: 20px;
margin-left: 20px;*/
/*设置横向居中*/
margin: auto auto;
}
</style>
</head>
<body>
<div class="outerdiv">
<div class="innerdiv">
你好
</div>
</div>
</body>
</html>
块元素和行内元素的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: lightyellow;
border: 1px solid lightcoral;
margin: 0px auto;
}
.s1{
/*行内元素设置宽和高未必有效
*块元素设置宽和高一定有效的
* */
width: 100px;
height: 100px;
background-color: greenyellow;
border: 1px solid blue;
/*span 是一个行内元素
* 行内元素没有盒子模型
* 行内元素没有办法设置内边距和外边距特征
* 只有块标签才有盒子模型 才可以设置内边距和外边距
* 如果一个行内标签 非要使用盒子模型那么可以将行内元素转换为块元素
* display block 行内转换为块 inline 块转换为行内
* */
display: block;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1">
<span class="s1">今天是3月6号</span>
</div>
</body>
</html>
第四节、浮动和定位及案例开发
浮动
可以让多个块标签处于同一行 不用转换成行内元素 宽和高以及盒子模型的特征的以保留
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outerDiv{
border: 1px solid blue;
width: 1000px;
height: 500px;
margin: 0px auto;
}
#d1,#d2,#d3{
border: 1px solid red;
width: 400px;
height: 200px;
/*在父级块标签中进行浮动*/
/*向右 浮动*/
/*float: right;*/
/*向左 浮动*/
float: left;
margin-left:20px;
margin-bottom: 20px;
}
#d1{
background-color: greenyellow;
}
#d2{
background-color:aqua;
}
#d3{
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outerDiv">
<div id="d1">
<h1>1</h1>
</div>
<div id="d2">
<h1>2</h1>
</div>
<div id="d3">
<h1>3</h1>
</div>
</div>
</body>
</html>
浮动案例
<head>
<meta charset="utf-8">
<title></title>
<style>
.ad_item a img{
width: 590px;
height: 160px;
}
.ad_item{
width: 590px;
height: 160px;
float: left;
}
#ad2,#ad4{
margin-left: 10px;
}
#ad3,#ad4{
margin-top: 20px;
}
#ad{
width: 1190px;
height: 340px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="ad">
<div id="ad1" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="https://www.12306.cn/index/images/abanner01.jpg" />
</a>
</div>
<div id="ad2" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="https://www.12306.cn/index/images/abanner02.jpg" />
</a>
</div>
<div id="ad3" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="https://www.12306.cn/index/images/abanner03.jpg" />
</a>
</div>
<div id="ad4" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="https://www.12306.cn/index/images/abanner04.jpg" />
</a>
</div>
</div>
</body>
定位
页面布局的一种手段
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.div1{
height: 200px;
width: 200px;
background-color: gray;
/*绝对定位 基于父级标签原点
移开以后会自动释放父级标签原点位置*/
position: absolute;
top: 100px;
left: 100px;
}
.div2{
height: 200px;
width: 200px;
background-color: burlywood;
position: absolute;
top: 400px;
left: 400px;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.div1{
height: 200px;
width: 200px;
background-color: gray;
/*相对定位 相对于自身原来的位置,移开之后,不会释放原点位置*/
position: relative;
top: 100px;
left: 100px;
}
.div2{
height: 200px;
width: 200px;
background-color: burlywood;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
</html>
相对浏览器窗口定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.div1{
height: 200px;
width: 200px;
background-color: yellow;
position: absolute;
top: 0px;
left: 0px;
}
.div2{
height: 200px;
width: 200px;
background-color: burlywood;
/*相对浏览器窗口定位*/
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
</html>
定位案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.note{
/*border: 1px solid red;*/
width: 50px;
height: 395px;
position: fixed;
right: 0px;
top: 150px;
}
.note_item1{
height: 86px;
width: 50px;
margin-bottom:5px;
}
.note_item2{
height: 122px;
width: 50px;
}
</style>
</head>
<body>
<div class="note">
<div class="note_item1">
<img src="img/note1.png" />
</div>
<div class="note_item1">
<img src="img/note2.png" />
</div>
<div class="note_item1">
<img src="img/note3.png" />
</div>
<div class="note_item2">
<img src="img/note4.png" />
</div>
</div>
br*100
</body>
</html>
第五节、列表标签及案例开发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
}
.outerintroduce{
width: 1190px;
height: 300px;
margin: 0px auto;
}
.introduce{
border: 1px solid #3B99FC;
width: 388px;
height: 298px;
float: left;
}
.introduce h3{
height: 40px;
text-align: center;
line-height: 40px;
background-color: #3B99FC;
color: white;
}
.introduce ul{
list-style: none;
margin-left: 50px;
list-style-image: url(img/dot.png);
}
.introduce ul li {
line-height: 45px;
}
.introduce ul a{
text-decoration: none;
color: darkslategray;
}
.introduce ul a:hover{
color: black;
}
#i1,#i2{
margin-right: 10px;
}
</style>
</head>
<body>
<div class="outerintroduce">
<div id ="i1" class="introduce">
<!--标题-->
<h3>最新发布</h3>
<!--列表-->
<ul>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
</ul>
</div>
<div id ="i2" class="introduce">
<!--标题-->
<h3>最新发布</h3>
<!--列表-->
<ul>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
</ul>
</div>
<div class="introduce">
<!--标题-->
<h3>最新发布</h3>
<!--列表-->
<ul>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
</div>
</div>
</body>
</html>
回顾
做网页的布局
盒子模型
处理的是具有包含关系的块标签的位置关系
内边距样式 padding
padding: 10px; 设置上下左右四个内边距都是10px
padding: 10px 20px; 上下内边距为10px 左右内边距为20px
padding: 10px 20px 30px 40px ; 上 右 下 左 四个内边距分别为 10 20 30 40 个像素
padding-left: 左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
外边距样式 margin
margin 10px; 设置上下左右四个外边距都是10px
margin 10px 20px; 上下外边距为10px 左右内外距为20px
margin 10px 20px 30px 40px ; 上 右 下 左 四个外边距分别为 10 20 30 40 个像素
margin-left: 左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
通过外边距可以设置一个块标签居父级块标签的中间位置
margin:0px auto;
块元素和行内元素的转换
通过 css 中 display : block(行内转块)/inline(块转行内)
一般只有块标签才有盒子模型
一般的行内元素设置宽和高的样式是不生效的
块元素设置宽和高的样式都是有效的
浮动
让多个块标签在处于同一行的同时 又保留块标签的盒子模型特征
css 中 float; left(向左浮动)/right(向右浮动)
让多个块标签在父级的块标签中浮动 不是在整个网页上浮动
定位
通过给定的坐标值 让块标签出现在网页上的指定位置
css 中 position:
absolute(绝对定位), 相对网页原点位置 会释放坐标原点 后续的标签可以占用该标签原来的位置
relative(相对对象), 相对于标签原有的位置定位 不会释放坐标原点 后续的标签不可以占用该标签原来的位置
fixed(相对窗口定位),相对浏览器窗口定位 和页面上的任何位置都没有关系 (广告)
标签：网页,color,标签,笔记,height,HTML,margin,CSS 来源： https://blog.csdn.net/weixin_50481461/article/details/113861530
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。