HTML : 超文本标记语言.是用于构建页面的基础骨架。下面这是一个常见的 HTML 结构。它由许多的标签组成。

<标签>意味着标签的开始</标签>意味着标签的结束。

其中<!--代表注释的开始,-->则代表注释的结束。

HTML骨架中可以存在脚本和样式。样式由<style>标签表示,脚本由<script>标签表示。标签里面则是相应的代码

不过最值得注意的是 <html>标签,因为它是html的主要父级。以及它的子级<head>(头信息)、<body>(主体内容)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE>
<html>
<head>
<title>Web前端开发<title>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="网页描述">
<meta name="keywords" content="网页关键字">
<meta name="description" content="网页主要内容">
<meta name="author" content="网页的作者">
<style>
/** 样式表 **/
</style>
<script>
/** 脚本 **/
</script>
</head>

<body>
<!-- 网页主体内容 -->
</body>
</html>

基本结构总结:

  • <!DOCTYPE> :声明文档类型
  • <html> :网页的根框架
  • <head> :用于定义HTML文档头
  • <title> :定义HTML网页标题
  • <base> :为HTML页面所有链接设置一个默认的目标地址
  • <link> :定义HTML文档与外部资源的关系
  • <meta> :提供关于HTML文档的元数据(描述等)给服务器和搜索引擎
  • <style> : 用于为 HTML 文档定义 CSS 样式信息
  • <body> : 网页的主体显示内容

SEO

对于我们的HTML页面,与搜索引擎有关。就需要以下内容便让搜索引擎检索。

<meta> 的主要属性:

  • keywords (用于告诉搜索引擎网页的关键字)
  • description (用于告诉搜索引擎该网页的主要内容)
  • robots (用于告诉搜索引擎该网页是否需要被收录索引)
robots 参数 说明
all 索引网页包括链接
index 索引此网页
none 将此网页忽略
noindex 不索引此网页
follow 允许通过链接索引其他网页
nofollow 不允许通过链接索引其他网页
  • author (用于声明网页作者)
  • generator (用于标注该网页由什么软件编写)
  • copyright (用于标注版权信息)
  • revisit-after (设置爬虫的访问时间)
    <meta name="revisit-after" content="10 days">
  • content-Type (设置网页字符集和编码格式)

浏览器

  • no-cache (先发送请求与服务器确定资源是否更改,如果未更改则使用缓存)
  • public (不允许缓存)
  • private (只为单个用户缓存)
  • max-age (响应该在多久内能被缓存和重用而不去服务器重新缓存)
  • expires (用于设置网页的到期时间,过期后必须到服务器上重新访问)
  • refresh (网页将在设置的时间内自动刷新跳转到指定网页)
  • Set-Cookie (用于设置网页过期时间,过期后将删除本地 Cookie。此处使用 GMT 时间)

格式化元素

  • <b>: 定义加粗文本 (与<strong>一致)
  • <strong>: 定义加重语气 (与<b>一致)
  • <em>: 定义重文字 (与<i>一致)
  • <i>: 定义斜体字 (与<em>一致)
  • <big>: 定义大号字
  • <small>: 定义小号字
  • <sub>: 定义下标字
  • <sup>: 定义上标字
  • <ins>: 定义带下划线的字
  • <del>: 定义带删除线的字
  • <h1>: 定义一级标题
  • <h2>: 定义二级标题
  • <h3>: 定义三级标题
  • <h4>: 定义四级标题
  • <h5>: 定义五级标题
  • <h6>: 定义六级标题

计算机输出

  • <code>: 定义计算机代码
  • <kbd>: 定义键盘输出样式
  • <samp>: 定义计算机代码样本
  • <tt>: 定义打字机输入样式
  • <var>: 定义变量
  • <pre>: 定义预格式文本(独占一行 , 常用于定义代码)
  • <abbr>: 定义缩写
  • <acronym>: 定义首字母缩写
  • <address>: 定义地址
  • <bdo>: 定义文字序列显示方向(使用 dir 属性 ltr[左] 和 rtl[右]- )
  • <blockquote>: 定义长的文字引用 (独占一行)
  • <q>: 定义短的文字引用 (双引号)
  • <cite>: 定义作者引用、著作等
  • <dfn>: 定义一个概念(与 cite 类似)
  • <br> (换行符)
  • <hr> (水平线)

转义字符

&nbsp; (空格)
&amp; (&)
&lt; (<)
&gt; (>)
&quot; (”)

实体字符

  • &yen; (¥ 人民币)
  • &euro; (€ 欧元)
  • &copy; (© 版权)
  • &reg; (® 商标)
  • &trade; (™ 商标)
  • &times; (× 乘号)
  • &divide; (÷ 除号)

列表

  • <ui> (无序列表)
  • <ol> (有序列表)
  • <dl> (自定义列表)
  • <dt> (自定义列表的顶级项)
  • <dd> (自定义列表的子项)
  • <li> (有序和无需列表的子项)

盒子

  • <div> (块级盒子,独占一行)
  • <span> (行级盒子,一行可排列多个)
  • <header> (为了阅读方便的顶部盒子)
  • <footer> (为了阅读方便的底部盒子)
  • <nav> (常用于导航链接的盒子)

