【HTML】入门教程详解

最新推荐文章于 2024-04-09 07:12:38 发布

一毛钱的星星

最新推荐文章于 2024-04-09 07:12:38 发布

阅读量616

点赞数

分类专栏： HTML+CSS 文章标签： html 前端 css

本文链接：https://blog.csdn.net/colourful_mole/article/details/132534540

版权

HTML+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

第一章概述
第二章 HTML基本语法
第三章 HTML常用标签
第四章 HTML功能标签
第五章 HTML字符实体
第六章 HTML 全局属性
第七章 meta 元信息

第一章概述

1. 什么是网页

网页是根据因特网上一定的规则，使用html等制作的用于展示特定内容的网页集合。

网页是构成网站的基本元素。

网页是图片、链接、文字、声音、视频等源深路组成，其实就是一个html文件。

2. 什么是HTML

HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言

HTML不是一种编程语言，而是一种标记语言

标记语言是一套标记标签

超文本的含义：

它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
它可以从一个文件跳转到另一个文件，于世界各地主机的文件连接（超级链接文本）

3. 网页的形成

网页由网页元素组成，这些元素通过html标签描述出来，然后通过浏览器解析并显示出来

4. Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

4.1 为什么需要Web标准

浏览器不同，它们显示的页面或者排版有些许差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

让Web标准发展前景更为广阔
内容能被更广泛的设备访问。
更容易被搜索引擎了搜索。
降低网站流量费用。
易于维护。
提高页面浏览速度。

4.2 Web标准的构成

标准	说明
结构	结构对网页元素进行整理和分类，现阶段主要是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS
行为	行为是指网页模型的定义以及交互的编写，现阶段主要是JS

Web标准提出的最佳体验方案：结构、表现、行为相分离。

第二章 HTML基本语法

1. HTML 文件

扩展名是.html的文件称为html文件或网页文件
html文件使用代码编辑器进行编辑，使用浏览器查看效果

2. 文档声明

<!doctype html>

**作用：**让浏览器采用标准版模式渲染页面！

3. HTML 标签

网页由html标签组成，标签中可以嵌套标签，通过标签实现页面结构
html标签具有语义，语义决定什么时候使用哪个标签
标签分为双标签和单标签
双标签由开始标签和结束标签，双标签内部可以嵌套其他标签或者文本内容
单标签又称为自闭合标签，可以省略表示闭合的斜杠
html标签不区分大小写

4. 标签的属性

属性是属于html标签的，不同的标签具有不同的属性
属性有属性名和属性值组成，属性值可以包裹在单引号或双引号中，也可以不写引号
如果某个标签重复设置了多个相同的属性，以最前面的为准
属性不区分大小写

5. 如何掌握一个 HTML 标签

该标签的语义和功能
该标签有什么属性以及属性的值如何设置
该标签是单标签还是双标签

6. HTML 注释

<!-- 这是注释的内容 -->
<!--
    这是注释的内容
	这是注释的内容
-->

注释的作用：

对代码进行解释说明，方便程序员阅读代码
将暂时不需要执行的代码注释掉，用于代码调试

7. 基本页面模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基本页面模板</title>
    </head>
    <body>
        
    </body>
</html>

第三章 HTML常用标签

1. 主体结构标签

标签名	语义和功能	单标签还是双标签
html	页面根标签	双
head	页面头部	双
body	页面主体	双

2. HEAD 中的标签

标签名	语义和功能	属性	单标签还是双标签
meta	设置页面元信息	charset：设置字符集编码，值：`utf-8`、`gbk`等	单
title	设置标题栏标题		双

3. 格式排版标签

标签名	语义和功能	单标签还是双标签
h1~h6	标题	双
p	段落	双
hr	分割线	单
br	换行	单
pre	格式原样显示	双
div	没有语义，用来页面布局	双

4. 文本标签

标签名	语义和功能	单标签还是双标签
em	强调，默认表现为斜体字	双标签
strong	强调，默认表现为粗体字	双标签
del	表示被删除的内容，默认表现删除线	双标签
ins	表示新添加的内容，默认表现下划线	双标签
sub	下标字	双标签
sup	上标字	双标签
span	没有语义	双标签

第四章 HTML功能标签

1. 图片

1.1 img 标签

标签名	语义和功能	属性	单标签还是双标签
img	页面中显示图片	src：设置图片的地址，必须属性 alt：设置图片的代替文字 title：提示文本。鼠标放到图像上显示文字 width：设置图片宽度 height：设置图片高度	单标签

总结：

alt 属性设置图片的代替文字，当图片无法正常加载，会显示代替文字。
设置图片宽高，如果只设置宽或者只设置高，另一个根据比例自动计算。

