前端——HTML（全）

最新推荐文章于 2023-06-14 09:48:05 发布

CHQ_2157

最新推荐文章于 2023-06-14 09:48:05 发布

阅读量320

点赞数 1

文章标签： html web

本文链接：https://blog.csdn.net/CHQ_2157/article/details/116028700

版权

HTML是什么？

   HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
   超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

由来
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。
万维网（world wide web，简称www）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
定义
超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

HTML版本历史
HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2：1997年1月14日，W3C推荐标准。
HTML 4.0：1997年12月18日，W3C推荐标准。
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

超文本标记语言HTML
英文：Hyper Text Markup Language
区分：
HTML ----超文本标记语言—展示数据
XML ---- 可扩展标记语言 ----存储数据配置文件 json
内容：
HTML ----固定标签 <h1>``< body>
XML ---- 没有固定标签任何标签都可以。标签—Tag

关于HTML+CSS 部分的知识内容大家可以到W3C的网站去学习

HTML文档的结构

<!DPCTYPE html> //文档类型-------MIME类型
<html lang='en'> //language='en'、zh-cn 属性节点
<head>
     <meta charset="UTF-8">//源 编码字符集------utf-8
     <title>Document</title>//标题
<head>
<body>
      正文
</body>
</html>

MIME类型：
所有的文件在网络上用于显示还是用于下载都存在自己响应的类型，例如 gif jpeg 存在自己的MIME类型用于给文档做一些自己的相关标识

Html的格式由两个种类的标签构成
双标签 <html> </html>
单标签 <meta charset=”utf-8”> <br/>换行
Tag -----标签
Meta -----源 metadata 源数据

`<select>`标签

中文名称：选择框
常用属性：disabled、multiple

`<textarea>`标签

中文名称：文本域
常用属性：
Rows row 行
Cols column 列

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请选择您的城市:
		<select name="city">
		    <option>--请选择城市--</option>
			<option>北京</option>
			<option>上海</option>
			<option>成都</option>
			<option>重庆</option>
			<option>广州</option>
		</select>

</body>
</html>

结果为：在这里插入图片描述
若需实现多选可在<select>标签中添加属性multiple，它的值就为multiple，注意在多选时需要按住Ctrl键。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请选择您的城市:
		<select name="city" multiple="multiple">
		    <option>--请选择城市--</option>
			<option>北京</option>
			<option>上海</option>
			<option>成都</option>
			<option>重庆</option>
			<option>广州</option>
		</select>

</body>
</html>

结果为：
在这里插入图片描述

`<a>`标签

中文别名：超链接
作用：实现页面跳转
HTML页面跳转：

a标签进行页面跳转属于get请求方式
form表单get请求
form表单post请求

<a> 标签的使用：

使用a标签进行外部跳转 ----外链接
使用a标签跳转到网页的内部 ----锚点

#<img>标签
作用：用于在页面中引入图片
必须有的两个属性：
src-------source 源代码
alt
其它属性值：
border ----边框单位像素值
width 宽度 height 高度像素值 ----百分比
usemap 用于做位图 map ----映射

map 位图
area 规定位图区域

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="C:\Users\lenovo\Desktop\web\web大作业\img\主页6.png" alt="男孩" usemap="#boy" border="1px">
	<map id="boy" name="boy">
		<area shape="circle" coords="200,200,50" href="https://www.baidu.com/"></area>
	</map>
</body>
</html>

结果为：在加上usemap属性以及<area>标签后可以实现跳转到百度页面，如图：在这里插入图片描述

表格

<table>标签表示的是表格
<tr> 表行
<th> 表头默认加粗
<td> 表元
另外还有<thead>、<tbody>标签用处不大

表格布局

实例：

