html5和css3基础教程 9 pdf 《html+css基础教程》

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之间的关系][添加链接描述]()

• 五.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.<> `

十八.无序列表：

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

十九.有序列表：

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

二十.定义列表：

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