文章目录
0 前言
HTML是超文本标记语言（HyperText Markup Language）的缩写，它是一种用于创建网页的标准标记语言。HTML使用一系列的标签（tag）来定义网页的结构、内容和样式。浏览器会根据HTML代码来解析和显示网页。在本文中，我们将介绍HTML的基本概念，如元素、属性、标题、段落、链接、图像等，以及如何使用HTML编辑器来编写和运行HTML代码。我们还将介绍HTML的文档结构，如head部分和body部分，以及一些常用的元数据。通过学习本文，你将掌握HTML的基础知识，并能够创建简单的网页。
1 HTML入门
1.1 HTML定义
1）HTML全称：HyperText Markup Language，中文为超文本标记语言。
2）文本：以.txt为后缀的文件/文档。
3）超文本：超出文本（的范围），包含除字符串以外的，例如音频、视频。
4）标记：特殊字符<>。
5）HTML作用：开发网页（网站系统的网站页面）。
1.2 HTML基本结构
<html> //网页的根标签（网页的外层）
<head></head> //网页的头部标签（网页的上层）
<body></body> //网页的体部标签（网页的中层及下层）
</html>
1.3 HTML发展史
1993年HTML诞生，2013年新版本HTML5发布。
1.4 HTML优势
1）知名浏览器都支持H5。
2）市场需求（页面开发中，H5的占有率极高）。
3）跨平台（同一套H5可同时部署在桌面端和移动端）。
1.5 W3C标准
组织结构：
①结构化（XHTML,XML）
②表现化（CSS - - 样式及联表）
③行为化（DOM,ECMAScript - - DOM是文档模型，ECMAScript是JS的前身）
2 基础环境软件
2.1 常用开发H5的软件
1）记事本（性能低）
2）Dreamweaver（一般和PS结合使用）
3）Webstorm（功能组件不突出）
4）HBuilder（简便，直观，适合入门）
5）VSCode（高性能，企业优先考虑使用）
6）IDEA（主攻后端，不擅长前端开发）
2.2 HBuilder的安装及使用
略，详情见Hbuilder 下载与安装教程
3 HTML5常用标签
3.1 HTML标签种类
1）成对标签，例如<head></head>
2）自闭标签，例如<br/>
3.2 HTML5声明
<!DOCTYPE html>
告诉浏览器当前的文档是使用什么样的规范。
注：HTML4.01的声明为<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3.3 HTML标签
1）<title>文档标题标签
<title>HelloWorld</title> //设置文档标题为HelloWorld
2）<meta>元信息标签
<meta charset="UTF-8"> //设置当前文档的字符集为UTF-8，便于浏览器收集字符
3）<h1>标题标签
<h1>h1</h1> //1号标题
<h2>h2</h2> //2号标题
<h3>h3</h3> //3号标题
<h4>h4</h4> //4号标题
<h5>h5</h5> //5号标题
<h6>h6</h6> //6号标题
//从上往下字体大小逐渐减小
4）<p>段落标签
<p>今天是星期二</p> //被段落标签包裹的内容将作为一个新的段落
5）<br/>换行标签
<br/> //仅换行，不分段
6）<hr/>水平线标签
<hr/> //添加水平线分割
7）<strong>加粗标签
<strong>九万<strong> //被加粗标签包裹的内容将会加粗
8）<em>斜体标签
<em>九万</em> //被斜体标签包裹的内容将会变成斜体
9）<img>图像标签
<img src = "img/九万.png" alt = "加载中..." title = "九万的照片" height = "200px" width = "300px"/>
//src：图片的地址
//alt：图像的替代文字（常设为“加载中...”）
//tltle：鼠标悬停显示的文字
//height：图片的高度
//width：图片的宽度
10）<a>链接标签
<a href="demo002.html">跳转</a> //当前窗口跳转
<a href="demo002.html" target="_blank">跳转</a> //新建窗口跳转
<a href="demo002.html" target="_self">跳转</a> //当前窗口跳转
//href:链接所要跳转的地址
//target：默认为_self
11）<a href="#mark">锚标签
<a name = "mark"></a> //跳转标记
<a href="#mark">回到初始位置</a> //跳转链接
//在想要跳转的位置放置跳转标记，再在需要跳转的位置放置跳转链接
//href的值为："#"+"锚标记的name"
12）行内元素与块元素
行内元素与块元素
行内元素：不独占一行，例<a><strong><em>等
块元素：独占一行，例<p><h1>等
扫一扫
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
