文章目录

HTML和CSS（7.17-7.20）
- 一、基础知识
- - HTML、CSS是什么？
  - 网站
  - 网站开发
  - web开发的三大技术
- 二、HTML
- - 1.html的基本结构与属性
  - 2.html基础代码
  - 3.HTML的语义化
  - 5.音频和视频
  - 6.超链接
  - 7.表单
  - 8.列表
  - 9.表格
  - 10.语义标签
  - 11.特殊符号
  - 12.作业练习
- 三、CSS
- - 1.样式定义方式
  - - 1.1行内样式表
    - 1.2内部样式表
    - 1.3外部样式表
  - 2.选择器
  - - 2.1标签选择器
    - 2.2ID选择器
    - 2.3类选择器（最为常用）
    - 2.4伪类选择器
    - 2.3类选择器（最为常用）
    - 2.4伪类选择器

HTML和CSS（7.17-7.20）

一、基础知识

web文档

HTML、CSS是什么？

他们是编程语言，我们所看到的网站实际上就是浏览器解析代码之后的样子。两种语言相互配合来开发网页

网站

网站是由多个网页（.html）组成的。

网站开发

UI设计师：设计稿

web前端开发工程师：设计稿-》代码，数据显示到页面，HTML（结构）+CSS（样式）+js(行为，交互)

web后端开发工程师：

web开发的三大技术

HTML（结构）
CSS（样式）
js(行为，交互)

二、HTML

html:超文本标记语言

超文本：文本内容和非文本内容

标记：“<···>”

1.html的基本结构与属性

标签的属性

用来修饰标签，设置标签的功能
属性不只一个

<标签 属性1=“值” 属性2=“值”>

2.html基础代码

vscode快捷键!+Tab

<!DOCTYPE html>//文档声明，告诉浏览器是html文件
<html lang="en">//lang="en"表示英文网站，"zh-CN"表示英文网站
<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>显示网页内容的区域
</body>
</html>

3.HTML的语义化

根据网页的内容结构，选择合适的html标签进行编写

<div></div>:段落标签

<span></span>:行内标签

<h1></h1>....<h6></h6>:标题

其中h1最重要，一个html文件中只能出现一个h1标签

<p>这是一个段落</p>：段落标签

注意：会忽略回车课空格，需要特殊字符产生回车<br>和空格&nbsp

<pre><pre>标签

输出文本内容，等宽字体，保留空格和回车，就是写什么，显示什么

<br>:换行标签

<hr>水平线标签

<i></i>斜体标签

<b></b>加粗标签

<del></del>删除线

<ins></ins>:下划线

<img width="" height="" src="地址" alt="图片无法显示的时候显示的文字（一般为图片内容）">:图片标签

5.音频和视频

音频

1.<audio controls src="音频地址"></audio>：音频标签

2. <source src="地址" type="audio/mpeg">

type:表示格式

<audio controls><source src="static/audios/audios02.mp3" type="audio/mpeg">//当第一种无法播放的时候会自动播放下一个音频<source src="static/audios/audios01.mp3" type="audio/mpeg"><source src="static/audios/audios02.mp3" type="audio/mpeg"></audio>

视屏

1.<video controls height="300" src="地址"></video>：视频标签

2.<source src="地址" type="vedio/mp4">

<video controls><source src="static/videos/video1.mp4" type="video/mp4">//当第一种无法播放的时候会自动播放下一个视屏<source src="static/videos/video2.mp4" type="video/mp4">
</video>

6.超链接

<a href="跳转地址">超链接的文字显示，点击文字进行跳转（也可以是图片任意~~~）</a>：超链接标签

<a href="https://baidu.com" target="_blank">百度</a>
target="_blank"属性表示点击跳转到一个新页面，不加则在当前页面跳转

7.表单

<form></form>标签

<form action="连接、函数，将数据提交给后端"><label for="username">用户名</label><input type="text" name="username" id="username">//<input>的type有很多<button type="submit">提交</button>
</form>

<textarea></textarea>:可变行数、列数的文本框

 <label for=""></label>
<textarea name="" id="" cols="30" rows="10"></textarea>

下拉框

<section><option selected value="cpp">CPP</option>//selected表示默认选择CPP否则默认选择第一个<option value="java">java</option></section>

