###01-什么是HTML？
-HTML 是用来描述网页的一种语言。-HTML 指的是超文本标记语言: HyperText Markup Language-HTML 不是一种编程语言，而是一种标记语言-标记语言是一套标记标签 (markup tag)-HTML 使用标记标签来描述网页-HTML 文档包含了HTML 标签及文本内容-HTML文档也叫做 web 页面
###02-VSCode基本使用
- Web前端常用开发工具- Visual Studio Code 微软出品 Microsoft- Sublime Text- WebStorm 和PyCharm出自同一个公司
-VSCode操作面板- 创建文件的两种方式- 创建文件，手动保存文件，不推荐- 打开本地文件夹后，再去创建文件，会自动保存而且在创建时就可以修改文件名称及后缀（推荐使用）
###03-HTML文档基本结构
```
<!DOCTYPE html> 文档声明类型，声明帮助浏览器正确地显示网页
<html> html文档的根标签
<head> 网页头部信息，用来做网页的基本配置<meta charset="utf-8"> 网页字符编码<title>html的基本结构</title> 网页在浏览器窗口中显示的标题</head>
<body>此标签中写网页中显示的内容</body>
</html>
```
###04-HTML文档创建的快捷方式
```
!+tab键
html5+tab键
```
###05-常用标签01
-h1~h6 header 标签
- img标签
- src:图片路径
- alt: 图片加载失败时显示，数据分析及搜索引擎收录图片
- title:光标放在图片上提示
-a 标签 界面跳转
```href = "地址/网址 http://"target: 目标 "_self" "_blank"<a>更多</a> 标签中的文字会显示出来，链接不会显示，但此文字会有跳转功能```
###06-绝对和相对路径
- 绝对路径
-Windows系统下的文件绝对路径:
- C:\Program Files\feiq\RecvFace\xxx.png
- Mac系统下的文件绝对路径:
- /Users/chao/Desktop/xxx.png
-相对路径 推荐使用
-./ 当前目录路径 可以省略
-../ 当前文件的上一级路径
-../../最多用两个不要多写
###07-常用标签02
- p 段落标签
- br 换行标签
- 字符实体
```
空格
< < 小于号
> > 大于号
& &字符实体
```
- div块标签
- span标签
###08-常用标签小结
```
<h1~h6> 标题
a标签 链接
img 图片标签 src alt title
p 标签
br 换行
div 块标签
span 圈住一块文字
< <
> >
空格
& &
```
###09-今日头条界面内容展示
- 用div细分模块方便界面布局 样式设置及调整
###10-什么是CSS？
-CSS 指层叠样式表 (Cascading Style Sheets)
-样式定义如何显示 HTML 元素
-把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
-外部样式表可以极大提高工作效率
###11-行内式（不推荐）
```
<div sytle="background-color:red">
```
###12-嵌入式
```
<head>
<style>
p{
background-color:red;
}
</style>
</head>
```
###13-外链式
```
<head>
<link rel="stylesheets" herf:"./css/main.css">
</head>
```
###14-CSS书写方式小结
-临时设置某一个标签的样式，或测试等可以选择行内式
-网站首页用嵌入式，优点加载快，网页显示快
-工作中常用外链式，其他界面，实现HTML和CSS的分离和复用
###15-CSS常用选择器01(重点)
-标签选择器
-类选择器
-层级选择器
###16-CSS常用属性
-文本属性
- font-size 字体大小
- color 文字颜色
- font-family 字体 'Microsoft YaHei'
- line-height 行高 可以让文字在指定高度垂直居中效果
- width 宽度
- height 高度
- border 边框
- solid 实线
- background-color 背景色
- margin 顺序上右下左 外边距
- padding 上右下左 内边距
###17-今日头条界面样式处理
###18-常用插件
-HTML Snippets 代码提示插件
-Path Autocomplete 路径提示插件
- 插件提示路径时后缀也自动带上
-"path-autocomplete.extensionOnImport": true,
-open in browser 用快捷键的方式打浏览器打到.html文件
-ctrl+B 在电脑默认浏览器打开
-Set default browser 设置默认打开浏览器
"open-in-browser.default": "chrome",
-ctrl + shift + B 在指定浏览器打开
###18-案例
<!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>08-今日头条</title>
<style>
/* 1.最外边的大框设置样式 */
.box{
width: 285px;
height: 310px;
border-top: 1px solid #c8dcf2;
border-bottom: 1px solid #c8dcf2;
/* 元素水平方向居中 */
margin: 0px auto;
/* red green blue */
}
/* 头部 */
.head{
height: 40px;
}
/* 今日头条文字 */
.head h3{
margin: 0px;
font-size: 16px;
font-family: "Microsoft Yahei";
color: #172c45;
/* 浮动 用了浮动后所有的元素都能排在一行 */
float: left;
line-height: 40px;
/* 设置下划线 */
/* text-decoration: underline; */
}
/* 更多 */
.head a{
font-size: 12px;
font-family: "Microsoft Yahei";
color: #172c45;
/* 右浮动 */
float: right;
/* 行高 设置文字垂直居中 */
line-height: 40px;
/* 清除下划线 */
text-decoration: none;
}
/* 人工智能段落 */
.box p{
font-size: 12px;
font-family: "Microsoft Yahei";
color: #737373;
line-height: 20px;
}
</style>
</head>
<body>
<!-- 大div表示整个内容 -->
<div class="box">
<!-- 1 头部div -->
<div class="head">
<!-- 1.2 今日头条标签 -->
<h3>今日头条</h3>
<!-- 1.3 更多 a标签 -->
<a href="#">更多>></a>
</div>
<!-- 2.图片 -->
<img src="images/banner.jpg" alt="人工智能">
<!-- 3.段落 -->
<p> 人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等.</p>
</div>
</body>
</html>