一篇介绍了网页的基本结构，那如何编写网页的内容? 前提是要学会HTML标签的用法，本篇主要介绍HTML标签是什么，如何学习，需要大概多长时间学习。
本篇主要基于html5介绍，html5 是最新版的标准，之前的版本可以自己了解下。
HTML 简介
HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言。它是全球广域网上描述网页内容和外观的标准。HTML包含了一对打开和关闭的标记，在当中包含有属性和值。标记描述了每个在网页上的组件，例如文本段落、表格或图像等。
事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它缺少程序设计语言所应有的特征。HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。
一个html标签基本结构如下：
<标签名称 属性="属性值"></标签名称> 或 <标签名称 属性="属性值"/>
有以下特点：
- 由尖括“<”、“>”号包围的标记元素，比如 <html>和</html>就是一对标记。
- 通常是成对出现的，比如 <div> 和 </div>，也有单独呈现的标签，如：<img />、<input/>等。
- 标签对中的第一个标签是开始标签，第二个标签是结束标签；
- 一般成对出现的标签，其内容在两个标签中间，如<h1>标题</h1>。单独呈现的标签，则在标签属性中赋值，如<input type="text" />。
- 网页展示的内容需写在<body>标签中。
- 标签不区分大小写，建议按规范小写。
HTML标签按功能大体可分以下几种类型：
- 构成网页基本架构的标签，比如：<!DOCTYPE>（定义文档类型）、<html>(根标签),<meta>（元信息）、<head> (网页头部区域)、<body> （网页内容区域）。
- 用于引入外部资源及客户端脚本的标签，比如：<link>（外部资源，css样式文件）， <script>（客户端js脚本）。
- 用于描述布局的标签，比如： <div>、<ul>（无序列表）、<ol>（有序列表）、<h1>到<h6>（标题1到6）、<table>（表格）、<footer>（页脚）、<header>（页头）等。
- 用于描述文本格式的标签，比如：<p> (段落)、<strong>(加粗)、<q>（引用）、<span>等。
- 用于引入多媒体资源的标签，比如：<img>、<video>、<audio>等。
- 用于制作表单的标签，比如：<form>(表单),<input>(输入框),<textarea>(文本域)，<select>(下拉菜单),<radio>(单选项),<checkbox>(多选项)等。
- 其它标签（不是很常用的）。
如何学习html的标签用法
没有捷径，需要多看，多练。在这里我不一一介绍每个标签的具体含义及用法，相关语法可以参考以下几个网站：
- https://www.w3cschool.cn/html5/
- https://developer.mozilla.org/zh-CN/docs/Web/HTML
制定一个学习计划,每天坚持下去
要求，每天花费3到5个小时学习，至少1到2周掌握常用的html标签含义及用法，可以按照上面介绍的标签进行分类学习，感谢关注，祝你学习愉快。
览html网页，查看其源代码，可以帮助我们了解该版网页的信息以及架构，每个浏览器都是允许用户查看他们访问的任何网页的HTML源代码的。以下编程狮小师妹就介绍几个常见浏览器的查看网页 HTML 源代码的方法。
谷歌浏览器 Google Chrome
仅查看源代码
方法一
要仅查看源代码，请按计算机键盘上的Ctrl+U。
方法二
右键单击网页的空白部分，然后从出现的弹出菜单中选择“查看网页源代码(V)”。
查看包含元素的页面源
- 打开 Chrome 浏览器，然后浏览要查看其源代码的网页。
- 点击浏览器窗口右上角的“自定义及控制Google Chrome” 图标。
- 在出现的下拉菜单中，选择更多工具(L)，然后选择开发者工具(D)（快捷键：Ctrl+Shift+I）。
- 单击屏幕底部出现的新部分左上角的“元素(Elements)”选项卡。
提示：
在 Chrome 中，按 F12 或 Ctrl+ Shift+I 也会调出交互式开发人员工具。此工具提供了与源代码和 CSS 设置的更多交互，使用户可以查看代码中的更改如何立即影响网页。
火狐浏览器 Mozilla Firefox
仅查看源代码
方法一
要仅查看源代码，请按计算机键盘上的 Ctrl+U。
方法二
右键单击网页的空白部分，然后从出现的弹出菜单中选择“查看页面源代码(V)”。
查看包含元素的页面源
- 打开 Firefox 并浏览您要查看其源代码的网页。
- 单击屏幕右上角的菜单 图标。
- 在下拉菜单中选择Web开发者，然后从展开的菜单中选择切换工具箱（快捷键：Ctrl+ Shift+I）。
- 单击显示在屏幕底部的部分左上角的“查看器”选项卡。
提示：
在 Firefox 中，按 F12 或 Ctrl+ Shift+I也会调出交互式开发人员工具。该工具提供了与源代码和 CSS 设置的交互，使用户可以实时查看代码中的更改如何影响网页。
查看页面的部分源代码
- 突出显示网页中您要查看其源代码的部分。
- 右键单击突出显示的部分，然后选择检查元素(Q)。
提示：
您可以使用 Firebug 附加组件查看和编辑页面的源代码，并通过浏览器实时查看更改。
微软 Edge
仅查看源代码
方法一
要仅查看源代码，请按计算机键盘上的Ctrl+U。
方法二
右键单击网页的空白部分，然后从出现的弹出菜单中选择“查看页面源代码(V)”。
查看包含元素的页面源
- 打开 Microsoft Edge 并浏览您要查看其源代码的网页。
- 点击屏幕右上角的设置和更多 图标。
- 将鼠标移到更多工具(L)在下拉菜单中，在展开的菜单选择开发人员工具(D)。
- 单击屏幕右侧出现的窗口顶部的“元素(Elements)”选项卡。
提示：
在Microsoft Edge中，按F12或 Ctrl+ Shift+I 也会调出交互式开发人员工具。该工具提供了与源代码和 CSS 设置的交互，使用户可以实时查看代码中的更改如何影响网页。
IE浏览器 Microsoft Internet Explorer
仅查看源代码
方法一
要仅查看源代码，请按计算机键盘上的Ctrl+U。
方法二
右键单击网页的空白部分，然后从出现的弹出菜单中选择查看源(V)。
查看包含元素的页面源
- 打开 Internet Explorer 并浏览您要查看其源代码的网页。
- 单击右上角的工具 。
- 从下拉菜单中选择F12开发人员工具。
- 单击开发人员工具菜单左上角的 DOM 资源管理器 选项卡。
提示：
在 Internet Explorer 中，按 F12 会弹出 DOM 工具。该工具提供了与源代码和 CSS 设置的交互，使用户可以查看代码中的更改如何立即影响网页。
360安全浏览器
仅查看源代码
方法一
要仅查看源代码，请按计算机键盘上的Ctrl+U。
方法二
右键单击网页的空白部分，然后从出现的弹出菜单中选择“查看网页源代码(V)”。
查看包含元素的页面源
- 打开 360 安全浏览器，然后浏览要查看其源代码的网页。
- 点击浏览器窗口右上角的打开菜单图标。
- 在出现的下拉菜单中，选择更多工具(L)，然后选择开发者工具(D)（快捷键：Ctrl+Shift+I）。
- 单击屏幕底部出现的新部分左上角的“元素(Elements)”选项卡。
提示：
在 360 安全浏览器中，按 F12 或 Ctrl+ Shift+I 也会调出交互式开发者工具。此工具提供了与源代码和 CSS 设置的更多交互，使用户可以查看代码中的更改如何立即影响网页。
如何关闭源代码页或工具
查看完网页上的源代码后，您可能想要退出或关闭它。关闭源代码取决于您用来打开源代码的方法。
- 如果您使用了Ctrl+U 方法（Edge 除外）或右键单击方法，请关闭在浏览器窗口顶部打开的新选项卡。
- 如果您使用过开发人员方法（使用 F12 或Ctrl+ Shift+I），请再次按相同的键，或单击工具窗口右上角的图标。
使用在线工具查看源代码
除了使用浏览器外，还有一些在线工具可让您查看任何网页的源代码。这些工具可能会有所帮助，因为大多数工具都可以格式化，样式化和突出显示代码，以使其易于阅读。
以上就是编程狮W3Cschool为你整理的关于《如何在浏览器账中查看网页的HTML源代码？》的全部内容，希望对你有所帮助~
、系统结构：
① B/S架构：Browser/Server（浏览器/服务器的交互形式。）
- Browser支持的语言：HTML、CSS、JavaScript；S是服务器端Server支持的语言有：C、C++、Java等
- B/S架构系统有什么优点和缺点？ 优点：升级方便，只升级服务器代码即可，维护成本低。缺点：速度慢、体验不好、界面不炫酷
- 企业大部分使用B/S架构
- B/S架构的系统代表有：京东、百度、天猫等
② C/S架构：Client/Server（客户端/服务器的交互形式。）
- C/S架构的优点和缺点？
- 优点：速度快、体验好、界面炫酷（娱乐性多数是C/S架构）
- 缺点：升级麻烦、维护成本较高。
- C/S架构的系统代表有：QQ、微信、支付宝等
2、 HTML概述
① 什么是HTML？② 怎么开发HTML？③ 怎么运行HTML?
- ① HTML：Hyper Text Markup Language（超文本标记语言）
•由大量的标签组成，每一个标签都有开始标签和结束标签。
•超文本：图片、声音、视频等
- ② HTML开发使用普通的文本编辑器就行，创建扩展名是.html或.htm
•编辑器有：HBuilder、vscode等
③ 直接采用浏览器打开HTML文件就能运行
④ HTML是谁制定的？
•W3C制定了HTML的规范：每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码
•HTML规范目前最高的版本是：HTML5.0，简称H5
•我们现在主要学的HTML4.0（基本用法）
- 为了方便中国Web前端程序员开发，提供了大量帮助文档。为开发提供方便。
•w3school：先出现的，和W3C无关
•w3cschool：后出现的，和W3C无关
•W3C制定了很多规范：HTML/XML/http协议/https协议……
3、 第一个HTML
4、基本标签
- p：段落标记
- h1~h6：标题字，与word的标题字相同
- br：换行标记（独目标记）
- hr：横线（独目标记）
- color：横线颜色
- width：横线宽度（可以px和%）
- pre：预留格式
- del：删除字
- ins：插入字（有下划线）
- b：粗体字
- i：斜体字
- sup：上标
- sub：下标
- font：字体标签
- color：字体颜色
- size：字体大小（1~7）
页面效果图：
5、实体符号：为了避免和标签冲突，所以需要使用实体符号
- <：<
- >：>
- 空格：
- 注：html中按多个空格键，在网页中只显示一个空格。
6、HTML表格
- table：表格
- tr：行
- td：列
- th：列（比td加粗居中）
- 合并行：rowspan（一个格占两个位置）
- 注：row合并的时候，删除下面的单元格
- 合并列：colspan（一个格占两个位置）
- 注：col合并的时候，删除哪个没有要求
7、thead、tbody、tfoot标签
- thead、tbody、tfoot不是必须的，便于后期JS编写。
8、body的背景颜色和背景图片
- bgcolor：背景色
- background：背景图片
- 背景图片在背景色的上面
9、img标签
- src：图片的路径
- 只设置width，height会等比例缩放
- 只设置height，不起作用
- title：鼠标悬停时显示的信息
- alt：设置图片加载失败时显示的提示信息
10、 超链接或热链接
- href：hot references 热引用；
- 后面一定是一个资源的地址。
- 后面的路径可以是绝对路径也可以是相对路径，可以是网络某个资源的路径。
- target：
- _blank：新窗口
- _self：当前窗口（默认）
- _top：顶级窗口
- _parent：父级窗口
超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
11、request与response的概念
- request：浏览器向服务器发送数据（请求）
- B --》S
- response：服务器向浏览器发送数据（响应）
- S--》B
12、列表
- 有序列表：ol
- type：1、A、a、I、i
- 无序列表：ul
- type：circle（○）、square（□）、disc（●）
13、表单（重点）
- action：写提交的URL地址
- method：默认get；还有post
- 表单有什么用？
- 答：收集用户的信息。表单展现之后，用户填写表单，点击提交。 （submit）
- 怎么画一个表单？
- 答：用form标签
- 一个网页可以有多个表单form
- 表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址。
- action属性用来指定数据提交给哪个服务器
- action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
- http://192.168.111.3:8080/oa/save 这是请求路径，
- 表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
- input中的type取值:
- radio：单选控件
- checkbox：多选控件
- submit：提交控件
- reset：重置控件
- button：普通控件
- text：文本控件
- password：密码控
- file：文件控件
- 上传文件专用
- hidden：隐藏域
- 网页上看不到，但是表单提交的时候数据会自动提交给服务器。
- input中的value属性用来指定按钮上显示的文本信息。
- 超链接a与表单form的区别？
- 答：表达form可以收集信息，而超链接a无法收集信息。
- 表单提交里面的按钮input中属性必须定义name，不然提交不了。
- 表单是以什么格式提交数据给服务器的？
- 格式：action?name=value&name=value&name=value..
- HTTP协议规定的，必须以这种格式提交给服务器
- java中String split('&');
- 重点强调：表单项写了name属性的，一律会提交给服务器。不想提交就不要写name属性。
- 文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
- 当name没有写的时候，该项不会提交给服务器
- 但是当value没有写的时候，value的默认值是空字符串"",将空字符串提交给服务器。java代码得到的是：String s = "";
效果图：
地址栏提交的信息：
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性；&position=ln&myFile=&myHidden=
14、表单的说明：
- ① 用户手动输入的文本框，都不需要给value赋值
- ② textarea没有value属性
- ③ radio、checkbox默认选项需要使用，checked="checked"（简写：checked）
- ④ select中的option属性：• selected="selected" 为默认选中 •size：显示条目数量
- multiple="multiple" 支持多选(select的属性)
- ⑤ input的属性
- readonly和disabled：
- 都是只读不能修改
- 数据不会提交
- maxlength：设置文本框中输入的字符数量。
15、HTML中的结点
- 在HTML文档中，任何元素（结点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
- 注意：表单提交数据的时候，只和name有关系，和id无关
- id有什么作用？
- javascript语言：可以对HTML文档中的任何节点进行增删改操作。
- 获取节点时，通常通过id来获取节点
- HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id（DOM树）
16、div和span
- div和span有什么用？
- div和span都可以称为图层。
- 有什么用？
- 图层的作用为了保证页面可以灵活的布局。
- div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
- div和span的区别？
- di独占一行
- span不会独占一行
