目录
一、什么是HTML和CSS
- 是做网站的编程语言。
- 浏览器把代码解析后的样子就是我们看到的网站
- 一个网站是由N多个网页组成的，每一个网页就是一个.html 文件
二、编辑器VS Code
- VS Code,全称Visual Studio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器
- 安装插件：语言包、open in browser、view in browser
学习编辑器基本使用
- 创建文件、文件夹、重命名、删除、搜索
- ctrl+s：保存
- ctrl+a：全选
- ctrl+x、ctrl+c、ctrl+v：剪切、复制、粘贴
- ctrl+z、ctrl+y：撤销、前进
- shift+end：从头选中一行
- shift+home：从尾部选中一行
- shift+alt+↓：快速复制一行
- alt+↑或↓：快速移动一行
- tab：向后缩紧
- tab+shift：向前缩进
- alt+鼠标左键：多光标
- ctrl+d：选择相同元素的下一个
三、深入了解网站开发
- UI设计师：设计稿
- web前段开发工程师：
（1）设计稿->代码
（2）数据库里的数据->显示到页面
（3）web前端三大核心技术：html->结构、css->样式、JavaScript->交互行为
- web后端开发工程师
四、Web前端的三大核心技术
- HTML:结构
- CSS：样式
- JavaScript:行为
五、HTML基本结构和属性
1、概述
HTML：超文本、标记、语言
超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>，标记也叫标签，例如：< header>、< footer>
语言：编程语言
1.1、标签
标记也叫作标签
写法分为两种：
（1）单标签< header>
（2）双标签< header>< /header>
创建标签的快捷键：单词+tab键标签是可以上下排列，也可以组合嵌套
<header>
hello word
<div> aaa </div>
<div>aaa</div>
</header>
<footer>hi html</footer>
标签的属性：来修饰标签的，设置当前标签的一些功能（鼠标在点击相应单词会有标签
）
<标签 属性=“值” 属性2=“值2”>
<header title="hello"> hello word</header>
<footer title="hi">hi html</footer>
2、HTML初始代码
每一个html文件都需要添加初始代码。初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码
!+tab键：快速创建HTML的初始代码
- < !DOCTYPE html>：文档声明：告诉浏览器这是一个html文件
- < html lang=“en”>：html文件的最外层标签:包裹着所有html标签代码， lang="en"表示是一个英文网站，lang="zh-CN"表示中文网站
- < head> ：输入网址的地方，头部设置
- < meta charset=“UTF-8”>：meta元信息：是编写网页的辅助信息， 此语句的辅助信息是整个网页采用国际编码，无论哪种语言都会被识别，不会出现乱码
- < title>Document< /title>：设置网页的标题
- < body> 显示网页内容区域< /body>
3、HTML中的注释
注释的代码，只有在文件中看得到，但是浏览器显示不出来
快捷键添加注释与删除注释
1、ctrl+/
2、shift+alt+a
意义：
1、把暂时不用的代码块注释起来，方便以后使用
2、 对开发人员进行提示
<!--注释的内容-->
例：<!--hello word-->
4、HTML语义化
所谓语义化指的是，根据网页中内容的结构，选择合适的html标签进行编写
好处：
- 在没有CSS的情况下，页面也能呈现出很好的内容结构。
- 有利于SEO，让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器等)。
- 便于团队开发与维护。
4.1、标题
标题->双标签：< h1>< /h1> …< h6>< /h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签
h2、h3等可以出现多次
h5\h6标签在网页中不经常使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</body>
</html>
4.2、段落
段落->双标签：< p>< /p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
4.3、文本修饰标签
强调 、双标签 ：<strong></strong>、<em></em>
区别：
- 写法和展示效果是有区别的，一个加粗、一个斜体
- strong的强调性更强，em的强调性稍弱。
下标：<sub></sub>
上标：<sup</sup>
删除文本 ：<del></del>
插入文本：<ins></ins>
注：一般情况下，删除文本都是和插入文本配合使用的。
<body>
a <sup>2</sup>+b <sup>2</sup>=c <sup>2</sup>
H <sub>2</sub>O
<p>
促销：原价<del>300</del>,现价<ins>100</ins>
</p>
</body>
4.4、图片标签与图片属性
< img>：单标签，图片
src：引入图片地址
alt：在图片有问题时，可以显示一段友好的提示文字
title：提示信息，鼠标放在图片上时会有提示信息
width、height：图片的大小
<body>
<img src="https://c-ssl.duitang.com/uploads/blog/202108/03/20210803132259_7a574.png" alt="图片" title="这是一张图片的提示信息" width="500" height="600">
</body>
4.5、引入文件的地址路径
- 相对路径
.表示在路径中表示当前路径：同一目录中，同一级，./
..表示在路径中表示上一级路径 ，…/
- 绝对路径
https://c-ssl.duitang.com/uploads/blog/202108/03/20210803132259_7a574.png
E：/ke/qf_dl201901/20190108/mg/animal/dog.jpg
<body>
<img src="./IMG_20220429_180552.jpg" alt="图片" title="这是一张图片的提示信息" width="500" height="600">
</body>
5、跳转链接
一个页面跳转到另外一个页面
5.1、< a>< /a>：双标签
- href属性：链接的地址
- target属性：可以改变链接打开的方式，默认情况下是在当前页面打开，target的值是_self，新窗口打开值为_blank
<body>
<!-- <img src="./IMG_20220429_180552.jpg" alt="图片"> -->
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.qfedu.com" target="_blank">
<img src="./IMG_20220429_180552.jpg" alt="图片" > <!--给图片加链接 ,点击图片就会到达链接处 -->
</a>
</body>
5.2、< base>：单标签
改变链接的默认行为
< base target=“_blank”>：此语句可以使a标签不用加target属性就可以使链接在新窗口打开，改变了默认行为
<!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>
<base target="_blank">
</head>
<body>
<!-- <img src="./IMG_20220429_180552.jpg" alt="图片"> -->
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.qfedu.com">
<img src="./IMG_20220429_180552.jpg" alt="图片" > <!--给图片加链接 -->
</a>
</body>
</html>
6、跳转锚点
在一个页面内进行跳转
6.1、#号+id属性
<body>
<a href="#html">html</a>
<a href="#css">css</a>
<a href="#js">js</a>
<h2 id="html">html超文本标记语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="css">css</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="js">js</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
</body>
6.2、#号+name属性
<body>
<a href="#html">html</a>
<a href="#css">css</a>
<a href="#js">js</a>
<a name="html"></a>
<h2>html超文本标记语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<a name="css"></a>
<h2 >css</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<a name="js"></a>
<h2>js</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
</body>
7、特殊符号
编写一些文本时，经常会遇到输入法无法输入的字符，如注册商标、版权符等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
8、列表标签
8.1、无序列表
< ul>、< li>：列表的最外层容器、列表项
注：ul、li必须是组合出现，它们之间是不能有其他标签的，li中间可以有
type属性：改变前面标记的样式（一般都是用css去控制）
- disc：默认值，实心圆
- circle：空心圆
- square：实心方块
- …
8.2、有序列表
< ol>、< li>：列表的最外层容器、列表项
注：
有序列表用的非常少，经常用的是无序列表，无序列表可以代替有序列表。
type属性：改变前面标记的样式（一般都是用css去控制）
8.3、定义列表
列表项需要添加标题和对标题进行描述的内容时使用定义列表
（1）< dl>：定义列表
（2）< dt>：定义专业术语或名词
（3）< dd>：对名词进行解释和描述
8.4、嵌套列表
列表之间可以互相嵌套形成多层级列表
<body>
<ul>
<li>
辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ul>
</li>
</ul>
</body>
9、表格标签及属性
9.1、表格标签
（1）< table>：表格的最外层容器
（2）< tr>：定义表格行
（3）< th>：定义表头
（4）< td>：定义表格单元
（5）< caption>：定义表格标题
注：
之间是有嵌套关系的，要符合嵌套规
（6）语义化标签：
< tHead>头部、< tBody>身体、< tFood>尾部
注：
不具备效果，只是为了表格更加规范
在一个table中 tBody是可以出现多次的，tHead、tFood只能出现一次
<body>
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年7月17日</td>
<td><img src="./1.png" alt=""></td>
<td>天气多云，会出现彩虹</td>
</tr>
<tr>
<td>2022年7月18日</td>
<td><img src="./2.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
</tBody>
</table>
</body>
9.2、表格属性
- border：表格边框
- cellpadding：单元格内的空间
- cellspacing：单元格之间的空间
- rowspan：合并行
- colspan：合并列
- align：left 、center、 right（左右对齐方式）
- valign：top、middle、bottom（上下对齐方式）
10、表单标签
（1）< form>：表单的最外层容器
（2）< input>：单标签，标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等
<body>
<form action="http://www.baibu.com"><!-- 最终要提交的地址 -->
<h2>输入框</h2>
<input type="text" placeholder="请输入用户名"> <!-- placeholder:使得框上会有提示信息 -->
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>苹果<!-- checked:默认会被选中 -->
<input type="checkbox">香蕉
<input type="checkbox" disabled>葡萄<!-- disable:不能被选中 -->
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gander">女
<!-- 通过name让它们变成一组，否则会出现男女两个都会被选中的状态 -->
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</body>
（3）< textarea>:多行文本框
（4）< select>、< option>：下拉菜单
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select size="2"><!-- size：可以同时显示两项选择 multiple:多选-->
<option selected disabled>请选择</option><!-- selscted:初始被选中 -->
<option>上海</option>
<option>北京</option>
<option>徐州</option>
</select>
（5）< label>：辅助表单，让可选择的范围变大，不仅点击按钮可以选择，点击男女也可以实现选择
<h2>单选框</h2>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gander" id="woman"><label for="woman">女</label
11、表格表单组合实例
表格表单可以组合使用，表格有嵌套规范，表单没有
<body>
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息 </td> <!-- 4行 --> <td colspan="2">总体信息 </td>
<td colspan="2">总体信息 </td> <!-- 2列 --> <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>
</body>
12、div与span
(1)、div（块）
div全称为division，“分割、分区”的意思，< div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div>标签中，< div>中还可以嵌套多层< div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
（2）、< span>（内联）
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行
<body>
<div>这是一个块</div>
<span>这是一个内联</span>
</body>
4875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