8.列表

·<ul></ul>和<li></li>有序列表

<ol></ol>和<li></li>无序列表

9.表格

<!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>
</head><body><table><caption>成绩单</caption><thead><tr><!-- 表头用th --><th>姓名</th><th>数学</th><th>语文</th><th>英语</th></tr></thead><tbody><tr><td>hxw</td><td>100</td><td>100</td><td>100</td></tr><tr><td>hww</td><td>100</td><td>100</td><td>100</td></tr></tbody></table>
</body></html>

10.语义标签

作用：使得代码分工一目了然

<!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><header><h3>我的收藏</h3><nav><ul><li><a href="edit.html">编辑</a></li><li><a href="edit.html">设置</a></li><li><a href="edit.html">主页</a></li></ul></nav></header><hr><section><h4>图片</h4><figure><img width="200" src="static/images/logo.png" alt="logo"><!-- 图片注释 --><figcaption>logo</figcaption></figure><figure><img width="200" src="static/images/大山.jpg" alt="logo"><!-- 图片注释 --><figcaption>logo</figcaption></figure></section><hr><!-- 以下为文章 --><section><h4>文章</h4><article><h5>文章标题</h5><p>1111111</p><p>2222222</p></article><article><h5>文章标题</h5><p>1111111</p><p>2222222</p></article></section><footer><h4>页脚</h4>&copy;版权所有</footer>
</body></html>

11.特殊符号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukqEquXG-1658296765830)(C:\Users\惠普\Pictures\编程截图\特殊符号.png)]

12.作业练习

练习一

<!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>Web应用课作业</title><meta name="keywords" content="acwing,web,html"><meta name="description" content="本课程为【AcWing工程课系列——Level-3 第一篇】《Web应用课》，讲解Web相关知识。"><link rel="icon" href="static/images/logo.png">
</head><body></body></html>

练习二

<!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><h2>春江花月夜</h2><h5>张若虚</h5><p>春江潮水连海平，海上明月共潮生。<br>滟滟随波千万里，何处春江无月明！<br>江流宛转绕芳甸，月照花林皆似霰；<br>空里流霜不觉飞，汀上白沙看不见。<br>江天一色无纤尘，皎皎空中孤月轮。<br>江畔何人初见月？江月何年初照人？<br>人生代代无穷已，江月年年望相似。</p><hr><pre>int main()
{int a, b;scanf("%d%d", &a, &b);printf("%d %d\n", a, b);return 0;
}</pre><p><i>春眠不觉晓，</i><b>处处闻啼鸟。</b><del>夜来风雨声，</del><ins>花落知多少。</ins></p>
</body></html>

练习三

 <!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 width="600" src="static/images/大山.jpg" alt="山"></body></html>

练习四

<!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><video width="600" controls src="static/videos/video1.mp4"></video><br><audio controls src="static/audios/audios01.mp3"></audio>
</body></html>

练习五

<!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><a href="/about.html">about</a><a href="https://www.acwing.com" target="_blank"><img width="50" src="static/images/logo.png" alt="logo"></a>
</body></html>

练习六

<!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><form action="/logo.html"><label for="username">用户名</label><input type="text" name="username" id="username" minlength="3" maxlength="15" placeholder="用户名" required><br><label for="age">年龄</label><input type="number" name="age" id="age" required placeholder="年龄"><br><label for="email">邮箱</label><input type="email" name="email" id="email" required placeholder="邮箱"><br><label for="password">密码</label><input type="password" name="password" id="password" required placeholder="密码"><br><label for="resume">个人简介</label><textarea name="resume" id="resume" cols="30" rows="10" placeholder="个人简介"></textarea><br><label for="lang">编程语言</label><select name="lang" id="lang"><option value="CPP">CPP</option><option value="JAVA">JAVA</option><option value="C">C</option></select><br><button type="submit">提交</button></form></body></html>

练习七

<!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><ol><li>第一讲<ul><li>第一小节</li><li>第二小节</li><li>第三小节</li></ul></li><li>第三讲<ol><li>第一小节</li><li>第二小节</li><li>第三小节</li></ol></li></ol>
</body></html>

练习八

