HTML

最新推荐文章于 2023-01-12 08:48:19 发布

为爱而生#

最新推荐文章于 2023-01-12 08:48:19 发布

阅读量1.6k

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/qq_41170640/article/details/102686971

版权

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML，从WWW、Internet、W3C、IP地址和域名的基础概念，到网站、网页的组成，再到互联网产业分类。深入探讨HTML的基本语法、历史发展，以及颜色、大小等元素。此外，还涵盖了常用标签的使用，如超链接、图片、表格和表单，为初学者提供了全面的HTML知识框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础知识

1，WWW,Internet,W3C,ip,域名

WWW：(world wide web)

万维网，是基于Internet的信息服务系统，官方定义为:WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过Internet访问另一台计算机上的信息。从技术上讲，万维网是Internet上那些支持WWW协议和超文本传送协议的客户机与服务器的集合，通过它可以访问世界各地的超文本文件，包括文字，图形，声音，动画，资料库以及各种内容。

Internet:

是由计算机连接起来的物理网络，它们依靠标准和固定的规则进行通信。

W3C:(world wide web consortium)

万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）

ip地址：HTTP TCP/IP

IP地址是指互联网协议地址（英语：Internet Protocol Address，又译为网际协议地址），是IP Address的缩写。IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址。例如：192.168.189.1

域名：

IP地址是Internet主机的作为路由寻址用的数字型标识，人不容易记忆。因而产生了域名（domain name）这一种字符型标识。
com:商业组织公司
edu:教研机构
gov:政府部门
net:网络服务商
org:非盈利组织
cn:中国
jp:日本
uk:英国

2，网站(B/S架构项目)

是构成web的基础，指在万维网上根据一定的规则，使用html,css,java等语言制作的用于展示特定内容的相关网页的集合。

3，网页

是网站中的一个页面，是构成网站的基础，网页是纯文本文件，但是具有一定的格式，也就是HTML语言定义的格式，由于HTML被翻译为超文本标记语言，因此网页也被称为超文本文件，用于展示文本，图片，影音等内容。

4，互联网产业分类

行业服务类：
新闻资讯（网易）
信息搜索（百度，Google）
邮箱（163）
购票类（12306）
商务应用类：
电子商务（天猫，京东）
人才招聘（赶集网，智联招聘）
网络教育（极客学院）
第三方支付（支付宝）
其他类
由于"互联网+"概念的提出，互联网将渗入到医疗，教育，农业等传统行业

了解HTML：

1，html概念

超文本标记语言，是一种解释执行的文本类标记语言，是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

html也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记不会指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。

分析简单的HTML结构

<!DOCTYPE HTML PUBLIC 
				"-//W3C//DTD HTML 4.01 Transitional//EN" 
				"http://www.w3.org/TR/html4/loose.dtd">
		<html>
			<head>
			
			</head>
			<body>
			
			</body>
		</html>

2，html发展历程

版本年份
HTML1.0~2.0 1989~1991
概念不明确
HTML3 1995
浏览器战争年代，Netscape和Microsoft都在试图争霸世界
HTML4 1998
浏览器大战结束，万维网协会(W3C)解救我们，他们的计划是创建一个唯一的HTML标准。计划的关键是将HTML的结构和表现分解为两种语言，一种语言用于实现结构（HTML）一种语言用于表现（CSS）.
HTML4.01 1999
这段日子过得很惬意，HTML4.01在1999年闪亮登场，称为接下来十年中HTML"必备"版本
XHTML1.0 2001
正当我们感觉安逸的时候一个新兴事物引起所有人注意，即XML。它让HTML开始心烦意乱，最终两者结合，XHTML1.0诞生。
XHTML承诺，由于它的严格，再加上它提供的一些新方法，只要遵循这个标准，WEB的所有争端将就此平息。但是，大多数人都很讨厌XHTML，Web开发人员对HTML的灵活性更感兴趣，而不是XHTML的严格性。
HTML5
由于没有得到大家的祝福，这场婚姻的结局并不好，很快被HTML的新版本取代，即HTML5.它支持HTML4.01标准的大部分特性，还提供一些新特性。基于一些新特性，如支持类似博客的元素，新的视频和图形功能，以及一大堆用来构建web应用的功能，HTML5注定成为大家公认的标准。

