浅浅总结一下HTML吧

qq_66225710

已于 2022-07-08 22:50:41 修改

阅读量195

点赞数

文章标签： html 前端 javascript

于 2022-07-08 22:42:33 首次发布

本文链接：https://blog.csdn.net/qq_66225710/article/details/125464433

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

我的html理解

提示：这里可以添加本文要记录的大概内容：

用来创建平时我们浏览的网页上看到的信息的一种标记语言，标记不多，很容易记忆和理解。
HTML可以定义网页基本内容和大致表现效果

任何网页只要右键—查看源代码就能看到他的真实面目

提示：以下是本篇文章正文内容，下面案例可供参考

1、语法规范

HTML标签通常成对出现
有些特殊的标签必须是单个标签，例如

2、HTML基本结构标签

<html></html> HTML标签：根标签
<head></head> 文档头部：在head标签中我们必须要设置的标签是title
**<title></title>**文档的标题：页面标题
**<body></body>**文档的主体：元素包含文档的所有内容，页面内容基本都是放到body里面

2.1.文档类型声明标签

用来告诉浏览器使用哪个版本的HTML来显示网页，现在可有可无

注意：1.声明位于文档中的最前面的位置，处于标签之前
2.这不是一个HTML标签，就是一个文档类型声明标签

2.2字符集

   在**<head>**标签内，可以通过**<meta>**标签的**charset**属性来规定HTML文档应该使用哪些字符编码
   **charset**常用的：UTF-8万国码基本包含了全世界所有国家需要用到的字符。

3 HTML常用标签

3.1标题标签`<h1>~<h6>`

HTML提供了六个等级的标签即<h1>~<h6>。

标签语义：作为标题使用，重要性依次递减。

注意：加了标题的文字会变粗变大,一个标题独占一行。

3.2 段落和换行标签

在网页中，要把文字有条理地显示出来，就要将这些文字分段显示。
在HTML标签中，

<p>标签用于定义段落，它可以将整个网页分为若干段落。 标签语义：可以把HTML文档分割为若干段落。

ps ：文本一个段落中会根据浏览器窗口的大小自动换行。段落与段落之间保有空隙。

 强制换行：换行标签<br /> 单词break的缩写，意为打断，换行。

ps ：是个单标签,该标签只是简单的开启新的一行，它跟段落不同，段落之间有插入一些垂直间距。

3.3 文本格式化标签

加粗	<strong></strong>或<b></b>	更推荐使用<strong>标签加粗
倾斜	<em></em>或<i></i>	        更推荐<em>标签加粗
删除线	<del></del>或<s></s>	    更推荐<del>标签加粗
下划线	<ins></ins>或<u></u>	    更推荐<ins>标签加粗

标签语义：突出重要性，比普通文字更重要。

3.4 `<div>`和`<span>`标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装饰内容。

<div>这是头部 </div> 
<span>没有语义</span>

 div是division的缩写，表分割；span意为跨度，跨距。
            特点：
           1.	<div>标签用来布局，但现在一行只能放一个<div>大盒子。
           2.	<span>标签用来布局，一行可以放多个<span>小盒子。

3.5 图像标签和路径

3.5.1. 图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。 (属性：属于图像的特性)

属性	  属性值	    说明
src	      图片路径	必须属性
alt	      文本	    替换文本。图像不能显示文字
title	  文本	    提示文本。鼠标放于图像上，显示文字
wideth	  像素	    设置图像的宽度
height	  像素	    设置图像的高度
border	  像素	    设置图像的边框粗细

图像标签属性注意点：
• 图像标签可以拥有多个属性，必须写在标签名的后面。
• 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。
• 属性采取键值对的格式，即key=”value"的格式，属性=“属性值”。

3.5.2.路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放图像文件，这时再查找图像，就需要采用“路径”的方式来指定文件的位置。

3.6 超链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

3.6.1. 链接的语法格式

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

