【教程】HTML快速学习

最新推荐文章于 2023-09-06 08:30:00 发布

风舞雪凌月

最新推荐文章于 2023-09-06 08:30:00 发布

阅读量864

点赞数 6

分类专栏：教程文章标签： html css javascript java html5

本文链接：https://blog.csdn.net/l1447320229/article/details/115518310

版权

教程专栏收录该内容

12 篇文章 3 订阅

订阅专栏

备注

2021/4/8 星期四
由于计算机专业大家都比较重视后端，导致我现在找不到理想的前端人员，我只能自己来学习一下前端技术了

一、HTML概述

HTML叫做超文本标记语言(Hypertext Markup Language)，最初由W3C组织制定，现在随着互联网的发展已经到了html5.0版本。但是他实际上并不是一种编程语言。

二、标签(tag)

一个html元素(element)一般是由内容(content)标签(tag)构成的，标签分为两类，一类标签是成对出现的，占标签中的大多数，成对出现的标签由开始标签(opening tag)和结束标签(closing tag)组成<标签名> 内容 </标签名>；还有一些标签是单独存在的，并且不包含内容，<标签名>。习惯上我们将成对出现的标签称为双标签，将单独存在的标签称为单标签。

三、HTML格式

一般的html都使用以下格式，称他为html骨架

<!DOCTYPE html>
<html>
	<head>
		<title>标题</title>
	</head>
	
	<body>
		内容
	</body>
</html>

<!DOCTYPE html>是格式说明，用来解释文档的类型，必须放在html文件的第一行。(这并不是一个html标签)
<html></html>是html文档的根标签，用来标识html文档开始与结束，除了格式说明外，html的所有内容都要包裹在html标签标签内
<head></haed>是文档的头部，用来盛放所有头部元素，如title、meta
<body></boody>是文档的主体，用来盛放实际要展示给用户观看的内容
<title></title>是html的标题，浏览器会展示在标题栏中

标签与标签之间存在两种关系，包含关系和并列关系，如：head和body是并列关系，而他们对于html标签是包含关系，在html中不允许出现交错的标签如：<标签1><标签2></标签1></标签2>

四、注释、根标签、头部标签

属性: 在开始标签中我们可以为标签指定属性，格式如下：

<标签 属性1=值 属性2=值 ...></标签>

1.注释

在html中的注释使用的是

<!--注释内容-->

2.根标签

根标签的常用属性只有lang用于说明网页所使用的语言，zh-CN是中文，en是英文

<html lang=zh-CN></html>

3.常见头部标签

网页标题标签(title)：<title>网页标题</titile>,title标签是整个网页的标题，标签的内容会显示在浏览器的标签栏中。(如果没写title标签，浏览器会自动将html文件的文件名显示在标签栏)
辅助标签(meta)： meta一词是一个新兴词汇，中文直译为"元"，这里我根据他的作用意译为辅助，因为meta中的内容不会直接显示给用户，而是给机器识别的。

五、常见主体标签

1.文本标题标签(heading)

html的标签中并没有一个标签名为heading，而是有h1-h6六个标签，他们会独占一行并放大加粗字体作为网页显示内容的标题来使用，h1-h6字体从大到小对应一到六级标题。
heading

2.段落标签§

在html中，我们所输入的所有空格和换行符都会被浏览器忽略，所以我们一般将文本的每个段落都用p标签包裹，被p标签包裹的文本会新起一行，并且与其他文本间保持一定的间距。

3.功能标签

换行标签(<br>)： 在html文本中，使用回车键输入的换行符并不能起到换行的作用，而是需要使用<br>换行标签进行换行。严格来说换行标签应该写做<br/>，但实际使用中因为html的高兼容度大家习惯的写成<br>也是可以的。
水平线标签(<hr>)： 当我们想要生成一条用来分隔的长线时会用到<hr>水平线标签，水平线标签可以根据屏幕的宽度自动生成一条水平线。同样，水平线标签也是一个自闭合标签，应该写做<hr/>，实际中写作<hr>也是可以的。
粗体、斜体： 在html中想要实现粗体斜体同样需要使用标签实现，且html为我们提供了两种标签实现相同的功能，粗体标签<strong></strong>，斜体标签<em></em>
特殊符号： html中一部分符号被用作标记，于是在文本内容中需要使用到这些符号的时候会非常麻烦，于是html为我们提供了一套特殊符号标记。

名称	符号
空格
大于号	>
小于号	<
版权符号	&copy

4.超链接标签(a)

基本链接：
html文档和其他文档最大的不同就在于html可依靠超链接标签进行跳转，常见的超链接标签包含两类文本超链接和图片超链接,当我们在<a></a>中写入文字时，称为文本超链接，放入图片标签时称为图片超链接。
超链接标签常见属性如下：

名称	作用
href	链接的目标地址
target	窗口的打开方式

锚链接：
当我们想通过链接回到网页的某一部分的时候可以使用锚链接的方式实现，首先在我们想要跳转到的地方加一个标记，再使用一个超链接到标记处即可完成。
使用<a name=“标记名”> </a>在html文档的某个位置做标记，使用<a href=“页面#标记名”></a>即可跳转到指定位置。
功能链接：
点击链接发送邮件
<a href=“mailto:邮箱地址”></a>

