HTML完整版教程

置顶 Random_ _

已于 2022-01-31 22:46:38 修改

阅读量2.2k

点赞数 5

分类专栏： HTML + CSS + JavaScript 专栏文章标签： html

于 2022-01-08 17:51:41 首次发布

本文链接：https://blog.csdn.net/m0_59086897/article/details/122379474

版权

HTML + CSS + JavaScript 专栏专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文是HTML初学者的入门教程，涵盖了HTML的基础知识，包括HTML的概念、基本结构、常用标签如标题、段落、列表、超链接、图片、表格和表单等。还介绍了编辑器的选择、SEO、标签属性、相对路径以及预排版和框架标签等内容，旨在帮助读者快速掌握HTML并创建自己的网页。

摘要由CSDN通过智能技术生成

一、零基础之学前了解

1、计算机快捷键了解

按键	作用
ctrl+c	复制
ctrl+v	粘贴
ctrl+x	剪切
ctrl+f	搜索
ctrl+s	保存（重要)
ctrl+a	全选
ctrl+z	撤销（好用）
ctrl+y	反撤销
ctrl+n	新建
F2	重命名
win+e	打开我的电脑
win+d	返回桌面
win+l	锁

2、文件名

文件名由基本名和拓展名(后缀名)组成，

例如 abc.txt 其中基本名是abc，拓展名是txt。

二、认识HTML

1、概念

HTML 即 Hyper Text Markup Language

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

该概念源于百度百科@HTML_百度百科

2、作用

编写网页。HTML主要是用来网页面排版和网页的基本搭建，其结构包括头部分，和主体部分，其中头部提供关于网页的信息，主体部分提供网页的具体内容。

3、基本结构

<html>
    <head>
    </head>
        <title>此处写页面的标题<title>
    <body>
        此处写内容
    </body>
</html>

4、尝试编写自己的第一个网页。

新建一个文本文件，输入如下内容：

保存退出后，将文件后缀名改为html，双击打开：

这里我们成功得到了自己的第一个网页。

但是我们发现，编写代码时，要编写例如<html></html>等等这些重复性内容时，很不方便。所以我们需要一些好用的编辑器来帮助我们更方便地写网页。

三、编辑器下载

编辑器有很多，例如Visual Studio Code、Dreamweaver、Sublime、Editplus...

本人主要使用的Visual Studio Code，

下载：Download Visual Studio Code - Mac, Linux, Windows

四、HTML常见的标签

1、知识补充：SEO

SEO（Search Engine Optimization）：搜索引擎优化。

搜索引擎优化是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。搜索引擎优化是任何一个网站想要在网站推广中获取成功至为关键的一步，其最终目的是做好用户体验。

标题标签里的内容在搜素引擎运作时会加权地被用户搜索，所以标题标签在SEO中较重比较重要。

2、标题标签：

特点：

1、标题标签中数字由1~6，标题从h1最大到h6最小。

2、标题都会加粗。

3、标题独占一行。

a.示例代码：

文字大小对比：

3、排版类标签：

a.知识补充：单标签、双标签

单标签：例如 <hr>换行标签单独使用的标签。

双标签：如<p></p>段落标签成对使用地标签。

b.段落标签：

<p></p>

作用：使段落独占一行（无首空格）

c.换行标签：

<br/>

作用：使标签作用处，直接换行。

d.划横线标签:

<hr/>

作用：划一条横线。

e.示例代码：

4、字体类标签：

加粗:

倾斜:

文字下划线：

其中strong、em、in能增加SE(Search Engine)权值。

五、标签的属性：

1、知识补充：像素

网页中的像素：在网页中一个汉字的像素长度一般是16px，其中px是像素单位。

2、标签属性的作用：

标签属性写在<p></p>等标签中，可以更改标签中内容的样式。

例如<hr/ width = "100">,其中的width = "100"就是一个属性，意思是将横线长度设置为100个像素。

3、常见的属性：

width = "" , height = "" , color = "" 等等

4、关与属性的声明：

由于用CSS来修饰HTML的样式更方便，所以属性这一块暂时简单的了解就行，记住也更好。因为后面CSS会深入的学习有关修改样式的知识。

六、列表标签

1、无序列表

<ul>
    <li></li>
    <li></li>
</ul>

2、有序列表

<ol>
    <li></li>
    <li></li>
</ol>

3、自定义列表

<dl>
    <dt></dt>
    <dd></dd>
</dl>

注意dt和dd为同级关系。

七、超链接标签

1、超链接基本格式：

2、作用：

设置跳转连接，注意当跳转连接无法打开时，浏览器会弹出下载窗口。

3、超链接部分可添加的属性：

target = "_blank" 点击链接会打开一个新页面，不设置则覆盖当前页面。

