HTML(HyperText Markup Language)超文本标记语言, “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 它通过标记符号(标签)来标记要显示的网页中的各个部分,这些语义化的标签可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等),浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,我们只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果
后缀:一个网页对应多个HTML文件,超文本标记语言文件以.htm或.html为扩展名,常用.html作为扩展名
结构:整个页面由html标记包含,包括head和body两部分
- <html>,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,它是文件的开头;而</html>,则表示该文件的结尾。
- <head></head>,这2个标记符分别表示头部信息的开始和结尾。它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是<title>和<meta>标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,meta定义了HTML文档中的元数据。
- <body></body>,网页中显示的实际内容均包含在这2个正文标记符之间。
CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现HTML的计算机语言,样式定义如何显示 HTML 元素, CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档header部分, 也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。通常存储在外部样式表中,即CSS 文件中 ,外部样式表可以极大提高工作效率。
后缀:通常用.css作为文件扩展名
选择器:CSS给html页面设置样式,主要通过选择器来完成,选择器由两个主要的部分构成:选择器以及一条或多条声明,如下图所示:
选择器通常是您需要改变样式的 HTML 元素, 每条声明由一个属性和一个值组成, 属性是希望设置的样式,每个属性有一个值,属性和值用冒号分开。常用的三种基本选择器有标签选择器、ID选择器、类选择器
- 标签选择器:通过标签名选中html元素,如 p{color:"red"}
- ID选择器:ID选择器可以为标有特定 id 的 HTML 元素指定特定的样式,CSS 中 id 选择器以 "#" 来定义。注意:ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 如:
- CLASS选择器:CLASS选择器用于描述一组元素的样式,class可以在多个元素中使用,CSS中类选择器以一个点"."号显示。
插入样式表:将样式表插入html页面中有以下几种方式:
- 外部样式表(External style sheet) :每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:<link rel="stylesheet" type="text/css" href="mystyle.css">
- 内部样式表(Internal style sheet) :可以使用 <style> 标签在文档头部定义内部样式表
<style>
p {color:sienna;}
</style>
- 内联样式(Inline style): 定义在html标签内,此时,style可以看做标签的属性
<p >这是一个段落。</p>
CSS 注释: 注释是用来解释代码的,浏览器会忽略它,CSS注释以 "/*" 开始, 以 "*/" 结束
CSS网页样式是用来给html页面加入一定的效果,让其看起来更加美观。
常用的样式有以下几个:
1.文本样式:
- 颜色:颜色属性被用来设置文字的颜色,通常有三种写法
- 十六进制值 - 如: #FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
- 对齐方式 :文本排列属性是用来设置文本的水平对齐方式,文本可居中或对齐到左或右,两端对齐.
- {text-align:center;} 文本居中
- {text-align:right;} 文本右对齐,left为左对齐
- {text-align:justify;}每一行被展开为宽度相等,左,右外边距是对齐
- 文本修饰:text-decoration 属性用来设置或删除文本的装饰。
- {text-decoration:overline;}
- {text-decoration:line-through;}
- {text-decoration:underline;}
- 文本缩进:文本缩进属性是用来指定文本的第一行的缩进。
- {text-indent:50px;}
2.文字样式
- font 在一个声明中设置所有的字体属性
- font-family 指定文本的字体系列
- font-size 指定文本的字体大小
- font-style 指定文本的字体样式
- font-variant 以小型大写字体或者正常字体显示文本
- font-weight 指定字体的粗细
3.链接样式:可以通过css装饰,超链接通常有以下四种状态
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面
4.列表属性:
- list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
- list-style-image 将图象设置为列表项标志。
- list-style-position 设置列表中列表项标志的位置。
- list-style-type 设置列表项标志的类型。
5.背景属性:
- background 简写属性,作用是将背景属性设置在一个声明中。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
- background-color 设置元素的背景颜色。
- background-image 把图像设置为背景。
- background-position 设置背景图像的起始位置。
- background-repeat 设置背景图像是否及如何重复