HTML+CSS系列教程（第1

HTML+CSS系列教程

一.初识html和css:
- 1.定义：是做网站的编程语言。html:[添加链接描述](https://kuai.so.com/bb5130fdaef44c6dcdbb690e8ee9a824/wenda/Selectedabstracts/www.qiuwen.wang?src=wenda_abstract) css[添加链接描述](https://www.how234.com/ebymnbrfj.html)
- 2.关于.html文件：
- - 1.如何创建：
  - 2.如何打开：
二.宇宙第一编辑器vs code:
- 1.编辑器的基本使用：
三.Chrome浏览器：
- 1.市场上常见的五大浏览器：[添加链接描述](https://jingyan.baidu.com/article/3f16e003d13c612591c10386.html)
四.深入了解网站开发：
- 1.[JavaScript,与HTML,CSS之间的关系][添加链接描述](https://www.cnblogs.com/cjeandailynotes/p/10431311.html)
五.web三大核心技术:
六.HTML基础结构与属性：
- 1. html: 超文本标记语言
七.HTML初始代码：
八.HTML注释：
九.HTML语义化
- 1.好处：
十.标题与段落：
- 1.标题
- 2.段落
十一.文本修饰标签：
十二.图片标签和图片属性：
十三.引入文件的地址路径：
- 1.相对路径
- 2.绝对路径
十五.跳转链接
十六.跳转锚点：
- 1.实现一：
- 2.实现二：
十七.特殊符号：
十八.无序列表：
十九.有序列表：
二十.定义列表：

一.初识html和css:

1.定义：是做网站的编程语言。html:添加链接描述 css添加链接描述

2.关于.html文件：

1.如何创建：

在指定的目录下点击右键新建一个文本文档，命名为.html的文件

2.如何打开：

在打开方式中可以找到记事本，输入hello world ，再拖拽到浏览器中打开。同时点击右键可以看到原始代码。

二.宇宙第一编辑器vs code:

1.编辑器的基本使用：

       创建文件  创建文件夹   重命名和删除设置：文件->首选项->设置（大小、是否换行wold wrap）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:选择相同元素的下一个

三.Chrome浏览器：

1.市场上常见的五大浏览器：添加链接描述

四.深入了解网站开发：

1.[JavaScript,与HTML,CSS之间的关系]添加链接描述

五.web三大核心技术:

 HTML:结构CSS:样式Javascript:行为

六.HTML基础结构与属性：

1. html: 超文本标记语言

        1.超文本： 文本内容+非文本内容（图片，视频，音频等）2.语言：编程语言3.标记：<单词>   标记也叫标签：分为单标签和双标签；

<header>
<footer>

创建标签的快捷键：tab+单词-> <单词>
标签可以上下排列，也可以组合嵌套。
HTML常见标签：

  CTRL+y：前进shift+end：从头选中一行shift+home：从尾部选中一行shift+alt+↓：快速复制一行alt+↑或↓：快速移动一行tab+shift：向前缩进

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

七.HTML初始代码：

1.定义：每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。
！+tab：快速创建HTML的初始代码

八.HTML注释：

概念：注释的代码，只有在文件中看得见，但是浏览器显示不出来注释的内容。
意义：把暂时不用的代码注释起来，方便以后使用。
快捷添加注释和删除注释：

1.ctrl+/
2.shift+alt+a

九.HTML语义化

定义：根据网页中内容的结构，选择合适的HTML标签进行编写。

1.好处：

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

十.标题与段落：

1.标题

标题->双标签：
用h表示，在一个网页中，h1标题最重要，并且在一个html文件中，只能出现一次。

2.段落

段落->双标签，用p表示

十一.文本修饰标签：

强调->双标签
<strong></strong>表示强调，会对文本进行加粗
<em></em>表示强调，会对文本进行斜体区别： strong的强调性更强，em的强调性稍弱；
<sub></sub>  下标文本
<sup></sup>:上标文本
<del></del>删除文本.
<ins></ins>插入文本 注：一般情况下，删除文本和插入文本都是配合使用的。

十二.图片标签和图片属性：

img->单标签
src:引入图片的地址
alt:当图片出现问题的时候可以显示一段友好的提示文字
title:提示信息
width,height:控制图片的大小

十三.引入文件的地址路径：

1.相对路径

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

2.绝对路径

真正所在的位置

<a >href=http://www.baidu.com>访问百度<a

十五.跳转链接

a->双标签

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

base->单标签：作用就是改变链接的默认行为

十六.跳转锚点：

1.实现一：

     #号id属性

2.实现二：

    #号name属性（注意name属性加给的是a标签）

十七.特殊符号：

1.&+字符
2.解决冲突左右尖括号，添加多个空格的实现

3.&lt;&gt;&nbsp;`

十八.无序列表：

,
:列表的最外层容器，列表项（注：ul和li必须是组合出现的，之间不能有其他标签） type属性：改变前面标记的样式（一般是用CSS去控制）

十九.有序列表：

、
:列表的最外层容器，列表项（注：无序列表可以代替有序列表） type属性：改变前面标记的样式（一般是用CSS去控制） ![在这里插入图片描述](https://img-blog.csdnimg.cn/af6d2825c3094262a1bf039aac448666.png#pic_center)

二十.定义列表：

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