HTML+CSS系列教程笔记 (1)

标题

第一课

一、HTML系列教程之拨云见日：

1.HTML

2.CSS

3.切图流程

b,智能切图

c,流行切图等

二，HTML+CSS系列教程之溯本求源。

1.HTML语言的扩展

2.CSS语言的扩展

3.HTML5语法

4.CSS3新语法

5不同浏览器的兼容与解决方案

三，HTML+CSS系列教程之风生水起

1.弹性布局

2.网格布局

3.移动端布局

4.响应式布局（一套代码，多种设备）

5.响应式布局框架Bootstrap（快速搭建网页）

四，HTML+CSS系列教程之巧夺天工

1.预编译CSS使用

2.postcss 如何工程化去使用

3.CSS架构：如何划分文件，每个文件需求点，如何使用

4.CSS高级用法

5.CSS 与JS交互

第二课

一，什么是HTML,CSS

HTML，CSS是做网站的编程语言
网站是浏览器解析后的效果
鼠标右键查看源代码

二，如何写代码，写到哪理

用记事本编辑】后将扩展名改成.html
将html文档用记事本打开即可编辑文档
一个网站是由多个网页组成的，每个网页都是一个html文档

三，总结

html是一种超文本标记语言，标记通用标记语言下的一个应用
CSS是一种用来表现html或xml等文件样式的计算机语言

第三课

1，安装VS code及其插件

a，安装VS code语言插件，搜CHINESE

b，安装并使用插件open inBrowser，view in browser。

使用open in browser 或者 view inbrowser，可直接在网页中打开编辑的文档
文档修改之后回到网页刷新不能查看到编辑后的效果，修改之后必须先保存（ctrl +s）再打开网页刷新产看，即修改成功。
文件-首选项-设置，设置是否换行，字体大小等

c，创建文件方法，创建文件夹，重命名

d，常用快捷键

ctrl+s：保存
ctrl+a：全选
ctrl+x：剪切
ctrl+c：复制
ctrl+v：粘贴
ctrl+z：撤销
ctrl+y：前进
shift+end：从头选中一行
shift+home：从尾选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行
tab：向后增进
tab+shift：向前增进

第四课

1.快捷键扩展

多光标
alt+鼠标左键
ctrl+d

2.用搜索功能可以搜索文档中出现的所有关键词

3.下载chrome浏览器

第五课

一，网站的开发

UI设计师：设计稿

A，web前端开发工程师（hs开发）

1,将设计稿转换成代码

2.将数据库里的数据显示到页面

3，web前端工作人员用html+css编辑，美化网页（html：结构 css样式）

B，web后端设计师

对网页运行后产生的数据整理；对数据库里的数据管理。

二，Javascript与 html css之间的关系

1，html是一种标记语言，没有逻辑功能；Javascript是一种脚本语言，像c，java语言一样具有逻辑功能。

2，html提供网页静态内容，Javascript提供静态网页动态内容

3，html是网页基础，js是脚本，跟html结合生成功能更强大的网页；js可以嵌入html中而html不能嵌入js中。

4，js需要区分大小写而html不需要。

5，html需要任何web浏览器才能显示静态内容，Javascript需要JS引擎

第六课

制作网站步骤

1，写html结构
2，写样式对网页进行美化
3，对网站添加需要的交互行为

第七课 html基本结构和属性

1，超文本:文本内容+非文本内容

2.标记：<单词>

标记也叫做标签
< header >
< footer>
分成单标签与双标签两种写法

单： < header>
双： < header></ header>

输入header或footer等然后按tab创建快捷键
创建标签快捷键：单词+tab键-> <单词
标签是可以上下排列的，也可以嵌套
语言：编辑语言

第八课 创建html初始代码

每个html文件都有的代码叫做初始代码

先在html文件中打出！并按tab键即可快捷创建html的初始代码

