学 HTML 要不看看这个？-CSDN博客

本文链接：https://blog.csdn.net/m0_73938966/article/details/133715875

什么是HTML？

官方地说，HTML是一种超文本标记语言。

通俗地讲，HTML就是用来设计我们所看到的网站和网页的，所以HTML文件也可以叫Web页面。

HTML不是编程语言，很简单的！会玩乐高积木就会用。

编写HTML的建议工具

我们当然可以在电脑桌面上新建一个txt的文本文件，在里面写好html的代码后，更改文件后缀为html得到html文件，但是这样太过于繁琐，效率不高。

VScode 下载地址 https://code.visualstudio.com/

故我推荐在VScode里面编写html代码。记住我的朋友，VScode特别强大！

（编写html文件不用像编程语言那样需要配置VScode那样麻烦，直接用就可以了）

然后去下载这个插件叫做open in browser，这个插件可以让你写的html文件在浏览器里面显示出来，就是展示你所写的html代码！

下载好后，在写好的html文件中，右键找到Open in Default Browser 就可以在默认的浏览器打开你所编写好的html代码！

入门案例

就像入门C语言那样，我们先用HTML输出个hello world吧！

入门代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
    hello world!
</body>
</html>

效果图：

我们不难发现HTML的代码似乎有某种规律，好像有<head>就会有</head>，有<body>就会有</body>，其实这个在HTML里面叫做标签Tag，<head>是起始标签，</head>是结束标签。

标签通常都是以一对的形式出现的，有始有终。当然有极少数是以单个的形式出现的（据说用手都可以数清楚有几个）。

入门代码逐句分析：

<!DOCTYPE html> 用来声明该文件是HTML5文件
<html lang="zh-CN"> 定义页面为中文页面，当然也可以是en的英文页面
<html> 是HTML页面的根元素
<head> 是头部标签，表现在网页上的就是一个网页的头部，可以见效果图的HUTAC处
<meta charset="UTF-8"> 设置字符编码格式为UTF-8
<title> 用于描述文档的标题，入门示例将标题置为HUTAC
<body> 就是主要的页面内容部分

HTML里面有哪些标签Tag呢？

文本类标签

标题

HTML的标题是通过<h1> - <h6>标签来定义的，分别对应的是一级标题到六级标题，效果跟word的一级标题到六级标题差不多。

段落

HTML的段落是通过<p>标签来定义的。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
 
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
 
</body>
</html>

效果图：

文本格式化

HTML的文本格式化输出。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
    <b>粗体文本</b>
    <br/>
    <!-- <strong>粗体文本</strong> 
    <br/> -->
    <em>强调文本</em>
    <br/>
    <i>斜体文本</i>
    <br/>
    <del>带删除线的文本 </del>
    <br/>
    <sub>下标文本</sub>
    <br/>
    <sup>上标文本</sup>
 
</body>
</html>

效果图：

图像标签

HTML的图像是通过<img>标签来定义的。其中标签里面的属性有src图片的路径，width图片的宽度，height图片的高度，alt图片加载失败时提示文字，title把鼠标放在图片上时的提示文字，border边框。其中src是必须要填写的参数。如果填写了图片的高度和宽度其中一个，图片就会等比例缩小，如果高度和宽度都填写了，图片有可能会失真。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
    <img src="five.png" width="500" alt="图片加载失败时显示的提示文字" title="把鼠标放在图片上时显示的文字">
 
</body>
</html>

效果图：

链接标签

HTML的链接是通过<a>标签来定义的。

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
    <a href="five.png" target="_blank" title="把鼠标停留在链接上的提示文字">五条悟的图片</a>
    <br/>
    <a href="https://www.baidu.com/" target="_blank">百度的链接我拿过来用了</a>
    <br/>
    <a href="test.zip" target="_blank">下载文件</a>
    <br/>
    <a href="#">空链接</a>
    <!-- <br/>
    <a href="下一页的html文件"></a> -->
</body>
</html>

效果图：

href这个参数，可以是别人的网址，可以是自己的html的文档路径，也可以是图片或者视频的路径，如果是压缩包的话，点击后就会下载对应的压缩包，如果是空链接的话，点击后啥反应都没有。

当然链接的本体，不仅仅可以是文字，同时也可以是图片，表格，音频等都可以添加超链接。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank"><img src="five.png" width="500"></a>
</body>
</html>