5.图片标签(img)

html为我们提供了显示图片的功能，需要使用<img 属性=值属性=值… />的方式即可将图片引入html文本中，html支持各种常见的图片格式，如jpg、png、gif、bmp等。图片标签中存在两个必填属性src 和alt，src是图片的路径，可以使用相对路径也可以使用绝对路径，alt是当图片找不到是显示的提示信息。
图片标签的常见属性如下：

名称	作用
src	图片的路径，相对路径和绝对路径都可以
alt	图片路径错误的提示信息
title	图片标题(鼠标悬停时显示的文字)
width	图片宽度(按比例缩放)
height	图片高度(按比例缩放)

6.媒体标签(video/audio)

html5提供了对媒体的支持，使用<video src=“路径”></video>加载视频，使用<audio src=“路径”></audio>加载音频，但是直接使用这个代码只能将媒体元素加载到html页面中，不能进行播放或控制，需要使用controls属性增加控制栏。

<audio src="路径" controls></aduio>
<video src="路径" controls></video>

7.列表(list)

列表分为无序列表，有序列表和自定义列表
无序列表：
代码格式如下：

<ul>
	<li>我是一个列表项</li>
	<li>我是一个列表项</li>
	<li>我是一个列表项</li>
</ul>

结果如下：

有序列表：
代码格式如下：

<ol>
	<li>我是一个列表项</li>
	<li>我是一个列表项</li>
	<li>我是一个列表项</li>
</ol>

结果如下：

自定义列表：
代码格式如下：

<dl>
	<dt>我是列表标题</dt>
		<dd>我是一个列表项</dd>
		<dd>我是一个列表项</dd>
		<dd>我是一个列表项</dd>
	<dt>我是列表标题</dt>
		<dd>我是一个列表项</dd>
		<dd>我是一个列表项</dd>
		<dd>我是一个列表项</dd>
</dl>

结果如下：

8.表格(table)

表格是非常好用的一种格式，html也为我们提供了生成表格的方式，列表由列表标签包裹行标签<tr></tr>，行标签包裹数据标签<td></td>构成
代码格式如下：

<table>
	<tr>
		<td>1行1列</td>
		<td>1行2列</td>
		<td>1行3列</td>
	</tr>
	<tr>
		<td>2行1列</td>
		<td>2行2列</td>
		<td>2行3列</td>
	</tr>
</table>

结果如下：
table
为了让表格更加清晰，我们可以使用border属性为表格加边框

<table border="1px"></table>

结果如下：
border
当我们想要进行单元合并的时候可以让某个表格数据占多行或多列来实现
占多列：

<td colspan"列数"></td>

占多行：

<td rowspan"行数"></td>

例如：

<table border="1px">
	<tr>
		<td colspan="2">我占两列</td>
		<td>1行3列</td>
	</tr>
		<td rowspan="2">我占两行</td>
		<td>2行2列</td>
		<td>2行3列</td>
	<tr>
		<td>3行2列</td>
		<td>3行3列</td>
	</tr>
</table>

span
注意： 当我们想让表格完美显示的时候要自己提前计算好合并后的表格，行数和列数将不需要的td删除，否则就会出现畸形表格
delet

六、其他说明

1.行内元素和块级元素

块级元素：
无论有多少内容都独占一行，宽度默认为浏览器的宽度，例如：段落、列表、表单等
行内元素：
可以被摆在一行内，靠内容支持宽度的，例如：超链接、加粗、斜体等

2.网页结构

一般网页存在以下结构

名称	描述
header	页面中的头部区域内容
footer	页面中的底栏信息内容
section	页面中的独立区域
artcle	页面中的独立文章
aside	侧边栏
nav	导航栏

七、内联框架(iframe)

有的时候我们希望我能在自己的网页中嵌套别人的网页，html使用内联标签为我们提供了这样的功能<iframe src=“被嵌套的网页地址”></iframe>
另外，我们可以使用超链接标签配合内联框架可以实现网页的"动态加载"。
首先我们要创建一个带有name属性的内联框架，然后可以通过超链接标签的target属性绑定内联框架的name属性做到，点击超链接使内联框架跳转到超链接标签的地址。例：

<ifream src="" name="fream"></ifream>
<a href="https://www.baidu.com/" target="fream">加载</a>

八、表单(form)

在html中最重要的信息交互基本都是通过表单完成的，例如注册、登录、搜索等功能，一般表单的提交方式主要是get和post，表单标签的基本格式是<form method="方式" action="页面"></form>。在表单标签中我们还需要一些输入框，输入框的种类很多通过type属性确实其种类,同时为了能够做到正确的数据传递，我们还需要为每个输入框增加一个name属性<input type="类型" name="属性名">，。

名称	作用
button	生成一个可以点击的按钮
checkbox	生成一个复选框
file	用于上传文件
hidden	不能被看到输出框(用来设置默认提交内容)
image	用于上传图片
password	生成一个密码框
radio	生成一个单选框
reset	生成可以清空已填内容的按钮
submit	生成表单提交按钮
text	生成一个文本框

例如我们想要实现一个简单的登录框：

<form method="post" action="">
	<p>账号：<input type="text" name="id"></p>
	<p>密码：<input type="password " name="passwd"></p>
	<input type="submit">
</form>