HTML基础
作者：互联网
HTML基础
写在前面
2022年3月30日04:39:43，开始前端的学习，说是学习其实半个复习。接触这玩意儿比接触编程语言还早，那时候还是个连家用的路由器都不会用的小白呢，其实就是捡起来以前没学完或者学一半的东西做个复习。目标还是后端，前端部分其实也是为了后端铺路，所以笔记会稍显潦草，也不会记录一些大而空的东西，只记录一些代码，把东西基本都写到代码的注释里好了，希望自己以后翻到的时候不会后悔没有好好记笔记。
基本信息
示例代码：
<!--DOCTYPE:声明网页的协议，网页规范-->
<!DOCTYPE html>
<html lang="en">
<!--head：网页头部信息-->
<head>
<!-- meta描述性标签，描述网页的一些信息-->
<!-- meta标签一般用来做SEO即搜索引擎优化-->
<meta charset="UTF-8">
<meta name="keywords" content="IDEA生成的第一个网页">
<meta name="description" content="基础完结撒花，开始前端部分学习。">
<!-- title：网页的浏览器标题-->
<title>我的第一个网页</title>
</head>
<!--网页的主体-->
<body>
Hello，World！
</body>
</html>
基本标签
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--换行标签-->
<!--自闭合标签，以前是要写</br>的现在不用了-->
<!--虽然看起来换行了，实际还是一段，文字间隙会很小-->
这颗流浪地球上 <br>
有个故事你要讲 <br>
车开向四海八荒 <br>
你要乘坐哪一趟 <br>
你说随它反正都一样 <br>
<!--水平线标签-->
<!--自闭合标签，以前是要写</hr>的现在不用了-->
<!--加/是为了代码的可阅读性，我自己目标前端知识仅作了解，就不加了-->
<hr>
<!--段落标签-->
<!--如果不使用段落标签网页会默认将文字放到一行，源代码的回车会显示成空格-->
<p>其实破碎的人没关系</p>
<p>我也曾经很像你</p>
<p>在那片荒地孤身一人捱到如今</p>
<p>可是新开的花在找你</p>
<p>请你闻闻它的香</p>
<p>一到这样的时候是否舍不得再沮丧</p>
<!--字体标签-->
<!--粗体-->
<strong>还有泛黄的傍晚</strong><br>
<!--斜体-->
<em>小孩子递来喜糖</em><br>
<!--特殊符号-->
<!--空格转义-->
<!--不用转义的空格在代码里敲再多实际也只显示一个-->
<!--更多符号用&自取-->
野草一年年疯长 来自亲人的寄望
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--图像标签-->
<!--src：图像的路径（必填）-->
<!--alt：图像没有正常加载时显示的信息（必填）-->
<!--title：鼠标悬停图像显示信息（选填）-->
<!--width:图像的宽度（选填）-->
<!--height：图像的高度（选填）-->
<img src="../resources/image/test.jpeg" alt="显示失败" title="乌鸦的头像" width="400" height="300">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--锚点-->
<!--以前是用name的，现在name属性被废弃了，一般使用id-->
<a id="top"></a>
<!--链接标签-->
<!--href:链接地址-->
<!--target:指定链接的打开位置
_blank:在新标签打开
_self:在当前页面打开
-->
<a href="https://www.cnblogs.com/rsp2012/" target="_blank">点击跳转到我的blog</a>
<hr>
<!--标签中可以是图片-->
<a href="https://www.cnblogs.com/rsp2012/">
<img src="../resources/image/test.jpeg" alt="显示失败" title="乌鸦的头像" width="400" height="300">
</a>
<br>
<!--锚链接-->
<!--跳转到锚点所在的位置-->
<!--锚链接还可以跳到另一个页面的指定位置-->
<a href="#top">回到顶部</a>
<hr>
<!--功能性链接-->
<!--mailto会直接打开电脑上的outlook-->
<!--还有一些打开什么QQ链接在线聊天之类的，这里就不写了，麻烦-->
<a href="mailto:rsp2012@sina.com">点击链接给我发邮件</a>
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>内容第一行</li>
<li>内容第二行</li>
<li>内容第三行</li>
<li>内容第四行</li>
<li>内容第五行</li>
</ol>
<hr>
<!--无序列表-->
<ul>
<li>内容第一行</li>
<li>内容第二行</li>
<li>内容第三行</li>
<li>内容第四行</li>
<li>内容第五行</li>
</ul>
<hr>
<!--自定义标签-->
<!--dt:列表名称-->
<dl>
<dt>列表名称一</dt>
<dd>内容第一行</dd>
<dd>内容第二行</dd>
<dd>内容第三行</dd>
<dd>内容第四行</dd>
<dd>内容第五行</dd>
<dt>列表名称二</dt>
<dd>内容第一行</dd>
<dd>内容第二行</dd>
<dd>内容第三行</dd>
<dd>内容第四行</dd>
<dd>内容第五行</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表格标签-->
<!--tr:行-->
<!--td:列-->
<!--border:给边框加像素宽度，被废弃的属性，现在使用CSS来做-->
<table border="1px">
<tr>
<!-- colspan:单元格跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowspan：单元格跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
媒体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--视频标签-->
<!--controls：设置该元素可以播放-->
<!--autoplay：自动播放-->
<video src="../resources/video/videotest.mp4" controls autoplay></video>
<!--音频标签-->
<!--controls：设置该元素可以播放-->
<!--autoplay：自动播放-->
<audio src="../resources/audio/audiotest.mp3" controls autoplay></audio>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--内联框架-->
<!--src：地址-->
<!--frameborder:边框-->
<iframe src="https://cn.bing.com/" name="test" frameborder="0" width="1000" height="800"></iframe>
<!--可以通过name属性内嵌跳转-->
<a href="https://www.bilibili.com/" target="test">点击跳转</a>
<!--嵌入了一个bilibili的视频-->
<!--<iframe src="//player.bilibili.com/player.html?aid=328414840&bvid=BV1AA411B7DB&cid=199360630&page=1"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"-->
<!-- width="1280" height="720">-->
<!--</iframe>-->
</body>
</html>
页面结构
合理使用这些自定义的标签来包装代码，可以使代码的可阅读性显著提高。
行内元素和块元素
行内元素
-
内容撑开宽度。
-
左右都是行内元素的可以在一行内显示。
-
比如a、strong、em等等。
块元素
-
无论多少内容，该元素独占一行。
-
p、h1-h6、hr等等。
标签：Title,第三行,标签,基础,第四行,HTML,内容,nbsp 来源： https://www.cnblogs.com/rsp2012/p/16074749.html