html基础必备知识点

最新推荐文章于 2022-11-14 16:39:29 发布

Milly_Liu

最新推荐文章于 2022-11-14 16:39:29 发布

阅读量1.9k

点赞数 10

分类专栏：前端初级H5+C3

本文链接：https://blog.csdn.net/qq_38148024/article/details/101425377

版权

前端初级H5+C3 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

1. 初识

超文本标记语言，主要是通过HTML标签对网页中的文本，图片，声音等内容的描述。

2. 骨架格式

   <html>  根标签
       <head> 头标签
               <title>这里写的是标题</title>   标题标签
        </head>
       <body>  主体标签
           这里是主体部分。
       </body>
   </html>

3.HTML标签分类

(1) 双标签
<标签名> 内容 </标签名>
(2) 单标签 ,也称为空标签，指的是一个标签号即可完整描述某个功能
<标签名 /> 单标签数量很少

4. HTML标签关系

(1)嵌套关系
<head><title> </title></head>
(2)并列关系
<head></head> <body></body>
建议：如果两个标签之间是嵌套关系，子元素最好缩进一个tab的身位，如果是并列关系，标签对齐。

5. 开发工具

DW :Dreamweaver
Sublime3
WS : WebStorm
HB : 飞一样的编码
VSCode ：微软
sublime的使用
生成HTML骨架的方法：
(1) html:5 + tab键
(2) ! + tab键

6. 文档类型

<!DOCTYPE html>

这句话的意思是告诉我们使用的是html的哪个版本
HTML有很多的版本，我们需要告诉用户和浏览器使用的版本号，<!DOCTYPE>标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范，必须在开头的位置使用这个标签为所有的文档指定版本和类型，这样浏览器才能够按照指定的文档类型进行解析。

注意：一些老的网站可能用的还是老版本的文档类型比如XHTML之类的，但是我们学习的是HTML5，这个文档类型有很好的兼容性（向下兼容原则）。

7. 字符集

<meta charset="UTF-8">

utf-8是目前最常用的字符集编码方式，其他的还有gbk和gb2312

gb2312：简单中文，包括6763个汉字
BIG5：繁体中文，港澳台使用
GBK：包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8：包含了全世界所有国家需要用到的字符

8. HTML标签语义化

标签语义化：标签的含义
标签语义化的原因：
(1)方便代码的阅读和维护
(2)让浏览器或者网络爬虫能够很好的解析，从而更好分析其中的内容
(3)使用语义化标签会有更好的探索引擎优化
核心：在合适的地方给一个最为合理的标签
原则：先确定语义的HTML，再选择合适的CSS
语义好不好：当去掉CSS之后，网页的结构依然组织有序，并且有良好的可读性，不管是谁都能够看懂这块内容是什么。

9. HTML常用标签（重点记忆）

首先，要区分HTML与CSS，这是两种不同的语言，现在学的是结构，只写HTML标签，认识标签，不会给结构标签指定样式。 HTML标签很多，常用的一定要记住，同时要学会如何查看学习手册。

排版标签：用于网页布局
- 标题标签（熟记）
```
<head> </head> 头部标签
```
 有6个等级的标题标签： h1~h6
 标题标签的语义：作为标题使用，并且依据重要性进行递减
 基本语法格式为：
```
<hn> 标题文本 </hn>
```
 ** 注意：h1标签应为重要，尽量少使用，一般是用于logo
- 段落标签
```
文本内容
```
 默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
- 水平线标签
 - horizontal ：横线
```
<hr /> 是一个单标记标签
```
 显示的是一条水平线，用于将段落与段落分隔开。
- 换行标签
 - 单词：break，打断，换行
```
 
```
- div span标签（重点）:这两个是没有语义的，是用于网页布局的两个盒子
 - div : division的缩写，分割，分区的意思，
 - span ：跨度，跨距，范围
```
<div>这是头部</div>

今日价格
```