title = "鼠标悬停显示的内容"

4、锚点链接的理解：

<a href = "#底部">点击回到底部</a>

<a id = "底部">此处设置为底部</a>

总之 href = "#..."标记的文字，相当于到达 id = "..."标记处的按钮。

八、预排版标签

1、基本格式：

2、作用

预排版链接可以保留标记内容的格式

九、相对路径的理解

1、相对路径：

以同文件夹下的同级路径为对象，向下级用/+文件名，向上级用..+/，

此处注意，上级的上级用../../

2、绝对路径：

从计算机根目录一步步找文件。

十、图片标签

1、基本格式：

2、作用：

显示图片

3、可添加的属性：

这里列举两个，设置长和宽就不列举了。

alt = "文字" , 图片无法成功加载时显示alt中的文字

title = "文字" , 鼠标悬停显示title中的文字，和链接也一样。

十一、列表标签

无序列表：

有序列表：

自定义列表：

十二、表格标签

<table >
        <caption>表头</caption>
        <tr>
            <th>第一行第一列</th> /*th对比td会加粗
            <th>第一行第二列</th>
            <th>第一行第三列</th>            
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第三行第三列</td>
        <tr>
</table>

十三、表单标签

<form>
	1、文本框
	<input  name = "kahao" value = "请输入你的银行卡号密码" >
	2、口令框（密码框）
	<input  name="password" type = "password" >
	3、单选框，同一组单选框都需要加name属性且值必须相同。
	<input type = "radio" name = "sex" checked = "checked" value="1">男
	<input type = "radio" name = "sex" value = "2">女
	4、复选框
	<input type = "checkbox" checked = "checked" name = "hobby" value = "e">吃
	<input type = "checkbox" name = "hobby" value = "d">喝
	<input type = "checkbox" name = "hobby" value = "p">玩
	5、文件上传
	<input type = "file">
	6、提交按钮
	<input type = "submit">
	7、普通按钮
	<input type = "button" value = "随便点击">
	8、重置按钮
	<input type = "reset">
	9、双标签按钮
	<button>提交按钮2</button>
	10、下拉框
	<select>
		<option>选项一</option>
		<option selected="selected">选项二</option>
		<option>选项三</option>
	</select>
	11、分组下拉框
	<select>
		<optgroup label = "省份">
		<option>湖北</option>
		<option >湖南</option>
		<option>云南</option>
		</optgroup>
		<optgroup label = "地区">
		<option>南方</option>
		<option >东南</option>
		<option>西南</option>
		</optgroup> 
		<optgroup label = "薪资">
		<option>100</option>
		<option >200</option>
		<option>300</option>
		<optgroup>
	</select>
	12、文本域
	<textarea rows = "5" cols = "100">你好世界</textarea>
</form>

十四、meta标签

meta标签实现自动跳转到其他页面

<meta http-equiv="refresh" content="n;url=http://www.baidu.com/">

其中n代表n秒后跳转，url设置跳转目标的链接。

meta标签主要与SEO有关

<head>
<meta charset="utf-8"> <!--告诉浏览器以utf-8格式解析-->
<meta name = "keywords" content = "关键字">
<meta name = "description" content = "描述"> 
<title>meta标签</title>
</head>

十五、框架标签

1、框架标签的位置：

介于</head>和<body>之间

2、框架集：<frameset>

作用：rows属性设置框架分几行显示，cols属性用来设置框架分几列显示。

其中rows和cols尽量不要同时设置（因为不能及时辨别每个位置的页面）

3、框架：<frame>

作用：通过src属性来引入要显示的页面。

4、框架丢失时设置提示：

<noframes><body>框架丢失，请重试！</body></noframes>

5、框架的嵌套

<frameset rows = "100,*">
	<frame src="#" name="top">
	<frameset cols="200,*">
		<frame src="#" name = "left">
		<frame src="#" name = "right">
	</frameset>
</frameset>

6、内嵌框架：<iframe>

位置：可以写在body中

如下：在div中内嵌一个框架

<div style="width: 200px;height: 200px;border: 10px dotted #F00">
    <iframe src="#"></iframe> 
</div>

十六、HTML新增属性

1、新增语义化标签：
   header头部
   footer底部
   nav导航
   article文章
   aside菜单栏
   section表表示区域的

2、新增表单元素的新增属性：
   placeholder="",不需要手动删去的文本框提示内容。
   required="required",对于输入后点提交按钮，必填属性。
   autofocus = "outofocus",可输入框中，自动获取光标。
   type = "email",限制input提交，必须满足邮箱格式才可以提交。
   type = "date/week/mouth/time",在input中选择各种时间。
   type = "range"，input，进度条，可调整滑块。
   type = "color",input中选颜色。
   type = "number",在input中限制数字。