目录
什么是HTML、CSS
HTML是超文本标记语言，而CSS为HTML提供了一种样式描述，二者都是做网站的编程语言，浏览器把代码解析后的样子就是网站。
通过鼠标右键选择查看网页源代码查看网站的原始代码。一个网站是由许多个网页组成。
创建html文件：在此电脑磁盘中，点击鼠标右键选择新建文本文档，修改文件名为_demo.html
VS Code
VS Code,全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编辑器。
学习编辑器基本使用：
| ctrl+s | 保存 |
| ctrl+a | 全选 |
| ctrl+v | 粘贴 |
| ctrl+x | 剪切 |
| ctrl+c | 复制 |
| ctrl+z | 撤销 |
| ctrl+y | 前进 |
| shift+end | 从头选中一行 |
| shift+home | 从尾部选中一行 |
| shift+alt+↓ | 快速复制一行 |
| tab | 向后缩进 |
| tab+shift | 向前缩进 |
| alt+↓或↑ | 快速移动一行 |
| art+鼠标左键 | 多光标 |
| ctrl+d | 选择相同元素的下一个 |
设置：文件->首选项->设置（大小、art+鼠标左键是否换行word wrap)
网站开发的分工
UI设计师：设计稿→代码的实现
web前端开发工程师（H5开发）
web后端开发工程师（数据库）
html语言负责搭建结构，css负责对结构进行样式美化，js负责行为交互，这三者是的三大核心技术
web三大核心技术
html(结构） css(样式） Javascript(行为)
示例：
<style>
div{color: red;}
</style>
<div>HTML+CSS教程</div>
<script>
let div = document.querySelector('div');
let timer = null;
let flag = true;
div.onmouseover = function(){
timer = setInterval(()=>{
if (flag) {
div.style.color = 'blue';
div.style.fontStyle = 'normal';
}else{
div.style.color = 'red';
div.style.fontStyle = 'italic';
}
flag = !flag;
},500)
};
div.onmouseout = function(){
clearInterval(timer);
}
</script>html基本结构与属性
HTML: 超文本 、标记 、 语言 以下逐一解读：
超文本：文本内容＋非文本内容（图片、视频、音频）
标记：也可以叫做标签，大体上可以分为单标签与双标签 特别注意：标签可以上下排列，也可以组合嵌套
一般形式：
< 单词 > <单词></单词>
标签属性：修饰标签的一些功能，其形式大致如下：
<标签 属性1 = "值1" 属性2 = "值2">
语言：编程语言
<header>hello world</header>
<footer title="hi">hi HTML</footer>HTML初始代码
每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。初始代码是每个.html文件都有的代码，目的是符合HTML的规范写法。可以输入:!+Tab快捷键创建初始代码，代码形式如下：
<!DOCTYPE html><!--文档声明//-->
<html lang="cn"><!--html文件的最外层标签,包裹着所有html标签-->
<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>
hello world<!-- 显示网页内容 -->
</body>
</html>HTML注释
<!--内容-->
意义：1.把暂时不用的代码注释起来，方便日后使用
2.对开发人员进行提示
注释快捷键：1.ctrl＋/ 整行注释 2.shift+alt+a 创建注释符
HTML语义化
根据网页中内容的结构，选择合适的HTML标签进行编写
好处：1.在没有CSS的情况下，页面也能呈现出很好的内容结构
2.有利于SEO,让搜索引擎爬虫更好地理解网页内容
3.方便其他设备解析（如：屏幕阅读器、盲人阅读器）
4.便于团队维护和开发
标题与段落
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签，但h2-h6可以重复出现多次。区别于title，标题在这里是一个双标签。注意：h5与h6标签在网页中不经常使用
P标签：段落标签，同样为双标签。
段落->双标签：<p></p>
<!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>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<p>段落</p>
</body>
</html>文本修饰标签
<strong>表示强调，是一个双标签，可以达到字体加粗的效果
<em>也表示强调，但与<strong>相比稍弱，同样为一个双标签，可以达到斜体的效果
<sub>、<sup>下标文本、上标文本
<del>、<ins>删除文本、插入文本：一般情况下这二者是搭配使用的
<p>
<strong>这句话需要强调</strong>
<em>这句话也需要强调，但强调性稍弱</em>
</p>
<p>
a <sup>2</sup>+b <sup>2</sup>=c<sup>2</sup>
H <sub>2</sub>O
</p>
<p>
促销：原价 <del>300</del>，现价 <ins>100</ins>
</p>图片标签与图片属性
img:图片，是一个单标签
src:引入图片的地址
alt：当图片出现问题时，可以提示一段友好的文字
title：提示信息
width、height:控制图片的大小，单位是像素
<p>
<img src="这里填入图片的地址" alt="图片出现问题时显示的文字"title="提示信息"width="数值大小"height="数值大小">
</p>引入文件的路径地址
相对路径：.在路径中表示当前路径 ..在路径中表示上一级路径
在使用相对路径时，一定要注意图片的存储地址！图片离.html文件越近，相对地址越简单
对于相对路径，可以观察文件的存储位置确定路径关系，文件路径既可以使用反斜线\，也可以使用斜线/，注意：网络地址只能写斜线/，所以我们尽量避免写反斜线\
绝对路径：无参照物，是绝对的路径地址
<body>
<!--<img src="./Untitled-1.html" alt="">-->
<!--<img src="../Untitled-1.html" alt="">-->
<img src="E:/img/liziming.jpg" alt="">
</body>跳转链接
在这里我们引入两个重要标签，分别是<a>标签与<base>标签，知识点如下：
<a>标签是一个双标签，主要的作用是实现链接的功能
在<a>标签中有两个重要属性：href属性：链接的地址
target属性：可以改变链接打开的方式
<a href="https://www.bilibili.com/">bilibili</a>
<a href="https://www.bilibili.com/">
<img src="./img/blbl.jpg" alt="">
</a>如上所示，我们可以知道，链接不仅可以针对字符，还可以针对图片。
注意：target属性一般默认为_self，意义是在当前页面打开，通过改变为_blank可以实现在新窗口打开
<base>标签是一个单标签，可以改变<a>标签的默认行为，通常嵌套在<head>中
<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>-->
<base target="_blank">
</head>跳转锚点
锚点的实现是基于<a>标签，所以<a>标签的使用一定要掌握好
通过使用锚点，可以实现页面内的快速跳转
实现方法一：#号 id属性
<a href="">HTML</a>
<a href="">CSS</a>
<a href="">JavaScript</a>
<h2>HTML超文本标记语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2>CSS层叠样式表</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2>JS脚本</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
</body>实现方法二： #号 name属性
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<a name="css"></a>
<h2>CSS层叠样式表</h2>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<a name="js"></a>
<h2>js脚本</h2>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>特殊符号
当我们尝试编写一些文本时，有时会出现一些输入法无法输入的字符，如注册商标号等；又或者是我们在一段文字中尝试加入多个空格时，页面并不会解析这些空格。这些字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码
| 字符 | 含义 |
|   | 空格 |
| © | 版权 |
| ® | 注册商标 |
| < | 小于 |
| > | 大于 |
| & | 和 |
| ¥ | 人民币 |
| ° | 摄氏度 |
<p>
<html>
</p>
<p>
hello       world
</p>显示为：
无序列表
列表是一种常见的展示形式，在这里我们先来认识无序列表
无序列表涉及两个重要标签，分别是<ul>,<li>，分别指列表的最外层容器，列表项二者必须组合出现
通过type属性可以改变标签的样式（一般由css控制)
相关的样式设置可以参考HTML <ul> 标签的 type 属性
注意：两个标签中间不可以插入别的标签，但是<li>内部可以有其他标签
<!--以下是正确的写法
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>-->
<!--以下是错误的写法：
<ul>
<p>
<li></li>
</p>
</ul>-->
<ul type="circle">
<li><a href="#"><strong>大家好</strong></a></li>
<li><a href="#">我是练习时长两年半的坤坤</a></li>
<li><a href="#">喜欢唱</a></li>
<li><a href="#">跳、rap</a></li>
<li><a href="#">篮球</a></li>
</ul>有序列表
在有序列表这里我们引入<ol>,<li>两个标签，代表的意义参考无序列表的<ul>,<li>，二者意义相同
相关规则参考无序列表，这里不过多赘述，直接上代码和实际效果
样式设置可以参考HTML <ol> 标签
注：有序列表用的较少，且无序列表可以代替有序列表，样式同样可以通过css控制
<ol>
<li><a href="#"><strong>大家好</strong></a></li>
<li><a href="#">我是练习时长两年半的坤坤</a></li>
<li><a href="#">喜欢唱</a></li>
<li><a href="#">跳、rap、篮球</a></li>
</ol>定义列表
当列表项需要添加标题以及对标题进行解释时引入
<dl>:定义列表，类似<ul><ol>
<dt>:定义专有名词或者术语
<dd>:对名词进行解释和描述
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>嵌套列表
列表之间可以互相嵌套形成多层级列表
<ul>
<li>
湖北省
<ul>
<li>武汉</li>
<li>襄阳</li>
<li>鄂州</li>
</ul>
</li>
<li>
山东省
<ul>
<li>烟台市</li>
<li>青岛市</li>
<li>烟台市</li>
</ul>
</li>
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>江苏省</dt>
<dd>南京市</dd>
<dd>扬州市</dd>
<dd>苏州市</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>烟台市</dd>
<dd>青岛市</dd>
<dd>烟台市</dd>
</dl>
</dd>
</dl>
</ul>表格与表单
表格标签
在表格便签这里，我们引入以下几个标签：
<table>:最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
除此外还有三个语义化标签：
<tHead>,<tBody>,<tFoot>
注意：语义化标签只代表规范化，不具备效果
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022年6月20日</td>
<td><img src="./天气1.png" alt=""></td>
<td>阴天中雨</td>
</tr>
</tbody>
</table>注:在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。
表格属性
表格属性通常有以下几种：
border:表格边框
<cellpedding>：单元格内的空间
<cellspacing>：单元格之间的空间
<rowspan>：合并行
<colspan>：合并列
<align>：左右对齐方式：left,right,center
<valign>：上下对齐方式：top,middle,bottom
表单标签
在表单标签这一块，我们先介绍两个比较重要的标签
<form>标签：表单最外层容器
<input>标签：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，比如输入框、密码框、复选框等
type属性
-
text：普通的文本输入框
-
password:密码输入框
-
checkbox:复选框
-
radio：单选框
-
file:上传文件
-
submit：提交按钮
-
reset：重置按钮
<form action="">
<h2>输入框：</h2>
<input type="text" placeholder=" ">
<h2>密码框</h2>
<input type="password" placeholder=" ">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交和重置按钮</h2>
<input type="submit">
<input type="reset">
</form><textarea>：多行文本框
<select>,<option>：这是一对组合标签，起到下拉菜单的作用
<label>：辅助表单
checked:选定
selected:设置默认选项
disabled：锁定，使选项不能选择
size：可以设置显示项数，默认值为1
multiple：设置多选
<h2>多行文本框</h2>
<textarea name="" id="" cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select name="" id="">
<option selected disabled>请选择</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">苏州</option>
<option value="">南京</option>
</select>表格表单组合使用
表格表单互相组合形成数据展示效果，在写的时候我们注意，表格有嵌套规范，表单没有，所以再正常情况下我们优先写表单
<form action="">
<table border="1" cellpadding="30">
<tbody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>div标签与span标签
<div>表示一个“块”，有划分区域的作用，相当于一块区域容器，可以容纳各类网页元素，即HTML中大多数标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割为独立的部分，以此实现网页的规划与布局。
<span>是一个“内联”，用于修饰文字。
<div>
<h2><a href="#"></a>哔哩哔哩 <span>(゜-゜)つロ 干杯~</span>-bilibili</h2>
<a href=""></a><img src="https://ts1.cn.mm.bing.net/th?id=ODLS.4ce7043c-066c-4c41-bb41-16101bee101b&w=16&h=16&o=6&pid=1.2" alt="">
<p>这里有及时的动漫新番，活跃的ACG氛围，有创意的Up 主。大家可以在这里找到许多欢乐。</p>
<a href="#">https://www.bilibili.com</a>
</div>
3680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
