HTML基础（上）
1. HTML语法规范
1.1 基本语法概述
HTML标签是由尖括号包围的关键词，例如<html>。
HTML标签通常是成对出现的，例如<html>和</html>，我们称之为双标签，标签对中的第一个标签是开始标签，第二个是结束标签。
有些特殊的标签必须是单标签，例如<br/>,称之为单标签。
1.2 标签关系
-
双标签关系可以分为两类：包含关系和并列关系
包含关系： <head> <title> </title> </head> 并列关系： <head> </head> <body> </body>
2. HTML基本结构标签
2.1第一个HTML网页
-
每个网页都有一个基本的结构标签（也称之为骨架标签），页面内容也是在这些基本标签上书写。 HTML页面也称之为HTML文档。
<html></html>——————HTML标签————页面中最大的标签，我们称之为根标签 <head></head>——————文档头部————注意在head标签中我们必须要设置的标签是title <title></title>————文档标题————让页面拥有一个属于自己的网页标题 <body></body>——————文档主题————元素包含文档的所有内容，页面内容基本都在body中 <html> <head> <title>我的第一个页面</title> </head> <body> 欢迎观看朝阳...晚霞CSDN博客 </body> </html>
3.开发工具
visual studio code （VScode）
！即可以默认创建html骨架
VScode使用
1.双击打开软件
2.新建文件（Ctrl+N）
3.保存（Ctrl+S），注意保存为html文件
4.Ctrl+加号键，Ctrl+减号键 可以缩小放大试图
5.生成骨架结构 ！+Tab
6.右键选择 open in defult browser浏览器打开
3.1 文档类型声明标签
- <!DOCTYPE> 文档类型声明，作用是告诉浏览器使用哪种HTML版本显示网页
- <!DOCTYPE html> 这句话是告诉当前采用的是HTML5版本来显示网页
注意:
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
3.2 lang语言种类
-
用于定义当前文档显示的语言
1.en定义语言为英文 2.zh-CN定义为中文 简单来说定义为en就是英文网页，zh-CN就是中文网页，对于文档显示来说，en也可以显示中文，zh-CN也可以显示英文 3.fr定义为法语
3.3 字符集
字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
在<html>标签中，可以通过<meta>标签的charset属性规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8" />
charset常用的值有：GB2312(简体中文)、BIG5(繁体中文)、GBK(简体和繁体中文)、UTF-8(万国码，基本包含全世界所有需要的字符)
4. HTML常用标签
4.1 标签语义
- 根据标签的语义，在合适的地方添加一个合理的标签，可以使页面结构更清晰
4.2标题标签
HTML提供了6个等级的网页标题，即<h1> - <h6>。
例如：
<h1> 我是一级标题 </h1>
h是单词head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
4.3段落和换行标签
4.3.1 段落
在网页中能够将文字有条理的显示出来，将这些文字分段的显示。在HTML标签中，<p>用于定义段落
例如：
<p>我是一个段落标签</p>
单词paragraph的缩写，意为段落。
4.3.2 换行
HTML中，一个段落中的文字从左到右依次排列，直到浏览器窗口的右端，然后才能换行，若希望在文字中强制换行，需要使用换行标签<br />。
单词break的缩写，意为打断、换行
标签语义：强制换行
特点：
1.<br />单标签
2.<br />标签只是简单的换行，跟段落不一样，段落之间会存在间距
4.4 文本的格式化标签
当文字需要设置粗体、斜体或下划线等效果，此时就需要文本格式化标签
加粗——————<strong></strong>或者<b></b>
倾斜——————<em></em>或者<i></i>
删除线————<del></del>或者<s></s>
下划线————<ins></ins>或者<u></u>
注：推荐使用第一种标签。
4.5 div和 span标签
这两个标签是没有语义的，他们就是一个盒子，用来装内容
例如：
<div>这是头部</div> (独占一行)
<span>今日价格</span>
注：div是分割，分区；span是跨度、跨距。
4.6 图像标签和路径
4.6.1 图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
例如：
<img src="图片的URL"/>———————————————————————图片路径
<img src="图片的URL" alt="图片显示失败"/>————替换文本，图像不能显示的文字
<img src="图片的URL" title="图像提示"/>——————提示文本，鼠标放在图像上，显示的文字
<img src="图片的URL" width="500"/>———————————设置图像的宽度
<img src="图片的URL" height="500"/>——————————设置图像的高度
<img src="图片的URL" border="500"/>——————————设置图像的边框粗细
特点：
1.图像标签可以拥有多个属性，必须写在标签后面。
2.属性之间不分先后顺序，用空格隔开。
3.属性采取键值对的格式，即属性="属性值"。
4.6.2 路径
4.6.2.1 目录文件夹和根目录
目录文件夹：就是普通文件夹，；里面放着页面需要的相关素材，如html文件、照片等。
根目录：打开目录文件件的第一层就是根目录
4.6.2.2 路径
1.相对路径
以引用文件所在的位置为参考基础，而建立出的目录路径
简单来书就是图片相对于HTML页面的位置
同一级路径————————图片文件位于html文件同一级
下一级4.———/————图片文件位于html文件下一级
上一级路径———../——图片文件位于html文件上一级
2.绝对路径
指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径————\
4.7超链接标签
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
4.7.1.链接的语法格式
例如：
<a href="跳转目标" target="目标窗口的弹出方式"> 文字或图像 </a>
两个属性：
href:用于指定链接目标的URL地址
target:用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。
4.7.2.链接的分类
1.外部链接
网站外部页面之间的相互链接
2.内部链接
网站内部页面之间的相互链接
3.空链接
如果没有特定的链接时，用空链接代替。
<a herf="#">空链接</a>
4.下载链接
herf中的地址是一个文件或压缩包，会下载此文件
<a herf="#img.zip">下载链接</a>
5.网页元素链接
文本、图像、表格、音频等都可以添加超链接。
<a herf="http://www.baidu.com"><img src="img.jpg"></a>
点击图片就可以跳转至百度
6.锚点链接
快速定位到当前页面中的某个位置
首先，在链接文本的herf属性中，设置属性值为#名字的形式
<a herf="#name">文字形式</a>
其次，找到目标位置标签，里面添加一个id属性 = 名字，
<h3 id="name">文字形式 </h3>
5. HTML中的注释和特殊字符
5.1 注释
HTML中的注释以“<！--”开头，以“-->”结尾。可以用Ctrl+/即可快速注释
5.2 特殊字符
<——————小于号——————⁢
>——————大于号——————>
————————空格———————
扫一扫
2160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