3，基本语法

1）特性
可以使用.html与.htm作为html文件的后缀名（扩展名）
可以使用任意文本编辑器创建HTML

2）注释

<!-- 注释内容 -->

3)基本概念
标签：
标签用来标记内容。
标签使用"<",">"包围。
标签分为成对标签和单标签

元素：
一个元素通常是由一个开始标签，内容，其他元素以及一个结束标签组成的
属性：
与元素相关的特性称为属性，属性由键值对组成。
<元素名属性名=“值1” 属性名=“值2”></元素名>

大多数元素都可以使用的属性。
id 唯一标识
class 标识一类元素
style 样式
title 描述信息

规范：
元素名和属性名都不区分大小写。

4）文档结构
文档类型声明:
版本和文档类型声明，版本和文档类型声明是对应的，文档类型使用DTD来指定

1）严格的文档类型

<!DOCTYPE HTML PUBLIC 
						"-//W3C//DTD HTML 4.01//EN"
						"http://www.w3.org/TR/html4/strict.dtd">

2）宽松的文档类型(过渡的文档类型)

<!DOCTYPE HTML PUBLIC 
						"-//W3C//DTD HTML 4.01 Transitional//EN" 
						"http://www.w3.org/TR/html4/loose.dtd">

3）frameset框架文档类型

<!DOCTYPE HTML PUBLIC 
						"-//W3C//DTD HTML 4.01 Frameset//EN"
						"http://www.w3.org/TR/html4/frameset.dtd">

4）html5文档类型

<!DOCTYPE html>

html：
标识HTML文档
head
标识HTML文档的头部
可以包含该文档的标题，文档使用的脚本，样式定义，元数据等信息
body
标识HTML文档的体部
body中的内容可以显示到浏览器中。

例如：

<!DOCTYPE HTML PUBLIC 
					"-//W3C//DTD HTML 4.01 Transitional//EN" 
					"http://www.w3.org/TR/html4/loose.dtd">
				<html>
				<head>
					<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
					<title>标题</title>
				</head>
				<body>
					
				</body>
				</html>

4. 颜色与大小

1）颜色
颜色由红®、绿(G)、蓝(B)组成，每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。十六进制值的写法为#号后跟三个或六个十六进制字符。

		3位十六进制	6位16进制	rgb 				颜色
		#000		#000000		rgb(0,0,0)		黑色	black
		#F00 		#FF0000 	rgb(255,0,0)		红色	red
		#FFF 		#FFFFFF 	rgb(255,255,255)	白色	white

2）大小
px 像素

	HTML	页面结构	没穿衣服（素颜）
	CSS		页面表现	化妆
	JS		页面动作	跳舞

5. 标签介绍

1)块级(block)标签

特点：
独占一行
h1~h6 标题
特点:
1)有字体大小的设置
2)文本有加粗强调设置
3)上下文之间有较大间距
p 段落
特点：
1)独占一行
2)上下文之间具有距离
ul li (无序列表)
特点：
1) 配合使用
2) ul li都独占一行空间
3) ul 上下文之间有很大空间
4) li与列表的样式显示(默认点状)，并且由文本缩进

<ul>
	<li>列表1</li>
	<li>列表2</li>
</ul>

ol li (有序列表)
	<ol>
		<li>列表1</li>
		<li>列表2</li>
	</ol>

dl dt dd（自定义列表）
特点：
1)dl dt dd独占一行空间
2)dl上下文之间有很大欧诺关键
3)dd有文本缩进

<dl>
	<dt>列表标题</dt>
	<dd>列表内容</dd>
	<dd>列表内容</dd>
	<dd>列表内容</dd>
</dl>

2)行内（内联inline）标签
span
特点：
1)最干净的内联标签（没有任何修饰）
2)不独占一行
a 超链接
特点:
1)不独占一行
2)点击可以发生跳转（或进行对应操作），语法颜色为绿色
3)文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示

		文本修饰标签
			<u>下划线修饰</u>
			<i>斜体修饰</i>
			<b>加粗</b>
			<em>强调</em>
			<strong>加粗</strong>
			<s>删除线</s>
			<sup>上标</sup>
			<sub>下标</sub>
		img
			src="图片地址"
			绝对路径 
				http://www.baidu.com/car.jpg
				http://www.briup.com/demo/one.html

				<img src="http://www.baidu.com/car.jpg">
				
			相对路径 one.html ../a.jpg

