Html整理

来源：互联网发布：阿里云英国节点编辑：程序博客网时间：2024/05/16 09:23

1、HTML的概述：

html全称为HyperText Mackeup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。

超文本：音频，视频，图片称为超文本。
标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

作用：HTML是负责描述文档语义的语言。

2.HTML的网络术语

网页：由各种标记组成的一个页面就叫网页
主页(首页) : 一个网站的起始页面或者导航页面
标记： <p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。
xhtml：符合XML语法标准的HTML。
dhtml：dynamic，动态的。javascript + css + html合起来的页面就是一个dhtml。
http：超文本传协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议，ftp:文件传输协议。
3.HTML颜色介绍
颜色表示：
- 纯单词表示：red、green、blue、orange、gray等
- 10进制表示：rgb(255,0,0)
- 16进制表示：#FF0000、#0000FF、#00FF00等
RGB色彩模式：
- 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
- RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青
- 在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
- RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216
HTML的规范
- HTML是一个弱势语言
- HTML不区分大小写
- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
- HTML的结构：
  声明部分：主要作用是用来告诉浏览器这个页面使用的是那个标准。是HTML5标准。
  head部分：不会显示在页面上，作用是告诉服务器一些页面的额外信息。
  body部分：我们所写的代码必须放在此标签內。
- HTML的基本语法特性
  1、HTML对换行不敏感，对tab不敏感
  2、空白折叠现象
  HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
  3、标签要严格封闭
  标签不封闭是灾难性的。
  HTML的各种标签
  备注：
  - 所有的浏览器默认情况下都会忽略空格和空行
  - 每个标签都有私有属性。也都有公有属性。
  - html中表示长度的单位都是像素。HTML只有一种单位就是像素。
  HTML标签通常是成对出现的（双边标记），比如 <div> 和 </div>，也有单独呈现的标签（单边标记），如：<br />、<hr />和<img src=“images/1.jpg” />等。
  属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
- 1、头标签
  头标签都放在头部分之间。包括：<title>、<base>、<meta>、<link>
  - <title>：指定整个网页的标题，在浏览器最上方显示。
  - <base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
  - <meta>：提供有关页面的基本信息
  - <body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
  - <link>：定义文档与外部资源的关系。
  <body>标签的属性
  其属性有：
  - bgcolor：设置整个网页的背景颜色。
  - background：设置整个网页的背景图片。
  - text：设置网页中的文本颜色。
  - leftmargin：网页的左边距。IE浏览器默认是8个像素。
  - topmargin：网页的上边距。
  - rightmargin：网页的右边距。
  - bottommargin：网页的下边距。
  2、排版标签
  注释标签
```

```
  段落标签<p>
```
<p>This is a paragraph</p><p>This is another paragraph</p>
```
  属性：
  - align="属性值"：对齐方式。属性值包括left center right。

HTML标签是分等级的，HTML将所有的标签分为两种：

容器级：容器级别的标签，里面可以放置任何东西。
文本级：文本级的标签里面，只能放置文字、图片、表单元素。

从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

换行标签`<br>`

当你打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。无论你将它置于何处，<br>标签都会产生一个强制的换行。

水平线标签`<hr>`

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

属性：

align="属性值"：设定线条置放位置。属性值可选择：left right center。
size="2"：设定线条粗细。以像素为单位，内定为2。
width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
color="#0000FF"：设置线条颜色。
noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体，这是内定值。

预定义（预格式化）标签：`<pre>`

含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

块级标签 `<div>`

把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。

属性：

align="属性值"：设置块儿的位置。属性值可选择：left right center。

块级标签 `<span>`

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。

特殊字符

 ：空格
<：小于号
>：大于号
&：符号&
"：双引号
'：单引号
©：版权©
™：商标™
绐：文字绐。其实，#32464是汉字绐的unicode编码。

粗体标签`<b>`或`<strong>`

斜体标记 `<i>`或`<em>`

上标`<sup>` 下标`<sub>`

上小标这两个标签容易混淆，怎么记呢？这样记：b的意思是bottom：底部

4、超链接

超链接有三种形式：

1、外部链接：链接到外部文件。举例：

<a href="02页面.html">点击进入另外一个文件</a>