1.2 常见的图片格式

jpg、jpeg
png
gif
webp
…

1.3 相对路径和绝对路径

当前文件： 代码所在文件。

目标文件： 当前文件中要使用的文件。

1.3.1 绝对路径

绝对路径指的是目标文件的绝对地址，与当前文件所在的位置无关
前端中使用的绝对路径是目标文件在网络上的绝对地址，也称为 URL（统一资源定位符）
目标文件不论是否与当前文件在同一台电脑上，都可以通过绝对路径进行访问
注意：电脑上的目标文件想要通过绝对路径访问，需要部署web服务器

前端中的绝对路径
https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
https://yt-adp.ws.126.net/myzhang/1200125_axob_20190321.jpg

这样的绝对路径前端中无法使用
D:\Library\xxx\HTML\123.jpg

1.3.2 相对路径

相对路径指目标文件相对于当前文件，处在什么位置（从当前文件出发找到目标文件）
目标文件在当前文件的同级或者下级
路径以 ./ 开头
可以省略 ./
找到目标文件需要先回到上级或更上级
路径以 …/ 开头
…/ 表示上一级目录， …/…/ 表示上上级目录 …/…/…/ 表示上上上级 …

1.3.3 HTML 中使用路径的场景

1.使用img标签引入图片标签
2.使用video标签引入视频文件
3.使用audio标签引入音频文件
4.使用iframe标签引入多种类型的文件
5.使用script标签引入js文件
6.使用a标签设置超链接关联目标文件
7.使用link文件关联css文件
...

2. 超链接和锚点

2.1 a 标签

标签名	语义和功能	属性	单标签还是双标签
a	设置超链接	href：设置目标文件地址 target：设置目标文件在哪个窗口打开，`_self`是默认值，表示当前窗口打开；`_blank`表示新窗口打开	双

总结：

a标签只有设置了href属性才能成为超链接
target属性的默认值是 _self，表示目标文件在当前窗口打开，如果设置为 _blank，表示目标文件在新窗口打开

2.2 超链接

目标文件是网页

<a href="https://baijiahao.baidu.com/s?id=1731785537521012988&wfr=spider&for=pc">一篇新闻</a>
<a href="../04-相对路径练习/pages/index.html">相对路径</a>

目标文件是网页以外的其他类型文件

<a href="./resources/疯狂动物城.jpeg">图片</a><br>
<a href="./resources/简历.pdf">PDF</a><br>
<a href="./resources/打印材料.zip">压缩文件</a>

如果超链接的目标文件浏览器可以打开，点击超链接直接打开，如网页文件、图片、视频等
如果超链接的目标文件浏览器无法打开，点击超链接直接下载

超链接的其他特殊功能（打开应用）

<a href="mailto:1659436399@qq.com">发邮件</a>
<a href="tel:180xxxx6601">打电话</a>
<a href="sms:180xxxx6601">发短信</a>

href 的值是空的点击刷新

<a href="">刷新</a>

2.3 锚点

2.3.1 如何设置锚点

任何一个标签都可以设置id属性
设置了id属性，该标签起始位置就是一个锚点，id属性的值就是锚点的名字

2.3.2 如何跳转到锚点

<!-- 跳转到本页面中的某个锚点 -->
<a href="#锚点名"></a>

<!-- 跳转到页面顶部 -->
<a href="#">顶部</a>

<!-- 跳转到其他页面的指定锚点 -->
<a href="页面地址#锚点"></a>

3. 列表

3.1 无序列表

<ul>
     <li>HTML 超文本标记语言</li>
     <li>CSS 层叠样式表</li>
     <li>JavaScript 浏览器脚本语言</li>
</ul>

一组相关的内容排列在一起适合使用无序列表、如新闻列表、文章列表、导航条等等

3.2 有序列表

 <ol>
     <li>html</li>
     <li>css</li>
     <li>JS</li>
     <li>Vue</li>
</ol>

一组相关的内容排列在一起且有顺序，合适使用有序表现，如各种排行榜

3.3 定义列表（了解）

<!-- 一个 dt 对应一个 dd -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>浏览器脚本语言</dd>
</dl>


<!-- 一个 dt 对应多个 dd -->
<dl>
    <dt>如何掌握一个HTML标签</dt>
    <dd>掌握该标签的语义</dd>
    <dd>掌握该标签的属性以及属性值如何设置</dd>
    <dd>掌握该标签是单标签还是双标签</dd>
</dl>

3.4 列表标签总结

标签名	功能和语义	单标签还是双标签
li	列表项	双标签
ul	无序列表包裹标签	双标签
ol	有序列表包裹标签	双标签
dl	定义列表包裹标签	双标签
dt	定义列表项的标题	双标签
dd	定义列表项的描述	双标签

