HTML之hello world&&基本标签

遇安.YuAn

已于 2022-10-30 10:01:16 修改

阅读量584

点赞数 2

分类专栏： HTML 文章标签： html 前端

于 2022-10-30 09:09:10 首次发布

本文链接：https://blog.csdn.net/qq_62731133/article/details/127595111

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML文件的标志是成对出现的<html></html>。成对出现的标签，结尾标签需要加上反斜杠“/”。当html最开头加上了<!DOCTYPE html>则是告诉浏览器，我们使用的是html5。最基础的html文件结构为：

<html>

<head>

<title>标题</title>

</head>

<body></body>

</html>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<!--HTML的注释-->
<!--HTML的根标记-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--头-->
<head>
    <!--网页的标题，显示在浏览器的左上角-->
    <title>第一个HTNL页面</title>
</head>
<!--体-->
<!--body是网页的主体，显示在浏览器页面上的内容-->
<body>
hello world
</body>
</html>

基本标签：

标签：当一段文字的前后加上了标签，这段文字则会自动归为一段，在浏览器上显示为一段文字而不是连在一起的无规律文字。

标题字：标题字分<h1>到<h6>六个等级，数值越小显示的文字越大。效果可参考平时我们用的word里的标题1、标题2等：

 标签： 是一个独目标记即只有开头标签没有结尾标签，负责换行。当你觉得所有的东西在浏览器上显示都挤在一起的时候，可以使用 对你想要分开的内容进行换行。

<hr>标签：它可以在你的浏览器上画出一条华丽的分割线即水平线。

<pre>标签：当你想要在浏览器上显示和在源代码上一样的格式效果时，可以使用<pre>

标签：当你想要将字体进行加粗的时候，可以使用

标签：当你想要斜体字的时候可以使用

<ins>：插入字，字体下面会带一条下划线

<del>：删除字，字体中间会出现一条线，好像将它划掉了一样

：右上角加字，即在一个字的右上角加一个小一点的字，可以参照 $10^{2}$

：右下角加字

标签：规定文本的字体、字体尺寸、字体颜色。

空格： 

大于号：>

小于号：<

在一些标签中还可以设置属性：如color属性设置颜色，width属性设置长度等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML的基本标签</title>
</head>
<body>
<!--段落标记p标签，加上p标签则会自动归为一段-->
 <p>字字字字字字字字字字字字字字字字字字字字字字字字字字字字</p>
 <p>字字字字字字字字字字字字字字字字字字字字字字字字字字字字</p>
 <p>字字字字字字字字字字字字字字字字字字字字字字字字字字字字</p>

<!--标题字，共有6个等级，一个标题字独占一行-->
 <h1>标题字 </h1>
 <h2>标题字 </h2>
 <h3>标题字</h3>
 <h4>标题字</h4>
 <h5>标题字</h5>
 <h6>标题字</h6>

  <!--换行-->
 <!--HTML源码当做换行并不是真正的换行。HTML中换行需要使用br标签-->
 hello
 <br><!--独目标记，只有开头没有结尾，负责在网页上换行-->
 world
<br><br>

<!--水平线-->
 <hr><!--独目标记-->
<!--color="red" 是一个颜色属性，color是属性名，“red”是属性值，通过color属性可以设置颜色-->
<hr color="red">
<!--width属性用来指定水平线的长度，300px表示300像素-->
<hr color="black" width="300px">
<!--width等于50%是水平线一直占有浏览器窗口宽度的一半，是动态的，不是固定死的-->
<hr color="blue" width="50%">

<br><br><br>
<!--预留格式，源代码中是什么格式，浏览器中就是什么格式-->
<pre>
  for(int i=0;i<=10;i++){
     system.out.println("hello")
  }
</pre>

<!--粗体字-->
  <b>粗体字</b>
 <!--斜体字-->
  <i>斜体字</i>
<!--插入字-->
  <ins>插入字</ins>
<!--删除字-->
  <del>删除字</del>
<!--右上角加字，如10的平方-->
  10<sup>2</sup>
<!--右下角加字-->
  100<sub>n</sub>
<!--font标签-->
  <font size="2"color="red">你好</font>

<br><br>
<!--空格 &nbsp; 一个表示一个空格，源代码中不论多少个空格都表示一个空格-->
字字   字字<br><br>
<!--所有的实体符号语法规则都是&开头，;结尾-->
 字字&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字字

<!--大于号，小于号
&lt;表示小于号
&gt;表示大于号
-->
&lt;a&gt;
<br>
10 &lt; 100
</body>
</html>