前言：
因为这是我自己的学习过程，我比较喜欢动手试一试所有的东西，所以如果你有想知道的东西我没写到的，不妨自己动手试一试，我们共同进步。
一、学html之前要知道些什么？
1.一个html文档的基本骨架是什么？
·<!DOCTYPE html> html声明
·<html> 定义html，浏览器看到后就会明白这是个html文档，上图中的lang="en"用于指定网页的语言为英语
·<head>用于定义文档头部，描述文档信息，例如上图中的 <meta charset="UTF-8"> 定义网页编码格式为utf-8
·<title>定义文档的标题，是<head>标签中必不可少的部分，并且<title>会影响SEO优化，也就是搜索引擎优化。
·<body>用来定义文档的主体，包含文档的所有内容（比如文本，超链接，图像，表格和列表等）
除此之外还有<style>和<script>,分别对应css和js。
2.我们所看到的网页是如何呈现出来的？
那么我们编写了一个html文档后，它是如何变成一个网页的呢?
答案是浏览器。
浏览器会渲染html页面以展示出网页给我们，以下是大致步骤：
-
获取HTML文件：浏览器首先通过HTTP请求获取HTML文件。这个请求可以来自用户输入的URL或者是从其他网页中的链接。
-
解析HTML：浏览器开始解析HTML文件。解析的过程包括分析HTML标记和文本内容，构建文档对象模型（DOM）树。在构建DOM树的过程中，浏览器会识别HTML标记，并将其转换为一个由节点组成的树形结构，这个结构描述了HTML文档的逻辑结构。
-
加载外部资源：一旦解析器遇到外部资源（如CSS文件、JavaScript文件、图像文件等），浏览器会开始并行加载这些资源。这些资源的加载不会阻止HTML解析和DOM树的构建，但它们的加载可能会影响页面的渲染速度。
-
构建渲染树：在解析HTML和加载外部资源的同时，浏览器还会构建渲染树（或称为呈现树）。渲染树是DOM树的一种展现，但它只包括需要呈现的内容。通常，它不包括隐藏的元素（例如display属性为none的元素）或者不可见的元素（例如不在视口内的元素）。
-
计算布局：一旦渲染树构建完成，浏览器开始计算每个元素在页面上的确切位置和大小，这个过程称为布局或重排。布局过程考虑了元素的样式、大小、位置和文档流中的位置，以确定它们在屏幕上的最终呈现。
-
绘制页面：最后，浏览器使用计算好的布局信息将页面绘制到屏幕上。这个过程通常涉及将文本、图像和其他内容转换为像素，并根据浏览器窗口的大小和其他因素来显示它们。
3.html、css和js各有什么用处？
让我们用一个生动的比喻来解释这三种技术的作用：
假设现在有一个游乐场
HTML (骨架)：HTML 就是这游乐场的骨架。它定义了游乐场的基本结构，比如墙壁、楼层和房间的布局。没有 HTML，就无法稳固地支撑起其他部分。
CSS (装饰)：现在，我们要让游乐场变得更美观、更吸引人。这时候就需要 CSS，就像是建筑的装饰和装修工具。CSS 可以给墙壁涂上不同的颜色、添加装饰性的花纹，调整窗户和门的样式，让游乐场焕发出不同的风采和氛围。
JavaScript (活动)：JavaScript 就像是公园里的游乐设施和活动。它让游客可以玩得更开心，比如旋转木马、过山车、蹦床等等。通过 JavaScript，我们可以添加各种交互功能，比如按钮点击打开大门、展示广告牌、播放音乐等，让游客参与到更多有趣的活动中。
那么通过以上，我们大概明白了html定义了页面中的各种元素，如链接，段落，标题，列表等。
而css可以定义字体，颜色，大小，边距，背景等网页元素的样式。
js用来操作网页中的元素。
二、html常用标签的用法
标题标签（h1-h6）
浏览器渲染后会显示如下
显而易见是六个从大到小的标题，且要确保该标签只是用于标题，不能因为要加粗字体而使用该标签，正确使用标题有利于SEO。
段落p 换行br 水平线hr
浏览器渲染完成后显示：
hr标签有一些属性可以使用：
·color：设置水平线的颜色
·width：设置水平线的宽度
·height：设置水平线的高度
·align：设置水平线的对齐方式（默认居中，可选left|right）
文本标签（em，i，strong，b，del，span）
浏览器渲染完后是：
可以看出：em和i都是斜体标签，但是em含有语气（相关用途：比如朗读的话可能会改变语气，同样会影响SEO）
strong和b都是粗体标签，区别同上
del标签会给正文加上一个删除横线
span标签没有特定的含义
图片标签img
浏览器渲染完毕后：
其中的src是图片的路径，我这里随便选用了一张图
alt指的是图片的替代文本，当图像路径错误时，会显示如下：
可以看到alt的内容显示在错误图像的右边，并且alt也有利于SEO
title指的是用户将鼠标放在图片上时会显示的信息
width和height分别指宽和高
超文本标签a
渲染完成后如下：
点击后会跳转到百度，一定要注意不能少了https（超文本传输安全协议），否则将不能跳转。
除此以外，a标签里面可以嵌套img标签，可以实现点击图片跳转。
嵌套方式如下：
有序列表，无序列表 ol,ul,li
有序列表ol
浏览器渲染完毕后：
可以看到有序指的就是上图中的数字排序，并且也可更改用什么来排序。
如上图，在<ol>标签里可以设置type属性，默认为1，也就是咱刚看到的1 2 3 4，其余还有四种方式，感兴趣的小伙伴可以自己动手试试。
无序列表ul
同样的无序列表
渲染完之后：
可以发现和有序不同，无序的每一个前面都有一个点，代表并列的意思。那我可不可以将那个点去掉呢？当然可以。同样的也可使用type属性（已经不建议该方法，建议用css）：
type=“disc” 默认实心圆
type=“circle” 空心圆
type=“square” 小方块
type=“none” 不显示
表格table tr td
一个table标签就代表一个表格，他有多少个tr标签就代表有多少行,tr里面有多少个td标签就代表有多少列。
渲染完成后：
其中border=“1”则是设置了边框宽度为1，width和height代表了表格的宽高。
我如果想要合并单元格应该怎么办？
答案是rowspan和colspan,如上图所示，我想要合并1和6，合并7和8，应进行如下操作
结果如下：
可以看到rowspan是竖向合并，而colspan是横行合并
表单form
表单其实是一个容器，能容纳各种各样的控件（比如各种输入框，提交按钮等）
渲染后：
属性说明：
action指的是服务地址，也就是要将数据提交到哪来处理
name指的是表单名称
method属性的值get和post都是数据提交的方式，具体区别后面再说。
input通常用于让用户输入的情况，比如输入账号密码，同时还有别的type属性：
块元素与行内元素
块元素独占一行，并且可以设置width和height大小
如：div，p，h1-h6，form，table，ul等
行内元素只占自身大小，不可以设置width和height
如：a，b，i，strong，span等
html5新增标签
<header> 头部
<nav> 导航
<section> 定义文章中的节，比如章节，页眉等
<aside> 侧边栏
<footer> 脚部
<article> 代表一个独立的内容板块，如一个文章，一个帖子等。
三、CSS的各种参数和用法
css其实就是网页的化妆品，如何让网页变得更好看，这就是css的用处。
css的引入和格式：
引入：
如图，在<style>中编写css。
那么css的格式是怎么样的呢？
css的规则由两部分构成，一个是选择器，另一个是声明。
如图，我在body中写了一个div标签，在{ }中我对他进行了属性值的设定，我设置这个元素的宽和高以及背景颜色。
浏览器渲染完成后为：
也就是说上面红色框中的代码就代表我设定了div标签的一些值
那么这是css的其中一种引入方式，叫做内部样式。
接下来我将介绍别的引入方式
CSS的引入方式：
首先是内部样式，也就是上面提到的在<style>中对标签进行属性设定。
内联样式，指的是直接在元素里进行属性值的设定，比如下图：
那么我这样也是能够进行属性值的设定的。
还有一种是外部样式，也就是我单独创建一个.css文件，在其中编写好css代码，然后在我要使用的时候进行引入就行。
我现在单独创建了一个css文件，里面写好了和之前一样的样式，都是对div标签的相同属性设置。
那么我要怎么引用呢？
我们需要在html文件头部引入link标签，如下：
其中的rel="stylesheet"表示当前文档与链接的目标资源是一个样式表
而href后的内容则是css文件的路径。
像这样编写后，浏览器渲染完后的效果都是相同的，那么以上就是三种css的引入方式。
css选择器
首先要说的就是上面提到过到，叫标签选择器，也就是我直接选择一个标签，进行属性值的设定。
上图就选用了div标签
接下来要说的是类选择器，我可以给标签定义一个类，然后设置属性的时候直接选择这个类就行。
如下图：
可以看到要使用类选择器的方法是 . + 类名
接下来是id选择器
id选择器同类选择器，如下图：
可以看到使用id选择器的方法是 # + id名
那么类选择器和id选择器有什么区别呢
区别就是：
同一个类名可被多个标签共同使用，而一个id名只能被一个标签使用，也就是说一个id对应一个标签。
还有一种选择器是全局选择器：
如图，这种选择器会应用于所有的标签，相当于设置了一个初始属性，但是它的优先级是最低的，关于优先级马上就会说到。
合并选择器
像这样可以同时选用两个选择器。
关系选择器
·后代选择器：
A B{
}
会选择所有被A包含的b元素
·子代选择器：
A>B{
}
选择所有A元素的直接子元素
·相邻兄弟选择器：
A+B{
}
选择紧跟A元素之后的第一个B元素
·通用兄弟选择器：
A~B{
}
选择A元素之后的所有兄弟元素B
选择器的优先级：
如果同时应用两种或以上的选择器，会选用优先级较高的选择器
选择器的排序为：内联选择器>id选择器>类选择器>标签选择器>全局选择器
字体属性
·字体颜色：
color:red 或者 color:#ffffff 等，可设置字体颜色。
·字体大小：
font-size:12px px表示像素，chrome浏览器能接受的最小像素是12px
·字体粗细：
值
font-weight：bold 定义粗体
bolder 定义更粗体
lighter 定义更细体
100-900 定义由细到粗的值 400为默认 700就等同于bold
·字体样式：
font-style：normal（默认值），ltalic（定义斜体字）
·字体：
font-family："Microsoft YaHei"
背景属性
·背景颜色：
background-color：red
·背景图片：
background-image：url（"图片路径"）
·背景图片显示位置：
background-position：
·背景图片如何填充：
background-repeat： repeat-x只向水平方向平铺
repeat-y只向竖直方向平铺
no-repeat 不平铺
repeat（默认值）
·背景图片大小属性：
background-size： 设置宽度和高度，如（200px，200px），如果只设置一个值，那另一个值为auto
设置百分比，如（50%，50%）,如果只设置一个值，那另一个值为auto
cover 图片完全覆盖背景，会造成图片裁剪
contain 保证图片不会造成裁剪的情况下进行最大背景覆盖
文本属性
·文本的对齐方式：
text-align： left 居左排列，默认值
right 居右排列
center 将文本排列在中介
·文本的修饰
text-decoration： underline 下划线
overline 上划线
line-through 删除线
·文本的大小写
text-transform： captialize 每个单词开头大写
uppercase 全部字母大写
lowercase 全部字母小写
·文本首行缩进
text-indent：50px 首行文本缩进50像素
表格属性
·边框：
border：边框大小（px），边框样式，颜色。（三个参数）
·折叠边框：
boder-collapse：collapse
·宽度和高度：
width：
height：
·表格文字对齐：
水平方向：
text-align：left（向左），center（居中），right（向右）
垂直方向：vertical-align：bottom（居下），top（居上）
·表格填充（内边距）：
padding：单位为像素。
·表格颜色：
background-color：颜色。
css盒模型
每一个元素都可以看成一个盒子，如下图：
包括margin（外边距），border（边框），padding（内边距），content（正文）。
ie盒模型：margin+（border+padding+content）
弹性盒模型
使用方式：display：flex
弹性盒模型的默认排序是横向排序，当然也可进行更改：
flex-direction：row（默认值，横向从左往右），row-reverse（横向从右往左），column，（纵向从上往下），column-reverse（纵向从下往上）。
下面是弹性盒里面的元素整体的属性：
justify-content（垂直方向）：flex-start（居上摆放）
flex-end （居下摆放）
center （居中摆放）
align-items（水平方向）：flex-start（居左摆放）
flex-end （居右摆放）
center （居中摆放）
子元素中的属性：
flex-grow或flex：设置权重占比。
浮动
什么是浮动呢，可以把html页面看成一张纸，浮动就是放在其上方的另一张纸，也就是两个图层。
浮动如何定义：
float：left（向左浮动）
right（向右浮动）
浮动也会产生很多副作用，如父元素高度塌陷，影响后续元素等，所以又有了清除浮动的方法。
清除浮动
扫一扫
81
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
