HTML基础
文章目录
一、HTML语法规范？
1.1 基本语法规范
- HTML标签是由尖括号包围的关键词，例如
<html>。 - 有单标签和双标签；通常是成对出现，标签对中的第一个标签是开始标签，第二个标签是结束标签。
<html></html>
1.2 标签关系
双标签关系可以分为：包含关系和并列关系。
- 包含关系（父子关系）
<head>
<title></title>
</head>
- 并列关系（兄弟关系）
<head></head>
<body></body>
二、HTML基本结构标签
2.1 第一个HTML网页
HTML页面也称为HTML文档。
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
加油加油！
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> | HTML标签 | 页面中最大的标签，称为跟标签 |
<head></head> | 文档头部标签 | 在head标签中必须设置的标签是title |
<title></title> | 文档的标题 | 页面拥有一个属于自己的页面标题 |
<body></body> | 文档的主体 | 元素、页面内容 |
3. Vscode的使用
- 新建文件（ctrl + N）
- Ctrl + 加号键，Ctrl + 减号键，放大缩小视图
- 输入！按下Tab，生成骨架结构
- 利用插件在浏览器中预览页面：单击鼠标右键，在窗口中点击"Open In Default Browser"。
插件推荐
4.网页开发工具
4.1 文档类型声明
<!DOCTYPE html> 文档类型声明，作用是用来告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html> 告诉浏览器当前页面采取的是HTML5版本来显示网页。
4.2 lang语言
lang语言种类
1.en定义语言为英语
2.zh-CN定义语言为中文
<html lang="zh-CN">告诉浏览器或者搜索引擎这是一个中文网站，本页面采用中文来显示。
lang的作用
*根据lang属性来设定不同语言的css样式，或者字体
*告诉搜索引擎做精确的识别
*让语法检查程序做语言识别
*帮助翻译工具做识别
*帮助网页阅读程序做识别等等
4.3 字符集
字符集（Character set）是多个字符的集合。以便于计算机能够识别和储存各种文字。
在<head>标签内，可以通过<meta>标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset="UTF-8" />
charset：GB2312、BIG5、GBK和UTF-8，UTF-8被称为万国码。
4.4 meta viewport 的用法
通常 viewport 是指视窗、视口。浏览器上（或者一个 app 中的 webview ）用来显示网页的那部分区域。在移动端和 pc 端视口是不同的，pc 端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口。
meta 有两个属性 name 和 http-equiv。
name 属性的取值
name 属性主要用于描述网页，与之对应的属性值为 content，content 中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta 标签的 name 属性语法格式是：
<metaname=“参数” content=“具体的参数值”>。
- keywords（关键字）告诉搜索引擎，该网页的关键字。
- description（网站内容描述）用于告诉搜索引擎，你网站的主要内容。
- vieport（移动端的窗口）。
- robots 机器人向导（定义搜索引擎爬虫的索引方式）robots 用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
- author（标注作者）。
- generator（网页制作软件）。
- copyright（版权）。
http-equiv 有以下参数
http-equiv 相当于 http 的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为 content，content 中的内容其实就是各个参数的变量值。
meta 标签的 http-equiv 属性语法格式是：
<metahttp-equiv=“参数” content=“参数变量值”>；
- content -Type 设定网页字符集（HTML4 用法）。
- Expires（期限），可以用于设定网页的到期时间。一旦网页过期，必须到服务器重新上传。
- Pragam（cache 模式）,是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从 Cache 中调出。
- cache-control（请求和响应遵循的缓存机制）。
5.HTML 常用标签
HTML 标签的语义化
- 代码结构:方便代码的阅读和维护，css 样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息。搜素引擎根据标签来确定上下文和各个关键字的权重。
- 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
- 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
- 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
5.1 排版标签
排版标签主要是和 CSS 搭配使用，显示网页结构的标签，是网页最常用的标签。
-
标题标签
<h1></h1>（h1~h6）：作为标题使用，并且依据重要性递减。标题标签和 div 一样，独占一行。
效果图：
-
段落标签
<p></p>：将HTML 文档分割为若干段落
段落特点：
①文本在一个段落中会根据浏览器窗口的大小自动换行
②段落与段落之间有空隙 -
水平线标签
<hr /> -
换行标签
<br />：强制换行 -
div 和 span 标签：是没有语义的，是网页布局中最重要的两个盒子
效果图：
特点：
①<div>标签用来布局，一行只能放一个<div>。大盒子
②<span>标签用来布局，一行上可以多个<span>。小盒子
文本格式化标签
标签语义：突出重要性
<strong>粗体</strong>和<b>粗体</b>文字以粗体显示<em>倾斜</em>和<i>倾斜</i>文字以倾斜显示<del>删除线</del>和<s>删除线</s>文字以加删除线显示<ins>下划线</ins>和<u>下划线</u>文字以加下划线显示
5.2 图像标签和路径
图像标签
<img src="图像URL"/>
例如：
<img src="img.jpg" />
src 是 <img> 标签的必须属性，用于指定图像文字的路径和文件名。
其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像路径 |
| alt | 文本 | 替换文本，图像不能显示文字时 |
| title | 文本 | 提示文本，鼠标放在图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像边框的宽度 |
<h4>图像标签的使用：</h4>
<img src="img.jpg" />
<h4>alt 替换文本 图像显示不出来的时候用文字代替：</h4>
<img src="img1.jpg" alt="我是lay" />
<h4>title 提示文本 鼠标放在图像上的提示文字：</h4>
<img src="img.jpg" alt="我是lay" title="我是lay" />
<h4>width 给图像设定宽度：</h4>
<img src="img.jpg" width="500" />
<h4>height 给图像设定高度：</h4>
<img src="img.jpg" height="100" />
<h4>border 给图像设定边框：</h4>
<img src="img.jpg" width="500" border="15" />
<h4>可以放多个属性</h4>
<img src="img.jpg" width="500" height="100" boder="15" title="我是lay" />
注意：
- 图像标签可以拥有多个属性，必须写在标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均用空格隔开。
- 属性 采用键值对的格式，即 key="value"的格式，属性=“属性值”.
路径
目录文件夹：普通文件，如html文件、图片等。
根目录：打开目录文件夹的第一层。
相对路径:以引用文件所在位置为参考基础，而建立出的目录路径。图片相对于 html 页面的位置。
| 相对路径 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 如<img src="img.jpg" />图像文件位于HTML文件同一级  | |
| 下一级路径 | / | 如<img src="images/img.jpg" />图像文件位于HTML文件下一级 |
| 上一级路径 | …/ | 在文件名之前加入“../”，如果是上两级，需要“../../”；如<img src="../img.jpg>，先回到同一级路径再使用图像，图像文件位于HTML文件的上一级 |
绝对路径:指定目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。如“D:\web\img\log.gif”或者是完整的网络地址“http://www.itcast.cn/images/logo.gif”。
<img src="E:\qianduan\pink\HTML5+CSS3+移动端布局-flex布局rem布局\第一天\img.jpg">
<img src="http://www.itcast.cn/2018czgw/images/logo2.png" />
5.3 超链接标签
<a>作用是从一个页面链接到另一个页面。
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self" 默认窗口弹出方式，当前窗口打开
target="_blank" 新窗口打开
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的 url 地址，（必须属性）当为标签应用 href 属性时，具有超链接的功能 |
| target | 用于指定链接页面的打开方式，其中 _self 为默认值，_blank 为新窗口中打开方式 |
src 和 href 的区别：
src 是引入资源 ； href 是跳转 url
链接分类
- 外部链接：需要加“http://”；如
<a href="http://www.baidu.com">百度</a> - 内部链接：网站内部页面之间的相互链接，直接链接内部网页名称即可。如
<a href="news.html">新闻</a> - 空链接：当时没有确定链接目标时，
<a href="#">公司地址</a> - 下载链接：如果href里面地址是一个文件夹或者压缩包，会下载这个文件
- 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
<h4>1.外部链接</h4>
<!-- target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面 -->
<a href="http://qq.com" target="_blank">腾讯</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<h4>2.内部链接：网站内部页面之间的相互链接</h4>
<a href="gongsijianjie.html" target="_blank">公司简介</a>
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
<h4>4.下载链接：地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="img.rar">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com" target="_blank"><img src="img.jpg" />
- 锚点链接：点击链接，可以快速定位到页面的某个位置
- 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如
<a href="#one">个人经历</a> - 找到目标位置标签，添加一个 id 属性 = 刚才的名字，如
<h3 id="one">个人经历</h3>
6.HTML中的注释和特殊字符
注释：<!-- 注释标签 -->
快捷键：ctrl + / 或者是 ctrl + shift + /
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2 | ² |
| ³ | 立方三3 | ³ |
重点记住空格 、大于号>、小于号<。
总结
-
标签的书写规范 答：
<html></html> -
HTML骨架标签 答：
<html><head><title></title></head><body></body></html> -
超链接标签 答：
<a href=""></a> -
图片标签并说出 alt 和 title 的差别 答：alt:替换文本，图像显示不出来的时候，用文字显示； title:提示文本，鼠标经过图像时，提示
-
相对路径的三种形式 答：同一级，上一级，下一级
-
图像标签的哪个属性是必须要写的 答：src
扫一扫
7379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
