系统学习前端之HTML基础

最新推荐文章于 2022-07-26 16:39:09 发布

Dalin大林

最新推荐文章于 2022-07-26 16:39:09 发布

阅读量475

点赞数 1

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

本文链接：https://blog.csdn.net/money_linqian/article/details/72856563

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

近期打算对所学前端做一个总结，以便后面的深入学习。那就从最基础的开始吧。夯实基础。

此篇文章较长，尽量的详细的记录了HTML涉及的基础内容

适合初学者，大神请略过。同时敬请指教。

学完此篇文章的中的内容可以做个练习来巩固一下掌握的内容
文章目录

什么是html
字符集问题
标签分类
DTD 文档声明
HTML、XHTML和HTML5的区别
HTML标签
路径问题
列表标签
表格标签
表单标签
html中废弃的标签
字符实体

什么是`html`

html是HyperText Markup Language的缩写，超文本标记语言

html作用

专门用来给纯文本中的内容添加语义的。也就是说可以利用html来告诉浏览器哪些是标题，哪些是段落等等。
用来描述其他文本语义的语言我们称之为“标签”，并且这些用来描述其他文本语义的标签将来不会再浏览器中显示出来。所以称这些文本为“超文本”，而这些文本又叫做标签，所以HTML被称之为“超文本标记语言”
注意事项：浏览器中显示出来的内容可能会改变原来的样式，但是一定记住，HTML的作用只有一个，它是专门用来给文本添加语义的，而不是用来修改文本样式的。
- 例如：H1标签的作用是什么？
- H1标签的作用是用来告诉浏览器哪些文字是标题，也就是说H1标签是专门用于给指定的文字添加标题语义的。

`HTML`发展史

<code>HTML</code>发展历程

名词解释：

`IETF`简介

IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是”互联网工程任务组”
IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等

`W3C`简介

W3C是英文World Wide Web Consortium的缩写，翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

`HTML`基本结构

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

HTML基本机构中的标签都是成对出现的，不带“/”的策划能够为开始标签，带“/”的标签称之为结束标签

下面就来分布介绍一下HTML基本结构中各标签的含义及作用

head标签
- 作用：用于告诉浏览器这是一个网页，也就是说告诉浏览器这是一个HTML文档
- 注意点：其他所有的标签都必须写在html标签中，也就是写在HTML开始标签和结束标签中间。
head标签
- 作用：用于给网站添加一些配置信息
- 例如：
- 指定网页的标题及小图标
- 添加网站的SEO相关的信息（指定网站的关键字/指定网站的描述信息）
- 外挂一些外部的css/js文件
- 添加一些浏览器适配相关的内容
- 注意点：一般情况下，写在head标签内部的内容都不会给用户查看，是用来告诉浏览器网站的配置信息的。
title标签
- 作用：专门用于指定网站的标题，并且这个指定的标题将来还会作为用户保存网站的默认标题
- 注意点：title标签必须写在head标签中
body标签
- 作用：专门用于指定HTML文档中需要显示给用户查看的内容（文字/图片/音频/视频）
- 注意点：
- 一定要将需要显示的内容写在body标签中
- 一对html标签中（一个html开始标签和一个html结束标签）只能有一对body标签

字符集问题

什么是字符集？
- 字符集就是字符的集合，也就是很多对字符堆在一起。
GBK（GB2312）和UTF-8的区别？
- GBK（GB2312）里面存储的字符比较少，仅仅存储了汉字和一些常用的外文
- 体积比较小
- UTF-8里面存储了世界上所有的文字
- 体积比较大
在企业开发中应该选择哪个字符集呢？
- 如果网站中仅仅包含了中文，那么推荐使用GB2312，因为它的体积更小，访问速度更快。
- 如果网站中除了包含中文外，还含有一些其它国家的语言，那么推荐使用UTF-8。
- 懒人推荐：不管三七二十一，都使用UTF-8。
注意点：
- 在HTML文件中指定的字符集必须和保存这个文件的字符集一致，否则还是会出现乱码。

`head`标签内部的标签

meta标签
- 作用：用来指定文档的字符集

`HTML`标签分类

根据标签个数来分

单标签
- 只有开始标签没有结束标签，也就是只有一个<>组成的

<meta charset="UTF-8">

双标签
- 有开始标签和结束标签，也就是由<>和

根据标签所处的位置来分

并列关系（兄弟/平级）

<html>
    <head>
    </head>
    <body>
    </body>
</html>

嵌套关系（父子/上下级）

<html>
    <head>
        <meta />
        <title>
    </head>
</html>

DTD文档声明

