HTML5简明教程系列之HTML5基础（一）
打工人是世界上最难的人，打工人同样是世界上最勇敢的人。过几天有个任务关于HTML，但是之前根本没写过HTML啊，又要开始学习了，看到同事一个一个的下班，想哭。那就把自己学习HTML的过程写出来吧。本期是简单的HTML基础概述，大概包括HTML的介绍、语法、一些小的demo展示，感兴趣就进来看看吧。
目录
一、HTML基础
二、HTML常用标签
2.1 HTM标签
2.2 HTML元素
2.3 HTML 常见标签种类
2.4 容器标签（div 和 span）
2.5 HTML列表
2.6 HTML样式
2.7 Demo小样
三、总结
一、HTML基础
大家都知道HTML是编写网页的语言，而网页时基于HTTP协议运作的，HTTP协议也是经过了长久发展，这是HTTP的简介：
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。1960 年美国人 Ted Nelson 构思了一种通过计算机处理文本信息的方法，并称之为超文本（Hypertext）,这成为了 HTTP 超文本传输协议标准架构的发展根基。Ted Nelson 组织协调万维网协会（World Wide Web Consortium）和互联网工程工作小组（Internet Engineering Task Force ）共同合作研究，最终发布了一系列的 RFC，其中著名的 RFC 2616 定义了 HTTP 1.1。
我们在电脑上打开网页输入网址的过程，本质上是我们连接到一个远端服务器，服务器下发给我们资源（图片、视频、音频等等），其实这个服务器谁都可以搭建，你甚至可以在自己的windows主机上建立一个站点。不过不能承受太大的访问量。当然，再大的服务器也都有满载的时候，比如新浪微博经常也被刷爆，淘宝过年打广告后也会崩溃（我在想为啥双11它不崩溃？不扯皮了）。
客户端访问服务器，服务器会返回一个状态码，常见的状态码如下，其中404 NOT Found大家再熟悉不过了，网页资源不见了：
- 200 ：成功。
- 400 ：客户端请求有语法错误，服务器端不能理解。
- 401 ：该请求可能未经过授权。
- 403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。
- 404 ：该资源没找到。
- 500 ：服务器端发生了一个不可预知的错误。
- 503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常。
那么究竟什么是HTML呢？看下面。
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。 它不是一种编程语言，而是一种标记语言。
开门见山，一个网页的基本结构：
<!DOCTYPE html>
<html><head><title>HTML 简介</title></head><body></body>
</html><!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。html 标签即根元素，此处表示文档的开始。head 标签是网页的头部，设置网页的相关信息。title 标签设置网页标题。body 标签定义文档的主体，也就是我们的主要内容。
它的运行效果：
HTML的注释是这样的：
<!-- 在此处写注释 -->这就是HTML的基础信息，怎么样，简单吧。
二、HTML常用标签
在介绍HTML使用前，请您准备好一个能够写HTML并且运行它的东西，其实一个文本编辑器+一个IE浏览器就够了，就是这么强大。不过这里我建议使用VSCode。VScode给不同类型变量都分配了不同的颜色，而且还有提示，真是太适合新手小白有木有！
2.1 HTM标签
超文本标记语言标记标签通常被称为 HTML 标签，HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，例如 <body> 和 <BODY> 表示的意思是一样的，都代表“主体”，不过大家都习惯使用小写，什么都大写莫名给人一种严肃感，一点都不快乐。
双标签：
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名></标记名>常见的双标签有：
<html></html> <head></head> <title></title> <body></body> <h1></h1> <p></p> <div></div> <span></span> <a></a> <ul></ul>eg：
<a href="https://www.lanqiao.cn">实验楼</a>
单标签 ：
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
<标记名/>常见的单标签:
<br /> <!--换行--> <hr /> <!--水平分隔线--> <meta /> <img />
标签的关系:
嵌套关系：
<head><title> </title> </head>并列关系：
<head></head> <body></body>
2.2 HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
eg：
<p>I Love You</p>这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签
<p>，以及一个结束标签</p>。元素内容是：I Love You。
2.3 HTML 常见标签种类
h 系类标签：
h标签有六种h1，h2，h3，h4，h5，h6，它代表着我们的标题。<!DOCTYPE html> <html><head><title>HTML 简介</title><meta charset="utf-8" /></head><body><h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6></body> </html>运行结果：
p 标签：
p标签是我们的文本标签。删掉上段代码<body>标签里的内容，把下面的内容放到<body>标签里面去。<p>文字</p> <p>文字</p>运行结果：
图片标签：
HTML 的图像是通过标签
<img>来定义的。 语法:<img src="图片地址"/><p>我的老婆大人IU：</p> <img src="C:\Users\liubw\Desktop\IU.JPG" />运行结果（原谅我这里不要脸了）：
a 标签 ：
<a>标签是超链接标签，意思就是我们点击它可以跳转到一个网页。eg：
<a href="https://www.bobowen.top/">我那荒废的博客</a>运行结果、点进去：
div 标签：
<div>标签是一个块级元素，块级元素占据其父元素（容器）的整个空间，你可以把它想成一个盒子。<div>能够设置其宽高。eg：
<div style="width:200px;height:200px;background:pink">块级元素</div>运行结果：
换行标签和空格字符：
在浏览器显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。如果希望在不产生一个新段落的情况下换行，可以使用
<br/>标签。如果想使用空格的话可以使用 字符。eg：
<body><p>这是一段文字 前面有很多空格但是只显示一个</p><p>这是一段文字 用了空格字符</p><br /><p>上面是换行符</p> </body>运行结果：
水平分割线 ：
<hr/>标签用于在 HTML 页面中创建一条水平线。eg：
<body><hr /><hr /><hr /> </body>运行结果：
2.4 容器标签（div 和 span）
标签
标签 <div> 可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符。
span 标签
标签 <span> 通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。
eg：
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" /><style>#box {width: 200px;height: 200px;background: red;}</style></head><body><div id="box">这是div标签，自动换行</div><input type="text" /><span>这是span标签，不自动换行</span></body> </html>运行结果：
2.5 HTML列表
HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。
无序列表与有序列表：
无序列表是一个项目的列表，此列项目使用实心圆、空心圆、方块进行标记，无序列表使用
<ul>标签。同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。eg：
<p>无序列表</p> <ul><li>列表项1</li><li>列表项2</li> </ul><p>有序列表</p> <ol><li>列表项1</li><li>列表项2</li> </ol>运行结果：
自定义列表（dl）：
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。自定义列表的列表项前没有任何项目符号。eg：
<h2>一个自定义列表：</h2> <dl><dt>春天</dt><dd>是万物复苏，百花争艳的季节</dd><dt>夏天</dt><dd>是夏日绵绵，烈日炎炎的季节</dd> </dl>运行结果：
2.6 HTML样式
HTML 样式实例 - 背景颜色：
通过
"background-color"属性值的设置来给背景设置颜色。eg：
<html><body><p style="background-color:red">实验楼</p></body> </html>运行结果：
HTML 样式实例 - 字体、颜色和尺寸 ：
通过对
font-family属性值的设置来设置字体，通过对color属性值的设置来设置颜色，通过对font-size属性值的设计来设计字体大小。eg：
<html><body><p style="font-family:arial;color:green;font-size:50px;">我的天空星星都亮了</p></body> </html>运行结果：
HTML 样式实例 - 文本对齐：
上面的标题“实验楼”相对于页面居中对齐。
eg：<html><body><h1 style="text-align:center">实验楼</h1></body> </html>运行结果：
2.7 Demo小样
来吧，展示：
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title></head><body><div style="width:500px;height:300px;background-color:pink"><h1 style="text-align:center">Thomas_LBW的博客</h1><p style="text-align:center">学习就上<a href="https://blog.csdn.net/weixin_44120785/">homas_LBW</a></p><hr /><p>在这你可以：</p><ul><li>学习C++</li><li>学习HTML</li><li>学习Linux、Windows操作系统</li><li>...</li></ul></div></body>
</html>运行结果：
正巧早上看到热榜上的爱心HTML给大家把链接贴过来：
【HTML实战】把爱心代码放在自己的网站上是一种什么体验？_花无缺~的博客-CSDN博客
三、总结
讲道理HTML其实不能算一门正经编程语言，应该说它是一个资源调集器，它以浏览器内核为依托，可以随意调用它可以访问到的任何资源。这篇算是它的基础，后续还会更新它更高阶的玩法，等我哦。
HTML5简明教程系列之HTML5基础（一）相关推荐
- HTML5简明教程系列之HTML5 表格与表单（二）
HTML的第二弹也来了,最近高产似母猪,状态也不错,代码来源为实验课.本期主要内容为:HTML表格与DIV应用.HTML表单.上期基础部分的传送门: HTML5简明教程系列之HTML5基础(一)_Th ...
- css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
- ArcGIS Pro 简明教程（2）基础操作和简单制图
ArcGIS Pro 简明教程(2)基础操作和简单制图 By 李远祥 本章主要介绍ArcGIS Pro如何加载数据并进行简单的地图制作,以基本的操作为主. 上一章节介绍过,ArcGIS Pro是可以直 ...
- html文档中strokestyle,HTML5简明教程-1.1.2.HTML5Canvas参考手册 之 笔触strokeStyle
今天介绍canvas的另一个重要属性strokeStyle,strokeStyle属性定义了我们在canvas画布上进行图形绘制时的"笔触",简单点说,就是定义了我们的画笔样式.另 ...
- VTK教程系列：VTK基础及应用开发教程
由于OpenCV不能使用,只能使用VTK库的图像处理库,暂时还没有找到其他可以全面替代的库: CSDN东灵工作室:http://blog.csdn.net/www_doling_net/article ...
- HTML5语言教程:渐进使用HTML5语言识别
一.本不想写此文 HTML5语音识别(现在一般用在搜索上),目前相关介绍还是挺多的.为何呢?因为很简单! 下面是个普通文本框: <input /> 而稍稍多敲几个字母,其就变成了支持HTM ...
- javascript教程系列-1.JavaScript基础
欢迎加入前端交流群来:749539640 转载请标明出处! JavaScript概述 一个页面分成三个部分,结构,样式,行为. HTML代表了页面的结构(骨架),CSS代表了页面的样式(皮肤), ...
- stm32简明教程系列（二）----GPIO(上)八种模式的区别与应用场合
一.概述 GPIO全称为通用输入/输出端口.是stm32用于输出信号,输入信号的通道.他有以下八种模式: 输入方式 浮空输入 GPIO_Mode_IN_FLOATING 上拉GPIO_Mode_IPU ...
- 【从零入门 Web 前端】HTML5 + CSS 简明教程
HTML + CSS 就是当代网页的基石.全世界的网站,无论其服务器端的语言是什么,前端都使用了 HTML + CSS. 随着互联网行业的快速发展,前端这一职位也越来越火热,前端工程师的高薪资,也让越 ...
最新文章
- [私]-图片backup
- 本地分发_2020年分发Python应用程序的12个热门途径
- DB2 pureScale在线备份恢复实例1
- ServerBootstrap
- 复制K2流程图实现记录
- 单例模式、使用getInstance()方法的原因及作用
- Java动态代理简述
- C++ Copy Elision
- python学了真的很有用吗-会Python的人工作不会太差？编程课真的有必要学吗？
- js读取excel表格
- 【源码】高精度31波段音频均衡器
- 分享5款免费且超赞的SSH工具
- win7打开桌面计算机很慢,鼠标右键刷新桌面很慢怎么办？Win7右键刷新反应特别慢的解决方法...
- 淘宝618超级红包可以叠加使用吗?
- springboot集成Appollo动态配置
- Android案例手册 - 定位点圆形水波纹和椭圆水波纹
- lcy mysql爆破_mysql
- 婚礼视频mv短片制作，3分钟快速教程！教你制作婚礼开场创意视频
- java 管理 程序设计_用java编程设置管理的用户登录
- 服务器维修合同样本,最新在线维修服务协议