6. 其他常用的html标签

1，超链接
从一个web资源到另外一个web资源的连接
绝对路径：
每个网页都有一个唯一的地址，称为URI 统一资源定位符，也称为该网页的绝对路径。
http://ip:port/目录/文件名
相对路径：
相对于当前文档所在的路径
…/imgs/a.jpg
./imgs/a.jpg
imgs/a.jpg
本地连接
file:///d:/html/index.html
超链接中不允许写本地连接
服务器路径
http://localhost:8888/test/index.html

1）a 超链接
连接状态：
未访问
已选择
已访问

<a href="">内容显示</a>

属性：
href 定义连接的目标URI
绝对路径：http://www.baidu.com
相对路径：b.html
邮件地址：mailto:wood@briup.com
锚点：#mao
空连接：javascript:void(0);
target 定义连接的目标窗口
_blank
_parent
_self
_top
自定义目标名

title 定义连接的提示信息
type 连接到任何类型的文件以供下载

<a href="../docs/myWord.doc" type="application/msword">报名表</a>

2）link 文档关系连接
只能出现在head标签中，定义了当前文档和另一个资源之间的联系。
通常用于链接到外部样式表

<link rel="stylesheet" href="style.css" type="text/css">

属性：
href：定义关系链接地址
rel: 定义当前文档与所连接文档之间的关系。
type: 文档类型

3）图片
1，图片类型
适合在网站上进行快速查看的图片格式
GIF 可以将背景设置为透明的，图片最多使用256中颜色，最适合显示色调不连续或具有大面积单一颜色的图片，如导航条，按钮，图标等。
JPEG 最适合摄影或连续色调图像的彩色照片，jpeg文件可以包含数百万中颜色，保证图片不失真。JPEG图片无法拥有透明的背景
PNG PNG可以包含256种以上的颜色，并可以具有透明的背景。PNG文件可保留所有原始层，矢量，灰度，颜色和效果信息，并且在任何时候所有元素都是可以编辑的。

2，链入图片文字

<img src="" alt="">

属性：
src : 图片的源地址
title : 对图片的文字说明，当用户把鼠标放在图片上稍作停留，alt属性的值就会以浮动的形式显示出来。
width : 图片的宽度
height : 图片的高度
alt : 当图片文件找不到的时候显示的文本信息
border ：图片的边框
align ：图片和文字的对齐
当align值为left时，图片靠在最左方，周围的文字显示在右侧上方
当align值为right时，图片靠在最右方，周围的文字显示在左侧上方
当align值为top时，图片靠在最上方，周围的文字显示在上方
当align值为bottom时，图片靠在最上方，周围的文字显示在下方
hspace ：图片的水平间距
vspace ：图片的垂直间距
为图片添加链接

<a href=""><img src="" alt=""></a>

2，表格
1）table
定义表格
属性：
border: 设置表格边框线条宽度
align: 表格在页面中对齐
width: 设置表格宽度
bgcolor:表格背景色
cellspacing: 单元格之间的间距
cellpadding: 单元格边沿与其内容之间的距离
frame: 表格中边框线的显示
void 不显示边框
above 上边框
below 下边框
hsides 上下边框
vsides 左右边框
lhs 左边框
rhs 右边框
box 四个边框
border 四个边框
rules: 表格中分割线的显示
none 无分割线显示
groups 仅在列分组间和行分组间显示分割线
rows 仅在行间显示分割线
cols 仅在列间显示分割线
all 在所有行列间显示分割线
2）tr
定义表格行
3）th/td
th 定义单元格
td 定义内容单元格
属性：
colspan 跨列(合并列)
rowspan 跨行(合并行)
align 单元格内容水平对齐
left,center,right, justify 两端对齐
valign 单元格内容垂直对齐
top,middle,bottom, baseline 基准
对齐的继承
1）内容自身的设置具有最高优先级
2）th,td元素的对齐设置
3）tr,thead,tfoot,tbody元素的对齐设置
4）table元素的对齐设置具有全局性
5）默认的设置