li 标签里面可以包裹任何内容
ul、ol 中只能直接包裹 li（li 必须写在 ul 或 ol 的里面）

4. 表格标签

4.1 表格的结构

<!--表格包裹标签-->
<table>
	<!--表格标题-->
    <caption></caption>
    
    <!--表格头-->
    <thead>
        <tr>
            <th></th>
            ....
        </tr>
        <tr>
            <td></td>
            ....
        </tr>
    </thead>
    
    <!--表格体-->
    <tbody>
        <tr>
            <th></th>
            ....
        </tr>
        <tr>
            <td></td>
            ....
        </tr>
    </tbody>
    
    <!--表格脚-->
    <tfoot>
    </tfoot>
</table>

表格中所有的标签必须包裹在 table 的里面 table > caption、thead、tbody、tfoot > tr > td、th
如果 table 中直接包裹 tr，浏览器会自动添加 tbody
td 和 th 作为单元格，可以包裹任意内容

4.2 表格整体样式设置

给 table 标签设置如下属性：

属性	含义
width	设置表格的宽度
height	设置表格的高度
border	设置边框宽度
cellspacing	设置单元格之间的距离
cellpadding	设置单元格边框与内容之间的距离

4.3 单元格样式设置

4.3.1 设置单元格内容对齐方式

通过 align 属性可以设置单元格内容水平对齐方式,值： left、right、center
给 tbody、thead、tfoot 设置 align 属性，所包含的 td 或 th 都会生效
给 tr 设置 align 属性，该 tr 中所包含的 td 或 th 都会生效
给 td 或 th 直接设置 align 属性
通过 valign 设置可以设置单元格内容垂直对齐方式，值： top、bottom、middle
给 tbody、thead、tfoot 设置 valign 属性，所包含的 td 或 th 都会生效
给 tr 设置 valign 属性，该 tr 中所包含的 td 或 th 都会生效
给 td 或 th 直接设置 valign 属性

4.3.2 设置单元格宽高

给 td 或 th 设置如下属性：

width: 设置单元格所在列的宽度
height: 设置单元格所在行的高度

给 tr 设置 height 属性，设置的是行的高度

4.4 单元格跨行和跨列（重要）

给 td 或者 th 设置如下属性：

rowspan 设置该单元格跨多少行
colspan 设置该单元格跨多少列

4.5 表格标签总结

标签名	功能和语义	属性	单标签还是双标签
table	表格包裹标签	width height border cellspacing cellpadding	双标签
caption	表格标题		双标签
thead	表格头	align valign	双标签
tbody	表格体	align valign	双标签
tfoot	表格脚	align valign	双标签
tr	行	align valign height	双标签
td	单元格	align valign width height colspan rowspan	双标签
th	表头单元格	align valign width height colspan rowspan	双标签

5. 表单标签

5.1 表单总体设置

<form action="https://www.baidu.com/s">
    <input type="text" name="wd">
    <button>搜索</button>
</form>

input 标签为单标签
type 属性设置不同属性值来指定不同控件类型

5.2 表单控件

① 文本输入框

<!-- input 标签设置 type 属性值为 text，表示文本输入框 -->
<input type="text"> 

<!-- input 标签 type 属性的默认值就是 text -->
<input> 

<!-- 设置最大输入长度 -->
<input type="text" maxlength="10">

② 密码输入框

<!-- input 标签设置 type 属性值为 pasword，表示密码输入框 -->
<input type="password"> 

<!-- 设置最大输入长度 -->
<input type="password" maxlength="6">

③ 单选框

<input type="radio" name="gender"> 男   <br>
<input type="radio" name="gender"> 女   <br>
<input type="radio" name="gender" checked> 其他

多个单选框元素必须设置相同的 name 值，才有单选的效果。
设置 checked 属性可以让该单选框被默认选中，checked 属性不需要值。

④ 复选框

<input type="checkbox" checked> 敲代码 <br>
<input type="checkbox"> 读书 <br>
<input type="checkbox" checked> 看电视 <br>
<input type="checkbox"> 运动健身

设置 checked 属性可以让该复选框被默认选中，checked 属性不需要值。

⑤ 提交按钮

<input type="submit">
<input type="submit" value="登录">
<button type="submit">注册</button>
<button>注册</button>

input 标签实现提交按钮，type 属性设置为 submit, 通过 value 属性设置按钮上的文字
button 标签实现提交按钮，type 属性默认值就是 submit

⑥ 重置按钮

<input type="reset">
<input type="reset" value="RESET">
<button type="reset">重置</button>

