很久很久以前学的，16个HTML笔记

Lemon黄

发布于 2019-10-22 14:44:45

6680

发布于 2019-10-22 14:44:45

文章被收录于专栏：Lemon黄Lemon黄

点击上方“Lemon黄”关注我哦，不定期原创文，定期好技术文推广分享

1、HTML简介

英文名：HyperText Markup Language，意思为：超文本标记语言。

超文本：能够表达更丰富的内容（相对于普通文本）
标记：标识符号，就是html中的标签
语言：不是编程语言，就是html标签的描述。浏览器来翻译html代码
HTML网页扩展名：.html .htm

2、HTML文档结构

HTML框架基本构架如下

<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

解释：

带<>的都叫标签
html: 指明当前的文档的类型，是一个网页
head是网页头部包括网页的相关信息，基本设置，其中title网站的标题就在里面。
body:在浏览器的看到的内容。

3、HTML标签分类

双标签：<font>HTML</font>,有开始标签和结束标签（标记）

单标签： <br />

标签书写规范

所有的标签都在< >中
所有的标签都有开始和结束，即使是单标记也要结束

<br /> 强制换行

<img /> 图片标记

所有的标签和属性及值小写
标签和属性，属性与属性之间有空格
属性值必须有加引号（单引号或双引号都可以）
属性必须有值
属性可写可不写
标签与标签之间正确嵌套(标签不可交叉嵌套)

4、标签格式

<开始标签属性1＝”值1” 属性2＝”值2” 属性n＝”值n”>控制的内容</开始标签>(双标签格式)

<开始标签属性1＝”值1” 属性2＝”值2” 属性n＝”值n” 空格/>(单标签格式)

<开始标签空格/>(单标签格式)

5、HTML注释

注释的内容在html页面中是无法看到的，但是可以在页面源代码中发现

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    这是HTML中的注释
    <!--我是你看不到的内容-->
</body>
</html>

6、文本的修饰

属性修饰：

Color(颜色):red,blue,green,yellow,gray,pink等
Size(大小):值(1-7),默认值：3。字体最大尺寸为7，若比7大，则默认为7。字体默认尺寸为3，当出现对尺寸的加减时，就是对3进行加减

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <font>我的第一个网页</font><br />
    <font color="green">我的第一个网页</font><br />
    <font color="green" size="7">我的第一个网页</font><br />
    <font color="green" size="70">我的第一个网页</font><br />
    <font color="green" size="+1">我的第一个网页</font><br />
    <font color="green" size="4">我的第一个网页</font><br />
    <font color="green" size="-1">我的第一个网页</font><br />
    <font color="green" size="2">我的第一个网页</font><br />
</body>
</html>

标签修饰：

<big>相对默认文字大一些
<small>对默认文字小一些
<b>加粗
<strong>加强语气
<i>斜体
<em>斜体
<u>下划线
<s> 删除线
<ins><del>
<sup> <sub> ：superscript 上标 subscript 下标

7、HTML排版标记

p 段落：

自动在段前段后添加一个空白行

属性：align:值：left(左对齐,默认) center（居中对齐） right（右对齐）

br：

强行换行<br />

hr：

单标记 <hr />

属性：width 宽度：值:默认是像素，也可是百分比

align:对齐方式：left center right ，默认 center

color :颜色

noshade 阴影设置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<hr width="50%" color="blue" size="10" noshade="noshade">
<hr width="50%"  size="3" >
<hr width="50%"  size="3" noshade="noshade">
</body>
</html>

h1-h6：

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>

HTML字符实体：

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
¥	元（yen）	¥
©	版权（copyright）	©
®	注册商标	®

更多实体符号请访问W3C官方实体符号参考网站：http://www.w3school.com.cn/tags/html_ref_entities.html

Pre:

可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体.

<div>和span区别块元素和行内元素：

<div> 标签可以把文档分割为独立的、不同的部分
<span> 标签被用来组合文档中的行内元素。如果不对span设置样式，他跟其他文本是没有区别的

8、W3C 是什么？

W3C 指万维网联盟（World Wide Web Consortium）

W3C 创建于1994年10月

W3C 由 Tim Berners-Lee 创建

W3C 的工作是对 web 进行标准化

W3C 创建并维护 WWW 标准

W3C 标准被称为 W3C 推荐（W3C Recommendations）

9、HTML文档类型

HTML4.0.1有三种<!DOCTYPE>声明，在HTML5中只有一种。

HTML5声明：

<!DOCTYPE html>

HTML 4.0.1 三种声明：

HTML 4.0.1 Strict(严格型)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

该DTD文件包含所有HTML元素和属性，但不包括展示性和弃用元素(如font).不允许使用框架集(Frameset)

HTML 4.0.1 Transitional(过渡型)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

HTML 4.0.1 Frameset(框架型)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" >

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

注意：

<!DOCTYPE>声明不是HTML标签；它是指示web浏览器使用哪个HTML版本进行编写的指令。<!DOCTYPE>声明必须要在HTML文档的第一行，位于<html>标签之前。

在HTML4.0.1中，<!DOCTYPE>声明引用DTD，是因为HTML4.0.1基于SGML。DTD规定了标记语言的规则，浏览器才能正确的呈现内容

HTML5不是基于SGML，所以不用引入DTD。

10、计算机编码：

计算机编码指电脑内部代表字母或数字的方式。常见的编码方式有：ASCII编码，ANSI编码，GB2312编码(简体中文)，GBK,BIG5编码(繁体中文)，unicode,utf-8编码等。

