Html整理

最新推荐文章于 2024-08-08 10:33:11 发布

来杯啤酒加勺糖

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量384

点赞数

分类专栏： Html 文章标签： html 字体图片语言

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、HTML的概述：

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

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

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

2.HTML的网络术语

网页：由各种标记组成的一个页面就叫网页
主页(首页) : 一个网站的起始页面或者导航页面
标记： 称为开始标记，称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：内容称为元素.
属性：给每一个标签所做的辅助信息。
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>，也有单独呈现的标签（单边标记），如： 、<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、排版标签
 
 注释标签
```

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

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

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

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

换行标签` `

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

水平线标签`<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。
块级标签 

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

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

斜体标记 或

上标 下标

上小标这两个标签容易混淆，怎么记呢？这样记：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：
```

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

```
而不是a包裹p：
```
<a href="">
 
 段落段落段落段落段落段落
 
</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 “替代”的意思。（有的浏览器不支持)