第一周知识梳理

一HTML、CSS导学
二宇宙第一编译器vs code
web三大核心技术
四HTML基本内容
五HTML语义化
六标签
六标签
七引入文件的地址入径
八跳转锚点
九特殊符号
十列表
十一css
十二表格

一HTML、CSS导学

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
CSS叫做层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二宇宙第一编译器vs code

编译器的基本使用：
ctrl+s保存
ctrl+a全选
ctrl+y还原
ctrl+d选择相同元素下一个
shift+end从头选中一行
shift+home从尾部选中一行
shift+alt+ ↓快速复制一行
alt+方向快速移动一行
alt+左键多光标
tab向后缩进
tab➕shift：向前缩进

web三大核心技术

1 ：HTML（结构）2： CSS（样式）3 ：JavaScript（行为）

四HTML基本内容

1、超文本：

文本内容 + 非文本内容（图片、视频、音频等）
2、标记：<单词> （例：

）
3、标签
标记也叫标签，写法分成两种：1单标签:

2双标签：

创建标签的快捷键：单词➕tab键
4、HTML初始代码
！➕tab键：快速的创建HTML的初始代码

<html lang="en">   <!--HTML文件最外层标签：包裹所有html标签代码；lang="en"表示为英文网站-->
<head><meta charset="UTF-8">   <!--无信息：是编写网页中的一些赋值信息（使不同国家展示页面正常）--><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>   <!--网页标题-->
</head>
<body></body>

5HTML注释
1：写法
2：快速添加（取消）注释：
shift + alt + a
ctrl + /

五HTML语义化

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

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

六标签

1.强调（双标签）
(加粗)：
(斜体)：
*strong的强调性比em更强

2.下标
(双标签)：

3.上标
(双标签)：

4.删除文本
(双标签)：

5.插入文本
(双标签)：
注：一般情况下删除文本和插入文本配合使用
图片标签
（单标签）：< img src=“” alt=“”>
src : 图片网页地址
alt : 当图片出现问题时可以给用户提示
title : 一张图片的提示信息
width、height : 图片大小

六标签

1.标题
双标签：

<、h1> …

(h1~6,等级越来越高，且一个.html文件中只能出现一次h1标签，h5、h6尽量少用)

2.段落
双标签：

2、文本修饰标签

1.强调（双标签）
(加粗)：<steong>
(斜体)：
*strong的强调性比em更强

2.下标
(双标签)：

3.上标
(双标签)：
4.删除文本
(双标签)：<del></del>

5.插入文本
(双标签)：<ins></ins>
*删除文本和插入文本配合使用

3、图片标签与图片属性

图片标签
（单标签）：< img src="" alt="">
src : 图片网页地址
alt : 当图片出现问题时可以给用户提示
title : 一张图片的提示信息
width、height : 图片大小

七引入文件的地址入径

相对路径（某一个文件与引入的东西在同一个级别下）
1.在路径中表示为当前路径（例如：
)这时应用.来引入、因为你要把图片引入到10中这时是同级关系
2…在路径中表示上一级的路径
绝对路径
磁盘详细地址或网页详细地址
注：1：推荐相对路径（目前下）代码容易移植
2：网络地址只能是斜线
3：尽量避免写反斜线
跳转链接

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

2.(单标签)：
改变链接默认行为

八跳转锚点

1.实现一
#号+id号
例：

< a href=" ">文字</ a><p>段落</p >
<p>段落</p >
<p>段落</p >
<h2 id="html">文字</h2>
<p>段落</p >

2.实现二
#号+name属性（注意name属性加的是a标签）
例：

< a href=" ">文字</ a><p>段落</p >
<p>段落</p >
<p>段落</p >
<a name"html"></h2>
<h2>文字</h2>
<p>段落</p >

九特殊符号

特殊字符
1：&加字符
2：解决冲突，左右尖括号，添加多个空格实现

十列表

、
：列表最外层容器、列表项
（ul和li必须是组合出现的，他们之间是不能有其他标签的。）
例（正确示范）：

<body><ul><li>第一项</li><li>第二项</li><ul>
</body>

例（典型错误）：

<body><ul><p><li>第一项</li><li>第二项</li></p > <ul>
</body>

