html基础学习(一)
1. 常用标签（语义标签）
（1）标题标签
HTML提供了6个等级的标题(head)，h1是最高级的标题。其基本语法是：
<hn> 标题信息 </hn>
注意:h1因为重要，尽量少用，一般都是给logo用，或者页面中最重要标题信息，其他5个级别标题在一个页面中都可以出现多次，h1只能出现一次。
(2)段落标签
在网页中要想把文字内容有条理地显示，离不开段落标签（paragraph）,它是网页中文章内容的基本组成部分。其基本语法是：
<p> 文本内容 </p>
注意：段落标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
(3)水平线标签
在网页中经常看到一些水平线将段落与段落间隔开，层次分明。这些水平线可以通过插入图片来实现，也可以简单地通过<hr/>标签(horizontal)来完成。其基本语法是：
<hr />是单标签
（4）换行标签
在HTML中，一个段落的文字会从左往右按顺序排列，直到浏览器窗口的右端，然后会自动换行，如果希望某段文字强制进行换行，就需要使用换行标签(break)。其基本语法是：
<br />
注意：除了少数应用（比如诗歌的分行），应该尽量避免使用这个标签，因为它并没有特别的语义含义，而且分行的视觉效果完全可以通过p标签、列表标签和CSS命令达到。
（5）Div spanl标签
div 和 span是没有语义的，是现在网页布局用到的最主要的2个盒子，比如css+div的结合就可以基本上满足页面布局需要。其基本语法是：
<div> 这是头部 </div> <span> 今日行情 </span>
（6）文本格式化标签
在网页中，有时要为某些文字设置加粗、加斜或加下划线的效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。其基本语法是：
注意：b i s u 只有使用，没有强调的意思，strong em del ins的语义更强烈。
（7）图像标签
要想在网页中显示图像就需要使用图像标签，下图详细介绍了图像标签<img />以及与其相关的一些属性。其基本语法是：
1.基本图像插入方式：
<img src="wo.jpg"/>
2.带有alt的图像插入方式：
<img src="wo.jpg" alt="杨幂"/>
3.带有title的图像插入方式：
<img src="wo.jpg" title="吴彦祖"/>
4.带有宽度的图像插入方式：
<img src="wo.jpg" title="吴彦祖" width="300" />
5.带有边框的图像插入方式：
<img src="wo.jpg" title="吴彦祖" width="300" border="10" />
（8）链接标签
HTML中创建超链接比较简单，只需用链接标签(anchor)环绕需要被链接的对象即可。其基本语法是：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：Hypertext Reference的缩写，意思是超文本引用，用于指定链接目标的url地址。
target：用于指定链接页面的打开方式，其取值有self(新链接页面覆盖原页面，为默认值)、blank(在新窗口打开)、_parent(载入父级窗口，与iframe结合用得到)、_top(载入顶级窗口，与iframe结合用得到)。
注意：
- 外部链接：需要添加 http://www.baidu.com
- 内部链接：直接链接内部页面名称即可，如首页；还有可以通过创建锚点链接，能够快速定位到内部页面的目标内容：①.使用链接文本 ②.使用相应的id名标注跳转到目标的位置。
- 如果没有确定的链接目标时，通常将href属性定义为"#"(即href="#")，表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
- 当然也可以利用base标签来设置整体链接的打开状态，如网易这样设置让页面所有链接按新窗口打开：
（9）特殊字符标签
无序列表ul
无序列表(unordered list)的各个列表项之间没有顺序级别之分，是并列的。其基本语法是：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签内输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。- 无序列表会自带样式属性，但还是让css来做！
有序列表ol
有序列表(ordered list)即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义。其基本语法是：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
所有特性基本和ul一致，且自带顺序。
定义列表
定义列表(definition list)常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法是：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
......
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
......
</dl>
表格table
表格还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。其基本语法是：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
上面的语法中包含三对HTML标签，分别为<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体解释：
- table用于定义一个表格。
- tr用于定义表格中的一行，必须嵌套在table标签中，且只能嵌套
<td></td>，在table中包含几对tr，就有几行表格。 - td /td：用于定义表格中的单元格，必须嵌套在
<tr></tr>标签中，一对<tr></tr>中包含几对<td></td>，就表示该行中有多少"列"（或多少个单元格），但表格只有行tr和单元格td，行里面装单元格，没有列的概念；<td></td>标签像一个容器，可以容纳所有的元素。
表单标签
表单的目的是为了收集用户信息，在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常还需要包含一些说明性的文字，作用是提示用户进行填写和操作。
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
input控件
<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。其常见属性如下所示：
text语法:
<tr>
<td>所在地区</td>
<td><input type="text" value="北京" /></td> //value为默认值
</tr>
password语法：
<tr>
<td>密码</td>
<td><input type="password" value="123456" /></td>
</tr>
radio单选按钮语法：
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex" />
女<input type="radio" name="sex" />
人妖<input type="radio" name="sex" />
</td>
</tr>
label标签
label标签为input元素定义标注，其中for属性规定了label与哪个表单元素绑定。其基本语法是：
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
点击Male会直接跳到右边的文本框内，label通过for和id建立联系快速找到。
当然也可以简化成这种形式：
<label><input type="radio" name="sex" value="male">Male</label>
textarea文件域 ⭐⭐
text 文本框只能写一行文本
如果需要输入大量的信息，就需要用到textarea标签，可以轻松地创建多行文本输入框。其基本语法是：
<textarea cols="每行的字符数" rows="显示的行数">
文本内容
</textarea>
但是textarea的宽和高通常是通过css来控制的,cols和rows几乎不用。
下拉菜单 ⭐⭐
使用select标签定义下拉菜单的基本语法如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意：
- 中至少应包含一对。
- 在option中定义selected="selected"时，当前项即为默认选中项。
表单域 ⭐⭐
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。其基本语法是：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常见属性：
- Action：在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接受并处理表单数据的服务器程序的url地址。
- method：用于设置表单数据的提交方式，其取值为get或post。
- name：用于指定表单的名称，以区分同一个页面中的多个表单。
注意：每个表单都应该有自己的表单域。
HTML5常用新标签 ⭐⭐⭐
• header：定义文档的页眉
• nav：定义导航链接的部分
• footer：定义文档或节的页脚
• article：标签规定独立的自包含内容
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容（侧边）
• datalist：标签定义选项列表，与input元素配合使用
• fieldset：可将表单内的相关元素分组，打包，与legend搭配使用
HTML5新增的input type属性
多媒体标签
• embed：标签定义嵌入的内容
• audio：播放音频
• video：播放视频
多媒体embed ⭐⭐
embed可以用来插入各种多媒体（较大的），格式可以是Wav、AIFF、AU、MP3等。其中url为音频或视频文件的路径，可以是相对路径或绝对路径。其基本语法是：
<embed src='http://player.youku.com/player.php/sid/XMzk4MDUzNTA1Mg==/v.swf' allowFullScreen='true'
quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='applicati
on/x-shockwave-flash'></embed>
多媒体audio ⭐⭐
HTML5通过标签来解决音频播放的问题。其基本语法是：
<audio src="./music/See You Again.mp3"></audio> //通过src指定音频文件路径即可
并且可以通过添加属性来更友好控制音频的播放，如：
• autoplay 自动播放
• controls 是否显示默认播放组件
• loop 循环播放 ，loop=2就是循环2次 ，loop或者loop=“-1”无限循环
多媒体video ⭐⭐
同音频播放一样，（通常插入较小的视频）使用也相当简单。其基本语法是：
<video src="./video/movie.mp4" controls="controls"></video> //通过src指定视频文件路径
同样，通过附加属性可以更友好的控制视频的播放：
• autoplay 自动播放
• controls 是否显示默认播放组件
• loop 循环播放
• width 设置播放窗口的宽度
• height 设置播放窗口的高度
块级元素与行内元素
在 HTML 中，标签（tag）通常又被称作元素（element）。例如 标签又叫做 元素，
标签也叫作
元素。
HTML 元素根据其表现形式可以分为 2 种：
• 块级元素
• 行内元素
任何 HTML 元素都属于这两者中的任意一种。
提示：块级元素和行内元素的概念极其重要，同时也是学习 CSS 的基础知识之一，请读者不要忽略。
- 块级元素
块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下：
块级元素
块级元素 说明
div 最典型的块元素
p 表示段落
h1-h6 表示1-6级标题（默认加粗）
br 表示换行
ol有序列表
ul无序列表 - 行内元素
行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下：
行内元素
行内元素 说明
a超链接
span 常用行级
strong 加粗，强调
b 加粗，不强调
em 斜体，强调
i 斜体，不强调
img图片
input输入框
select下拉列表
- 实例演示
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>块元素与行内元素</title>
6. </head>
7. <body>
8. <div>div标签（块级标签）</div>
9. <p>p标签（块级标签）</p>
10. <span>span标签（行内标签）</span>
11. <a href="#">a标签（行内标签）</a>
12. </body>
13. </html>
块元素与行内元素区别
<div> 标签和 <p> 标签分别独占一行，因为它们是块级元素；而 <span> 标签和 <a> 标签在同一行中显示，因为它们是行内元素。
注意，这里我们说的独占一行是指元素在浏览器中的运行效果，并不是在编辑器中独占一行。在编辑器中，不论怎么书写代码，都不会影响它在浏览器中的运行效果。
3. 元素的嵌套
HTML 中的各个元素之间是可以互相嵌套的，例如：
• 块元素可以嵌套块元素
• 块元素可以嵌套行内元素
• 行内元素可以嵌套行内元素
• 行内元素可以嵌套块元素
值得注意的是我们不建议在行内元素中嵌套块元素，这样不仅不符合开发规范，还会导致行内元素也独占一行。
下面来看一段元素之间互相嵌套的代码：
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>元素间的嵌套</title>
7. </head>
8. <body>
9. <!-- 块级元素嵌套块级元素 -->
10. <div>
11. <p>p标签（块级元素）</p>
12. <div>div标签（块级元素）</div>
13. </div>
14. <!-- 块级元素嵌套行内元素 -->
15. <div>
16. <span>span标签（行内元素）</span>
17. </div>
18. <!-- 行内元素嵌套 -->
19. <span>
20. <span>span标签（行内元素）</span>
21. <a href="#">a标签（行内元素）</a>
22. </span>
23. </body>
24. </html>
元素之间的嵌套
4. 总结
- 块级元素的宽度是 100%，在浏览器中默认独占一行。
- 行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
- 块级元素内部可以嵌套块级元素或行内元素。
- 建议行内元素里面只嵌套行内元素。
超链接与图片标签
（1）超链接
在 HTML 中，我们使用 <a> 标签来表示超链接。
超链接（Hyperlink）是网页中最常见的元素之一，整个互联网都是基于超链接而构建的。每个网站都由众多的网页组成，超链接使得网页之间不再独立，它就像一根线，把网页连接在一起，形成一个网状结构。互联网之所以能够称之为“网”，就是因为有超链接的存在。
<a> 标签的语法格式如下：
<a href="url" target="opentype">链接文本</a>
其中，href 属性用来指明要跳转到的 url，target 属性用来指明新页面的打开方式，链接文本需要写在 <a> 和 </a> 之间。
例如，链接到C语言中文网首页可以这样写：
1. <a href="http://c.biancheng.net" target="_blank">C语言中文网</a>:
链接到C语言中文网里面的一个 HTML 页面可以这样写：
1. <a href="http://c.biancheng.net/view/7410.html" target="_blank">网站到底是什么</a>
下面，我们来详细分析一下 <a> 标签的各个属性。
1. href 属性
href 属性指定链接的目标，也就是要跳转到什么位置。href 可以有多种形式，例如：
• href 可以指向一个网页（.html、.php、.jsp、.asp等格式），这也是最常见的形式，例如 href=“http://c.biancheng.net/view/1719.html”；
• href 可以指向图片（.jpg、.gif、.png 等格式）、音频（.mp3、.wav等格式）、视频（.mp4、.mkv格式）等媒体文件，例如 href="/uploads/allimg/181221/134I32557-0.jpg"；
• href 可以指向压缩文件（.zip、.rar等格式）、可执行程序（.exe）等，一些下载网站的链接就可以写成这种形式，例如 href="./…/uploads/data_package/ComputerFoundation.zip"；
• href 甚至还可以指向本机的文件，只是很少这样使用，例如 href=“D:/Program Files/360/360safe/360Safe.exe”。
你看，href 本质上就是指向一个文件，这个文件几乎可以是任意格式的。如果浏览器支持这种格式，那么它就可以在浏览器上显示，比如常见的图片、音频、视频等，如果浏览器不支持这种格式，那么就提示用户下载。
另外，href 使用的路径可以是绝对路径，也可以是相对路径。绝对路径往往以域名为起点，例如 http://c.biancheng.net/view/1719.html；相对路径往往以当前文件或者当前域名为起点，例如 ./…/uploads/data_package/ComputerFoundation.zip。 后续我们将在《绝对路径与相对路径》一文中详细讲解，这里大家不必深究。
2. target属性
在创建网页时，默认情况下，超链接在当前的浏览器窗口打开，但是我们可以使用 target 属性来改变目标窗口的打开方式。常见的打开方式如下表所示：
target 属性值
属性值 说明
_self 默认，在现有的窗口中打开新页面，原窗口将被覆盖。
_blank 在新的窗口中打开新页面。
_parent 在当前框架的上一层打开新页面。
_top 在顶层框架中打开新页面。
绝大部分情况下，target 属性要么不写，保持默认的 _self，要么把它的值设置为 _blank，在新的窗口中打开链接。例如：
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>a标签</title>
6. </head>
7. <body>
8. <a href="http://c.biancheng.net/" target="_blank">C语言中文网（新窗口打开）</a>
9. <a href="http://c.biancheng.net/">C语言中文网（现有窗口打开）</a>
10. </body>
11. </html>
target 窗口打开方式
这两种效果在浏览器预览中看不出来区别，但是当我们点击一下超链接，会发现它们的窗口打开方式是有区别的，请读者自己试一试。
3. <a>标签的默认样式
- 鼠标样式
当鼠标移入网页上的某个超链接时，其样式会变为一只小手；当鼠标移出超链接区域时，样式会再次回到箭头形状。 - 颜色及下划线
任何 HTML 元素都有默认的样式，<a>标签也不例外。在浏览器下，超链接被点击后颜色会发生改变：超链接被点击之前是蓝色的，点击之后会变成紫色。
超链接默认是带下划线的，下划线颜色和文本颜色保持一致。 浏览器根据历史记录来判断超链接是否被点击过，如果 <a> 标签的 href 属性和历史记录中的某条 URL 重合，那就说明该链接被点击了，否则是没有被点击的。所以，清空浏览器的历史记录会让超链接的颜色再次变回蓝色。
(2)图片标签
img标签又称图片标签。img标签是用来在浏览器中显示一张图片的HTML标签。img 标签 – 代表HTML图像，img,是image(图像)的缩写。
做网站时，如果网页上没有图片，将会使自己的网站失色。通过图片标签img标签可以让我们自己的网站图文并茂，图像会使网页更加生动。
img标签也可以加a标签，如：<a href="https://www.xuewangzhan.net/gonggao/393.html" target="_blank"><img src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/Course.png" alt="零基础建站培训介绍"></a>
HTML 图片 img标签用法
img标签使用书写语法
<img src="图片的地址" alt="图片的描述" title="图片的标题" />
img标签是单独出现的，如：<img src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/Course.png" alt="零基础建站培训介绍">
但是随着HTML5的普及，图片 img标签也使用闭合的标签。如：<img src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/Course.png" alt="零基础建站培训介绍"></img>
HTML 图片 img标签属性
img标签在使用过程中有以下几个属性：
alt – 代表图像的替代文字
src – 代表一个图像源(就是图像的位置)
height – 代表一个图像的高度
width – 代表一个图像的宽度
相对路径与绝对路径
路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：相对路径，绝对路径。以下讨论均是在HTML环境下进行。
(1)相对路径
相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：
./ ：代表文件所在的目录（可以省略不写）
…/ ：代表文件所在的父级目录
…/…/ ：代表文件所在的父级目录的父级目录
/ ：代表文件所在的根目录
值得注意的是，（/ ：代表文件所在的根目录）其实可以理解成项目内部的绝对路径。
图1：项目目录结构
以图1所示项目目录结构为例，如果要在test.html中引入000.css，可以有以下写法：
1、<linkhref="./css/css1/000.css"/> (./可以省略)
2、<link href="/html/css/css1/000.css"/>
3、<link href="../html/css/css1/000.css"/>
(2)绝对路径
绝对路径是指完整的网址，假设图一中项目的网站域名为www.test.com，那么000.css的绝对路径应该是
https://www.test.com/HelloHBuilder/html/css/css1/000.css。
相对路径与绝对路径的优缺点
常用实体
记得双击点赞偶
转载：https://blog.csdn.net/m0_46315852/article/details/117453031