一、HTML
HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。
它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。
HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或 .html 为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
二、基础语法
2、1 标签
HTML 标记是由"<“和”>"所括住的指令标记，用于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由"<起始标记>“＋内容＋”</结束标记>"构成）。
HTML语言使用标志对的方法编写文件，既简单又方便。它通常使用"<标志名>内容</标志名>"来表示标志的开始和结束，因此在HTML文档中这样的标志对都必须是成对使用的。
为了便于理解，将HTML标记语言大致分为：基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。
2、2 单标签
单标签,不设置属性值。
如：
<br/>、<hr/>
2、3 单标签属性
单标签(也叫空元素)，设置属性值。如：
<hr width="800" />
2、4 双标签
双标签，不设置属性值。如：
<title>…</title>
2、5 双标签属性
双标签，设置属性值。如：
<body bgcolor="red">…</body>
<font size="7">…</font>
2、6 整体结构
HTML的内容都是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签和标签之间有需要正确嵌套。
通常一个HTML网页文件包含3个部分：标记头区…、内容区…和网页区…。
<html>
<head></head>
<body></body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML文档的基本结构</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
</body>
</html>
DOCTYPE
Document Type HyperText Mark-up Language，文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。
由于使用的场景或者版本的更替间，HTML使用的标准不同，所以需要浏览器按照不同的标准来解析HTML文本内容，这就需要告知浏览器我当前的HTML页面是按照那种方式进行编写的。
三、常用标签
HTML页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染 ，我们需要记忆常用的标签即可。大致可分为如下几类：标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span等。
3、1 标题
-
标签可定义标题，标题依次递减，由于 h 元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
这样的标签不产生错误，但是不具有标题的效果。
h1标签可以为搜索引擎获取，便于页面在被搜索的时候检索到，但是一个页面最好只有一个h1标签，否则可能进入搜索引擎的黑名单。
<h1></h1>
3、2 水平线
标签在 HTML 页面中创建一条水平线（horizontal rule）可以在视觉上将文档分隔成各个部分。在 HTML 中，
标签没有结束标签。
<hr />
常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | CenterLeftright | 规定 hr 元素的对齐方式，以后可以用样式取代它 |
| size | pixels | 规定 hr 元素的高度（厚度），后可以用样式取代它 |
| width | Pixels% | 规定 hr 元素的宽度，后可以用样式取代它 |
3、3 段落
标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
理解：语文课本中各个段落之间会有大的空隙。
<p></p>
常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left、right、center、justify | 规定段落中文本的对齐方式，以后可以用样式取代它 |
3、4 换行
br标签为换行符号，<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。
注意：<br> 标签只是简单地开始新的一行，而当浏览器遇到
标签时，通常会在相邻的段落之间插入一些垂直的间距。请使用 <br> 来输入空行，而不是分割段落。
<br/>
3、5 div
<div>content</div>
常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left、right、center | 规定div元素中的内容的对齐方式，以后可以用样式取代它 |
3、6 a标签
标签定义超链接，用于从一张页面链接到另一张页面。
元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。
若是想要跳转到当前页面，那么href的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
<a href="http://www.baidu.com">百度</a>
常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 连接所要跳转的位置，可能是其他或当前页面。 |
| target | _blank _parent self top Framename作为锚点的a标签的name值 | 规定在何处打开链接文档。 _blank：开启新页面显示页面； _self：当前页面显示跳转到页面，默认值。 _top：用于有frameset布局的页面，想要覆盖整个页面显示。 Framename：这里framename与上边的值不同，具体以为frame起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的框架中显示。 |
锚点的实现
利用a标签的name属性：
<a name="top"></a>
一般标签的id属性：div id=""、a id="" 等：
<div id="top"></div>、<a id="top"></a>
锚点定位
<a href="#top">返回首部</a>
3、7 图片
img 元素向网页中嵌入一幅图像。
注意：从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。
<img src="" alt="" >
必须属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 规定图像的替代文本，一般在图片无法正常显示占位的文字。 |
| src | URL | 规定显示图像的 URL。 |
常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | top、bottom、middle、left、right | 规定如何根据周围的文本来排列图像 |
| border | pixels | 定义图像周围的边框 |
| height | pixels、% | 定义图像的高度。 |
| width | pixels、% | 定义图像的宽度。 |
| title | 文本 | 当鼠标在图片上时显示的文字 |
3、8 span标签
正常元素
行内标签
3、9 body标签
body
body中的内容是给用户看的
head中内容给浏览器看的
属性:
bgcolor : 背景颜色
background : 背景图片
背景图片会同时覆盖背景颜色
路径：
进入某个路径下 : 路径名字/
回到上一层路径: …/
四、HTML格式化标签
格式化标签
4、1 b 加粗
4、2 u 下划线
4、3 i 斜体
4、4 del 删除线
4、5 strong 强调 显示为加粗
4、6 sup 上标
4、7 sub 下标
4、8 address 语义化标签 显示为斜体 通常用来定义地址… 块元素
4、9 hr 水平线
4、10 br 换行
4、11 pre 预处理标签 保留文本编写格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>格式化标签</title>
</head>
<body>
正常文本
<b>我是b标签</b>
<u>我是u标签</u>
<i>我是i标签</i>
<del>我是del标签</del>
<strong>我是strong标签</strong>
<sup>我是sup标签</sup>
<sub>我是sub标签</sub>
<address>我是address标签</address>
<hr>
<p>
锄禾日当午<br>
汗滴禾下土<br>
一本小破书<br>
一坐一上午<br>
</p>
<pre>
锄禾日当午
汗滴禾下土
一本小破书
一坐一上午
</pre>
</body>
</html>
五、HTML 列表标签
列表标签:
5、1 ul 无序列表
5、2 li 定义列表项
列表项标记 : 在 ul标签上添加type属性 : desc实心原点(默认) circle 空心圆圈 square 实心方块
5、3 ol 有序列表
在ol列表上使用type属性: 1 A a I i
注意: 在ul，ol列表的直接子元素只能为li标签,而li标签中可以嵌套任意元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<h3>我爱吃的水果:</h3>
<ul type="square">
<li>车厘子</li>
<li>草莓</li>
<li>提子</li>
</ul>
<h3>我不喜欢吃的食物:</h3>
<ol type="i">
<li>香菜</li>
<li>鱼腥草</li>
<li>芹菜</li>
<li>豆芽</li>
<li>西红柿</li>
</ol>
<!--列表嵌套-->
<h3>喜欢吃的食物:</h3>
<ol>
<li>醋</li>
<li>辣</li>
<li>甜</li>
<li>麻</li>
<li>
<ul>
<li>锅包肉</li>
<li>酸菜</li>
<li>苏黄菜</li>
</ul>
</li>
</ol>
</body>
</html>
六、HTML 表格
表格： 用来展示数据
6、1 table 标签
6、2 tr 行
6、3 td 表格体单元格
6、4 th 表格头单元格 居中加粗
6、5 表格属性
border 边框 px
align
table 整个表格的水平对其方式
tr 这一行中所有单元格中的文本在 单元格中的水平对其方式
td th 单元格中的文本在 单元格中的水平对其方式
width 宽度
height 高度
可以作用在table 或者 tr|td
bordercolor 边框颜色
cellspacing 边框外边距
cellpadding 边板框内边距
样式：style=“border-collapse: collapse” 双线变成单线
bgcolor 背景颜色 table td tr
6、6合并单元格：
6、6.1rowspan ：跨行
6、6.2 colspan ：跨列
注意： 表格中，现有table，再有行，先有行再有单元格，内容放在单元格中
在使用合并单元格时候，被占用位置的单元格需要删掉
七、HTML 表单
表单 ： 收集用户输入的数据
form 表单标签
属性：
7、1 action ： 提交位置
7、2 name ： 表单的名字
7、3 method : 提交方式
7、3.1 get ：
收集到的数据拼接到url地址栏的后面 默认 相对效率较高 但是不安全 大小有限制
7、3.2 post ：
请求实体中 安全 大小没有限制
7、3.3enctype ：
在发送到后台之前要不要对字符是否需要进行编码
在当前表单内部存在文件上传的时候，需要修改enctype的值
表单元素：
定义在form中的标签元素，称为表单元素
大部分的表单元素都是有input标签提供的，type属性不同的值决定这个input标签不同的作用
7、4 input：
type：
text ： 普通文本框
password ： 密码框
submit 提交
属性：
id ： html页面中元素唯一标识 结合js使用
class ： 结合css一起使用
name ： 能够提交元素到后台的表单元素必须添加name属性，后台区分的唯一
value ： 表单元素的默认值
7、4.1 radio 单选框
一组只能选择一个，name属性值相同就为一组
name 与 value 必须添加
7、4.2 chcekbox 多选框
分组，name属性值相同为一组
name 与 value 必须添加
7、4.3 file 文件上传
如果存在文件上传： tnctype属性值-》enctype=“multipart/form-data” 证明不编码，否则要默认进行编码
7、4.4 hidden 隐藏框
7、4.5 submit 提交按钮
7、4.6 button 按钮
结合js一起使用
7、4.7 reset 重置
恢复到初始默认状态
7、5 多行文本域 textarea
7、6 下拉列表|框 select
下拉列表选项 option
7、7 fieldset 分组
legend 分组标题
可以使用在form标签中，使用在form标签外部
7、8 button 标签
默认提交
type属性的值可以定义为 submit reset button
7、9 label 定义标注
for属性的值与对应要进行 绑定的标签的id属性值保持一致
八、HTML 表单常用属性
常用属性：
8、1 autofocus 自动聚焦
8、2 maxlength 最大长度不能超过几个字符
8、3 minlength最小长度不能超过几个字符
8、4 required 必填属性
8、5 placeholder 提示字
8、6 默认选中:
单选框|复选框: checked
下拉框 : selected
8、7 readonly : 只读 不能修改可以提交
8、8 disabled : 禁用 不能修改不能提交 显示为灰色
九、CSS样式
9、1 css 层叠样式表
为html中的元素标签添加样式
语法:
选择器 {
样式;
样式;
样式;
}
选择器:
根据某种规则选中一些|个元素
样式:
属性名 : 属性值 ;
样式名 : 样式值 ;
9、2 css的引入方式
行内样式表 : 元素标签上添加一个属性,style,css代码定义在style的属性值上
内部样式表 : 在html文档中的head中,定义一对style标签对,标签对中定义css代码
外部样式表 : 定义一个css文件,其中定义css代码,在所需要的html页面中引入
link 引入外部css文件
9、3 引入方式的优先级
当通过不同的引入当时为相同的元素添加相同的样式时候,有限显示那种方式添加的样式?
->谁离元素更近,就有限显示谁,因为代码从上到下加载
十、基础选择器
选择器: 根据某种规则选中一个或者一组元素
10、1 #id选择器
根据元素的id属性值,选中一个元素
10、2 .class选择器
根据元素class属性值,选中一个或者一组元素
class属性的值: 可以为一个值列表 ->值1 值2 值3
10、3 元素标签选择器
根据标签名选中一个或者一组元素
10、4 *通配符 :
匹配到页面中的所有元素
清除浏览器默认样式:
*{
padding : 0;
margin : 0;
}
10、5 选择器的优先级
基础选择器的优先级:
id>class>元素>通配符
十一、css选择器
11、1常用选择器:
群组选择器: 选择一组元素,提供相同的样式
选择器1,选择器2,选择器3… {样式;}
11、1关系|组合选择器:
11、1.1后代选择器:
选中在某个父级选择器选中的父级标签中的子级 ,无论是第几层子元素都会被选中
父级选择器 子级选择器{样式}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
11、1.2子元素选择器 > :
用于选择指定标签元素的所有第一代子元素，以大于号分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
11、1.3相邻兄弟选择器 + :
可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔 要求必须是紧挨在后面的第一个兄弟元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>文章标题</h1>
<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>
</body>
</html>
11、1.4普通兄弟选择器 ~ :
选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
十二、其他选择器
12、1 属性选择器:
[]根据元素的某个属性,或者属性值 选中一个或者一组元素
<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:blue;
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="runoob.com" href="//www.runoob.com/">runoob.com</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>
12、2 伪类选择器 :
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
只针对于a标签使用
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */
任意元素都可以使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="#">这是一个链接</a></b></p>
</body>
</html>
十三、css颜色设置
13、1 颜色给值方式:
背景颜色
字体颜色
颜色的英文单词 blue…
#6个字符 十六进制 #5858b1
rgb(0~255 ,0~255 ,0~255 ) 颜色的三原色
13、2 透明度:
rgba(0~255 ,0~255 ,0~255 ,0~1 ) a代表透明度 0~1 0完全透明 1完全不透明
只针对当前设置颜色的内容透明
opcity 元素的透明度
0~1 0完全透明 1完全不透明、
十四、display 使用方法
标签元素的分类:
块元素
行内元素
display :
14、1 block
块元素
独占一行
可以设置宽高
可以设置内外边距
14、2 inline
行内元素
宽度有内容撑起,可以与其他行内元素或者文本同行显示
不能设置宽高
不能设置上下 的内外边距
14、3 inline_block
行内块
行内元素,块元素的特点都有
宽度有内容撑起,可以与其他行内元素或者文本同行显示
可以设置宽高
可以设置内外边距
注意: 可以让块元素同行显示
14、4 none :
消失了
十五、背景样式
15、1背景:
backgroud
15、2背景颜色
backgroud-color:
15、3背景图片
backgroud-image:
15、4背景图片是否平铺
backgroud-repeat:
no-repeat
repeat-x
repeat-y
15、5背景图片大小
backgroud-size:
像素值 px
当之定义一个值,默认宽度,高度会等比缩放
15、6背景图片位置
backgroud-position:
像素值 百分比 方向位置的单词(left right top bottom center)
如果值提供一个值,默认设置x轴,另一端默认居中
15、7背景跟随滚动问题
background-attachment: (了解)
scroll 跟随滚动
fixed 固定,不跟随滚动
固定相对于窗体的边界
15、8复合属性:
backgroud : 颜色 图片 平铺 位置 跟随滚动;
顺序可以改变,个数不固定
十六、文本样式
16、1 color
字体颜色
16、2 font-size
字体大小
16、3 font-style
字体样式 正常normal|斜体italic
16、4 font-family
字体设置 可以同时设置多个字体,顺位显示
16、5 font-weight
加粗
100~900之间的整数 700以上是粗体 600以下是正常
bold | bolder 加粗 | normal 正常
16、6 text-decoration
设置下换线|中划线|上划线
16、7 text-indent
首行缩进
px
em 当前内容的几个字符的大小
16、8 text-align
文本居中
针对块元素|行内块有效
可以继承
行内元素|块元素中的内容在元素中水平对齐方式
16、8.1 line-height
行高
利用行中的内容在行高中垂直居中的特点,让文本的行高与块元素|行内块元素登高,就能实现文本在元素中垂直居中
16、9 实体字符:
&+实体名称+;
空格
< <
> >
16、10 文本超出隐藏
超出部分隐藏
overflow: hidden;
text-overflow: ellipsis; 以…
white-space: nowrap; 不换行
十七、浮动
17、1 css 中的浮动
让块元素同行显示
float 浮动 : 元素向指定方向移动,当遇到其他浮动元素或者浏览器的边界的时候听下
left
right
注意:
浮动会半脱离文档流
文档流: 块元素从上到下,行内元素从左到右
块元素一旦浮动,让出文档流的位置,后面的块元素会占据前面浮动元素的位置,内容会让出前面浮动元素的位置->版脱离文档流
17、2清除浮动
清除浮动
clear 让元素的某一个方向没有浮动元素
left 当前元素的左边不能有浮动元素
right 当前元素的右边不能有浮动元素
both 当前元素的两边都不能有浮动元素 ->推荐
需求: p标签不要占据前面浮动元素的位置 box
1) 在p中使用clear
2) 浮动元素的父级box设置高度
3) overflow: hidden; 父级设置overflow:hidden;作用是:子级元素浮动了,
扫一扫
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