2.type属性：改变前面标记的样式（一般是用CSS去控制）(http://www.w3school.com.cn/tags/att_ul_type.asp)
2、有序列表

1.<ol>、<li> ：列表的最外层容器、列表项
（有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。）

2.type属性：改变前面标记的样式（一般是用CSS去控制）(http://www.w3school.com.cn/tags/att_ol_type.asp)

3、定义列表

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

十一css

1.1什么是css？
css就是层叠级联样式表
1.2快速入门

在<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
规范：在style标签里面编写CSS代码，每一个声明都需要使用;
结尾语法：
选择器{声明1;声明2;声明3;}
*/
h1{color:aqua;}
</style></head><body><h1>helloworld</h1></body>
</html>
注意：Style可以写在别的位置，但是最好写在head标签里面

1.3CSS的优势
1.内容和表现分离正常情况下HTML代码很少CSS代码却很多。CSS代码很容易就成千上万行所有的代码都写在HTML里面，你的网页加载很慢
2.网页结构统一，可以实现复用
3.样式丰富
4.建议使用独立于HTML以外的CSS文件

1.4基础语法
1 格式：选择器{属性1：值1；属性2：值2}
2.单位：px（像素） %（百分比）
3.基本样式：width，height，background-color
4.css注释：/CSS注释的内容/

1.5css的三种独立导入方式
1内联样式：在HTML标签上添加style标签属性来实现。例：

<html><head><title></title></head><body><h1 style="width: 30;background-color:red">你好</h1></body>
</html>

2内部样式：在style标签内添加的样式。注：内部样式的优点，可以复制代码。）例子：

<html><head><title></title><style>h1{ width: 30;background-color: red;}</style></head><body><h1>你好</h1></body>
</html>

3.外部样式：引入一个单独的css文件，name 、css
1.link标签：rel，href。例子：

在! DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title></title>
<!--外部样式-->
<link rel="stylesheet"type="text/css"href="css/style.css"/>
</head><body><h1>hello world</h1></body>
</html>
/*外部样式*/
h1{
color:red;
}

2@import
注：这种方式有很多问题不建议使用。

1.6：CSS中的颜色表示法

单词表示法：red blue…
十六进制表示法：#000000黑色#ffffff白色…
RGB三原色表示法（取值范围0~255）：rgb（0,0，0）黑色（255,255,255）白色
CSS背景样式

background-color背景颜色
background-image背景图片
url（图片地址）默认会水平垂直铺满背景块
background-repeat背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x，y都平铺，默认）
norepeat不平铺
如果图片小于块容量图片默认放在左上角，大于块容量的话，只会在块中显示部分图片
background-position背景图片的位置
x，y： 100px，30px；
x:left，center，right
y:top，center，bottom
用百分比也可以
background-attachment背景图片随滚动条的移动方式
scroll：图片随滚动条滚动（默认）（图片所在位置以块为标准）
fixed：图片不随滚动条滚动（此时图片所在位置是以网页为标准的）
CSS边框样式

1.7：border-style:边框的样式
solid实线
dashed虚线
dotted点线
border-width边框的大小
px…
border-color边框的颜色
注：针对每一条单独设置

<html><head><head></head><style>div{ width: 300;height: 300;border-style: dashed;border-color: red;border-width: 30px;}</style></head><body><div></div></body>
</html>

1.8.CSS文字样式

1：font-family:字体类型
英文字体：Arial…(针对中文不起作用 )
中文字体:微软雅黑(默认)，楷体，宋体…（对中英文都起作用）
中文字体的英文名称：
微软雅黑：MicrosoftYaHei
宋体：SimSun

注：1关于引号：字体中没有空格就不用加引号，有空格就必须要加
2电脑一般会设置多种字体按照从前到后的顺序进行选择，假如电脑都没有相应的字体则会以电脑的默认字体输出。
2.衬线体（宋体）和非衬线体（微软雅黑）

注意：左侧为衬线体，右侧为非衬线体
3.字体大小
font -size（默认大小为16px）
例子：

`<html><head><title></title><style>
div{font-size: 20px;
}</style></head><body><div>你好</div></body>
</html>

4. 字体粗细：font-weight
模式：正常和加粗两种
写法：单词（normal ，bold）数字（100~900）
注：100500都是正常大小，600900是加粗的，输入数字为100的整数倍

字体样式：font-style
模式：正常（normal）和倾斜（italic）两种
写法：单词（normal ，italic）
注：oblique也表示倾斜，但用的比较少
区别：italic：带有倾斜属性字体才可以设置倾斜
oblique：没有倾斜属性字体也可以设置倾斜

1.9段落样式

text-decoration:文本装饰
下划线：underline
上划线：overline
删除线：line-through
无任何装饰：none
注：可以添加多个文本修饰，空格隔开

例子：``

<html><head><title></title><style>
p{text-decoration: underline;
}</style></head><body><p>你好</p></body>
</html>

文本大小写：text-transform(针对英文段落)
小写：lowercase
大写：uppercase
只对首字母大写：capitalize

<html><head><title></title><style>
p{text-transform: lowercase;
}</style></head><body><p>difnddfmdkHBBIHUHkg</p></body>
</html>

文本缩进：text-indent（首行缩进）
em单位，这是一个相对单位，1em永远跟字体大小相同
注：缩进的文本内容中有英文的话可能会导致对齐错误

例子：

<html><head><title></title><style>
p{text-indent:1em ;font-size: 16px;
}</style></head><body><p>你好</p></body>
</html>

文本对齐方式text-anlign
对齐方式：left，right，center，justify（两端对齐）

<html><head><title></title><style>
p{text-align: justify;
}</style></head><body><p>你好</p></body>
</html>

定义字间距：letter-spacing
定义词间距：word-spacing（针对英文）
英文和数字不自动折行的问题
work-break:break-all(非常强烈的折行)
work-wrap-break-word(不那么强烈的折行，可能会产生一些空白区域)
例子：

<html><head><title></title><style>
p{line-height: 2;
}</style></head><body><p>你好</p></body>
</html>

1.8复合样式

一个CSS属性只控制一个样式，叫做单一样式
一个CSS属性控制多个样式，叫做复合样式
复合样式
写法：通过空格的方式实现
复合写法有的不要关心写法顺序（background border），有的需要
例：

background
border
font（最少两个值）
weight style size family
style weight size family
weight style size/line-height family
例子：

<html><head><title></title><style>
div{width: 300px ;height: 300px;
background :red  no-repeat center center;
border-right:blue dashed 2px ;
font:bold italic 30px 宋体;
}</style></head><body><div>你好</div></body>
</html>

注：尽量不要混写，非要混写，先写复合样式，再写单一样式，避免被覆盖

1.9选择器

作用：选择页面上的某一个或则某一类标签

2.1基本选择器

1.标签选择器
标签名{}

<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
会选择这个页面所有的这个标签的元素
*/
h1{color:#FFA500;}
p{color:aqua;}
</style>
</head>
<body>
<h1>hello world</h1>
<p>11111</p>
<p>22222</p>
<p>33333</p>
</body>
</html>

2.类选择器
class名称{}

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style
type="text/css">
/*
类选择器可以多个标签归类，同一个class可以实现复用，也可以跨标签使用
*/
.one{color:chartreuse;font-size:20px;}
</style>
</head>
<body>
<h1 class="one">hello world</h1>
<pclass="one">11111</p>
<pclass="one">22222</p>
<p>33333</p>
</body>
</html>

3id选择器

id名称{}
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
id选择器:必须保证全局唯一，不能出现同名的
*/
#one{color:#FFA500;}
#two{color:aquamarine;}
</style>
</head>
<body>
<h1 id="one">hello world</h1>
<p>11111</p>
<p id="two">22222</p>
<p>33333</p>
</body>
</html>

4三种基本选择器的优先级
id选择器＞类选择器＞标签选择器

十二表格

  1表格标签

1.种类：有table，tr，th，td等注：之间有嵌套关系的，要符合嵌套规范
2.语义化标签：tHead，tBody，tFood
注：在一个table中，tBody可以出现多次，但是tHead，tFood只能出现一次
align:left,center,right
valign:top,middle,bottom
2表格属性：
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign:上下对齐方式
3:表单标签：
form，input，textarea，select，lable…
input（单标签）标签有一个type属性，决定是什么控件
还有一些常见的属性：
checked，disabled，name，for…

css·HTML知识梳理相关推荐

CSS 基本知识梳理-续
CSS 基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网 ...
【持续..】WEB前端面试知识梳理 - CSS部分
传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...
用css实现简单的动画——“奔跑的小子”（有知识梳理和图片）
一.实现效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><title ...
牛笔了！字节跳动大佬整理：CSS 核心知识（万字长文，值得收藏！）
本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开.虽然行文偏长,但较基础,适合初级中级前端阅读,阅读的时候请适当跳过已经掌握的部分. 这篇文章断断续续写了比较久,也参考了许多优秀的文章,但 ...
插件化知识梳理(7) 类的动态加载入门
一.前言在插件化知识梳理(6) - Small 源码分析之 Hook 原理这一章的学习完成之后,下一步我们将进入插件化加载的精髓,动态加载类的学习,在此之前,我们需要先准备一些关于类加载的知识. ...
数据结构（C语言版）第八章排序知识梳理 + 习题详解
目录一.归并排序二.交换排序 1.快速排序 2.冒泡排序三.插入排序 1.直接插入排序(基于顺序查找) 2.折半插入排序(基于折半查找) 3.希尔排序(基于逐趟缩小增量) 四.选择排序 0.直接 ...
数据结构（C语言版）第六章图知识梳理 + 习题详解
目录一. 图的基本定义和术语一.图的基本概念 1.度 2.连通 (1)连通图 (2)强连通/强连通图 3.回路 4.完全图二.图的三种存储结构 1.邻接矩阵表示法 2.邻接表(链式)表示法 3. ...
数据结构（C语言版）第三章栈与队列知识梳理 + 作业习题详解
目录一.栈 0.栈的基本概念 1.栈的实现 2.栈与递归 3.Hanoi塔问题二.队列 0.队列的基本概念 1.队列的实现 2.循环队列 2.1循环队列的相关条件和公式: 3.链队列 4.链队列完 ...
数据结构（C语言版）第二章线性表知识梳理+作业习题详解
目录一.线性表顺序存储结构(顺序表) 0.线性表的基本概念 1.样例引入:多项式相加二.线性表链式存储结构(链表) 0.链表的基本概念 1.前插法代码实例 2.链表尾插法完整代码附带各种操作三. ...

css·HTML知识梳理