什么是DTD文档声明？
- 由于HTML有很多个版本的规范，每个版本的规范又有一定的差异，所以为了让浏览器能够正确的编译/解析/渲染网页，需要在HTML文档的第一行告诉浏览器，当前的文档用的是哪一个版本的规范。
企业开发中一般都使用HTML5的规范
html5是向下兼容的，可以兼容低版本的规范，同时还可以兼容XHTML的规范
注意：
- 任何一个标准的html网页，第一行一定是DTD文档声明。
- DTD不区分大小写
- DTD不是一个标签
- 虽然DTD文档的作用是告诉浏览器网页是由哪一个版本低的标准来编写的，以便于浏览器解析和渲染，但是浏览器并不是完全按照这个DTD文档声明，浏览器有一套属于自己的机制，也就是说不写DTD文档，网页也能正常运行，但是由于w3c规定了第一行必须写DTD文档声明，所以为了遵守规定，无论怎样都要在第一行写上DTD文档声明。
DTD文档在html5之前还有两大规范，每一个大的规范又分为三个小标准

规范	标准
HTML	strict（严格的）
HTML	Transitional（普通的）
HTML	Frameset（带有框架的）
XHTML	strict（严格的）
XHTML	Transitional（普通的）
XHTML	frameset（带有框架的）

主要参考W3C school文档教程
W3C文档声明教程

`HTML、XHTML和HTML5`的区别

HTML代码非常宽松，容错性强
XHTML更为严格，它要求标签必须小写，必须严格闭合，标签中的属性必须使用引号等等。
html5是html的下一个版本，除了非常宽松容错性强以外，还增加了许多新的特性。

`.htm`和`.html`的区别？

DOS操作系统（win95或win98）只支持长度为3后缀名，所以是htm
在windows后缀长度可以大于3位，所以windows下无所谓htm与html,html是为长文件的格式命名的。
所以htm是为了兼容过去的DOS命令而存在的。

`HTML`标签

`H`系列标签（header1~heade6）

作用：用于给文本添加标题语义
格式：<h1>...</h1>
注意点：H系列标签一共有6个，超过6个则无效。被H系列的标签包裹的内容会独占一行
- 在企业开发中，一定要慎用H系列标签，特别是H1标签，在企业开发中，一般一个页面只能出现一次H1标签（与SEO有关）

`p`标签

作用：告诉浏览器哪些是段落
格式：<p>...</p>
注意点：在浏览器中单独占一行。

`hr`标签

作用：在浏览器中显示一条分割线
格式：<hr/>
注意点：（可以参考W3C标准）
- 在浏览器中单独占一行
- 可以写<hr>或<hr/>，<hr/>是XHTML中的规范，<hr>是HTML中的规范，在HTML5中兼容这两种写法
- 在以后的前端开发中根据高级开发工具的提示来写。

`HTML`中的注释

适当的注释能够增加程序的可读性
格式：<--注释的内容-->
注意：注释中的内容不再浏览器中显示

`img`标签

作用：告诉浏览器需要显示一张图片
格式：<img src="">
src是source的缩写，告诉img标签需要显示的图片名称。
属性：
- width:指定图片宽度
- height：指定图片高度
- title：当鼠标悬停在图片上时，显示title描述的内容
- alt:当找不到图片时，显示的内容
注意：
- 不独占一行
- 指定高度或宽度中的一个，浏览器会自动计算另一个的值。

`br`标签

作用：换行
格式：<br>
注意：
- 使用几个br标签就会换几行
- 如果一段内容为描述完可以用br,若一段描述完了需要换行应使用p标签。
- 在企业开发中很少使用

路径问题

相对路径：每次都在.html文件所在的文件夹开始查找
- 同级：.html文件与图片存在一个文件夹中
- 下级：.html文件与存储图片的文件夹在同一个文件夹
- 上级：存储图片的位置和存储代码的文件夹在同一个文件夹中
绝对路径：每次都从指定的盘符开始查找（了解，可移植性不好，企业开发中一般不使用）
注意：
- 路径中不能出现中文，否则可能出现未知问题
- 如果通过相对路径来指定，那么不能跨盘符
- 需要编写路径的地方统一使用反斜线”/”,以便将来其它操作系统可以识别。

`a`标签

作用：控制页面与页面之间的跳转
格式：<a href="指定需要跳转的目标界面">展现给用户查看的内容</a>
属性：
- target:专门用于控制如何跳转
- _self（默认）：当前选项卡的跳转，不新建界面
- _blank：新的选项卡跳转，新建一个界面
- title:鼠标悬停时显示的提示文本，与a标签和img标签中的title作用一样。
注意：
- 可以让文字或图片点击
- 一个a标签必须有一个href属性，用来指定跳转到的地方
- 如果通过a标签的href属性指定一个URL地址，那么必须在地址前面加上http://或者https://
- 除了可以指定一个网络地址以外，还可以指定一个本地地址

`base`标签

作用：专门用来统一的指定当前网页中所有超链接（a标签）需要如何打开
注意：
- base必须写在head标签的开始标签和结束标签之间
- 如果即在base标签中制定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行

