html+css学习第一节

一、初识HTML、CSS

1.什么是HTML、CSS？

它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。
浏览器把代码解析后的样子就是我们看到的网站，鼠标右键选择查看网页源代码。
例如：抖音网页源代码

HTML:了解详情
CSS:了解详情

二、VS code 编辑器

1.什么是VS code 编辑器

VS code，全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编辑器。下载地址

1.安装插件：语音包、open in browser 、view in borwser（方便运行网页）

2.学习编辑器的基本使用
创建文件、创建文件夹、重命名和删除
设置：文件→首选项→设置（大小、是否换行 word wrap）


3.编辑器快捷键：
Ctrl+z 撤销 、Ctrl+y 前进、
Ctrl+x 剪切、Ctrl+v 复制、
Ctrl+a 全选、Ctrl+s 保存
Shift+end 从头部选中一行
Shift+home 从尾部选中一行
Shift+alt+↓ 快速复制一行
Alt+↑或↓ 快速移动一行
Tab 向后缩进
Tab+shift 向前缩进

Alt+鼠标左键 多光标
Ctrl+d 选择相同元素的下一个

三、chrome浏览器

1.初识

谷歌浏览器（Google Chrome）是一款可让您更快捷、轻松且安全地使用网络的浏览器。
chrome下载地址

2.浏览器市场状况

百度市场常用浏览器资源访问量统计

世界五大浏览器

四、深入了解网站开发

 一个大型网站的开发，需要团队的配合，各个岗位不可或缺。

1.人员

UI设计师：设计稿（提供模板、图片）
web前端开发工程师（H5开发）
设计稿→代码
数据库里的数据→显示到页面
HTML+CSS
HTMLA：结构 CSS：样式
web后端开发工程师（数据存储和管理）
PS:web前端开发工程师另一项职能

2.javascript与HTML、CSS的区别

javascript与css的区别
javascript与HTML的区别

五、Web前端的三大核心技术

1.三大核心技术

HTML:结构
CSS:样式
JavaScript:行为
例如：

2.HTML的基础结构和属性

超文本标记语言（Hyper Text Markup Language）,标准通用标记语言下的一个应用。是网页制作必备的编程语言。
HTML:超文本 标记 语言
超文本：文本内容 + 非文本内容（图片、视频、音频等）
标记：<单词>
语言：编程语言
标记（标签）： <header> <footer>
写法有两种：
单标签：<header>
双标签：<header></header>
创建标签的快捷键：Tab+单词→<单词>
标签可以上下排列，也可以上下嵌套。
HTML常用标签

3.属性

标签的属性：来修饰标签的，设置标签的一些功能。
<标签 属性=“值” 属性2=“值2”…>

六、HTML的初识代码

每一个.html文件都需要添加初识代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初识代码。

1.创键初识代码

快捷键：Tab键：快速的创建html的初始代码

七、HTML的注释

1.形式

写法：<!-- 注释的内容 --> 在浏览器中看不到，只能在代码中看到注释的内容。
意义：
1.把暂时不用的代码注释起来，方便以后使用。
2.给开发人员提示

2.快捷方法

快捷添加注释与删除注释:
1.Ctrl+/
2.shift+alt+a

八、HTML语义化

所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写。

1.好处

1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4.便于团队开发与维护。

九、标题与段落

1.标题

标题→双标签：<h1></h1> … <h6></h6>

在一个网页中，h1标题最重要，每个.html文件只能出现一次h1标签。
h5,h6标签在网页中不经常使用。

2.段落

段落→双标签<p></p>

3.示例

九、文本修饰标签

1.强调

强调→双标签：<strong></strong>、
<strong>:表示强调，会对文本进行加粗
<em>:表示强调，会对文本进行斜体

2.两者区别

1.写法和展示效果有区别，一个是加粗，一个是斜体
2.strong强调性更强，em强调性稍弱。

3.上标文本和下标文本

<sub>:下标文本
<sup>：上标文本

4.删除文本和插入文本

<del>:删除文本
<ins>:插入文本
注：一般情况下，删除文本与插入文本配合使用。

十、图片标签与图片属性

1.标签

<img>→单标签
src：引入图片地址
alt：当图片出现问题的时候，可以显示一段友好的提示文字。
title：提示信息
width、height：图片的大小

2.属性

十一、引入文件的地址路径

1.相对路径

.在路径中表示当前路径
…在路径中表示上一级路径

2.绝对路径

尽量避免写反斜线

十二、跳转链接

1.链接标签

a→双标签<a></a>
href属性：链接的地址
target属性：可以改变打开链接的方式，默认情况下：在当前页面打开_self
新窗口打开_blank

2.跳转链接

base→单标签：改变链接的默认行为

十三、跳转锚点

1.方式一

#号
id属性

2.方式二

#号
name属性

十三、特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，还有一些文字中加入多个空格式时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。

1.专门代码

2.形式和作用

1.&+字符
2.解决冲突 左右尖括号、添加多个空格的实现
3.常用字符 &it；&gt；&nbsp；

十四、无序列表

1.形式

无序列表→ul li 符合嵌套的规范

十五、有序列表

1.形式

十六、定义列表

1.定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述