属性	作用
href	用于指定链接目标的url地址，（必须属性）当标签应用herf属性是，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中-self为默认值(当前页面打开），-blank为在新窗口中打开方式。

注：URL是统一资源定位符，是互联网上标准资源的地址。而互联网上的每个文件都有唯一的一个的URL，它包含的信息指出「文件的位置」以及浏览器应该怎么处理它。

3.6.2.链接分类

    1.	外部链接：例如`<a href="hettp://baidu.com" >百度</a>`。
	2.	内部链接：网站内部之间的互相链接，直接链接内部页面名称即可，例如`<a href ="网页名称.html">首页</a>`。
	3.	空链接：如果当时没有确定链接目标时，`<a href="#">首页</a>`。
	4.	下载链接：如果herf里面的地址是一个文件或者压缩包，会下载这个文件。
	5.	网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。
    6.	锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。



•	在链接文本的herf属性中，设置属性值为#名字的形式，如<a href="#名字">目标位置名称</a>
•	找到目标位置标签，里面添加一个id属性=上步定义的名字，如<h3 id="名字">目标</h3>

4 HTML中的注释和特殊字符

4.1 注释

如果需要在HTML文档添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要注释标签。
HTML中是注释以“ ”结束。
快捷键：Ctrl+/
注释标签中的内容是给自己看的，该代码不执行不显示到页面中。

4.2 特殊字符

在HTML页面中，一些特殊符号很难或者不方便直接使用，我们就需要采用下面字符来代替。

特殊符号	   描述	   字符的代码
``	       空格符	 &nbsp;
<	       小于号    &lt;
>	       大于号    &gt;
$	       和号	    &amp;
¥	       人民币	&yen;
©	       版权	    &copy;
®	       注册商标	&reg;
°	       摄氏度	&deg;
±	       正负号	&plusmn;
×	       乘号  	&times;
÷	       除号 	&divide;
²	       平方2	&sup2;
³	       立 方3	&sup3;

5 列表标签

5.1无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
效果：
• 列表项1
• 列表项2
• 列表项3

 1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
 2.	<ul></ul>之中只能嵌套<li></li>，直接在<li></li>标签 中输入其他标签或者文字的做法是不被允许的。
 3.	<li></li>之间相当于一个容器，可以之间容纳所有元素。
 4.	无序列表会带有自己的样式属性，但在实际使用时，我们会用CSS来设置。

6.2 有序列表

<ol>标签表示HTML页面中项目的有序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

1.	<ol></ol>之中只能嵌套<li></li>，直接在<li></li>标签中输入其他标签或者文字的做法是不被允许的。
2.	<li></li>之间相当于一个容器，可以之间容纳所有元素。
3.	无序列表会带有自己的样式属性，但在实际使用时，我们会用CSS来设置。

6.3自定义列表

在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。

    1. `<dl></dl>`里面只能包含`<dt>`和`<dd>`。
	2.	`<dt>`和`<dd>`个数没有限制，经常是一个`<dt>`对应多个`<dd>`

6.4 列表总结

标签名	        定义	        说明
<ul></ul>	   无序标签	        里面只能包含li，没有顺序，使用较多，li里面可以包含任何标签
<ol></ol>	   有序标签	        里面只能包含li，有顺序，使用较少，li里面可以包含任何标签
<dl></dl>	   自定义列表	    里面只能包含dd和dt，dt和dd里面可以放任何标签

7 表单标签

使用表单目的是为了收集用户信息，在我们网页中，我们也需要跟用户进行交互，收集用户资料，这时就需要表单了。

7.1 表单的组成

在HTML中，一个完整的表单通常包含表单域，表单控件（也称表单元素）和提示信息三个部分构成。

7.2 表单域

表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。

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

注意：

在我们写表单元素之前，应该有个表单域把他们进行包含。
表单域是form标签。

7.3 表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素允许用户在表单中输入或者选择的内容控件。
<input>表单元素
在英文单词中，input是输入的意思，而在表单元素中标签用于收集用户信息。
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等)。

<imput type="属性值" />

•	<input />为表单单标签
•	type属性设置不同的属性值用来指定不同的控件类型，其常用值如下。

7.4 表单元素总结

有些表单元素可以显示几个默认文字

<input type="text" value="请输入用户名"/>

页面中的表单元素用name属性，name的主要作用是用于区别不同的表单。

<input type="text" value="请输入用户名" name="usename" />

•	name属性是自定义的值。
•	radio（或者checkbox）如果是一组，我们必须给命名相同的名字。

3.chacked属性（默认选中状态），当页面打开就让某个单选按钮或者复选框就是选中状态。

4.type属性可以让input表单元素设置不同的形态。

7.4.1`<label>`标签

<label>标签为input元素定义注释（标签）。
<label>标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点或光标转到或者选择对应的表单上，用来增加用户体验。
语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心：label标签的for属性应相当与相关元素的id属性相同。

7.4.2`<select>`表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
语法表示：

<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>

1.	<select>中至少包含一对<option>
2.	在<option>中定义selected="selected"时，当前项即为默认选中项。

7.4.3`<textarea>`表单元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。该控件多用于留言板，评论。
语法表示：

  <textarea row="3" cols="20">文本内容</textarea>

事例：

 <textarea row="3" cols="20">文本内容</textarea>

1.	通过<textarea>标签可以轻松创建多行文本输入框。
2.	cols="每行中的字符数"，rows="显示的行数"，我们在实际开发中不会使用，都是用css来改变大小。·

总结

以上就是我对html的了解和总结