4.	<!DOCTYPE html>
5.	<html lang="en">
6.	<head>
7.		<meta charset="UTF-8">
8.		<title>Document</title>
9.	</head>
10.	<body>
11.		<h1>热门电影板块</h1>
12.		<hr>
13.		<table width="800px">
14.		   <tr>
15.		   	 <td>最近热门电影</td>
16.		   	 <td>热门</td>
17.		   	 <td>最新</td>
18.		   	 <td>豆瓣评分</td>
19.		   	 <td>冷门佳片</td>
20.		   	 <td>华语</td>
21.		   	 <td>欧美</td>
22.		   	 <td>日本</td>
23.		   	 <td style="padding-right:60px;padding-left:120px">
24.		   	 	<a href="two.html">更多&gt;&gt;</a>
25.		   	 </td>
26.	
27.		   </tr>
28.		</table>
29.		<hr>
30.		<table width="800px">
31.		  <tr>
32.		  	<td><img src="image/2.png" width="200px"></td>
33.		  	<td><img src="image/3.png" width="200px"></td>
34.		  	<td><img src="image/2.png" width="200px"></td>
35.		  	<td><img src="image/3.png" width="200px"></td>
36.		  </tr>
37.		  <tr align="center">
38.		  	<td>致命ID</td>
39.		  	<td>万能钥匙</td>
40.		  	<td>禁闭岛</td>
41.		  	<td>恐怖游轮</td>
42.		  </tr>
43.			
44.	
45.		</table>
46.		<table width="800px">
47.		  <tr>
48.		  	<td><img src="image/2.png" width="200px"></td>
49.		  	<td><img src="image/3.png" width="200px"></td>
50.		  	<td><img src="image/2.png" width="200px"></td>
51.		  	<td><img src="image/3.png" width="200px"></td>
52.		  </tr>
53.		  <tr align="center">
54.		  	<td>致命ID</td>
55.		  	<td>万能钥匙</td>
56.		  	<td>禁闭岛</td>
57.		  	<td>恐怖游轮</td>
58.		  </tr>
59.			
60.	
61.		</table>
62.	</body>
63.	</html>

结果：在这里插入图片描述

列表

无序列表

<ul> 无序列表的标签
<li> 列表的选项
应用场景：导航nav、侧栏sidebar、商品栏、贴吧、知道等

<ul>
	 <li>疾风之刃</li>
	 <li>武器大师</li>
	 <li>德玛西亚</li>
	 <li>艾欧尼亚</li>
	</ul>

结果：在这里插入图片描述

有序列表

<ol> 有序列表标签
<li> 列表的选项

<ol>
	 <li>疾风之刃</li>
	 <li>武器大师</li>
	 <li>德玛西亚</li>
	 <li>艾欧尼亚</li>
	</ol>

结果：在这里插入图片描述
其中还有一些属性值：
reversed------降序
start-----------起始计数
type-----------类型属性值可为：数字、字母A-Z、罗马字符Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ

定义列表

<dl>表示定义列表
<dt>定义的项目
<dd>定义项目的描述

多窗口框架 frameset 4.0版本 H5版本

<frameset>多窗口的框架标签里面的每一个窗口都是一个frame
注意：<frameset>标签不能和<body>标签连用
案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<frameset rows="10%,80%,10%">
  <frame src="A.html" name="header" />
  <frameset cols="10%,90%">
  	<frame  name="menu" />
  	<frame name="center" />
  </frameset>
  <frame  name="footer" />
</frameset>

</html>

实现页面间跳转
A页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A</title>
</head>
<body>
	<a href="B.html" target="menu">A</a>
</body>
</html>

B页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>B</title>
</head>
<body>
	<a href="C.html" target="center">B</a>
</body>
</html>

C页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>C</title>
</head>
<body>
	<a href="D.html" target="footer">C</a>
</body>
</html>

D页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D</title>
</head>	
<body>
	<a href="A.html" target="header">D</a>
</body>
</html>

常用标签特殊意义的标签

<address>用于描述地址默认斜体
<article>用于描述文章的标题
<header><footer> <nav>为了让程序员能够通过代码看清楚代码的含义
类似于这样的标签他们的作用和<div>是相似的提高代码的阅读能力—望文生义
<label>标签
<label for="one">用户名：</label> <input type="text" id="one" />
内联元素：<span> <a>
块状元素: <div> <p>
<span>内联元素
通常用于修饰文本默认不具有任何样式可以通过css来添加样式

XHTML

XHTML 它是html4.01版本后出现的一个更严谨语法更纯粹的一个版本从语法上对html进行更严谨的规范。
html 也可以存在任意的单词的标签
默认把他们当成文本标签

DTD的命名规范规范了标签的内容

xml 标签可以用任意单词来进行定义的

HTML5

常用标签：
<video>视频
<audio>音频

实例：
<video src="./video/final.mp4" controls="controls"></video>

<audio src="./music/Pianoboy高至豪 - The truth that you leave.mp3" controls="controls"></audio>

CHQ_2157

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端——HTML（全）

HTML是什么？ HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的
复制链接

扫一扫