目录结构

HTML基础和高级标签汇总

文章快速说明索引
HTML 的基础标签
HTML 的高级标签

文章快速说明索引

学习目标：

可视化和部分交互功能的前端开发内容的学习：HTML CSS JavaScript等前端三大基础语言将产品UI设计稿实现成网站产品。

学习内容：（详见目录本系列学习路线，待持续更新…）

1、HTML CSS JavaScript等前端三大基础语言（对应：结构、样式和行为）
2、jQuery、network、CSS3和H5
3、es6、webpack4.0、小程序
4、设计模式、Vue、vuex、VUE源码和React
5、Node.js、数据库

学习时间：

2020年10月6日13:31:08 - 2020年10月7日03:08:02

学习产出：

1、HTML基础和高级标签回顾
2、CSDN 技术博客前端开发第1篇

在一套完整的项目开发体系中：

1、产品经理设计PRD（即：产品原型）
2、UI 会根据产品原型做出PSD（即：产品图样）
3、前端开发人员会根据PRD PSD进行项目开发（涵盖PC端或移动端网页，处理视觉和交互问题）
4、后台开发则负责server的数据逻辑和业务逻辑（即：研究如何更好地把数据传递给前端开发）

从广义上来讲：所有用户终端产品但凡是与视觉和交互相关的内容都是前端开发的范畴，前端技术主要应用的领域和场景如下：

1、网页网站
2、各种application
3、微信小程序
4、移动端H5小游戏
5、大数据可视化
6、VR虚拟现实
… …

HTML 的基础标签

我们这里使用的开发IDE是 Nodepad++和VS code，其使用可以参见我的博客：VScode Remote-SSH远程编辑和调试Linux文件代码。VS code的优势如下：

支持系统：

1、Windows、Linux和OS X
2、内置JavaScript、TypeScript和Node.js支持

开发效率：

1、具有丰富的插件生态系统

打开效率：

1、适用于中大型项目

注：记事本就足够了，学习才重要！

超文本标记语言（即：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言，可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。它是由一对对的标签组成，其中的每一对标签都有其对应的特殊功能，如下一对标签：

Hello SongBaobao

<font color=gold size=4  face="楷体"> Hello SongBaobao</font>

解释一下：
HTML 标记标签通常被称为 HTML 标签 (HTML tag)：

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

在上面诸多标签里面：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素，在一个HTML文件里面根标签也只能有一个
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8（设置给浏览器看的）
<body> 元素包含了可见的页面内容（展示对外看的）
<title> 元素描述了文档的标题
<h1> 元素定义一个大标题
<p> 元素定义一个段落：使内容成段展示

下面来看一个简单的例子：

1、<html>根标签
2、<head>结构化标签
3、<body>结构化标签
4、<title>标签和 <meta>标签

1、<h1>标题标签

1、<del>删除线标签
2、<address>地址标签：成段展示并斜体
3、<strong>加粗标签
4、<em>斜体标签
5、<u>下划线标签

分组标签：<div>和<span>

上面的代码如下：

