HTML+CSS系列教程（第1—20课）

一.初识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表示，是单词head的缩写 。 在一个网页中，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.<> `

十八.无序列表！！！：

• ,
• :列表的最外层容器，列表项（注：ul和li必须是组合出现的，之间不能有其他标签） 但是li里面是可以放任何元素的

type属性：改变前面标记的样式（一般是用CSS去控制）

十九.有序列表：

1. 、
2. :列表的最外层容器，列表项 （注：无序列表可以代替有序列表） type属性：改变前面标记的样式（一般是用CSS去控制） 

二十.定义列表：

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