假链接：点击之后不会跳转的连接

意义：企业开发前期，其它界面没有写出来，未知跳转到什么地方，用假链接代替，后期再替换成真链接。
格式：
- #
- JavaScript:
- 两者区别：#的假链接会自动回到网页的顶部，而JavaScript：不会回到页面的顶部

锚点链接

作用：跳转到指定的位置
格式：

<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>

注意：
- 通过a标签跳转是没有过度效果的，直接一下就跳转到目标位置
- a标签既可以跳转到当前页面的指定位置，还可以跳转到其它界面的指定位置

列表标签

作用：给一堆数据添加列表语义，告诉浏览器这一对数据是一个整体
分类：无序列表（最常用）、有序列表（最少）和定义列表（其次）

无序列表（unordered list）

作用：给一堆数据添加列表语义，并且这一堆数据没有先后之分
格式：

<ul>
    <li>需要显示的条目内内容</li>
</ul>

应用场景：
- 新闻列表
- 商品列表
- 导航条
注意：
- ul标签是给一堆数据添加语义的，而不是给他们添加小圆点的
- ul和li标签是一个整体，一般情况下都是结合使用的，不会单独出现
- ul和li是一个组合，所以以后在ul标签中只会看到li标签
- 通过标签属性也能修改样式，但是在企业开发中一般不要这么做！！
- ul标签中最好只放li标签，但是在li标签中可以继续放其它的标签内容

有序列表（ordered list）

作用：给一堆数据添加列表语义，并且一堆数据中所有数据都有先后之分
格式：

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

注意：其它用法和ul都差不多，也就是应用场景/注意点都和ul差不多

定义列表（definition list）

作用：
- 给一堆数据添加列表语义
- 先通过dt标签定义列表中的所有标题，然后通过dd标签给每个标题添加描述信息
格式：

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

名词解释：
- dt：definition title的缩写，定义列表中的标题
- dd:definition description的缩写，定义标题对应的描述的。
应用场景
- 做网站尾部的一些相关信息
- 做图文混排
注意
- 和ul/ol一样，dl和dt/dd是一个整体，所以一般情况下都是一起出现的
- dl标签中一般只放dt和dd标签
- 推荐使用一个dt标签对应一个dd
- 可以在dt和dd标签中添加其他标签

表格标签

什么是表格？
- 一种数据的展现形式，当数据量比较大时，表格标签被认为是最为清晰的一种表现形式
- 一个时代的代表
作用
- 用来给一堆数据添加表格语义
格式

<table>
    <tr>
        <td></td>
    </tr>
</table>

tr标签代表整个表格中的一行数据
td标签代表表格中一行中的一个单元格
属性
- 高度(height)和宽度(width)
- 可以给table标签和td标签使用
- 默认是根据内容来调整，也可以用width/height手动指定宽高
- 如果给td设置width/height属性，会修改当前单元格的宽高，但不会影响整个表格的宽高
- 水平对齐(align)和垂直对齐(valign)
- 水平对齐：table,tr,td都可用
  - 给table设置align属性，控制表格在水平方向上的对齐方式
  - 给tr设置align属性，控制当前行中所有单元格内容的水平方向上的对齐方式
  - 给td设置align属性，控制当前单元格中内容在水平方向上的对齐方式
  - 注意：如果table/tr/td都设置了align属性，那单元格会按照td中设置的来对齐
- 垂直对齐：只能给tr,td使用
  - 给tr标签设置valign属性，可以控制当前行中所有单元格中的内容在垂直方向上的对齐方式
  - 给td标签设置valign属性，控制当前单元格中的内容在垂直方向上的对齐方式
  - 注意：如果tr/td都设置了valign属性，那么单元格会按照td中的设置来对齐
- 外边距(cellspacing)和内边距(cellpadding)：只能给table标签设置
- 单元格与单元格之间的距离，默认是2px
- 单元格与文字之间的距离，默认是1px
其它属性
- bgcolor
其它标签
- caption:表格标题
- th:标题单元格（自动加粗+居中）
表格的完整的结构（企业开发中一般不这么写，作为了解）

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

caption:指定表格标题
thead:指定表格的表头信息
tbody:指定表格的主体信息
tfoot:指定表格的附加信息
如果没有编写,系统会自动添加

单元格合并

垂直方向上(rowspan)的单元格合并
水平方向上(colspan)的单元格合并
注意：
- 表格标签有一个默认属性，这个属性决定了边框的宽度，默认情况下这个属性值是0，所以看不到边框
- table标签和tr/td标签是一个组合标签，一般都是一起出现
- 表格标签属性仅做了解，在企业开发中样式统一由CSS来控制

表单标签

什么是表单？
- 专门用来收集信息
什么是表单元素？
- 表单元素是一些比较特殊的标签，在浏览器中所有的表单元素都有特殊的外观和默认的功能
表单的格式

