html篇

最新推荐文章于 2024-04-18 05:00:00 发布

诡谷

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量612

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_45912645/article/details/111565051

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一，HTML

一种解释型语言，或者说“超文本标签语言”
1.1单双标签
<标签名/> <标签名>内容<标签名/>

1.2、HTML标签关系
标签的相互关系就分为两种：
1.嵌套关系

<head>
	<title> </title>
</head>

2,并列关系

<head>
</head> <body>
</body>

2.1工具
VSCode
Dreamweaver
记事本
其实只要保存为后缀名.html ，语法没问题都可以在浏览器中解释出来

2.2文档类型<!DOCTYPE>

2.3用来定义当前文档显示的语言
 <html lang="en">
1.en定义语言为英语
2.zh-CN定义语言为中文
	简单来说定义为en就是英文网页，定义为zh-CN就是中文网页
但其实对于文档显示来说，定义成en的文档也可以显示中文，定义为zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎（百度，谷歌等）还是有作用的

2.4字符集
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文包括6763个汉字
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符

2.5、HTML标签的语义化
白话：所谓标签语义化，就是指标签的含义。

为什么要有语义化标签？
1. 方便代码的阅读和维护
2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3. 使用语义化标签会具有更好地搜索引擎优化
核心：合适的地方给一个最为合理的标签。
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
白话，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。
遵循的原则：先确定语义的HTML ，再选合适的CSS。

2.6、h1-h6标题标签

<h1>这是标题标签</h1>
 <h2>这是标题标签</h2> 
 <h3>这是标题标签</h3> 
 <h4>这是标题标签</h4> 
 <h5>这是标题标签</h5>
  <h6>这是标题标签</h6>
  注意： h1 标签因为重要，尽量少用，不要动不动
  就向你扔了一个h1。 一般h1 都是给logo使用，
或者页面中最重要标题信息。

2.7、p段落标签
单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以
分为若干个段落，而段落的标签就是

<p> 文本内容 </p>

2.8、hr水平线标签(认识)
单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以
通过插入图片实现，也可以简单地通过标签来完成，

<hr />是单标签

2.9 br换行标签(熟记)
单词缩写： break 打断 ,换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希
望某段文本强制换行显示，就需要使用换行标签

<br />

2.10，文本格式化标签(熟记)
在网页中，有时需要为文字设置粗体、斜体或下划
线效果，这时就需要用到HTML中的文本格式化标
签，使文字以特殊的方式显示。

在这里插入图片描述

2.11标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。

<hr width="400" />

属性是宽度
值是 400

*2.12、常用的全局属性
1. id 属性：用于指定元素的识别名称，相当于一个人的身份证，是唯一的，同一个文档中不能有重复
id，一般配合 css 和 js 来选择元素；
2. class 属性：用于指定元素的类别名称，可以使用 class 元素给同一个文档中的多个元素进行归类，
css 可以通过 class 给同一个类的元素设置样式；
3. stlye 属性：用于给元素设定样式（内联样式或内部样式）；
4. title 属性：用于显示省略的内容（或补充、提示说明内容），当光标移动到元素内容上时显示title
里面的内容；
5. dir 属性：用于设定元素标签内容的文字方向，比如 div 元素的属性、p 元素的属性，可选值 ltr 和rtl。*

2.13、图像标签img (重点)
单词缩写： image 图像
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来
将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：

语法
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<hr width="400" /> <img src="图像URL" />

在这里插入图片描述

2.14 a链接标签(重点)
单词缩写： anchor 的缩写 [ˈæŋkə®] 。基本解释锚, 铁锚的在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

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

href：用于指定链接目标的url地址，当为标签应用
href属性时，它就具有了超链接的功能。 Hypertext
Reference的缩写。意思是超文本引用
target：用于指定链接页面的打开方式，其取值有
self和blank两种，其中self为默认值，blank为在新窗
口中打开方式。