文本格式化标签（熟记）
在网页中，有时需要为文字设置粗体，斜体或者下划线效果，此时使用HTML的文本标记语言进行标记，使文字以特殊方式显示：
- 文字以粗体方式显示
```
 只是加粗使用没有强调
 XHTML推荐方式
```
- 文字以斜体方式显示
```

 XHTML推荐
```
- 文字以加删除线方式显示
```
<s></s>
<del></del> XHTML推荐
```
- 文字以加下划方式显示
```

<ins></ins> XHTML不推荐使用
```
** 标签属性
属性就是特性，可以使HTML标签提供更多的信息
基本语法
```
<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>
```
- 标签可以有多个属性，必须要写在开始标签中，位于标签名的后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
- 任何标签的属性都有默认值，省略该属性则取默认值
- 采取键值对的格式
图像标签(重点)
- 基本语法格式
```
<img src="图片URL"/>
```
- 必须属性：src，指定图像文件的路径和文件名
- 标签属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文字
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	图像宽度
height	像素（XHTML不支持%页面百分比）	图像高度
border	数字	设置图像边框的宽度

链接标签(重点)
单词：anchor的缩写，锚，铁锚
基本语法格式：

<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>

(1)href 用于指定链接目标的URL地址，当使用href标签时，她就具备了超链接的功能。 hypertext reference的缩写
(2)target属性：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中self是默认值，_blank是在窗口中打开方式
(3)注意：
①外部链接需要添加：http:// + 网址
② 内部链接：直接链接内部页面名称即可
③ 如果在编写的时候没有确定超链接的链接位置，通常将href的属性值定义为#，即 <a href="#">文本内容</a>表示该链接暂时是一个空链接
④ 不仅可以创建文本超链接，在网页中的元素，比如图片，音频，视频，表格等都可以创建超链接。

锚点定位
- 通过创建锚点链接，用户能够快速定位到目标内容。
- 创建锚点链接分为两个步骤：
 - 使用 <a href=#id名>链接文本</a> 创建链接
 - 使用相同的id名标注跳转目标的位置
- base标签：可以设置整体链接的打开状态
 基本语法格式： <base /> 单标签
 比如：在<head></head>标签之间写<base target="_blank" /> 则表示页面中的链接都会在新窗口中打开
- 目前学过的单标签：img,br,hr,base
特殊字符标签（理解）

特殊字符	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
。	摄氏度	`°`
©	版权	`©`
®	注册商标	`®`
2	平方，上标2	`²`
3	立方，上标3	`³`
×	乘号	`×`
÷	除号	`÷`
±	正负号	`±`

注释标签
- 多写注释，这是非常好的代码习惯，会使得团队协作顺畅
- 注释是写给队友看的，浏览器是不执行的
- 注释的内容不会显示在浏览器的窗口当中，但是作为HTML文档内容的一部分，也会被下载到用户计算机上，查看网页源代码时就可以看到
- 基本语法格式：
- sublime中的注释HTML代码的快捷键：单行注释：Ctrl+/ ；多行注释：选中后ctrl+shift+/

10. 路径（重点 + 难点）

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为：相对路径和绝对路径

相对路径：
- 图像文件和HTML文件位于同一文件夹：只需要输入图像文件的名称即可，如：<img src="th.jpg" />
- 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件夹，之间用/隔开, 如： <img src="img/wofeng.jpg" />
- 图像文件位于HTML文件的上一级文件夹：在文件名之前加“…/”,如果是上两级，则需要使用“…/…/”,以此类推。比如：<img src="../liyifeng.jpeg" />
绝对路径：

D:\web\img\logo.gif

或者完整的网络地址，例如：

http://www.itcast.cn/imges/logo.gif

11. 列表标签

无序列表ul (重点)
无序列表的各个表项之间没有顺序级别之分，是并列的，基本语法如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

(1)<ul></ul>中只能嵌套<li></li>标签，直接在<ul></ul>之间输入其他标签或者文字的做法是不被允许的。
(2)<li></li>之间相当于一个容器，可以容纳所有元素。
(3)无序列表会带有自己的样式属性，放下那个样式(比如说每一项无序列表前面的黑点)，让CSS来做！

有序列表ol (了解)

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

(1)<ol></ol>中只能嵌套<li></li>标签，直接在<ol></ol>之间输入其他标签或者文字的做法是不被允许的。
(2)列表项前面的序号设置用CSS来做

自定义列表 (理解)
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表向前没有任何项目符号，基本语法格式如下：

<dl>
  <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dd>名词1解释3</dd>
  ......
  <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    <dd>名词2解释3</dd>
  ......

</dl>

术语或名词进行解释和描述，定义列表的列表向前没有任何项目符号，基本语法格式如下：

<dl>
  <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dd>名词1解释3</dd>
  ......
  <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    <dd>名词2解释3</dd>
  ......

</dl>