<form>
    <表单元素>
</form>

常见的表单元素

input标签
- 有一个type属性，这个属性有很多类型的取值，取值的不同就决定了input标签的功能和外观

<form>
    <!--明文输入框-->
    账号：<input type="text"><br>
    <!--暗文输入框-->
    密码：<input type="password"><br>
    <!--给输入框设置默认值-->
    账号：<input type="text" value="123"><br>
    密码：<input type="password" value="123">
    <!--单选框-->
    <input type="radio" name="gender" checked="checked">
    <!--多选框-->
    <input type="checkedbox" checked="checked">
    <!--按钮-->
    <input type="button" value="按钮">
    <!--图片按钮-->
    <input type="img" src="">
    <!--重置按钮-->
    <input type="reset">
    <!--提交按钮,提交按钮必须在form标签中加一个action属性，另外给需要提交的元素加一个name属性-->
    <input type="submit">
    <!--隐藏域-->
    <input type="hidden">
</form>

label标签
- 作用：让文字和输入框绑定，使得点击文字时，对应的输入框聚焦

<label for="account">账号：</label><input type="text" id="account" /><br>
<label for="pwd">密码：</label><input type="password" id="pwd" />

`select`标签

作用：用于定义下拉列表
格式：

<select>
    <option>列表数据</option>
</select>

下拉列表不能输入内容，可以直接选择内容
可以给option标签添加selected属性来指定列表的默认值
可以给option标签包裹一层optgroup标签来个下拉列表中的数据进行分类

`textarea`标签

作用：定义一个多行输入框
默认情况下输入框可以无限换行
默认情况下输入框有自己的宽度和高度
可以通过cols和rows来指定输入框的高度和宽度，但是虽然指定了列数和行数，但还可以无限往下输入
默认情况下是可以手动拉伸的

`video`标签

作用：播放视频
格式：

<video src=""></video>

属性
- autoplay:告诉video标签是否需要自动播放
- controls :告诉video标签是否显示控制条
- poster:告诉video标签未播放之前显示的占位图片
- loop:告诉video标签时候循环播放，一般用于广告视频
- preload:预加载视频，但是需要注意preload属性和autoplay相冲，如果设置了autoplay属性，那么preload就会失效
- muted:静音
- width
- height
第二种格式

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

由于视频数据非常重要，五大浏览商都不愿支持别人的视频格式，所以导致了没有一种视频格式所有的浏览器都支持，所以W3C推出了第二种video格式，通过source标签把所有的视频格式都指定给video标签，这样就解决了浏览器不兼容的问题
虽然第二种格式可以解决所有浏览器都支持的视频格式，但是前提条件是浏览器必须支持HTML5标签，否则同样不会播放，以后可以用JS的一个html5media框架来实现

`audio`标签

作用：播放音频
注意：audio标签的使用和video基本一致，除了height/width/poster属性外，audio能够使用video中的其它所有属性

　`details`和`summary`标签

作用：显示内容简介与详情
格式：

<details>
    <summary>概要</summary>
    详情
</details>

`marquee`标签

作用：跑马灯
格式

<marquee>内容</marquee>

属性
- direction:设置滚动方向：left/right/up/down
- scrollamount:控制速度
- loop:控制滚动次数，默认是-1，也就是无限滚动
- behavior:设置滚动的类型，
- slide:滚动到边界就停止
- alternate:滚动到边界就弹回
注意：marquee标签不是W3C推荐的标签，在W3C官方文档中也无法查到，但是各大浏览器兼容的很好

`html`中废弃的标签

当前html中的标签就只有一个作用，就是添加语义，而早期的一些html标签中不是用来添加语义的，所以这部分标签就被淘汰了
<br> <hr> <font> <b> <u> <i> <s>
- strong == b
- ins == u
- em == i
- del == s
注意：以后在企业开发中，不到万不得已不要使用这些被淘汰的标签，如果一定要用，一般情况下都是用来作为CSS钩子来使用

字符实体

在html中对空格/回车/tab不敏感，会把多个空格/回车/tab当做一个来处理
字符实体是可以在浏览器中显示一些特殊的本身不能再浏览器中显示的字符
例如：&nbs p;是代表空格
可以参考W3C字符实体

学完这么多了，做个练习来练练手吧百度前端学院小薇课堂任务一
此文尽量的涵盖了HTML基础内容，后续会继续修改添加。

Dalin大林

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
系统学习前端之HTML基础

近期打算对所学前端做一个总结，以便后面的深入学习。那就从最基础的开始吧。夯实基础。此篇文章较长，尽量的详细的记录了HTML涉及的基础内容适合初学者，大神请略过。同时敬请指教。学完此篇文章的中的内容可以做个练习来巩固一下掌握的内容
复制链接

扫一扫