input 标签实现重置按钮，type 属性设置为 reset, 通过 value 属性设置按钮上的文字
button 标签实现重置按钮，type 属性设置为 reset

⑦ 普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

⑧ 文本域

<textarea rows="6" cols="30"></textarea>

rows 设置文本域显示的行数，影响文本域的高度
cols 设置文本域显示的列数，影响文本域的宽度

⑨ 下拉选项

 <select>
     <option>上海</option>
     <option>北京</option>
     <option>天津</option>
     <option selected>新疆维吾尔自治区</option>
     <option>宁夏回族自治区</option>
     <option>广西壮族自治区</option>
     <option>香港特别行政区</option>
</select>

给 option 设置 selected 属性可以让该选项默认被选中，selected 属性不需要设置值

5.3 表单控件的属性

① name 属性

给表单控件设置 name 属性，name 值作为该数据的标识，后端会根据 name 获取对应数据。
单选框需要设置相同的 name 值才有单选效果
提交按钮、重置按钮、普通按钮不需要设置 name 属性

② value 属性

文本输入框、密码输入框，value 属性可以设置输入框中默认显示的文字
单选框、复选框，value 属性可以设置实际提交到后端的数据内容
input 实现的提交按钮、重置按钮、普通按钮，value 属性可以设置按钮上的文字
option，value 属性可以设置提交到后端的数据。
如果 option 没有设置value，双标签中的文字内容会作为提交到后端的数据
button、textarea、select 没有 value 属性

③ disabled 属性

任何表单控件，设置 disabled 之后，该表单控件不可用；
disabled 属性不需要设置值
select 标签设置 disabled，整个下拉框不可用
option 标签设置 disabled，该选项不可用

5.4 表单标签总结

标签名	标签的语义和作用	标签的属性	是单标签还是双标签
form	表单	action: 指定表单提交的地址 method: 指定表达的提交方式 target:同超链接的 target 属性	双
label	关联其他的表单控件	for：指定其他要关联的表单控件的ID	双
input	输入框	name: 标识该输入框，后端用改标识获取数据（暂时不用） type: 指定输入框的类型值 value: type值如果是button/submit/reset,value指定按钮的文字；type如果是text/password,value指定默认文字；type如果是checkbox/radio,value指定真正提交到后台的值。 checked: 为 radio 和 checkbox设置默认选项。 length: 设置输入框的最大输入长度（text 和 password） size：设置输入框尺寸（text 和 password）	单
select	下拉选择框	name: 标识该输入框，后端用改标识获取数据（暂时不用）	双
option	下拉选项	value：指定真正提交到后台的值。（暂时不用） selected: 表示默认选中	双
textarea	文本域	name: 标识该输入框，后端用改标识获取数据（暂时不用） rows：文本域行数，能决定文本域的高度 cols：文本域列数，能决定文本域的宽度	双

注意：表单控件可以通过添加 disabled 属性，让表单控件不可用

type 常用属性值

属性值	描述
button	定义可点击按钮，普通按钮
checkbox	复选框
password	定义密码字段。字符被掩码。
radio	定义单选按钮
reset	定义重置按钮，清除表单所有数据。
submit	定义提交按钮。重置按钮会清除表单所有数据。
text	定义输入字段。用户可输入文本，默认宽度为 20 个字符。

第五章 HTML字符实体

	描述
&nbsp；	空格
&lt；	小于号<
&gt；	大于号>
&amp；	&
&yen；	人民币符号
&copy；	版权符号
&times；	乘号
&divide；	除号

第六章 HTML 全局属性

全局属性：所有的标签都有的属性

属性	含义
name	设置名字
id	设置唯一标识
title	设置鼠标悬停之后的文字提示
class	设置类名，css中使用
style	设置css样式
lang	设置语言，值：cn、en

第七章 meta 元信息

我们可以使用 <meta> 标签定义 HTML 页面的元信息。

<!-- 网页字符集编码 -->
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 页面刷新 -->
<!-- <meta http-equiv="refresh" content="3">     -->
<meta http-equiv="refresh" content="3;url=http://www.atguigu.com">

<!-- 告诉IE使用最新的引擎渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 设置完美视口，给移动端的浏览器设置的 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

一毛钱的星星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】入门教程详解

网页是根据因特网上一定的规则，使用html等制作的用于展示特定内容的网页集合。网页是构成网站的基本元素。网页是图片、链接、文字、声音、视频等源深路组成，其实就是一个html文件。HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言HTML不是一种编程语言，而是一种标记语言标记语言是一套标记标签它可以加入图片、声音、动画、多媒体等内容（超越文本限制）它可以从一个文件跳转到另一个文件，于世界各地主机的文件连接（超级链接文本）
复制链接

扫一扫