3，表单
主要用于收集来自用户的信息，并将收集的信息发送给服务器端处理程序处理。表单时客户端和服务器端传递数据的桥梁，
是实现用于与服务器互动的最主要方式。
1）form
表单控件的容器

<form action="">
					</form>

属性
action 设定处理表单数据URI的地址
method 设定数据传送到服务器的方式
get 将输入的数据追加到action地址后面
post将输入的数据保存到HTTP协议的报文中
name 设定表单的名称
enctype 设定表单数据的内容类型
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
编码方式：
1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用来实现特定的目的，例如（: / ? ; @ = & 等）。非数字和字母的字符使用%HH（这里HH表示两个十六进制数字，代表该字符的ASCII码）进行转换，
2）控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。“名称”“值"使用”="分割，两个"名称/值"之间使用&隔开。
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
数据分成多个部分，每个部分代表一个结构良好的控件，作为文档数据流的一部分，每一个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端，并且，每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头，它的值的格式是：
Content-Disposition:form-data;name=“myControl”

text/plain 空格转换为 “+” 加号，但不对特殊字符编码。

accept-charset 设置服务器端可以处理的字符编码

2）input 基本表单控件

属性：
type 控件类型
text 单行文本框
textarea 多行文本框
password 密码框
checkbox 复选框
radio 单选按钮
submit 提交按钮
reset 重置按钮
file 文件
hidden 隐藏域
image 图像按钮
button 普通按钮
name
控件名称，这个名称将与控件的当前值形参"名称/值"对一同随表单提交
value
用于设定初始化，可选。
checked
单选框，复选框默认选中属性
size
当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示字符的数目
maxlength
指定可以输入的字符的最大值。适用于控件类型为text,password。
3）button 按钮控件

<button></button>

属性
name 控件名称
value 控件初始值
type 控件类型
button 普通按钮
submit 提交按钮
reset 重置按钮

图片按钮

<button><img src="" alt=""></button>

4）select 下拉列表

<select name="" id="">
	<option value=""></option>
	<option value=""></option>
</select>

属性
name: 控件名称
size: 列表框中一次显示行的数量（默认一个）
multiple: 是否允许多选
如果select元素不包含属性size和属性multiple时，表单类型显示为菜单
如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框,如果有multiple的话,就表示可以多选（按住ctrl可以多选）

selected: 默认选中
option 下拉列表选项
属性：
value: 定义控件的初始值。提交表单时，初始值会被提交给服务器。
optgroup 分组选项

<select name="" id="">
	<optgroup label="大洋">
		<option value="">太平洋</option>
		<option value="">大西洋</option>
		<option value="">印度洋</option>
	</optgroup>
	<optgroup label="大海">
		<option value="">东海</option>
		<option value="">南海</option>
		<option value="">渤海</option>
	</optgroup>
</select>

4）textarea 多行文本框
属性
name: 控件名称
rows: 定义文本框行数
cols: 定义文本框列数
warp: 是否自动换行。
off 不自动换行
hard自动硬回车换行，换行元素一同被传送到服务器中
soft自动软回车换行，换行元素不会传到服务器中
5）label 为表单控件定义标签
一些表单控件内建有标签，当内建有标签时，一般使用value属性的值作为标签，
而另外一些表单控件没有标签，则直接使用文本作为标签来说明控件的意义。
每个label元素都要和表单控件关联到一起

<table>
	<tr>
		<td><label for="username">用户名：</label></td>
		<td><input type="text" id="username" name="username"></td>
	</tr>
	<tr>
		<td><label for="password">密码：</label></td>
		<td><input type="password" id="password" name="password"></td>
	</tr>
</table>

6）fieldset 为表单添加结构
一般与legend元素配合使用，
fieldset元素可以包含其他的表单控件，
在这些表单控件周围画一个方框，
而legend元素可以显示一个标签说明被包含的这些表单控件。

7）其他控件特性
disabled 禁用
支持该属性的控件：
button,input,optgroup,option,select,textarea
1）禁止元素获取焦点
2）禁止控件里面的值与表单一起被提交
readonly 只读
支持该属性的控件：input,textarea
1）可以接受焦点，但是不能被用户修改
2）只读元素的值可以与表单一起被提交。