效果图：

这个虽然与之前图片标签所展示的效果看起来似乎是一样的，但是当我们点击五条悟的图片后，就会跳转到百度的网址，这就是不一样的地方，它不单纯是一个图片，更是一个链接，是用链接标签嵌套了图片标签。

最后链接还有一种是锚点链接，功能就类似于导航栏，原神玩过吗？就是原神里面的锚点传送一样啊。锚点链接的语法如下：

 <a href="#one">第一个锚点</a>
<!--先创建了一个锚点叫做one-->
 <p id="one">第一段</p>
<!--然后把这个锚点放到了指定的p标签里-->

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
    <a href="#two">玉折</a>
    <a href="#one">性格特点</a>
    <h1 id="one">五条悟的性格特点</h1>
    <p>
    被作者描述为“除了性格以外什么都完美”的男人。性格肆意，讨厌“正论”。
    <br/>
    以及说过“爱是最扭曲的诅咒”这句话。
    <br/>
    恪守着自己的价值观与善，决定以教育的方式培养新人，改变咒术界腐朽的现状。
    <br/>
    为了动脑筋经常补充糖分，然后就变成了一个大甜党。曾专门跑到仙台购买本地特产的喜久福，还推荐毛豆泥鲜奶油味的大福。
    <br/>
    什么都会，因此什么事情都不做，按照其本人的说法是为了锻炼新人。
    <br/>
    会做料理等家务活。
    <br/>
    除了性格外完美无缺，唱歌也是超拿手。
    </p>
    <h1>五条悟的背景</h1>
    <p>特级咒术师，出生于拥有无下限术式的五条家，因其生来拥有【六眼】的术式所以可以熟练掌握。</p>
    <h1>怀玉</h1>
    <p>2006年，为高专二年级，与夏油杰、家入硝子为同期，后辈为七海建人和灰原雄。
        <br/>
        仅仅16岁就已具有特级实力，性格狂妄讨厌“正论”，是让夜蛾头疼的问题儿童。
        <br/>
        与挚友夏油杰并称【最强】组合，因身为咒术师的理念不同与夏油时常争执。
        <br/>
        后与夏油杰二人一同执行咒术高层下达的〖星浆体〗的委托，保护天内理子。经历了一系列护卫与理子主仆的相处后，二人决定遵从理子的心意，不再仅仅因高层的指派将其消抹。
        <br/>
        返回高专的护卫任务中，被伏黑甚尔精心准备的计划所消耗，放松精神解除无下限术式后被其突袭刺穿腹部。
        <br/>
        选择让夏油护送理子，自己与甚尔对战。
        <br/>
        拥有人类最强的肉体、反向【天与咒缚】的伏黑甚尔对五条悟存在克制，二人交战的最后五条悟被伏黑甚尔用特级咒具〖天逆鉾〗刺穿脖子，其后头颅被短刀刺穿。
        <br/>
        在濒死之际领悟了反转术式，通过无下限术式和反转术式的无间断运作，自此觉醒了无咒力消耗的无下限术式。
        <br/>
        找到伏黑甚尔后与其再度交战，整个人仿佛脱胎换骨，逐渐显露出疯狂的一面，最终以“虚式”——【茈】将伏黑甚尔左上半身击没，成功将其击败。
        <br/>
        询问甚尔死前的遗言，伏黑甚尔在濒死之际告诉了他「2、3年后，我的孩子会被卖到禅院家，随你处置吧。」
        <br/>
        之后抱着天内理子的尸体回到〖盘星教〗的设施内，对着身为普通人类但主导了理子死亡的盘星教徒，对夏油杰说可以将之全部杀死，被夏油以“杀死他们没有意义”而阻止。
    </p>
    <h1 id="two">玉折</h1>
    <p>
        一年后，2007年8月，五条悟彻底掌握了通过反转术式修复自身而可永久开启的无下限术式，自此成为真正的“最强”。
        <br/>
        同年9月份，独自执行任务的夏油杰因同伴死亡、理子的真相死亡与咒术师所求意义的困顿，造成巨大恶劣事件后叛逃。五条悟在新宿街头与其相遇，自此两人的理念已经彻底分道扬镳。在夏油的「想杀就杀吧，你的选择都有意义」回答之下，放弃了对其出手。
        <br/>
        夏油一事后，与老师夜蛾交谈，自认只能拯救愿意被拯救的人。此后决定寻求同伴，以自身的方式改变咒术界。
        <br/>
        之后找到幼年伏黑惠，与禅院周旋将其赎下，告知了他有关禅院的信息，提及伏黑甚尔的信息但被阻止。为伏黑姐弟以“伏黑惠长大后会成为咒术师”为担保申请了咒术高专的补助资金，使姐弟可以自由生活。
    </p>
