标签：Title 第三行 标签 基础 第四行 HTML 内容 nbsp
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。