适合初学者的HTML+CSS篇
1.了解HTML
html是什么?
用来描述web文档的标记语言。超文本标记语言（计算机语言-计算机能够识别的）。
HTML的一些标签代码规则将内容呈现在浏览器中；
HTML可以使用记事本创建，并以.html或.htm为扩展名保存。
<html>
<!-- html根标签，一个页面中只有一个根标签，网页中所有的内容都应该写在html根标签中 -->
<head>
<!-- head标签，该表钱中的内容，不会在网页中直接显示，用来帮助浏览器解析页面的 -->
<title>标题</title>
<!-- title网页中的标题标签，默认会显示在浏览器中的标题栏剧中，搜索引擎检索
页面是，会首先检索title标签中的内容，它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名 -->
</head>
<body>
<!-- body标签用来设置网页的主题内容，网页中所有可见的内容，都应该写道body中来 -->
<!-- 在这个结构中，可以来编写HTML的注释
注释中的内容，不会在页面中显示，但是可以在源码中查看
我们可以通过编写注释来对代码进行描述，从而帮助其他的开发人员工作-->
</body>
</html>
2.基本标签
标题标签
在HTML中，一共有六级标题（h1~h6）
在显示效果上h1最大，h6最小。但是文字的大小我们并不关心
使用HTML标签时，关心的是标签的语义，我们使用的标签都是“语义化标签”
对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1中的内容，h1标签非常重要，它会影响到页面在搜索引擎中的排名，且页面中只能写一个h1标签。
一般页面中标题标签只是用h1-h3，h3以后基本不在使用。
段落标签
段落标签用于表时内容中的一个自然段
使用p标签来表时一个段落
p标签中的文字，默认会独占一行，并且段与段之间会有一个间距
<p>我是段落标签</p>
br标签
在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析。使用 来表示多个空格。
换行也会当成一个空格解析，在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签（也叫单标签）
<br />
hr标签也是一个自结束标签，可以在页面中生成
实体
在HTML中，一些如<>的特殊字符是不能直接使用的。需要使用一些特殊的符号来表示这些特殊的字符，这些特殊符号我们成为实体;（转义字符）
浏览器解析到实体时，会自动将实体转换其对应的字符。
实体的语法：
& 实体名字;
< <
> >
空格
版权符号 ©
图片-img
使用img标签来向网页中引入一个外部图片
img标签也是一个自结束标签
属性：
src：设置一个外部图片的路径
alt：可以用来在图片不能显示时设置图片的貌视
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则都锁引擎不会对img中的图片
行收录
width：修改图片的宽度，一般使用px作为单位
height：修改图片的高度，一般使用px作为单位
注：①.当宽度和高度两个属性如果只设置一个，
另一个也会同时等比例调整大小
②.如果两个同时指定，则按照你指定的值来设置，
一般开发中除了自适应的页面，不建议设置width和
height
src属性配置的是图片的路径，目前我们索要使用的路径都是相对路径。
提起相对路径，它还有所对应的绝对路径：
相对路径：是指相对于当前文件所在目录的位置
<img src="abc/1.jpg" alt="动漫" />
绝对路径:绝对路径是指目录下的绝对位置，直接到达
目标位置，通常是从盘符开始的路径。
图片格式:
JPEG(JPG)
- JPEG图片支持的颜色较多，图片可以压缩，但是不支持透明度
- 一般使用JPEG来保存照片颜色丰富的图片。
GIF
- GIF支持的颜色少，只支持简单透明的，支持动图
- 图片颜色单一或者是动态图时，可以使用gif
PNG
- PNG支持颜色多，并且支持复杂透明，
- 可以用来显示颜色复杂的透明图片
图片的使用原则
- 效果不一致，使用效果好的
- 效果一致，使用内存小的
概述meta标签
接下来，简单概述下meta标签。
meta标签需要告诉浏览器，网页所采用的编码字符集。
- meta标签用来设置网页的一些原数据，比如网页的字符集，关键字，简介
- meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个↓
<meta charset="utf-8" />
使用meta标签可以设置网页的关键字
<meta name="keywords" content="HTML5,JavaScript,Java"/>
还可以用来指定网页的描述
搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响也面子啊搜索哟引擎中的排名
<meta name="description" content="发布h5，js等前端相关信息">
使用meta可以用来做请求重定向
<meta http-equiv="refresh" content="秒数";url=目标路径/>
比如：
<meta http-equiv="refresh" content="5;url="http://www.baidu.com"/>
a标签
使用超链接可以让我们从一个页面跳转到另一个页面，使用a标签创建一个超链接
<a href="https://www.baidu.com" target="_self">去百度</a>
<a href="demo02.html" target="_blank">去demo02.html</a>
- 第一行代码指的是：在自身窗口打开百度
- 第二行代码指的是：在新窗口中打开绝对路径
a标签的target属性：
- _self：表示当前窗口打开链接
- _blank：在新建窗口打开链接
锚点用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>锚点</title>
<style type="text/css">
div{
width:1000px;
height:1000px;
border:1px solid black;
}
</style>
</head>
<body>
<p id="top">锚点的用法</p>
<div></div>
<a href="#top">回到顶部</a>
</body>
</html>
CSS简介
css：层叠样式表(Cascading Style Sheets)
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成一层一层的结构，层次高的会覆盖层次低的。
而css就可以分别为网页的每个层次设置样式。
css引入方式
内联样式
将样式表写到style标签中，然后通过css选择器选中制定元素。也可以使结构和表现相分离。
<head>
<meta charset="utf-8">
<title>内联样式</title>
<style type="text/css">
body{
color:gray;
}
</style>
</head>
行内样式
将样式写到标签中，只对当前的元素的内容中起作用。不方便我们重复使用。
行内元素不方便我们重复使用.
结构与表现耦合，不方便后期维护，不推荐使用.
<p style="font-size:20px";>woshihangneiyangshi</p>
外链样式
还可以将样式表编写到外部的css文件中，然后通过link标签来将外部css文件引入到当前的页面中
将css样式统一白那些到外部的样式表中，完全使结构和表现分离， 可以使样式表在不同的页面中使用
最大限度时，使样式可以进行重复使用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存
<link rel="stylesheet" type="text/css" href="style.css">
内联元素和块元素
div就是所谓一个块元素
所谓的块元素就会独占一行，无论多少内容都会独占一行。设置宽高会发生变化。
div这个标签没有任何语义，就是一个纯粹的块元素。
并且不会为它里面的元素设置任何的默认样式。
div主要用来对页面进行布局。
span是一个行元素(内联元素)
所谓的行元素：指的是只占自身大小的元素，不会占用一行。
且行元素设置宽高无效
常见的行元素
：a img iframe span
span没有任何的语义，span标签专门用来选中文字，然后设置文字样式。
块元素主要用来做页面中的布局，行元素主要用来选中文本设置样式。
一般情况下只使用块元素去包含行元素，而不会使用行元素去包含一个块元素。
注：a元素可以包含任意元素，但是除了它本身。p元素不可以包含任何其他的块元素
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