</body>
</html>

效果图：
当我们想要快速地准确地找到玉折篇的文字的时候，我们只需要点击页面最顶部的玉折，就可以到达玉折的位置，这就是锚点链接的作用。

表格标签

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
    <table border="2" width="200">
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
            </tr>
        </thead>
        <tbod>
            <tr>
                <td>张飞</td>
                <td>男</td>
            </tr>
        </tbod>
    </table>
</body>
</html>

效果图：

表格标签为<table>，属性有很多，border边框宽度默认为0，width宽度，当然高度也有，基本上所以html的样式都可以不需要太在意，到时候学CSS就是用来设计html的样式的。<thead>是表头，表头的字都是自动加粗并且居中的。<tbody>是表体，<tr>是一行，<td>是单元格必须先有行才有单元格。

无序列表标签

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
   <ul>
    <li>第一列</li>
    <li>第二列</li>
   </ul>
</body>
</html>

效果图：

有序列表标签

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
   <ol>
    <li>第一列</li>
    <li>第二列</li>
   </ol>
</body>
</html>

效果图：

自定义列表标签

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
   <dl>
    <dt>项目 1</dt>
        <dd>李兄</dd>
        <dd>张兄</dd>
    <dt>项目 2</dt>
        <dd>描述</dd>
        <dd>描述</dd>
   </dl>
</body>
</html>

效果图：

<dt>自定义的列表名称，<dd>列表里面的元素。

表单标签

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HUTAC</title>
</head>
<body>
    <form action="xxx.html" method="post">
        用户名称：<input type="text" name="username">
        <br>
        用户密码：<input type="password" name="pwd">
        <br>
        用户性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
        <br>
        用户居住城市：
        <select>
            <option>广东</option>
            <option>湖南</option>
            <option>江西</option>
            <option selected="selected">北京</option>
        </select>
        <br>
        用户出行方式：
        <input type="checkbox" name="goway" value="bike"> 自行车
        <input type="checkbox" name="goway" value="car" checked="checked"> 汽车
        <input type="checkbox" name="goway" value="ship"> 轮船
        <input type="checkbox" name="goway" value="airplane"> 飞机
        <br>
        给我们的建议：
        <textarea>每条建议我们都会看！</textarea>
        <br>
        <input type="submit" value="提交用户信息">
        <input type="reset" value="重新填写用户信息">
    </form>
</body>
</html>

效果图：

表单的组件有很多，有文本框，密码框，单选按钮，复选按钮，大文本区域，提交按钮，清除按钮，普通按钮等。它们的语法可以从示例代码中体现出来，自己试着敲一敲就懂了，如果了解过GUI编程的话，HTML对你来说不算什么。

表单里面组件的属性也有很多，其中name属性是为后端人员接受页面数据提供的，checked属性一般是默认值，就是默认选项，比如多选里面，可以默认汽车为出行方案。value对于按钮来说是按钮上面的字，对于其他组件来说就是反应给后端的值，比如说你选择了自行车并且提交了表单，那么后端就可以看到bike这个单词。

表单的属性不多，action的意思是这个表单的信息提交到哪个地方，也就是需要一个地址，可以是html也可以是URL。methods是以什么方式提交，提交方式有post和get，一般都是post。

补充

&lt; 等价于<
&gt; 等价于>
&nbsp; 等价于空格
<br/> 是换行 
<!--注释内容--> 是注释
单标签可以从<br/>这么写到<br>这么写

学会查看文档

菜鸟HTML https://www.runoob.com/html/html5-intro.htmlhttps://www.runoob.com/html/html5-intro.html

W3C网校 https://www.w3school.com.cn/https://www.w3school.com.cn/

最后的总结

html的样式不用太过于在意，CSS的作用才是样式。样式指的是一个组件的模样，包括了长宽高，颜色，形状等。