9.HTML+CSS 基础
大约 11 分钟约 3364 字
9.HTML+CSS 基础
1，HTML
1-1 前言
软件架构
B/S
Browser/Server 网站
C/S
Client/Server QQHTML 的简介、发展史：
## 万维网联盟（W3C）维护。包含HTML内容的文件最常用的扩展名是.html，但是像DOS这样的旧操作系统限制扩展名为最多3个字符，所以.htm扩展名也被使用。虽然现在使用的比较少一些了，但是.htm扩展名仍旧普遍被支持。网站：
把所有的网站资源文件（HTML,CSS,JS,图片,视频等）整合到一起(的一个文件夹)
WEB前端：## HTML+CSS+JavaScript
HTML：## 结构标准，超文本标记语言，负责通过标签来表达网页的页面结构。
css：## 外观标准，层叠样式表标记语言，负责通过属性标记来表达网页的外观效果。重点：
我们学习 HTML 与 CSS 不是为了写样式，而是了解 HTML 标签的结构，CSS 中的选择器也就是长什么样子即可，为了后面的正则、xpath 与 bs4 做铺垫准备
1-2 什么是 HTML？
超文本标记语言
(1) 标签 也叫做 标记
(2) html 是由标签/标记 和内容组成的
(3) 标签 是由 标签名称 和属性组成的
实例：
<人 肤色=“黄色” 眼镜="很大"></人>
扩展：
使用协议为 http 超文本传输协议
普通文本：文字内容
超文本：视频、音频、图片、文字...
1-3 HTML 的主体标签
实例
<!DOCTYPE html>
#H5的头 声明文档类型 为html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">
之前的头文件 现在不用
<html>
<head>
<title>标题内容</title>
<meta charset="UTF-8" />
#设置字符集
</head>
<body>
放html的主体标签
</body>
</html>- html: ## 文件是网页，浏览器加载网页，就可以浏览
- head: ## 头部分，网页总体信息
+ title:## 网页标题
+ meta：## 网页主体信息，会根据name(author/description/keywords)
+ link:## 引入外部文件
+ style：## 写入CSS
+ script：##写入JS
- body:## 身体部分，网页内容1-4 HTML 的标签
标签分为：单标签/单标记
如：<br /> /<br >
双标签/双标记
如: <p></p>
1-4-1 文本标签
<div></div>块标签 作用是设定字、画、表格等的摆放位置<p></p>段落标签 自成一段 会将上下的文字 和它保持一定的距离<h1>-</h6>标题标签 字体加粗 自占一行
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--文本标签-->
双标签/双标记 成对出现的
<!--<div>双标签</div>-->
<p>段落 我会自成一段</p>
<p>段落 我会自成一段</p>
<p>段落 我会自成一段</p>
<p>段落 我会自成一段</p>
<h1>h1标题标签</h1>
<h2>h1标题标签</h2>
<h3>h1标题标签</h3>
<h4>h1标题标签</h4>
<h5>h1标题标签</h5>
<h6>h1标题标签</h6>
<!--<h7>h1标题标签</h7>-->
</body>
</html>1-4-2 图片标签
<img /> 在网页中插入一张图片
属性：
src： ## 图片名及url地址 (必须属性)
alt: ## 图片加载失败时的提示信息
title：## 文字提示属性
width：## 图片宽度
height：## 图片高度实例:
<img src="图片地址" title="文字提示" alt="图片加载失败显示得信息" width="宽" height="高" border="边框" />
如果宽和高 只给一个 那么为等比缩放 如果俩个都给 那么会按照 你所给的宽和高来显示
1-4-3 路径
1. 相对路径
./ ## 当前
../ ## 上一级
2. 绝对路径(了解)
##一个固定得链接地址(如域名)
##从根磁盘 一直到你的文件得路径1-4-4 超链接
<a href="链接地址" title="提示信息" target="打开方式">点击显示得内容</a>
属性：
href 必须，指的是链接跳转地址
target:
_blank ## 新建窗口得形式来打开
_self ## 本窗口来打开(默认)title：文字提示属性（详情）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<a href="http://www.baidu.com">去百度</a>-->
<a href="http://www.baidu.com" target="_blank">去百度</a>
</body>
</html>
1-4-5 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<ul>
<li>当前标签要认识熟</li>
<li>当前标签要认识熟</li>
<li>当前标签要认识熟</li>
<li>当前标签要认识熟</li>
</ul>
<ol>
<li>当前标签要认识熟</li>
<li>当前标签要认识熟</li>
<li>当前标签要认识熟</li>
<li>当前标签要认识熟</li>
</ol>
<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-4-5 HTML 注释
多行注释：
注释的作用：
- 代码的调试
- 解释说明
1-5 iframe
1-5-1 定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
1-5-2 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<iframe
src="http://mediaplay.kksmg.com/2022/07/25/h264_720p_600k_39038-DFTVHD-20220725175000-4800-310117-600k_mp4.mp4"
></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
1-6 TABLE 表格
table 表格
1-6-1 属性：
+ width ## 宽
+ height## 高
+ border ## 边框1-6-2 标签：
tr ## 行标签
th ##列头标签
td ## 列标签实例：
<table>
<tr>
<th>我是表头</th>
<th>我是表头</th>
<th>我是表头</th>
</tr>
<tr>
<td>我是单元格</td>
<td>我是单元格</td>
<td>我是单元格</td>
</tr>
</table><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<table border="1" width="700">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
<td>爱好</td>
</tr>
<tr>
<td>lucky</td>
<td>18</td>
<td>189</td>
<td>看美女</td>
</tr>
<tr>
<td>lucky</td>
<td>18</td>
<td>189</td>
<td>看美女</td>
</tr>
<tr>
<td>lucky</td>
<td>18</td>
<td>189</td>
<td>看美女</td>
</tr>
<tr>
<td>lucky</td>
<td>18</td>
<td>189</td>
<td>看美女</td>
</tr>
<tr>
<td>lucky</td>
<td>18</td>
<td>189</td>
<td>看美女</td>
</tr>
</table>
</body>
</html>
1-7 FORM 表单
标签： <form></form>
1-7-1 form 属性
action 提交的地址 method 提交的方式 get (1) 默认不写 为get传参 url地址栏可见 (2) 长度受限制 （IE浏览器2k火狐8k） (3)
相对不安全 post (1) url地址栏不可见 长度默认不受限制 (2) 相对安全1-7-2 input 标签
<input> 表单项标签 input 定义输入字段，用户可在其中输入数据。
如：
<input type="text" name="username">
1-7-3 select 标签创建下拉列表。
属性：
name属性:## 定义名称,用于存储下拉值的
##### 内嵌标签：
`<option>` ## 下拉选择项标签,用于嵌入到`<select>`标签中使用的;
##### 属性：
value属性:## 下拉项的值1-7-4 input 标签
type 属性:表示表单项的类型:
值如下:
- text:单行文本框
- password:密码输入框
- submit:提交按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<h2>表单</h2>
<!--<form action="" method="POST">-->
<form action="" method="GET">
<p>
用户名:
<input type="text" placeholder="请输入用户名" name="username" />
</p>
<p>
密码:
<input type="password" placeholder="请输入密码" name="password" />
</p>
<p>
<select name="address" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
</p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
</html>
2,CSS
2-1 css 的语法
## 什么是css？
层叠样式表
## 命名规则：
使用字母、数字或下划线和减号构成，不要以数字开头
## 格式：
选择器{属性:值;属性:值;属性:值;....}
## 其中选择器也叫选择符CSS 中注释
/* ... */
2-2 在 HTML 中如何使用 css 样式
2-2-1 内联方式（行内样式）
就是在HTML的标签中使用style属性来设置css样式 格式：
<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div style="border-radius:50px;background-color: aqua;border: 1px solid red; width: 100px;height: 100px;"></div>
</body>
</html>
2-2-2 内部方式（内嵌样式）
就是在 head 标签中使用<style type="text/css">....</style>标签来设置 css 样式 格式：
<style type="text/css">
....css样式代码
</style>**特点：**作用于当前整个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
div {
border-radius: 50px;
background-color: aqua;
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2-2-3 外部导入方式（外部链入）
（推荐）就是在 head 标签中使用
<link/>标签导入一个 css 文件，在作用于本页面，实现 css 样式设置格式：
<link href="文件名.css" type="text/css" rel="stylesheet"/>特点：作用于整个网站
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <link rel="stylesheet" href="lucky.css" /> </head> <body> <div></div> </body> </html>
2-3 css2 的选择符：
2-3-1 html 选择符（标签选择器）
就是把 html 标签作为选择符使用 如 p{....} 网页中所有 p 标签采用此样式
h2{....} 网页中所有h2标签采用此样式2-3-2 class 类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器 P）
定义： .类名{样式....} 匿名类
其他选择符名.类名{样式....} 使用：<html标签 class="类名">...</html标签>
.mc{color:blue;} /_ 凡是 class 属性值为 mc 的都采用此样式 _/
注意：类选择符可以在网页中重复使用
2-3-3 Id 选择符(ID 选择器)
定义： #id名{样式.....} 使用： `
<html标签 id="id名">...</html标签>
` 注意：## id选择符只在网页中使用一次<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
/*给所有div标签设置此样式*/
/*div{*/
/*只给class属性名为lucky1的标签设置此样式*/
div {
border-radius: 50px;
background-color: aqua;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*只给lucky1设置红色背景色 多次使用*/
.lucky1 {
background-color: red;
}
/* id选择器 只能使用一次 */
#id_lucky {
background-color: yellow;
}
</style>
</head>
<body>
<div id="id_lucky"></div>
<div class="lucky1"></div>
<div class="lucky1"></div>
</body>
</html>
2-3-4 关联选择符（包含选择符）
格式： 选择符 1 选择符 2 选择符 3 ...{样式....} 例如： table a{....} /*table 标签里的 a 标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
/*li{*/
/*ul 里面所有的li和div选择器都采用此样式*/
ul li,
div {
border-radius: 50px;
background-color: aqua;
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>123</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
</html>
2-3-5 组合选择符（选择符组）
格式： 选择符 1,选择符 2,选择符 3 ...
h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/2-4 CSS3 中的选择器
2-4-1 关系选择器：
div>p ## 选择所有作为div元素的子元素p
div+p ## 选择紧贴在div元素之后p元素
div~p ## 选择div元素后面的所有兄弟元素p<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
/*li{*/
/*ul 里面所有的li选择器都采用此样式*/
/*ul li{*/
/*只给ul的儿子li采用此样式*/
/*ul>li{*/
/**/
/*ul+li{*/
/*ul后面所有同级的li都采用此样式*/
ul ~ li {
border-radius: 50px;
background-color: aqua;
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>123</div>
<ul>
<li></li>
<li></li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
</html>
2-4-2 属性选择器：
[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
/*input{*/
/*只给input选择器 具有value属性的标签采用此样式*/
/*input[value]{*/
/*只给input选择器 name属性值为password的标签设置此样式*/
/*input[name="password"]{*/
input[type="text"] {
border: 10px dotted red;
}
</style>
</head>
<body>
<p><input type="text" name="username" value="'lucky" /></p>
<p><input type="text" name="password" /></p>
</body>
</html>