目录
2.走进HTML5
2.1 HTML编写工具VS Code安装过程
2.2 HTML5基本结构
2.2.1 字号标签
2.2.2 换行标签
2.2.3 网页标题设置
2.2.4 文本加粗标签
2.2.5 文本倾斜
2.2.6 添加注释
2.2.7 水平线标签
2.3 插件
2.4 特殊符号显示(字符实体)
2.5 图像标签
2.6 超链接标签
2.6.1 超链接使用:
2.7 行内元素和块级元素
2.8 HTML5优势
3.列表
3.1 列表
3.1.1 无序列表
3.1.2 有序列表
3.1.3 定义列表
3.2 列表语法
3.2.1 无序列表
3.2.1 有序列表
3.2.1 定义列表
1.HTML介绍
HTML,全称为超文本标记语言(Hyper Text Markup Language),是一种用于创建网页的标准标记语言。它由Web的发明者Tim Berners-Lee和同事Daniel W. Connolly于1990年创立,是标准通用化标记语言SGML的应用。HTML是一种基础技术,常与CSS、一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。
HTML文件通常以.html或.htm扩展名结尾,可以被Web浏览器读取并呈现为可视化网页。浏览器使用HTML标签和脚本来解析网页内容,但不会将它们显示在页面上。HTML元素是构建网页的基础,允许嵌入图像与对象,并且可以用于创建交互式表单。它被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。
值得注意的是,HTML不被视为一种编程语言,因为它不能创建动态功能。网页开发人员使用HTML代码来设计浏览器如何显示网页元素,例如文本、超链接和媒体文件。由于HTML被大量用于嵌入超链接,用户可以轻松地在相关页面和网站之间导航和插入链接。HTML也使组织和格式化文档成为可能,类似于Microsoft Word。
HTML5是HTML的最新版本,它在HTML4的基础上进行了改进,增加了一些新的功能和特性,如表单控件、音视频元素、画布(Canvas)等,并且支持CSS3的许多特性。HTML5的文档类型声明<!DOCTYPE html>必须放在文档的头部,以指定浏览器以HTML5标准解析网页。此外,HTML文档中的字符集设置也非常重要,因为它会影响网页的编码和解码过程。
2.走进HTML5
2.1 HTML编写工具VS Code安装过程
首先进入VS Code官方网页
Visual Studio Code - Code Editing. Redefined
我接下来将讲解Windows 64位系统的安装过程
Windows系统进入VS Code官方网页后点击 Download for Windows(下载Windows版),然后即可以下载最新版本的VS Code工具。
如果是其他系统点击Download for Windows右边的箭头下拉框,在里面选择对应的系统即可。
2.2 HTML5基本结构
<html>标签位于HTML5的最前面,用来标识HTML5的开始,</html>标签位于HTML5的最后面,用来标识HTML5文件的结束。
<head>标签可以包含一些辅助性标签。
<body>用于设置文件的背景颜色,文本颜色,超链接颜色,边距等,还有网页的内容。
<html>标签对 双标签
<head>标签对 双标签
<body>标题对 双标签
2.2.1 字号标签
字号:
<h1>~<h6> 双标签
<h1>字号最大,<h6>字号最小
2.2.2 换行标签
换行:
<p>可以实现分段换行,在内容前加<p>,在内容后加</p>即可换行
手动换行<br> 是一个单标签
2.2.3 网页标题设置
网页标题:
<title>与</title>中的标题就是网页的标题
写在<head>代码中
2.2.4 文本加粗标签
<strong>加粗标签(双标签)
2.2.5 文本倾斜
<em>倾斜标签(双标签)
2.2.6 添加注释
<! -- 在此处写注释 -- >
2.2.7 水平线标签
<hr> (单标签)
2.3 插件
插件可以完成一些辅助操作,常用的插件有:
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code是VS Code的中文化插件安装包
live Server是可以让他直接右键运行跳转到网页看效果的插件
2.4 特殊符号显示(字符实体)
空格:
字符实体
大于号:
字符实体 >
小于号:
字符实体 <
引号:
字符实体 "
版权符号:
字符实体 ©
由于大于小于号会跟标签的大于小于号冲突,所以使用特殊符号显示才能显示大于小于号。
空格在页面上的一句话只能显示一个,如果要显示多个要么隔开,要么使用特殊字符 显示。
2.5 图像标签
width图像的宽度
height图像的高度
<img stc="图像地址"/>
图像地址只能选中在文件中的图片
alt 图像不能显示时替代显示的文本
title 鼠标指针悬停时显示的文本
常见的4种图像格式
jpg、png、gif、bmp
2.6 超链接标签
2.6.1 超链接使用:
../可以返回上一层文件夹
<a href="链接地址" target="目标窗口位置">文本或者图像</a>
href用于指定链接目标的URL地址
target用于指定在哪个位置打开链接文档
_self表示在自身窗口打开
_blank表示在新窗口打开
<!--其中href="#ID名"用于指定链接目标的ID名称,再使用相应的ID名称标注-->
<a href="#id名">链接文本</a>
2.7 行内元素和块级元素
独占一行的为块级元素
宽度由自身内容决定,其他标签可以排列在后面,这些叫行内元素
2.8 HTML5优势
- 解决了跨浏览器问题
- 新增特性
- 化繁为简优势
3.列表
3.1 列表
3.1.1 无序列表
始于<ul>标签,每个列表项始于<li>标签。
<li>与</li>之间相当于一个容器,因此可以嵌套其他标签。但是<ul>与</ul>之间只能嵌套<li>标签,列表项使用圆点来标记。
3.1.2 有序列表
始于<ol>标签,每个列表项依旧始于<li>标签。
有序列表有顺序,列表项使用数字来标记。
3.1.3 定义列表
<dl>标签开始每个定义;
列表项以<dt>开始;
每个定义列表项的;
定义以<dd>开始;
定义列表没有顺序,默认没有标记。
定义列表常用于标题下有多个列表项的情况。
3.2 列表语法
3.2.1 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
.....
</ul>
3.2.1 有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
.....
</ol>
3.2.1 定义列表
<dl>
<dt>名词1</dt>
<dd>名词1的解释-第一项</dd>
...
<dt>名词2</dt>
<dd>名词2的解释-第一项</dd>
...
</dl>