< !DOCTYPE html>文档申明：告诉浏览器这是一个html文件
b，< html lang=“en”>：html文件的最外层标签：包裹这所有html标签代码lang="en"表示是一个英文网站；lang="zh，-CN"表示一个中文网站
c，< meta charset=“UTF-8”>：元信息：是编写网页中的一些赋值信息，charset="UTF-8"国际编码，让网页不出现乱码的情况
< title>Document</ title>：设置网页标题
</ head>
< body>显示网页内容的区域

第九课html的注释

1，html的注释用< !–注释的内容–> 注释

在浏览器中看不到，只能在代码中看到

2，意义

a，把暂时不用的代码注释起来，方便以后使用。

b，对开发人员提示

3，快捷添加注释与删除注释：

a，ctrl+/

b，shift+alt+a

第十课 html语义化

一，好处

1，在没有CSS的情况下，页面也能呈现出很好的内容结构

2，方便其他设备解析（如屏幕阅读器，盲人阅读器等）。

3，便于团队开发与维护。

4，有利于SEO，让搜索引擎爬虫更好的理解网页。

二，网址

http://h5o.github.io/

访问网址并将链接拖至书签栏在其他网页使用时直接点击即可查看语义化的html

第十一课 标题与段落

一，标题

标题→双标签< h1>输入内容< /h1>
标题标签有< h1>< /h1>
< h2>< /h2>
< h3>< /h3>
< h4>< /h4>
< h5>< /h5>
< h6>< /h6>
在一个网页中，h1标题最重要，并且一个html文件中只能出现一次h1标签。
h5，h6标签在网页中不经常使用。

< title>< /title>命名的是网页的标题

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

第十二课 文本修饰标签

一，强调

1， 强调→双标签，

加粗：< strong>< /strong>
斜体: < em>< /em>

2，上标与下标

上标：< sup>
下标：< sub>

3，编辑文本

删除文本：< del>< /del>
插入文本：< ins>< /ins>
删除文本和插入文本一般都配合使用

第十三课 图片标签与图片属性

图片标签< img src"" alt=“” title=“” wight=“” height=“”>

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

第十四课 引入文件的地址路径

一，相对路径

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

例如：< img src"./img/animal/dog.jpg" alt=“” >

二，绝对路径

绝对路径不管文件相互对与本文档的位置，而是文件真真实实的一个位置

1，描述文件在电脑硬盘中的位置

例如：< img src"/img/animal/dog.jpg" alt=“”>

2，描述文件在互联网中的位置

第十五课 跳转链接

一，a 标签

a 标签→< a href=“http://” target=“_blank” rel=“noopener noreferrer”>

二，base标签

base标签→< base href=“”>：单标签，改变链接的默认行为的

一般base标签在head中

herf属性：链接的地址
target属性：单标签；作用就是改变链接的默认行为的，在新窗口打开网页

第十六课 跳转锚点

一，内容

跳转锚点不是打开新的页面，而是当前页面的不同位置

二，实现方式

1，方法一

#键，id属性

< a href=“#要跳转的id”>要跳转的id的标题< /a>
< h2 id=“要跳转的id”>跳转到的标题< /h2>

2,方法二

#键，name属性

< a href=“#要跳转的id”>要跳转的id的标题< /a>

此步骤同方法一第一布
< a name=“html”>< /a>

第十七课 特殊符号

一，&+字符

二，解决冲突，左右间括号，添加多个空格的实现

第十八课 列表标签-无序列表

无序列表

无序列表→ul li 符合嵌套的规范
< ul>————→可以加type属性< ul type=“”>
< li>第一项< /li>
< li>第二项< /li>
< /ul>
ul li必须是嵌套的中间不能有其他标签

type属性改变无序列表前面标记的样式
无序列表还有许多其他的type属性
一般是由CSS去控制

第十九课 列表标签-有序列表

有序列表

有序列表→ol li 一般用的比较少，可以用无序列表来实现
< ol>————→可以加type属性< ol type=“”>
< li>第一项< /li>
< li>第二项< /li>
< /ol>
注意同上第十八课

第二十课 列表标签-定义列表

定于列表

定于列表→dl dt dd 列表项需要添加标题和对标题进行描述的内容
< dl>：定义列表
< dt>：定义专业术语或名词
< dd>：对名词进行解释和描述