HTML
HTML(HyperText Markup Language)就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂
字元素,如:图⽚、链接、⾳乐等等。
它是⼀种建⽴⽹⻚⽂件的语⾔,通过标记式的指令(Tag),将影像、声⾳、图⽚、⽂字等链接显示出
来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。
HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写,以 .htm 或 .html 为
⽂件后缀名保存。将 HTML ⽹⻚⽂件⽤浏览器打开显示,若测试没有问题则可以放到服务器(Server)
1.标签
HTML 标记是由"<“和”>“所括住的指令标记,⽤于向浏览器发送标记指令。
主要分为:单标记指令、双标记指令(由”<起始标记>“+内容+”</结束标记>“构成)。
HTML语⾔使⽤标志对的⽅法编写⽂件,既简单⼜⽅便。它通常使⽤”<标志名>内容</标志名>"来表示
标志的开始和结束,因此在HTML⽂档中这样的标志对都必须是成对使⽤的。
为了便于理解,将HTML标记语⾔⼤致分为:基本标记、格式标记、⽂本标记、图像标记、表格标记、
链接标记、表单标记和帧标记等
1.1单标签
单标签,不设置属性值。如:
<br/>、<hr/>
1.1.2. 单标签属性
单标签(也叫空元素),设置属性值。如:
<hr width="800" />
1.1.3. 双标签
双标签,不设置属性值。如:
<title>…</title>
1.1.4. 双标签属性
双标签,设置属性值。如:
<body bgcolor="red">…</body> <font size="7">…</font>
2. 整体结构
HTML的内容都是由⼀对⼀对的标签组成,标签不能混乱,⻚⾯有⻚⾯的整体架构和规则,标签和标签之间有需要正确嵌套。
通常⼀个HTML⽹⻚⽂件包含3个部分:标记头区 … 、内容区 …
和⽹⻚区 ...... 。<html>
<head></head>
<body></body>
<!-- 声明当前HTML的版本是HTML5 -->
<DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>HTML⽂档的基本结构</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
<style></style>
</head>
<body>
<!--主体内容-->
</body>
</html>
2.1. html
标志⽤于 HTML ⽂档的最前边,⽤来标识 HTML ⽂档的开始。⽽ 标志放在HTML⽂ 档的最后边,⽤来标识 HTML ⽂档的结束,两个标志必须⼀块使⽤。2.2. head
head 构成 HTML ⽂档的开头部分。head 标志对之间的内容是不会在浏览器的框内显示出来的,两个标志必须⼀块使⽤。
在此标志对之间可以使⽤ title、script、meta、link 等标签。
meta:⽤来提供关于⽂档的信息,起始属性为:charset=“utf8”。表示告诉浏览器⻚⾯采⽤的什么编
码,⼀般来说我们就⽤ utf8。当然,⽂件保存的时候也是 utf8,⽽浏览器也设置 utf8 即可正确显示中文。
link:⽤来引⼊ css ⽂件。
script:⽤来引⼊ js ⽂件或编写js代码。
2.3. title
title 定义⽂档的标题。浏览器会以特殊的⽅式来使⽤标题,并且通常把它放置在浏览器窗⼝的标题栏
或状态栏上。同样,当把⽂档加⼊⽤户的链接列表或者收藏夹或书签列表时,标题将成为该⽂档链接的默认名称。
注意:title 标签位于 head 标签内,是 head 标签中唯⼀要求包含的东⻄。
2.4. body
⼀般情况下⼤部分浏览器上显示的内容,都放在 body 中。但也不排除其他标签可以不⽤ body,⽐如
frameset 框架集标签。
body 是 HTML ⽂档的主体部分,在此标志对之间可包含 div、a、p、h1、hr 等众多的标志。它们所定义的⽂本、图像等将会在浏览器的框内显示出来。
常⽤属性
2.5DOCTYPE
Document Type HyperText Mark-up Language,⽂档中超⽂本标记语⾔的类型,可告知浏览器怎么解析该⽂档。
由于使⽤的场景或者版本的更替间,HTML使⽤的标准不同,所以需要浏览器按照不同的标准来解析
HTML ⽂本内容,这就需要告知浏览器我当前的 HTML ⻚⾯是按照那种⽅式进⾏编写的。没有该声明,将是你HTML噩梦的开始。
3.常⽤标签
HTML ⻚⾯是由标签组成,不同的标签浏览器对其进⾏不同样式和内容的渲染 ,我们需要记忆常⽤的
标签即可。⼤致可分为如下⼏类:标题、⽔平线、段落、换⾏、图⽚、表格、超链接、列表、表单、下拉列表、div 和 span
3.1标题和⽔平线
h1 - h6 标签可定义标题,标题依次递减,由于 h 元素拥有确切的语义,因此请慎重地选择恰当的标签层级来构建⽂档的结构。请不要利⽤标题标签来改变同⼀⾏中的字体⼤⼩。相反,我们应当使⽤层叠样式表定义来达到漂亮的显示效果。
h999这样的标签不产⽣错误,但是不具有标题的效果。
h1标签可以为搜索引擎获取,便于⻚⾯在被搜索的时候检索到,但是⼀个⻚⾯最好只有⼀个h1标签,
否则可能进⼊搜索引擎的⿊名单。
<h1></h1>
3.2⽔平线
hr 标签在 HTML ⻚⾯中创建⼀条⽔平线(horizontal rule)可以在视觉上将⽂档分隔成各个部分。在
HTML 中,hr 标签没有结束标签。
<hr />
常⽤属性
3.3段落和换⾏
段落p标签定义段落。p 元素会⾃动在其前后创建⼀些空⽩。浏览器会⾃动添加这些空间,您也可以在样式表中规定。
理解:语⽂课本中各个段落之间会有⼤的空隙
<p></p>
常⽤属性
换⾏
br标签为换⾏符号 br 标签是空标签(意味着它没有结束标签,因此这是错误的:
)。
注意:br 标签只是简单地开始新的⼀⾏,⽽当浏览器遇到 p 标签时,通常会在相邻的段落之间插⼊⼀
些垂直的间距。请使⽤br 来输⼊空⾏,⽽不是分割段落。
<br/>
3.4列表
⽆序列表
由 ul 和 li 标签组成。
<ul>
<li></li>
<li></li>
......
</ul>
<ul>
<li>好好学习</li>
<li>天天向上</li>
</ul>
常⽤属性
有序列表
由 ol 和 li 标签组成。
<ol>
<li></li>
<li></li>
......
</ol>
<ol>
<li>好好学习</li>
<li>天天向上</li>
</ol>
常⽤属性
3.5div和span
div
<div是⼀个块级元素,通常与css配合使⽤,⽤于布局。
div 标签可以把⽂档分割为独⽴的、不同的部分。它可以⽤作严格的组织⼯具,并且不使⽤任何格式与其关联。
div 是⼀个块级元素。这意味着它的内容⾃动地开始⼀个新⾏。实际上,换⾏是 div 固有的唯⼀格式表现。可以通过 div 的 class 或 id 应⽤额外的样式。
<div>content</div>
常⽤属性
span
span标签被⽤来组合⽂档中的⾏内元素 ,span 没有固定的格式表现。当对它应⽤样式时,它才会产⽣视觉上的变化
<span>content</span>
3.6格式化标签
font
规定⽂本的字体、字体尺⼨、字体颜⾊
pre
定义预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽
字体
3.7⽂本标签
b(粗⽂本)、i(斜体⽂本)、u(下划线⽂本)、
del (中划线⽂本)、sub(下标⽂本)、sup(上标⽂本)
3.8 a标签
a标签定义超链接,⽤于从⼀张⻚⾯链接到另⼀张⻚⾯。
a元素最重要的属性是 href 属性,它指示要链接的⽬标位置,同时没有href属性a标签内的内容与普通
⽂本没有区别,也就失去了超链接的功能。
若是想要跳转到当前⻚⾯,那么href的值为#。被链接⻚⾯通常显示在当前浏览器窗⼝中,除⾮您规定
了另⼀个⽬标(target 属性)。
<a href="http://www.baidu.com">百度</a>
常⽤属性
4.锚点的实现
利⽤a标签的name属性:
<a name="top"></a>
⼀般标签的id属性:div id=""、a id="" 等:
<div id="top"></div>、<a id="top"></a>
锚点定位
<a href="#top">返回⾸部</a>
4.1图⽚
img 元素向⽹⻚中嵌⼊⼀幅图像。
注意:从技术上讲,img 标签并不会在⽹⻚中插⼊图像,⽽是从⽹⻚上链接图像。img 标签创建的是
被引⽤图像的占位空间。
<img src="" alt="" >
必须属性
常⽤属性
4.2表格
table 标签定义 HTML表格。
tr 标签定义表格的⾏。tr元素包含⼀个或多个th或td元素
td 标签定义 HTML 表格中的标准单元格。
th 定义表格内的表头单元格。th元素内部的⽂本通常会呈现为居中的粗体⽂本,⽽ td 元素内的⽂本通常是左对⻬的普通⽂本。
简单的HTML表格由table元素以及⼀个或多个tr、th、或td元素组成。
理解:table相当于⼀个表格的外框,tr为⾏,td为⼀个⼀个单元格,th为有标题作⽤的单元格,th中的
内容同时有加粗的效果。
常⽤属性
tr常⽤属性
td 的colspan和rowspan分别规定单元格横跨的列数和⾏数
4.3表单
form
form 标签⽤于为⽤户输⼊创建 HTML 表单。
表单能够包含 input 元素,⽐如⽂本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。
表单⽤于向服务器传输数据。form 元素是块级元素,其前后会产⽣折⾏。
常⽤属性
method:表单提交⽅式:get、post
get:默认,主动的获取⽅式,数据放在url上,数据的容量有限,安全性差,有缓存
post:数据放在请求实体中,数据量理论上没有限制,相对安全,没有缓存
4.4 input
input 标签⽤于搜集⽤户信息。
根据不同的 type 属性值,输⼊字段拥有很多种形式。输⼊字段可以是⽂本字段、复选框、单选按钮、按钮等等。
常⽤属性
若上传⽂件,请求⽅式为post,且表单添加⼀个属性:enctype=“multipart/form-data”
注意:
- 没有name属性的属性是⽆法提交到后台的!!!!
- Radio单选按钮以name相同为⼀组。
- Checkbox复选按钮以name相同为⼀组。
4. 5textarea
该标签定义多⾏的⽂本输⼊控件。⽂本区中可容纳⽆限数量的⽂本,可以通过 cols 和 rows 属性来规
定 textarea 的尺⼨。cols规定⽂本区内的可⻅宽度。rows规定⽂本区内的可⻅⾏数。
<textarea>content</textarea>
4.6 label
label 标签为input 元素定义标注(标记)。
label元素不会呈现任何的特殊效果。
label标签的for属性应当与相关元素的id属性相同,此时点击label标签会⾃动为元素聚焦
<label for="username">⽤户名:</label>
<input type="text" id="username" name="username"/>
4.7button
<button>按钮</button>
常⽤属性
4.7select
select⽤于定义下拉列表
<select name="color" >
<option value="red">红⾊</option>
<option value="green">绿⾊</option>
<option value="blue">蓝⾊</option>
</select>
select常⽤属性
option常⽤属性
4.8常⽤字符实体
在 HTML 中,某些字符是预留的。
在 HTML 中不能使⽤⼩于号(<)和⼤于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使⽤字符实体(character entities)。
实体名称对⼤⼩写敏感!
5.标签的分类
HTML中标签元素三种不同类型:块状元素,⾏内元素,⾏内块状元素。
5.1块级元素
元素都从新的⼀⾏开始,并且其后的元素也另起⼀⾏;元素的⾼度、宽度、⾏⾼以及顶和底边距都可
设置;元素宽度在不设置的情况下,是它本身⽗容器的100%(和⽗元素的宽度⼀致),除⾮设定⼀个宽度
5.2⾏内元素
和其他元素都在⼀⾏上;元素的⾼度、宽度及顶部和底部边距不可设置;元素的宽度就是它包含的⽂
字或图⽚的宽度,不可改变。
5.3⾏内块状元素
和其他元素都在⼀⾏上;元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置。
6.CSS
CSS是⽤来美化⽹⻚⽤的,没有⽹⻚则CSS毫⽆⽤处,所以CSS需要依赖HTML展示其功能 。
CSS的基本使⽤
6.1CSS基本语法
CSS 样式由选择器和⼀条或多条以分号隔开的样式声明组成。每条声明的样式包含着⼀个 CSS属性和属性值。
选择器名 {
属性 : 属性值;
…
}
div {
background-color : red;
}
注意:
- css声明要以分号;结束,声明以{}括起来
- 建议⼀⾏书写⼀个属性
- 若值为若⼲单词,则要给值加引号,如 font-family: “agency fb”;
6.2注释
多行注释
/* 这⾥的内容就是注释 */
6.3CSS的使⽤
1.⾏内式
⾏内样式将样式定义在具体html元素的style属性中。以⾏内式写的CSS耦合度⾼,只适⽤于当前元素,在设定某个元素的样式时⽐较常⽤。
<p style="color:red;font-size:50px;">这是⼀段⽂本</p>
在当前元素使⽤ style 属性的声明⽅式。
style 是⾏内样式属性;
color 是颜⾊属性;red 是颜⾊属性值;
font-size是字体⼤⼩属性;50px 是字体⼤⼩属性值
2. 嵌⼊式
嵌⼊式通过在html⻚⾯内容开辟⼀段属于css的代码区域,通常做法为在 head 标签中嵌套 style标签,在 style 中通过选择器的⽅式调⽤指定的元素并设置相关 CSS
<style type="text/css">p {color: blue;font-size: 40px;}</style>
3. 引⼊外联样式⽂件
在实际开发当中,很多时候都使⽤引⼊外联样式⽂件,这种形式可以使html⻚⾯更加清晰,⽽且可以
达到更好的重⽤效果。
style.css
p {
color: green;
font-size: 30px;
}
test.html
<link rel="stylesheet" type="text/css" href="style.css">
rel:rel 属性规定当前⽂档与被链接⽂档之间的关系。
stylesheet:⽂档的外部样式表。
很多时候,⼤量的 HTML ⻚⾯使⽤了同⼀个CSS。那么就可以将这些 CSS 样式保存在⼀个单独的.css ⽂件中,然后通过 link 元素去引⼊它。
注意:当有多重样式时,记住前提规则,越精确越优先。
6.4CSS选择器
在 CSS 中,选择器是⼀种模式,⽤于选择需要添加样式的元素。
CSS选择器有很多,掌握常⽤的即可;
基本选择器
1.通⽤选择器
选择所有 *
- {
…
}
* {
color: orange;
}
2.元素选择器
选择指定标签
元素名称 {
…
}
p {
color: red;
font-size: 20px;
}
3. ID选择器
选择设置过指定id属性值的元素 #
#id属性值 {
…
}
#p1 {
font-weight: bold;
}
4. 类选择器
选择设置过指定class属性值的元素 .
.class属性值 {
…
}
.hidden {
display: none;
}
5. 分组选择器
当⼏个元素样式属性⼀样时,可以共同调⽤⼀个声明,元素之间⽤逗号分隔
选择器1,选择器2,… {
…
}
h2 , #pre1 {
color: orange;
font-style: italic;
}
CSS样式的优先级,是根据选择器的精确度/权重来决定的,常⻅的权重如下,权重越⼤,优先级越⾼
元素选择器:1
类选择器:10
id选择器:100
内联样式:1000
6.组合选择器
CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合⽅式。
在 CSS 中包含了四种组合⽅式: 后代选取器(以空格分隔),⼦元素选择器(以⼤于号分隔),相邻兄弟选择器(以加号分隔),普通兄弟选择器(以波浪线分隔)。
7.后代选择器(派⽣选择器)
⽤于选择指定标签元素下的后辈元素,以空格分隔
选择器1 选择器2 {
…
}
.food li {
border: 1px solid red;
}
<h1>⻝物</h1> <ul class="food">
<li>⽔果
<ul>
<li>⾹蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>⽩菜</li>
<li>油菜</li>
<li>卷⼼菜</li>
</ul>
</li>
</ul>
8.⼦元素选择器
⽤于选择指定标签元素的所有第⼀代⼦元素,以⼤于号分隔
选择器1 + 选择器2 {
…
}
#d + div {
border: 1px solid red;
}
9.相邻兄弟选择器
可选择紧接在另⼀元素后的元素,且⼆者有相同⽗元素。以加号分隔
选择器1 + 选择器2 {
…
}
#d + div {
border: 1px solid red;
}
<div id="d">
相邻兄弟选择器1
<ul>
<li>开⼼麻花</li>
<li>贾玲</li>
<li>宋⼩宝</li>
</ul>
</div> <div>
相邻兄弟选择器2
</div>
10.普通兄弟选择器
选择紧接在另⼀个元素后的所有元素,⽽且⼆者有相同的⽗元素,以波浪线分隔
选择器1 ~ 选择器2 {
…
}
li ~ li {
background-color : yellow;
}
<div>
普通兄弟选择器1
<ul>
<li>开⼼麻花</li>
<li>贾玲</li>
<li>宋⼩宝</li>
<li>沈腾</li>
<li>王宁</li>
</ul>
</div>
7.CSS常⽤属性设置
7.1背景
CSS 背景属性⽤于定义HTML元素的背景效果
background-color
设置元素的背景颜⾊
body {
background-color:#ff0000;
}
background-image
设置元素的背景图像,默认情况下,背景图像进⾏平铺重复显示,以覆盖整个元素实体。
body {
background-image:url('paper.gif');
}
background-repeat
设置是否及如何重复背景图像
body {
background-image: url(img/logo.jpg);
background-repeat: no-repeat;
}
7.2⽂本
color
body {
color:blue; }
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
text-align
设置⽂本对⻬⽅式,center(居中),left(左对⻬),right(右对⻬)
body {
text-align:center; }
h1 {
text-align:right;
}
h2 {
text-align:right;
}
text-decoration
规定添加到⽂本的修饰,属性值:none、underline、overline、line-through
1)underline
对⽂本添加下划线,与HTML的u元素相同。
2)overline
对⽂本添加上划线。
3)line-through
对⽂本添加中划线,与HTML中的s和 strike 元素相同。
4)none
关闭原本应⽤到元素上的所有装饰。
h3 {
text-decoration:underline;
}
text-indent
设置⽂本⾸⾏缩进
p.ident2 {
text-indent: 2em;
}
em⼀个相对值,例如⻚⾯的⽂本⼤⼩为17px,则2em就为17px*2
7.3字体
font-family
⽂本字体,该属性设置⽂本的字体。
font-family属性应该设置⼏个字体名称作为⼀种"后备"机制,如果浏览器不⽀持第⼀种字体,他将尝试
下⼀种字体,所以尽量将不常⻅的字体靠前,将最常⻅的字体放置在最后,作为替补。
注意:
1)只有当字体名中含有空格或#、$之类的符号时(如 New York),才需要在font-family声明中加引
号
body {
font-family: "arial black";
}
2)多个字体系列是⽤⼀个逗号分隔指明
/* 靠前的字体先⽣效 */
p{
font-family: 微软雅⿊,⿊体,"agency fb";
}
font-size
⽂本⼤⼩
body {
font-size: 50px; /*字体⼤⼩50px*/
}
#span1 {
font-size: 25px; /*字体⼤⼩25px*/
}
font-style
字体⻛格,该属性最常⽤于规定斜体⽂本。 属性值:normal、italic、oblique
1)normal:⽂本正常显示;
2)italic:⽂本斜体显示;
3)oblique:⽂本倾斜显示,oblique是将⽂字强制倾斜
font-weight
字体加粗,该属性设置⽂本的粗细。
bold:可以将⽂本设置为粗体。
100 ~ 900:为字体指定了 9 级加粗度。如果⼀个字体内置了这些加粗级别,那么这些数字就直接映射
到预定义的级别。
100 对应最细的字体变形;
900 对应最粗的字体变形;
400 等价于 normal;
700 等价于 bold。
8.对⻬⽅式
text-align
规定元素中的⽂本的⽔平对⻬⽅式。属性值如下:
注意:
值 justify 可以使⽂本的两端都对⻬。在两端对⻬⽂本中,⽂本⾏的左右两端都放在⽗元素的内边界
上。然后,调整单词和字⺟间的间隔,使各⾏的⻓度恰好相等。对最后⼀⾏不⽣效。
display属性
浮动
float的属性值有none、left、right。
- 只有横向浮动,并没有纵向浮动。
- 会将元素的display属性变更为block。
- 浮动元素的后⼀个元素会围绕着浮动元素(典型运⽤是⽂字围绕图⽚)
- 浮动元素的前⼀个元素不会受到任何影响(如果你想让两个块状元素并排显示,必须让两个块状元素都应⽤
float)。
盒⼦模型
border、padding、margin三个属性构成了盒⼦模型。
border
设置所有的边框属性。
1)可同时设置边框的宽度、样式、颜⾊
table, th, td {
border: 1px solid black; }
table {
width:100%; height:50px;
}
2)使⽤border-width、border-style、border-color单独设置
table,td {
border-width: 1px;
border-style: dotted;
border-color: green;
}
3)border-style的属性
4)border-collapse
设置是否将表格边框折叠为单⼀边框。
属性值:separate(默认,单元格边框独⽴)、collapse(单元格边框合并)
table {
border-collapse : collapse;
}
padding
设置元素所有内边距的宽度,或者设置各边上内边距的宽度。
如果在表的内容中控制⽂本到边框的内边距,使⽤td和th元素的填充属性:
td {
padding:15px;
}
单独设置各边的内边距:padding-top、padding-left、padding-bottom、padding-right
默认按照上右下左的顺序设定
td .test1 {
padding: 1.5cm
}
td .test2 {
padding: 0.5cm 2.5cm
}
<table border="1">
<tr>
<td class="test1">
这个表格单元的每个边拥有相等的内边距。
</td>
</tr>
</table> <br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是0.5cm,左和右内边距是 2.5cm。
</td>
</tr>
</table>
注意:通过padding属性设置元素内边距时,会使元素变形。若不想影响格式效果,可以⽤margin属性
设置元素外边距。
margin
设置⼀个元素所有外边距的宽度,或者设置各边上外边距的宽度
p.margin {
margin: 2px 4px 3px 4px;
}
单独设置各边的外边距:margin-top、margin-left、margin-bottom、margin-right
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
*{
margin: auto auto; }
*{
margin: 100px auto;
}
说明:
auto:⾃动,可以理解为居中的意思。浏览器⾃动计算外边距。
margin: auto auto:第⼀个auto表示上下外边距⾃动计算,第⼆个auto表示左右外边距⾃动计算。
但是上下外边距在⾃动计算时不会⽣效,⽽左右外边距会⽣效,表现为居中状态,效果如下:
若要设置为上下左右居中状态,则要计算好⾃⾏设置上下的外边距,效果如下:
注意:此时使⽤margin-top不⽣效。了解