注意：
1.外部链接： 需要添加 http:// www.baidu.com
2.内部链接： 直接链接内部页面名称即可 比如 < a href="index.html"> 首页
3.空链接： 如果当时没有确定链接目标时，通常将
链接标签的href属性值定义为“#”(即href="#")，表示
该链接暂时为一个空链接。
<a href="跳转目标" target="目标窗口的弹出方式">
文本或图像</a>
4.网页元素链接： 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都
可以添加超链接。
5.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

2.15锚点定位（难点）
在这里插入图片描述
base标签
应用场景传送门
base 可以设置整体链接的打开状态
base 写到之间
把所有的连接都默认添加 target="_blank"

2.16、特殊字符标签（理解）

在这里插入图片描述
2.17、注释标签

<!-- 注释语句 --> ctrl + / 或者 ctrl 
+shift + / 或者 alt+shift+A

3.路径
3.1，相对路径
1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />或者<img src="./logo.gif" />。
2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如：
<img src="img/img01/logo.gif" />。
3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/
…/”，以此类推，如
<img src="../logo.gif" />。

3.2绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件
时，所使用的路径都是一样的
“D:\web\img\logo.gif”

4，列表标签
4.1，无序列表 ul （重点）
应用场景传送门
新浪新闻网
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

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

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

4.2，有序列表ol （了解）
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

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

所有特性基本与ul 一致。

4.3，自定义列表（理解）
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

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

在这里插入图片描述
5，表格 table(会使用)

5.1创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
 <tr><td>单元格内的文字</td> ... 
 </tr> ... </table>

在上面的语法中包含三对HTML标签，分别为 
<table></table>、<tr></tr>、<td></td>，他们是创
建表格的基本标签，缺一不可，下面对他们进行具体地解释

在这里插入图片描述
5.2表格属性css

5.3、表头标签
表头单元格一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。
设置表头非常简单，只需用表头标签替代相应的单元格标签即可。

5.4表格结构（了解）
在这里插入图片描述
5.5、表格标题
表格的标题： caption
定义和用法
caption 元素定义表格标题。

<table> 
<caption>我是表格标题</caption>
 </table>

caption 标签必须紧随 table 标签之后。
只存在 表格里面
您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

5.6、合并单元格(难点)
在这里插入图片描述
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了
2个，需要删除。
公式：删除的个数 = 合并的个数 - 1
合并的顺序先上后下先左后右
1. 先确定是跨行还是跨列合并
2. 根据先上后下先左后右的原则找到目标单元格
3. 删除单元格删除的个数 = 合并的个数 - 1

5.7、总结表格
1. 表格提供了HTML 中定义表格式数据的方法。
2. 表格中由行中的单元格组成。
3. 表格中没有列元素，列的个数取决于行的单元格个数。
4. 表格不要纠结于外观，那是CSS 的作用

6，表单标签
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的
url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

6.1、input 控件(重点)
input 输入的意思
在上面的语法中，<input />标签为单标签，type属性
为其最基本的属性 类型 ，其取值有多种，用于指
定不同的控件类型。除了type属性之外，<input />标
签还可以定义很多其他的属性，其常用属性如下表
所示。
type 说明了属于那种表单
radio 如果是一组，我们必须给他们命名相同的名字 
name 这样就可以多个选其中的一个啦

在这里插入图片描述
6.2、label标签(理解)
label 标签为 input 元素定义标注（标签）。
table
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
 <input type="radio" name="sex" id="male" value="male">

6.3、textarea控件(文本域)
text 文本框 只能写一行文本呢
textarea 文本域
如果需要输入大量的信息，就需要用到<textarea>
</textarea>标签。通过textarea控件可以轻松地创建
多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea>

6.4、下拉菜单
使用select控件定义下拉菜单的基本语法格式如下 select 选择

<select> 
<option>选项1</option> 
<option>选项2</option>
 <option>选项3</option> ...
  </select>

***注意：

中至少应包含一对。
在option 中定义selected =" selected "时，当前项即为默认选中项***

8.5、表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称"> 
各种表单控件
 </form>

常用属性：
1. Action
在表单收集到信息后，需要将信息传递给服务器进
行处理，action属性用于指定接收并处理表单数
据的服务器程序的url地址。
2. method用于设置表单数据的提交方式，其取值为get或post。
3. name用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都应该有自己表单域。