表单

当我们需要提交数据时就需要用到表单。表单里面是表单组件。HTML提供了一些原始的组件。

标签 描述
form 提交表单元素的区域

属性 属性值 作用
action url地址 指定接收并处理表单数据的后台url地址
method get/post 表单的提交方式
name 名称 用于区分不同的表单域

表单控件的 input 属性

  • type (表单类型)
  • value (元素值)
  • name (表单名称)
  • checked (设置默认选中)
  • maxlength (最大长度)
  • placeholder (提示内容)

input 类型

  • <input type="button"> (按钮)
  • <input type="radio"> (单选框)
  • <input type="checkbox"> (复选框)
  • <input type="file"> (文件上传)
  • <input type="hidden"> (隐藏输入框)
  • <input type="image"> (图像按钮)
  • <input type="reset"> (重置按钮)
  • <input type="submit"> (提交按钮)
  • <input type="text"> (文本输入框)
  • <input type="password"> (密码输入框)

下拉表单

  • <select> (下拉表单)
  • <option> (下拉表单的元素)
  • <optgroup> (下拉表单标题)

select 属性

  • selected (设置默认选中的元素)

文本域

  • textarea (文本域标签)

textarea 属性

  • cols (长度)
  • rows (高度)

Label

在HTML页面中,Label 可作为某一输入控件的焦点。

1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="cn">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<label for="i">点我选中文本框</label><br><br>
<input id="i" type="text">
</body>

</html>
标签 描述
label 用于绑定1个表单元素的焦点选择
label 属性 描述
for 指定的表单元素的 ID

媒体

在HTTML5之前网页播放音频和视频都需要采用 flash 来实现,在HTML5出行后。改变了这个现状。

<audio> 定义音频

  • 属性:
  • src (定义音频路径)
  • controls (设置是否使用播放控制条)
1
<audio src="#" controls="controls"></audio>


<video> 定义视频

  • 属性:
  • src (定义视频路径)
  • controls (设置是否使用播放控制条)
1
<video src="#" controls="controls"></video>

表格

表格常用于梳理内容,这在HTML里很常见。

标签 说明
table 定义1个表格
thead 表格头区域
tbody 表格主体区域
tr 表格行(包含在头和主体内)
th 表格的头单元格(包含在tr里面)
td 表格的子单元格(包含在tr里面)

属性 属性值 说明
align left、center、right 对齐方式
border 数字 边框粗细
cellpadding 像素值 内边距距离
cellspacing 像素值 边框大小
width 像素值/百分比 表格宽度
height 像素值/百分比 表格高度
rowspan 单元格个数 跨行合并单元格
colspan 单元格个数 跨列合并单元格

框架

html 可以存在套娃行为(笑)也就是 html 里套 html。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- <frameset cols="300px" rows="100px">
<frame src="https://blog.glumi.cn" scrolling="yes" noresize="noresize" frameborder="1px" marginheight="20px"/>
<noframes>
<body>
你的浏览器无法处理该内容
</body>
</noframes>
</frameset>
-->
<body>
<frameset cols="300px" rows="100px">
<iframe width="500px" height="500px" src="https://blog.glumi.cn" scrolling="yes" noresize="noresize" frameborder="1px" marginheight="20px"/>
<noframes>
<body>
你的浏览器无法处理该内容
</body>
</noframes>
</frameset>
</body>
</html>

<frameset> (定义一个框架集)

  • 属性:
  • cols (定义框架列的个数)
  • rows (定义框架行的个数)

<frame> (定义于body外的框架)

  • 属性:
  • src (显示的网页)
  • scrolling (是否显示滚动条)
  • frameborder (边框)
  • marginheight (上下外边距)
  • marginwidth (左右外边距)

<iframe> (定于body内的框架)

  • 属性:
  • src (显示的网页)
  • scrolling (是否显示滚动条)
  • frameborder (边框)
  • marginheight (上下外边距)
  • marginwidth (左右外边距)
  • height (定义高度)
  • width (定义宽度)

<noframe> (不支持框架集时,显示的内容)

<body> 你的浏览器无法处理该内容 <script> window.imageLazyLoadSetting = { isSPA: false, preloadRatio: 1, processImages: null, }; </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var e=n.imageLazyLoadSetting.isSPA,i=n.imageLazyLoadSetting.preloadRatio||1,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script><script> window.imageLazyLoadSetting = { isSPA: false, preloadRatio: 1, processImages: null, }; </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var e=n.imageLazyLoadSetting.isSPA,i=n.imageLazyLoadSetting.preloadRatio||1,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script><script> window.imageLazyLoadSetting = { isSPA: false, preloadRatio: 1, processImages: null, }; </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var e=n.imageLazyLoadSetting.isSPA,i=n.imageLazyLoadSetting.preloadRatio||1,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script></body>

需要注意:

<frame><iframe> 框架的主要区别在于 <iframe> 可以定义框架宽高 而<frame>不行

结尾

HTML的基本内容就此结束了,对于 HTML 更的内容,我将后续补充。