其他分享
首页 > 其他分享> > HTML基础

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>
​
<!--特殊符号-->
<!--空格转义-->
<!--不用转义的空格在代码里敲再多实际也只显示一个-->
<!--更多符号用&自取-->
野草一年年疯长&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;来自亲人的寄望
​
</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>

 

页面结构

合理使用这些自定义的标签来包装代码,可以使代码的可阅读性显著提高。

 

行内元素和块元素

行内元素

块元素

标签:Title,第三行,标签,基础,第四行,HTML,内容,nbsp
来源: https://www.cnblogs.com/rsp2012/p/16074749.html