1.HTML语法规范
所有标签都包含在<>里,成对出现<></>
单标签<br />
1.1基本语法概述
1.HTML标签是由<>包围的关键词,如<html>
2.HTML标签通常成对出现,例如<html></html>
3.有些特殊的标签必须是单个标签,例如<br />
1.2标签关系
双标签关系可以分为两类:包含关系和并列关系
包含关系
<head>
<title></title>
</head>
并列关系
<head></head>
<body></body>
2.HTML基本结构标签
2.1第一个HTML页面
每个页面都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
结构标签/骨架标签:
<html>/*页面最大的标签,根标签
<head>/*头标签
<title>我的第一个页面</title>
</head>
<body>/*文本内容
我的山楂树之恋
</body>
</html>
head:
title:
2.2基本结构标签总结
3.开发工具
vscode:
1.新建:ctrl+N
2.保存为.html文件
3.ctrl+放大,ctrl-缩小
4.!(英文)就可以生成骨架
5.右键打开网页
3.1文档类型声明标签
文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。<!DOCTYPE html>
这句代码的意思是:当前页面采取的是HTML5版本来显示网页。
注意:
1.<!DOCTYPE>声明位于文档中的最前面的位置,处于标签之前。
2.<!DOCTYPE>不是一个html标签,它就是文档类型声明标签。
3.2lang语言种类
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页。
对文档现实来说,定义为英文也可以显示中文,。。。。
3.3字符集
字符集是多个字符的集合。以便计算机能够识别和存储各种文字
在标签中,可以通过标签的charset属性来规定HTML文档应该使用哪中字符编码。
<meta charset="UTF-8" />
GB2312:简体中文
BIG5:繁体中文
GBK:包含简体和繁体
UTF-8:万国码
4.HTML常用标签
4.1标签语义
标题标签:
段落标签:
4.2标题标签<h1>-<h6>
(重要)
<h1>我是一级标题</h1>/*h-head
重要性递减
特点:
1.文字加粗,字号变大
2.一个标题独占一行
4.3段落和换行标签(重要)
<p>我是一个段落标签</p>
<br />/*换行
4.4文本格式化标签
语义 | 标签 | 说明 |
---|---|---|
加粗 | <strong></strong> 或者<b></b> | 更推荐使用<strong> 标签加粗,语义更强烈 |
倾斜 | <em></em> 或者<i></i> | 更推荐使用<em> 标签加粗,语义更强烈 |
删除线 | <del></del> 或者<s></s> | 更推荐使用<del> |
下划线 | <ins></ins> 或者<u></u> | 更推荐使用<ins> 标签加粗,语义更强烈 |
重点加粗和倾斜
4.5<div>
和<span>
标签
大盒子<div>
小盒子<span>
<div>
<span>
今日价格
<div>这是头部</div>/*div表示分区,分割
<span>今日价格</span>/*span表示跨度,跨距
特点:
1.<div>
标签用来布局,但是一行只能放一个
2.<span>
标签用来布局,一行可以放多个
4.6图像标签和路径(重点)
1.图像标签
<img src="图像URL" />/*单标签
src是<img>
标签的必须属性,它用于指定图像文件的路径和文件名。
图像标签的属性:
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能显示的文字 |
title | 文本 | 提示文本,鼠标放到图像上显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
注意:
1.属性之间用空格隔开
2.路径(铺垫)
(1)目录文件夹和根目录
目录文件夹:普通文件夹,只是存放我们做页面所需要的素材 根目录:打开目录文件夹的第一层相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像位于HTML文件同一级,如<img src="baidu.gif"/> | |
下一级路径 | / | 图像位于HTML文件下一级,如<img src="img/baidu.gif"/> |
上一级路径 | …/ | 图像位于HTML文件同一级,如<img src="../baidu.gif"/> |
4.7超链接标签(重点)
在HTML标签中,<a>
标签用于定义超链接,作用是从一个页面链接到另一个页面
1.链接的语法格式
2.链接的分类
1.链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像<a/>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,他就具有了超链接功能 |
target | 用于指定链接页面的打开方式,其中_self为默认值(本窗口),_blank为在新窗口中打开方式 |
2.链接分类
1.外部链接,例如
2.内部链接:直接连接内部页面的名称即可
3.空连接:#
4.下载链接:文件或压缩包
5.网页元素链接:文本、图像、表格、音频、视频等
6.锚点链接:可以快速定位到页面中的某个位置,
·在连接文本的href属性中,设置属性值为#名字的形式,如`<a href="#two">第2集</a>`
·找到目标位置标签,里面添加一个id属性=刚才的名字,如`<h3 id="two">第2集j介绍</h3>`
5.HTML中的注释标签和特殊字符
5.1注释
注释<!--注释语句--> 快捷键 ctrl+/
5.2特殊字符
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 |  ; | |
< | 小于号 | <; |
> | 大于号 | >; |
& | 和号 | &; |
¥ | 人民币 | ¥; |
© | 版权号 | ©; |
® | 注册商标 | ®; |
° | 摄氏度 | °; |
± | 正负号 | ±; |
X | 乘号 | ×; |
÷ | 除号 | ÷; |
² | 平方 | ²; |
³ | 立方 | ³; |