编码单位：

最小单元是”位” bit

最小的存储单位是”字节”Byte

一个字节 = 8位 => 1Byte = 8bits

机器语言的单位是Byte

1KB = 1024Byte;1MB=1024KB;1GB=1024MB;1TB=1024GB

进制：

二进制由0和1.八进制由0-7，十进制由0-9，十六进制由0-9，A,B,C,D,E,F组成。

Binary（2）	Octal（8）	Decimal（10）	Hex（16）
0	0	0	00
1	1	1	1
10	2	2	2
11	3	3	3
100	4	4	4
101	5	5	5
110	6	6	6
111	7	7	7
1000	10	8	8
1001	11	9	9
1010	12	10	A
1011	13	11	B
1100	14	12	C
1101	15	13	D
1110	16	14	E
1111	17	15	F

11、上层字符

字符是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等。字符集是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、 GB 18030字符集、Unicode字符集等。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

12、解决乱码问题

只要保证编码一致就不会出现乱码

1.编辑器设置：

2.meta字符设置：

http-equiv:服务器通知浏览器用什么字符来显示本页面
content=”text/html” 大类text文本文件下的html文件
charset=”” 我们要在这里设置字符编码，gbk, gb2312简体中文,utf-8(万国码)

3.浏览器编码(以火狐浏览器为例)

4.PHP字符集设置

5.MySQL数据库字符集设置

13、绝对路径与相对路径

绝对路径

绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如：

file:///C:/Users/Administrator/Desktop/day2/cat.jpg

https://www.baidu.com/img/bd_logo1.png

相对路径

相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。

三种情况：

一、目标文件与当前文件是同级别

目标文件的路径写法：直接写文件名和扩展名即可

二、目标文件所在的文件夹与当前页面是同级的

目标文件的路径写法：文件夹的名称/目标文件的名称+扩展名

三、目标文件在当前页面的上一级。../表示指该文件的上一级目标

当目标文件在当前页面的上两级，就用两个../../。

一般在做网站的时候，用的是相对路径。

14、HTML列表

标签定义列表项目<li>

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中

14.1、有序列表<ol>：

三个属性：

Type: 规定在列表中使用的标记类型。有1、A、a、i、I

Start: 规定有序列表的起始值。

Reversed:规定列表顺序为降序(H5新增属性)，会跟start冲突

有reversed

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ol start="4" type="a" reversed>
    <li>泉州</li>
    <li>厦门</li>
    <li>漳州</li>
    <li>龙岩</li>
</ol>
</body>
</html>

无reversed

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ol start="4" type="a">
    <li>泉州</li>
    <li>厦门</li>
    <li>漳州</li>
    <li>龙岩</li>
</ol>
</body>
</html>

14.2、无序列表<ul>：

属性：

Type：disc 默认的黑色点 circle 圆圈 square方块

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul type="circle">
    <li>泉州</li>
    <li>厦门</li>
    <li>漳州</li>
    <li>龙岩</li>
</ul>
</body>
</html>

有序和无序的配合：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<ul>
    <li>周边旅游
        <ol>
            <li>泉州</li>
            <li>厦门</li>
            <li>漳州</li>
            <li>龙岩</li>
        </ol>
    </li>
    <li>国内旅游</li>
    <li>国际旅游</li>
</ul>
</body>
</html>

14.3、自定义列表<dl>：

<dl>标签定义了定义列表

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<dl>
    <dt>周边旅游</dt>
    <dd>青岛</dd>
    <dd>泰安</dd>
    <dd>潍坊</dd>
    <dt>国内旅游</dt>
    <dd>三亚</dd>
    <dd>海口</dd>
    <dd>张家界</dd>
    <dt>出境旅游</dt>
    <dd>芭提雅</dd>
    <dd>普吉岛</dd>
    <dd>马尔代夫</dd>
</dl>
</body>
</html>

15、滚动字幕标记marquee

属性：

align: 对齐方式 LEFT，CENTER，RIGHT，TOP，BOTTOM (不用多说了)
behavior: 用于设定滚动的方式，主要由三种方式：
behavior="scroll": 表示由一端滚动到另一端；
behavior="slide": 表示由一端快速滑动到另一端，且不再重复；
behavior="alternate" : 默认值——表示在两端之间来回滚动。
direction: left(默认值) 左; right 右;up 上;down 下;
bgcolor: 背景颜色
height: 高度
weight: 宽度
Hspace/vspace: 分别用于设定滚动字幕的左右边框和上下边框的宽度。作用大概和css中的margin差不多
scrollamount: 用于设定每个连续滚动文本后面的间隔，该间隔用像素表示，以上是官方说法,其实就是滚动的速度，值不能太大,要不从视觉角度来说,是没反应的.值越大速度越快，反之越慢。
scrolldelay: 延迟时间
loop: 这个属性大家也很熟悉，循环次数；loop=-1的时候一直重复循环（默认值）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100">
    哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽
</marquee>
</body>
</html>

16、图片标记<img>

属性	值	描述
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。
height		定义图像的高度
width		设置图像的宽度

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3208314862,3396014849&fm=26&gp=0.jpg"  alt="2019年高清大图" />


</body>
</html>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-10-17，如有侵权请联系 cloudcommunity@tencent.com 删除

html

html5

本文分享自 Lemon黄微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html

html5

登录后参与评论

0 条评论

热度

很久很久以前学的，16个HTML笔记

很久很久以前学的，16个HTML笔记

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