一、web标准
- w3c:万维网联盟组织,用来制定web标准的机构(组织)
- web标准:制作网页遵循的规范
- web准备规范的分类:结构标准、表现标准、行为标准。
- 结构:html。表示:css。行为:Javascript。
总结来说:web标准有三个
结构标准:相当于人的身体。html就是用来制作网页的。
- 表现标准: 相当于人的衣服。css就是对网页进行美化的。
- 行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的
二、常用浏览器
浏览器是用来运行网页的平台。常用的有IE、火狐(Firefox)、谷歌(Chrome)、Safari等等,其他的浏览器大多是基于以上几个浏览器内核包装的。
PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因
浏览器内核:
浏览器 | 内核 |
IE | trident |
hrome | blink |
Firefox | gecko |
Safari | webkit |
三、HTML颜色
颜色表示:
- 纯单词表示:red、green、blue、orange、gray等
- 10进制表示:rgb(255,0,0)
- 16进制表示:#FF0000、#0000FF、#00FF00等
我们大家先记住几个纯单词的颜色,css课程中会详细讲10进制和16进制。
RGB色彩模式:
- 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得,这就是人们常说的三原色原理。
- RGB三原色也叫加色模式,这是因为当我们把不同光的波长加到一起的时候,可以得到不同的混合色。例:红+绿=黄色,红+蓝=紫色,绿+蓝=青
- 在数字视频中,对RGB三基色各进行8位编码就构成了大约1678万种颜色,这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
- RGB各有256级(0-255)亮度,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216
四、HTML结构
1、声明头
任何一个标准的HTML页面,第一行一定是一个以
<!DOCTYPE...
这就是声明头,此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
2、头标签(head)
head标签都放在头部分之间。这里面包含了:<title>、
<meta>
、<link>,<style>
<title>
:指定整个网页的标题,在浏览器最上方显示。<meta>
:提供有关页面的基本信息<link>
:定义文档与外部资源的关系。- <style>:定义内部样式表与网页的关系
2.1 Meta标签介绍:
元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部,不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
2.2 title标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。
五、body中的标签
HTML标签中有两类标签:
1.字体标签
2.排版标签
1、字体标签
字体标签包含:h1~h6、<sup>、<sub>
标题
标题使用<h1>
至<h6>
标签进行定义。<h1>
定义最大的标题,<h6>
定义最小的标题。具有align属性,属性值可以是:left、center、right。
<h1>路飞学城</h1> <h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6>
显示结果
上标<sup> 下标<sub>
上小标这两个标签容易混淆,怎么记呢?这样记:b
的意思是below:底部
例子:
5<sup>2</sup> 8<sub>2</sub>
显示结果
特殊字符
:空格 (non-breaking spacing,不断打空格)<
:小于号(less than)>
:大于号(greater than)&
:符号&
"
:双引号'
:单引号©
:版权©
™
:商标™
要求大家背过的特殊字符: 、<、>、©
比如说,你想把<p>
作为一个文本在页面上显示,直接写<p>
是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写:
这是一个HTML语言的<p>标签
结果显示:
二、排版标签
段落标签<p>
段落:是英文paragraph的缩写。
属性:
- align='属性值':对齐方式。属性值包括:left、center、right
示例:
<p>这是一个段落</p> <p align="center">这是另一个段落</p>
结果显示:
HTML标签是分等级的。HTML将所有的标签分为两种:
- 文本级标签:p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
- 容器级标签:div、h系列、li、dt、dd。容器级标签里可以放任何东西。
p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。
块级标签 <div>和<span>
div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。
div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
div标签的属性:
align="属性值"
:设置块儿的位置。属性值可选择:left、right、 center
<span>
和<div>
唯一的区别在于:<span>
是不换行的,而<div>
是换行的。
div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域。
div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。
span也是表达“小区域、小跨度”的标签,但是是一个文本级的标签。
就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span举例:
<p> 商品简介: <span> <a href="">详细信息</a> <a href="">生产日期</a> </span> </p>
预定义(预格式化)标签:<pre>
含义:将保留其中的所有的空白字符(空格、换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行)
说明:真正排网页过程中,<pre>
标签几乎用不着。但在PHP中用于打印一个数组时使用。
示例:
<pre> 鹅鹅鹅 作者:李白 曲项向天歌 白毛浮绿水 </pre>
结果:
字体变小,并且缩进了是因为浏览器默认忽略空格和空行。
三、超链接
超链接就是给图片或者文字加上一个连接,只要用鼠标点一点,就会跳转到指定的页面。
超链接的属性
href
:目标URLtitle
:悬停文本。name
:主要用于设置一个锚点的名称。target
:告诉浏览器用什么方式来打开目标页面。target
属性有以下几个值:_self
:在同一个网页中显示(默认值)_blank
:在新的窗口中打开。_parent
:在父窗口中显示_top
:在顶级窗口中显示
blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。
也就是说,如果不写target=”_blank”
那么就是在相同的标签页打开,如果写了target=”_blank”
,就是在新的空白标签页中打开。
四、图片标签 <img />
能插入的图片类型:
-
能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别,css课上讲。
-
不能往网页中插入的图片格式是:psd、ai
HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。
这里涉及到图片的一个属性:
src
属性:指图片的路径。
在写图片的路径时,有两种写法:相对路径、绝对路径(相对路径和绝对路径的概念就不赘述了,找度妈妈)
img标签的常用其它属性
width
:宽度height
:高度title
:提示性文本。公有属性。也就是鼠标悬停时出现的文本。align
:指图片的水平对齐方式,属性值可以是:left、center、right-
alt
:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。(有的浏览器不支持) - 注意事项:
(1)如果要想保证图片等比例缩放,请只设置width和height中其中一个。
(2)如果想实现图文混排的效果,请使用align属性,取值为left或right