2、锚链接：
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字

3、邮件链接：
代码举例：

<a href="mailto:smyhvae@163.com">点击进入我的邮箱</a>

效果：点击之后，会弹出outlook，作用不大。

超链接的属性：

href：目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示
- _top：在顶级窗口中显示

title属性举例：

<a href="09_img.html" title="很好看哦">结婚照</a>

备注1：分清楚img和a标签的各自的属性

区别如下：

<img src="1.jpg" /><a href="1.html"></a>

备注2：a是一个文本级的标签

比如一个段落中的所有文字都能够被点击，那么应该是p包裹a：

<p>    <a href="">段落段落段落段落段落段落</a></p>

而不是a包裹p：

<a href="">    <p>        段落段落段落段落段落段落    </p></a>

a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。

5、图片标签

img: 代表的就是一张图片。是单边标记。

能插入的图片类型

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。
不能往网页中插入的图片格式是：psd、ai

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

属性：

src属性：指图片的路径。
在写图片的路径时，有两种写法：
写法一：相对路径。相对当前页面所在的路径。两个标记.和.. ,分表代表当前目录和父路径。

举例1：

<!-- 当前目录中的图片 --><img src="2.jpg"><img src=".\2.jpg"> <!-- 上一级目录中的图片 --><img src="..\2.jpg">

img 是image“图片”的简写，src 是英语source“资源”的缩写。

img是自封闭标签，也称为单标签。

相对路径不会出现这种情况：

aaa/../bbb/1.jpg

../要么不写，要么就写在开头。

写法二：绝对路径。包括以下两种：
（1）以盘符开始的绝对路径。举例：

<img src="C:\Users\smyhvae\Desktop\html\images\1.jpg">

（2）网络路径。举例：

<img src="http://p1.yokacdn.com/pic/beauty/ytqx/2012/U278P1T117D698193F2577DT20120831155008_maxw808.jpg">

再来看看img标签的其他属性：

width：宽度
height：高度
Align：指图片的水平对齐方式，属性值可以是：left、center、right
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
border：给图片加边框（描边），单位是像素，边框的颜色是黑色
Hspace：指图片左右的边距
Vspace：指图片上下的边距
Alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持)

阅读全文

0 0

Html整理

1、HTML的概述：

2.HTML的网络术语

3.HTML颜色介绍

HTML的规范

HTML的基本语法特性

1、HTML对换行不敏感，对tab不敏感

2、空白折叠现象

3、标签要严格封闭

HTML的各种标签

1、头标签

`<body>`标签的属性

2、排版标签

注释标签

段落标签`<p>`

换行标签`<br>`

水平线标签`<hr>`

预定义（预格式化）标签：`<pre>`

块级标签 `<div>`

块级标签 `<span>`

特殊字符

粗体标签`<b>`或`<strong>`

斜体标记 `<i>`或`<em>`

上标`<sup>` 下标`<sub>`

4、超链接

超链接的属性：

备注1：分清楚img和a标签的各自的属性

备注2：a是一个文本级的标签

5、图片标签

能插入的图片类型

属性：

Html整理

1、HTML的概述：

2.HTML的网络术语

3.HTML颜色介绍

HTML的规范

HTML的基本语法特性

1、HTML对换行不敏感，对tab不敏感

2、空白折叠现象

3、标签要严格封闭

HTML的各种标签

1、头标签

<body>标签的属性

2、排版标签

注释标签

段落标签<p>

换行标签<br>

水平线标签<hr>

预定义（预格式化）标签：<pre>

块级标签 <div>

块级标签 <span>

特殊字符

粗体标签<b>或<strong>

斜体标记 <i>或<em>

上标<sup> 下标<sub>

4、超链接

超链接的属性：

备注1：分清楚img和a标签的各自的属性

备注2：a是一个文本级的标签

5、图片标签

能插入的图片类型

属性：

`<body>`标签的属性

段落标签`<p>`

换行标签`<br>`

水平线标签`<hr>`

预定义（预格式化）标签：`<pre>`

块级标签 `<div>`

块级标签 `<span>`

粗体标签`<b>`或`<strong>`

斜体标记 `<i>`或`<em>`

上标`<sup>` 下标`<sub>`