一:工具准备
工具推荐使用vscode:
- 下载地址:
================官网地址 ================
================百度网盘 ================ - 使用默认的扩展程序下载,箱子下载所需要的开发工具
这里给出笔者订阅的扩展程序:
二:认识HTML
①HTML基本语法:
一个HTML文档由一系列元素组成。HTML元素指的是从开始标签到结束标签所有的代码
为了方便理解,将HTML标签语音大致分为基本标签、格式标签、文本标签、图像标签、表格标签和帧标签
一般标签的格式如下
<标签名 属性1=“值” 属性2=“值” 属性3=“值”>内容</标签名>
②HTML文档的基本结构
HTML文档的主要结构可划分为3个部分:网页区…、标头区…、内容区…。
1.用来表示HTML文档,用于识别HTML文档
2.这个里面构成了HTML的开头部分,可以用来写网页的标题,关键词以及内容描述,可以增加网页被显示出来的优先度,一般由专业人士书写
3.这里写入的是HTML文档的主体部分,包含众多的标签
③HTML常用标签
1. <p></p>
段落标签,里面直接写入文字,每个段落会另起一行,要注意的地方有两点,一是它会只保留空格,连续的空格会被替换成一个空格,换行也是如此。第二点就是文本里不能写“<”或者“>”浏览器会误认为这个是表情,如果要写,必须用字符实体,下面给出了部分符号的实体名称。
2.<!-- -->
注释标签,和其他语言的注释没有区别
3.<br />
换行标签,类似于“\n”
4.<div></div>
块,它的作用就是分块,每个块会另起一行,一对div标签中间可以放置文本、图片或其他元素,div通常作为样式的容器
5.<h1></h1>
标题标签,用于显示标题,有h1~h6的标签,超过h6都算是h6
6.<span></span>
区间,span标签的作用是划分区间,通常作为样式的容器,默认不会独立成行,多个区间会在一行上连续显示
7.列表,列表分为无序列表,有序列表和定义列表。
ul代表无需列表,它的作用是为每个列表项显示一个粗点
ol代表有序列表,它的作用是显示每个列表项的序号
用<ul></ul>
或<ol></ol>
定义的时候,列表中的项目用<li></li>
标记
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>这是一个无序列表</li>
<li>下面是一个有序列表</li>
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
</ul>
</body>
</html>
效果:
<dl></dl>
代表定义列表。在<dl></dl>
标签里可以用<dt>
表示项目<dd>
表示描述
例如: