概述
1 什么是HTML
HTML：HyperText Markup Language 超文本标记语⾔。
普通文本：只包含文字。最简单的案例：txt文件。
标记：即标签。
举个例子：服装店买衣服，每个衣服上都有⼀个标签或者吊牌，写着多大，啥牌子，棉的还是绒的还是丝的。这个标签就有⼀个标记的作用。
在HTML中，HTML标签的作用就是标记内容的语义。告诉浏览器，这段内容是干什么的。
人与人之间的语言，叫自然语言。
2 HTML作用
定义网页的结构，通俗的说：定义网页中有什么内容。
3 什么是HTML标签
给网页中的内容添加语义的特殊文本。
基本语法：
-
<标签名>标签体</标签名> 双标签
-
<标签名 /> 单标签，⾃闭和标签
-
第⼀个标签是开始标签，第⼆个标签是结束标签，结束标签的标签名前使⽤/标注。
4 HTML文件的创建
在电脑中任意位置点击鼠标右键，选择新建文本文档，然后修改新建文本的后缀为.html，保存后就完成了HTML文件的创建。
5 HTML基本结构
<!DOCTYPE html> <!-- html 根标签，表示整个网页，所有的内容都写在这个里面。 --> <html lang="en"> <!-- 网页的头部，里面的内容是给浏览器看的，是⼀些网页的配置。除了title标签，其他的内容在浏览器都是不可见的。 --> <head> <!-- 当前网页使用语言 --> <meta charset="UTF-8"> <!-- 网页的标题。用户保存网站时，会使用这个标题作为默认标题。--> <title>Document</title> </head> <body> <!-- 网页的主体，里面的内容是给用户看的。--> </body> </html>
<!DOCTYPE html>
DTD：doctype definition 文档声明类型。
作用：告诉浏览器使用HTML5.0的语法规范。
HTML从1993年的1.0版本，发展到现在的5.0版本。它和css，js的规范都是由⼀个非盈利的组织 w3，来制定和维护的。 4.0版本之后，将结构与样式进行了分离。 XHTML 1.0 语法要求比较严格。标签必须是小写，所有的属性都必须用双引号封闭，结束标签必须有反斜杠。
严格程度：XHMTL1.0 strict > HTML4.01Strict > XHTML 1.0transitional > HTML4.01transitional
<html lang="en">
当前页面使用的语言
lang="en" 英文页面使用
lang="zh-CN" 中文页面使用
<meta charset="UTF-8">
当前网页使用的字符集。
常见的字符集：
UTF-8：国际通用字库，涵盖了几乎所有人类的语言文字。
gb2312/gbk：中国字库，所有简体字，⼀些特殊符号；gbk：繁体。
UTF-8和gb2312的比较
-
UTF-8（更臃肿、加载更慢）> gb2312 （更小巧，加载更快）
-
UTF-8：字多，有各种国家的语⾔，但是保存尺寸大，文件臃肿；
-
gb2312：字少，只⽤中文和少数外语和符号，但是尺寸小，⽂件小巧。
-
比如：你们公司是做⽇本动漫的，经常出现⼀些⽇语动漫的名字，网页要使用UTF-8，如果用gb2312将无法显示日语。
-
腾讯网、支付宝都是使用gb2312。搜狐、京东、天猫使用的是UTF-8，保证字符集的数量。
6 HTML基础语法
HTML标签写法
-
<标签名>标签体</标签名> 双标签
-
第⼀个标签是开始标签，第⼆个标签是结束标签，结束标签的标签名前使用/标注。
-
每⼀个标签都有自己特定的属性。
-
位置：双标签的开始标签或者单标签中。
-
与标签名用空格隔开，与其他属性也用空格隔开。
-
属性名与属性值用=连接，中间不能有空格。
-
属性值必须⽤双引号包括起来。
-
⼀个标签内，可以有⼀个或多个属性。
-
⼀个属性可以有多个属性值，全部在双引号内部，使⽤空格隔开。
-
属性写法格式：
-
<标签名 属性名=“属性值”></标签名>
-
<标签名 属性名=“属性值” />
-
7 HTML基础标签
标题标签
h标签 headline的缩写。
h1-h6 表示⼀到六级标题。
作⽤：给⽂本添加⼀到六级标题语义，告诉浏览器，这些文字是标题。容器级标签。
格式：
<h1></h1> <h2></h2>
知识点：
-
级别依次降低，重要性也随之降低。
-
都会被加粗，字体从大到小。
-
会独占一行。
-
h标签虽然是容器级，但是没有嵌套关系。
-
h标签慎用，特别是h1标签，⼀个网页最多只能出现⼀个，会影响SEO。
段落标签
p标签：给⽂本添加⼀个段落的语义，告诉浏览器，哪些⽂字是⼀个段落。
格式： <p>内容</p>
知识点：
-
段落的⾸⾏以及尾⾏会进⾏换⾏。
-
⽂本级标签。⽂本/图⽚/超链接
链接标签
a标签 超链接
基本格式：
<a href="跳转的目标地址">需要给用户展示的内容</a>
常用属性：
href：规定链接跳转指向的页面的URL。 URL可以是外部链接，比如https://www.baidu.com 也可以是⼀个内部连接。网站内部网页之间的相互连接。在src中填写网页的相对路径或绝对路径 即可。⽐如：ul.html。 如果href⾥⾯地址是⼀个exe或压缩包，会下载这个⽂件。
target：目标的意思，跳转后的网站是否在新标签页打开。
a. _self：当前标签页跳转，也就是不打开新页面，a标签默认的target属性。
b. _blank：打开⼀个新的页面，在新的页面进行跳转。
base标签为⻚⾯上的所有链接规定默认地址或默认目标。
<head> <base target="_blank" /> </head>
提示：
a标签不仅可以给⽂字添加超链接，也可以给图⽚，视频，⾳频，表格等添加超链接。
如果通过a标签的href属性指定⼀个URL，那么必须在地址前加上http://或者https://。
如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
文本格式化标签
<i>定义斜体字</i> <b>定义文本加粗</b> <small>定义小号字</small> <strong>定义加重语气</strong> <sub>定义下标字</sub> <sup>定义上标字</sup> <del>定义删除字</del>
列表标签
ol 标签
作用：定义⼀个有序列表。给网页内容加有序列表的语义。
<ol> <li>1</li> <li>2</li> </ol>
ul 标签
作用：定义⼀个无序列表。
<ul> <li>1</li> <li>2</li> </ul>
ul标签中尽量不要包含其他标签。
dl 标签
添加⼀个定义列表的结构，里面有定义主题，对主题的解释。
dl：定义列表。 dt：定义标题。 dd：定义说明、解释。对前⾯最近这个dt（标题）的解释。
-
嵌套关系：dl>dt+dd.
-
每⼀个dt后⾯可以跟多个dd，表示多次解释。
-
也可以不跟dd。只有主题，没有解释。（彪悍的⼈⽣不需要解释）
<dl> <dt></dt> <dd></dd> </dl>
图片标签
img标签：在当前⻚⾯中引⼊⼀个外部的图⽚。
单标签。 img image的缩写。
可插⼊图⽚的类型：JPG，PNG，gif。
src source的缩写，来源，表示图⽚的来源、路径。必须的属性。
alt 当图⽚资源加载不出来的时候，会显示出来。搜索引擎会根据alt的内容去收录图⽚。
width 宽 指定图⽚的宽 属性值是数字，单位是px（像素）。
height ⾼ 指定图⽚的⾼ 若不指定了图⽚的宽和⾼，浏览器会根据图⽚本身的宽和⾼加载图⽚。
只需要指定图⽚的宽或者⾼，浏览器会⾃动按照图⽚本身的⽐例去设置⾼或者宽。
<img src="../img/logo.png" alt="网站logo">
8 路径问题
相对路径
查找⽬标⽂件时，从当前⽂件出发，⽬标⽂件所在的路径。
相对路径：查找⽬标⽂件时，从当前⽂件出发，⽬标⽂件所在的路径。
从盘符出发寻找⽬标⽂件。（本地⽂件）
以https://开头的路径也是绝对路径。（⽹络⽂件）
查找⽬标⽂件时，从当前⽂件出发，⽬标⽂件所在的路径。
同级查找
当前⽂件夹与⽬标⽂件夹在同⼀个⽬录下。
子级查找
当前⽂件与⽬标⽂件的上级⽬录在同⼀⽬录下。书写对应的⽂件夹的名字，后⾯⽤/表示进⼊⽂件夹，最后 直接书写⽬标⽂件的⽂件名。
父级查找
当前⽂件的上级⽬录与⽬标⽂件的上级⽬录在同⼀根⽬录下。..表示上⼀级⽬录，退回⼏级就书写⼏次。 src=“../⽂件夹/图⽚全称” 注意：不能跨盘符进⾏查找。
绝对路径
从盘符出发寻找目标文件（本地文件）
<img src="E:/代码/第⼀天/img/游泳.jpg" alt="">
以 https:// 开头的路径也是绝对路径（网络文件）
<img src="https://vsd-picture.cdn.bcebos.com/2af118c6d26f2a537a459 61b73bb1ac14d2a937c.jpg" alt="">
注意点：
企业开发中，尽量使⽤相对路径和以⽹址形式的绝对路径。本地⽂件的绝对路径的可移植性不好。在部署 到服务器或与别人共同开发时，可能会出现问题。
尽量使⽤反斜杠去写路径。因为有些操作系统⽐如linux，它的路径中使⽤的反斜杠。
最后
以上就是慈祥斑马为你收集整理的HTML基础详解的全部内容，希望文章能够帮你解决HTML基础详解所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复