一 、基础结构
1.1、网页整体结构
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> --> <!DOCTYPE html> <html lang="zh-cn"> <head> <title></title> </head> <body> </body> </html>
1.2、文档类型声明
- 作用
文档类型声明（Document Type Declaration，也称Doctype）。它主要告诉浏览器所查看的文件类型。在以往的HTML4.01 和 XHTML1.0 中，它表示具体的 HTML 版本和风格。而如今 HTML5 不需要表示版本和风格了。 - 示例
<!-- XHTML1.0--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- HTML5 --> <!DOCTYPE html>
1.3、html标签(双标签)
- 作用
它是一个双标签，头尾呼应，包含内容。这个元素有一个属性和值：lang="zh-cn"，表示文档采用语言为：简体中文 - 注意
其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间.
并且一个HTML文件只能有一个HTML标签
1.4、head标签(双标签)
- 作用
它是一个双标签，用来包含元数据内容，元数据包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。这些内容用来浏览器提供信息，比如 link提供 CSS 信息，script提供JavaScript 信息，title 提供页面标题等 - 应用场景
- 指定网站的标题 / 指定网站的小图片
- 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
- 外挂一些外部的css/js文件
- 添加一些浏览器适配相关的内容
- 注意
一般情况下, 写在head标签内部的内容都不会显示给用户看
1.5、meta 元素(单标签)
- 说明
这个元素用来提供关于文档的信息，起始结构有一个属性为：charset="utf8"。表示告诉浏览器页面采用的什么编码，一般来说我们就用utf8。当然文件保存的时候也是utf8，而浏览器也设置 utf8即可正确显示中文，
meta也可以定义很多其他的属性,后面细讲 - 示例代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf8"> <title>这个是标题</title> </head> <body> </body> </html>
1.6、title 标签(双标签)
- 说明
设置浏览器左上角的标题 - 示例代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf8"> <title>标题</title> </head> <body> </body> </html>
1.7、link 元素(单标签)
- 作用
link标签通常放置在一个网页的头部标签head标签内的用于链接外部css文件、链接收藏夹图标（favicon.ico），<link>标签最常见的用途是链接外部样式表的外部资源。 - 属性
属性 说明 href 值为外部资源地址这里是收藏夹图标地址 rel 定义当前文档与被链接文档之间的关系 type 规定被链接文档的 MIME 类 - 示例代码
<head> <!--指定收藏夹图标地址 --> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <!--指定收藏夹图标地址 --> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css" rel="stylesheet"> </head>
1.7、base 元素(单标签)
- 作用
为页面上的所有链接规定默认地址(href)或默认目标(target)。
常见的url路径形式分别有相对路径与绝对路径，对于相对URL，通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。但使用<base>标签后，浏览器将不再使用当前文档的 URL，而使用<base>标签指定的基本 URL 来解析所有的相对 URL。这其中包括<a>、<img>、<link>、<form>标签中的 URL。 - 注意
- base标签必须位于 head 元素内部
- 一个HTML中最多使用一个
<base>标签，当用多个<base>标签定义了href时，默认使用第一个<base>标签的href定义的地址。
- 示例代码
<head> <meta charset="UTF-8"> <title>base标签</title> <base href="https://www.jianshu.com/u/"> <base target="_blank"> </head> <body> <div align="center"> <p><a href="">使用base中的</a></p> <p><a href="http://www.baidu.com" target="_self">百度一下</a></p> <p><a href="https://www.jianshu.com/p/b3afefda6f41">HTML基础</a></p> <!--当你定义的url地址没有协议号的时候会拼接地址,也就是base中定义的+上你元素中定义的--> <!--https://www.jianshu.com/u/3bfcd55e68b6--> <p><a href="3bfcd55e68b6">我的主页</a></p> <p> <img src="https://zhangwei-imgs.oss-cn-beijing.aliyuncs.com/superbed/2019/02/28/5c773c5d3a213b0417c7239e.gif" alt="测试"> </p> </div>
1.8、body标签(双标签)
- 作用
双标签,专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频) - 注意
- 一个html开始标签和一个html结束标签只能有一对body标签
- 默认样式:margin:8px;
二、基础标签
1、h标签(Headline)(双标签)
- 作用
用于给文本添加标题语义 - 格式
<h1>xxx</h1> - 说明
- H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
- H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
- 被H系列标签包裹的内容会独占一行
- 在H系列的标签中, H1最大, H6最小
- 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签,
- H1默认样式:margin:8px;
- H2标签尽量在页面中不要超过5个
- 针对搜索引擎来说是告诉了不同标签下代表不同的重要级别内容。如果你在一个网页中使用的1-2中H型标签中都含有一个相同关键字，搜索引擎也会格外注重你所注重关键字与内容，但切记别乱用。
2、br标签(Break)(单标签)
- 作用
让内容强制换行 - 格式
aaaaa<br/>bbbbb - 说明
br的意思是不另起一个段落进行换行，如果需要另起了一个段落，则应该使用p标签来做。
3、p标签(Paragraph)(双标签)
- 作用
告诉浏览器哪些文字是一个段落 - 格式
<p>xxxxxxxx</p> - 说明：
在浏览器中会单独占一行且自动换行。 -
p标签与br标签的区别
1、相同之处
br和p都是有换行的属性及意思
2、不同之处
1、<br/>是只需一个单独使用，而<p>和</p>是一对使用
2、br标签是小换行，p标签是大换行（分段）作用
4、a标签(anchor)(双标签)
4.1、作用
<a>标签也叫做超级链接或超链接，用于从一个页面链接到另一个页面。
<a>元素最重要的属性是 href 属性，它指示链接的目标。
4.2、格式
<a href="" target="" title=""></a>
4.3、注意
在a标签之间一定要写上文字，如果没有，那么在页面上找不到这个标签。
4.4、属性
1、target
- 作用
规定在何处打开链接文档 - 可选值
可选值 说明 _blank 在新窗口或标签页中打开文档 _self 在当前窗口打开文档（默认） _parent 在父窗框组（frameset）中打开文档(废弃) _top 在顶层窗口打开文档 - 说明
这四种最常用的是_blank，新建一个窗口。而_self是默认，当前窗口打开。_parent和_top是基于框架页面的，分别表示在父窗口打开和在整个窗口打开。而HTML5 中，框架基本被废弃
2、href
- 说明
href(hypertext reference) 是一个必须属性，用来指定跳转的目标地址,他的值可以是一个外部链接地址,也可是本地的html文件 - 可选值
值 描述 URL 超链接的 URL。可能的值：绝对 URL - 指向另一个站点（比如 href="https://www.baidu.com"） URL 相对 URL - 指向站点内的某个文件（href="index.htm"） URL 锚 URL - 指向页面中的锚（href="#top"）
3、title
- 说明
悬停文本（介绍这个链接，只有在鼠标移动到超链接上时才会显示）
4.5、示例代码
- 假链接(本质是跳转到当前页面)
<a href="#">电影</a> <!-- 或者 --> <a href="javascript:">电影</a> - 跳转外部链接
<a href="https://www.jianshu.com/u/3bfcd55e68b6">我的主页</a> - 跳转本地界面
<a href="detail.html">查看详情</a> - 跳转到当前页面指定位置(锚点链接)
<a href="#location">跳转到指定位置</a> <!-- 在页面的指定位置给任意标签添加一个id属性 --> 例如:<p id="location">这个是目标</p> <!-- 在网站上经常看到跳转顶部的功能 就是这么实现的 --> <a id="top"></a> <a href="#top">返回顶部</a> - 跳转到指定页面的指定位置
<a id="#first" href="#">第一章</a> ... <a href="detail.html#first">跳转详解界面第一章</a> - base标签和a标签结合使用
<!-- 如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开--> <head> <!-- base必须嵌套在head标签里面 --> <!-- 如果标签上指定了target，base中也指定了target，那么会按照标签上指定的来执行。 --> <base target="_blank" /> </head> <body> </body> - 发送邮件
<!--href 属性的值不是一个链接，而是 mailto:邮箱地址 的格式。 --> 发送邮件到：<a href="mailto:10000@qq.com">10000@qq.com</a>
5、img(单标签)
- 作用
，在网页上插入一张图片 - 格式
<img src="图片路径" /> - 图片路径：图片路径分为两种
- 网络路径：直接是其他服务器的图片地址
- 本地路径：本地操作系统的路径
- 一种是绝对路径、一种是相对路径(相对于该HTML页面文件所在路径)。在企业级开发中没有人使用绝对路径，因为绝对路径不易于移植。
- 常用属性：
属性 说明 src(source) 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片 alt(alternate) 规定图像的替代文本，只有在src指定的路径下找不到图片，才会显示alt指定的文本 title 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示) height 设置图片显示的高度 width 设置图片显示的宽度,如果想让图片等比拉伸, 只写高度或者宽度即可 - 示例代码
<img src="https://zhangwei-imgs.oss-cn-beijing.aliyuncs.com/superbed/2019/02/28/5c773c5d3a213b0417c7239e.gif" title="绿绿绿" alt="图片不存在才会显示" />
6、span
- 作用
双标签，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上
<span></span>
标记，通常配合css来定义内容的样式 - 格式
<span>内容</span>
7、div
- 作用
双标签，一个没有任何语义的通用元素，主要用于搭建界面的整体架构 - 格式
<div>内容</div>
8、pre
- 作用
该标签可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符，并且文本会呈现为等宽字体。该标签的一个常见应用就是用来表示计算机的源代码 - 格式
<pre> 人生在世 但求心安！ 心若安，人世静好！ </pre>