<!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><table><caption>成绩单</caption><thead><tr><th>姓名</th><th>数学</th><th>语文</th><th>英语</th></tr></thead><tbody><tr><td>Alice</td><td>100</td><td>99</td><td>98</td></tr><tr><td>Bob</td><td>99</td><td>98</td><td>97</td></tr><tr><td>Tom</td><td>98</td><td>97</td><td>96</td></tr></tbody></table>
</body></html>

练习九

<!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><header><h3>我的收藏夹</h3></header><section><h4>图片</h4><figure><img width="100" src="static/images/logo.png" alt="logo"><figcaption>Logo</figcaption></figure><figure><img width="100" src="static/images/大山.jpg" alt="山"><figcaption>山</figcaption></figure></section><section><h4>古诗</h4><article><h5>春晓</h5><p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p></article><article><h5>咏柳</h5><p>碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。</p></article></section><footer>&copy;2018-2022 Me</footer>
</body></html>

练习十

<!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>&copy;&lt;Web&gt;版权所有
</body></html>

三、CSS

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。

1.样式定义方式

1.1行内样式表

直接定义在标签的style属性中。

作用范围：仅对当前标签产生影响。

//两者显示效果相同，上面是使用属性，下面是css行内样式表
<img width="300" src="static/images/logo.png" alt="logo"><br>
<img src="static/images/logo.png" alt="logo" style="width: 300px;">

1.2内部样式表

在一个页面下，对某一类型的标签统一修改(提高代码复用性)

<!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>img {width: 500px;height: 500px;border-radius: 50%;}</style><style type="text/css">p {width: 100px;height: 100px;background-color: lightgreen;}.blue-p {background-color: blue;}.big {width: 200px;height: 200px;}</style>
</head><body><img class="big" width="300" src="static/images/logo.png" alt="logo"><img src="static/images/logo.png" alt="logo" style="width: 300px;"><p class="blue-p">1</p><p>2</p><p class="blue-p big">3</p><!-- calss里面可以写多个（用空格隔开） --><p>4</p><p>5</p></body></html>

1.3外部样式表

新建一个css文件夹，将写在内部样式表的内容复制到该文件夹下的一个css文件中

在需要使用此css样式的页面动态链接到当前页面

<link rel="stylesheet" href="static/css/style.css" type="text/css">
<link rel="stylesheet" href="static/css/style2.css" type="text/css">

一个css文件和引用于多个html文件

2.选择器

作用：高效的选出我们所希望选择的标签

2.1标签选择器

根据标签名字进行选择

div {height: 100px;width: 100px;background-color: lightblue;margin-bottom: 10px;/* 给div底部加上页边距 */
}p {height: 100px;width: 100px;background-color: pink;
}

2.2ID选择器

根据id进行选择，同一个页面id不重复，使用#来进行选择

#mydiv {background-color: black;
}#myp {background-color: aqua;
}

<body><div id="mydiv">div 1</div><div>div 2</div><div>div 3</div><div>div 4</div><p>p 1</p><p id="myp">p 2</p><p>p 3</p><p>p 4</p></body>

2.3类选择器（最为常用）

使用class进行选择，与id不同的是：id在一个页面应该唯一，class则可以重复。此外class=“多个用空格隔开的标签”。同一个标签可以有多个class（一个人可能有多重身份，大学生，在某个班级）。

类标签使用.+标签名

想要那个标签具有该样式，只要在他的class里面加上类选择器的名字。非常方便！

.big-tag {width: 200px;height: 200px;
}.red-tag {background-color: red;
}

 <div class="red-tag big-tag">div 1</div><div>div 2</div><div>div 3</div><div>div 4</div><p>p 1</p><p id="myp">p 2</p><p class="red-tag">p 3</p><p>p 4</p>

2.4伪类选择器

用于定义元素的特殊状态

链接伪类选择器

link链接访问前的样式
visited链接访问后的样式
hover鼠标悬停时的样式
active鼠标点击后长按时的样式
focus聚焦后的样式
位置伪类选择器：

nth-child(n)选择是其父标签第n个子元素的所有元素。
目标伪类选择器：

target当url指向该元素时生效。

<p>p 3</p>
<p>p 4</p>

```