<html lang='en,zh'>
<head><meta charset="utf-8"><meta content="博客" name="keywords"><meta content="计算机 数据库 后台开发" name="description"><title>weixin_43949535的博客(https://rng-songbaobao.blog.csdn.net/)</title></head>
<body><center><table><font color=gold size=5  face="楷体"><strong><u> Hello SongBaobao </u></strong></font></table></center><font color=gold size=6  face="楷体"><strong><em><u> 加粗并斜体 </u></em></strong></font><hr><div style="color:#EA0000"><strong>加粗</strong><em>斜体</em>        </div><div style="color:#EA0000"><strong>加粗</strong><em>斜体</em>      </div><hr><span style="color:#EA0000"><strong>加粗</strong><em>斜体</em></span> <span style="color:#EA0000"><strong>加粗</strong><em>斜体</em></span><hr><strong style="color:#EA0000">加粗</strong><em style="color:#EA0000">斜体</em><hr><del><font color=gray size=6  face="楷体"><strong><em> 一个简单的删除线 </em></strong></font></del><address>北京市海淀区清华大学 清华大学计算机科学与技术系</address><p><em>北京市海淀区清华大学 清华大学计算机科学与技术系</em></p></body></html>

如上最后介绍的是HTML 分组标签：

标签	详细描述
`<div>`	定义了文档的区域，块级 (block-level) 独行展示
`<span>`	用来组合文档中的行内元素，内联元素(inline)

其功能：通过 <div> 和 <span>作为容器将元素组合起来，以达到 结构化分块和绑定化操作 的功能。

HTML 的高级标签

注：在HTML里面，空格和换行是作为 英文单词 分割的符号。若是需要使用在文本当中，需要做相关的转化！示例如下：

或者如下：

注：这里因为你的单词没有进行分割，无法确定哪些字母组成一个单词，故而最后导致超出容器的范围！

下面是空格回车的文本的展示形式：

OK，下面正式进入我们的高级标签的学习：

1、有序列表：有5种方式：1 a A i I，分别代表数字字母和拉丁顺序

ordered list

倒着排序：

固定开始数值：

2、无序列表

3、图片img标签
其src属性的值有：1、URL ；2、本地绝对路径；3、本地相对路径

但是如果链接地址出现问题的时候，图片是刷不出来的。这个时候alt 图片占位符的作用就出来了，便于后续调试等

注意下面第三个图片，当我把鼠标放置其上会有一个Tsinghua University的提示。这个就是title 图片提示符的作用！

4、超链接、锚点、打电话和协议限定符： a标签
其href 是一个指向的目标链接

如下，我们来修改一下百度的主页，估计李总看到了要骂娘：

示例如下：

上面是我按住 Ctrl键进行的跳转，倘若直接点击图片则会在本页跳转！target="blank" 下面是直接在新的标签页打开内容：

而我们的a标签最开始的功能：是作为锚点使用的 anchor 示例如下：

<html lang='en,zh'>
<head><meta charset="utf-8"><meta content="博客" name="keywords"><meta content="计算机 数据库 后台开发" name="description"><title>weixin_43949535的博客(https://rng-songbaobao.blog.csdn.net/)</title></head>
<body><!-- 超链接 --><div id="id1" style="width:100px;height:100px;background-color:skyblue;">目录一的部分</div><font color=gold size=6  face="楷体"><strong><em><u> 苟利国家生死以</u></em></strong></font>  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="id2" style="width:100px;height:100px;background-color:gold;">目录二的部分</div><font color=gold size=6  face="楷体"><strong><em><u> 岂因祸福避趋之</u></em></strong></font><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a style="display:block;position:fixed;bottom:100px;left:10px;border:2px solidblack;height:50px;width:200px;background-color:#fcc;" href="#id1">目录1</a><a style="display:block;position:fixed;bottom:50px;left:10px;border:2px solidblack;height:50px;width:200px;background-color:#ffc;" href="#id2">目录2</a></a>
</body></html>

如下，就可以进行一个点击然后相应的跳转！

a标签的第三个功能就是用来：打电话和发邮件的示例如下：

倘若这个是在手机上运行，那么是可以打一个电话号码的！发邮件也是一样的（调用相应的程序来执行相应的操作）：

OK，下面来看其第四个功能：协议限定符如下的标签将会强制运行JavaScript的动作：

5、发送数据： form标签
前端数据发送给后端

下面就是一个发送成功的示例：（看URL的变化）

下面看一下选择标签：单选

<html lang='en,zh'>
<head><meta charset="utf-8"><meta content="博客" name="keywords"><meta content="计算机 数据库 后台开发" name="description"><title>weixin_43949535的博客(https://rng-songbaobao.blog.csdn.net/)</title><style type="text/css">input{border:2px solid skyblue;}</style></head>
<body><!-- form 标签 --><form method="get" action=""><p>username : <input type="text" name="username"></p><p>password : <input type="password" name="password"></p><input type="submit" value="login"><hr>下面哪一种是你喜欢的水果:1.												

											
HTML的学习心得和知识总结（二）|HTML基础和高级标签汇总相关推荐	

								C++的学习心得和知识总结（十八）|基于EasyX实现 2048游戏 项目(C/C++版)
		目录结构 注:提前言明 本文借鉴了以下博主.书籍或网站的内容,其列表如下: 1.网络热门游戏 2048,点击前往 2.EasyX官方链接,点击前往 3.中国色谱 颜色代码对照表(RGB多用于easyX ...
		
						C++的学习心得和知识总结（十六）|基于EasyX实现小甲鱼Python飞机大战项目(C++版)
		目录结构 注:提前言明 本文借鉴了以下博主.书籍或网站的内容,其列表如下: 1.小甲鱼Python项目 – 飞机大战 2.本文使用的掩码图生成工具 自动生成遮罩图的程序,点击前往 3.EasyX官方链 ...
		
						C++的学习心得和知识总结 第十五章（完美结束）内容极为重要
		本章重点:C++经典的例题大全解这一部分内容,非常重要.主要包括C++常见的经典例题.以及本人学习C++ primer的学习心得.和C++最为重要的核心知识点(设计模式.智能指针.STL等). 文章目 ...
		
						Oracle的学习心得和知识总结（二十五）|Oracle数据库Real Application Testing之真实应用测试概述白皮书
		目录结构 注:提前言明 本文借鉴了以下博主.书籍或网站的内容,其列表如下: 1.参考书籍:<Oracle Database SQL Language Reference> 2.参考书籍:& ...
		
						PostgreSQL的学习心得和知识总结（一百一十二）|语法级自上而下完美实现PostgreSQL数据库的 EXCHANGE PARTION 的实现方案
		目录结构 注:提前言明 本文借鉴了以下博主.书籍或网站的内容,其列表如下: 1.参考书籍:<PostgreSQL数据库内核分析> 2.参考书籍:<数据库事务处理的艺术:事务管理与并发 ...
		
						PostgreSQL的学习心得和知识总结（一百二十四）|深入理解PostgreSQL数据库开源扩展pgreplay的安装说明和使用场景
		目录结构 注:提前言明 本文借鉴了以下博主.书籍或网站的内容,其列表如下: 1.参考书籍:<PostgreSQL数据库内核分析> 2.参考书籍:<数据库事务处理的艺术:事务管理与并发 ...
		
						C++的学习心得和知识总结 第十二章（完）
		本章重点:C++11新特性 以及 多线程的使用 文章目录 本章重点:C++11新特性 以及 多线程的使用 第一节:C++11的新特性总结 第二节:Thread类编写C++多线程 程序 第三节:线程间互 ...
		
						PostgreSQL的学习心得和知识总结（二十四）|CentOS环境 配置生成coredump程序崩溃内存转储文件及gdb调试core文件
		目录结构 注:提前言明 本文借鉴了以下博主.书籍或网站的内容,其列表如下: 1.使用GDB分析core dump文件,点击前往 2.详解coredump,点击前往 3.PostgreSQL数据库仓库链 ...
		
						DSA 经典数据结构与算法 学习心得和知识总结(四) | AVL树
		AVL树 从BST的角度看AVL AVL的定义及性质 AVL树的结构定义 AVL树的旋转算法 左左情况---右旋 右右情况---左旋 左右情况---左右旋 右左情况---右左旋 AVL树的遍历操作 A ...
		
		

					
最新文章	

						网易云游戏来了：手机电脑电视随时接入可玩，高流畅度低延迟，还能跨终端无缝切换...
		
						Runnable和Thread的区别
		
						POJ3009-Curling 2.0
		
						web项目怎么连接云服务器,web项目怎么连接云服务器
		
						在SAP ABAP 里consume webservice的全过程
		
						java面向对象程序设计(jdk1.6)第三版 目录页数_Java面向对象程序设计/普通高等教育计算机规划教材简介，目录书摘...
		
						win7重装系统时，使用PE工具箱进入系统看到的“C盘变成0.2G，D盘变成48G左右”这是什么回事？...
		
						安装XDS110驱动时系统找不到指定文件
		
						机器学习工程师岗位面试经历之游戏行业
		
						推荐很好用的Goroutine连接池
		
						Intel笔记本低压版CPU性能对比分析
		
						mysql的索引（一）
		
						多尺度卷积稀疏编码的无监督迁移学习
		
						php 使用PayPal 支付
		
						d3中元素拖拽drag实例
		
						间隔一段时间重复自动登录网站、定时自动登录网站的软件 —— 定时执行专家，无需复杂编程，简单配置即可使用
		
						中国帆船拖车市场深度研究分析报告
		
						爬虫增加代理池：使用稳定第三方芝麻代理IP 教程（详细可用）
		
						原码一位乘、补码一位乘（校正法、布斯法）、补码两位乘
		
						HTML 微信 获取微信ID,关于微信订阅号获取openid的问题_html/css_WEB-ITnose
		
		
	

热门文章	

									JAVA 石头剪刀布简单实现
			
						两物体的相对速度公式_(1)相对论速度变换公式:(式中v为高速火车相对地的速度.u′为车上的人相对于车的速度.u为车上的人相对地面的速度)....
			
						北大硕士毕业，人大在读博一，IJCAI资深审稿人
			
						乔布斯：去你妹的iTV 老子要iCar！
			
						基于darknet-yolov4训练自己的数据集
			
						名悦集团让车友放心购买车，用好车
			
						计算机的组成原理总结
			
						信噪比python代码实现
			
						Latex如何输入大型的中括号
			
						带死区的PID控制算法