HTML中的基本标签

简介: HTML中的基本标签

在这里一共讲十种基本标签:分别为以下十种:

   段落标记:<p></p>

   标题字:h1~h6

   换行 <br/>

   水平线<hr/>

   预留格式<pre></pre>:保留格式,在HTML源码上是什么格式,到网页上还是这个格式,不变。

   粗体字<b></b>

   斜体字<i></i>

   插入字<ins></ins>

   删除字<del></del>

   右上角加字<sup></sup>

   右下角加字<sub></sub>

   font标签<font></font>:font字体标签


至于效果我们直接上代码:大家可通过HBuilerX等其他任何一个编译器来运行效果:

<html>
  <head>
    <meta charset="utf-8" />
    <title>基本标签</title>
  </head>
  <body>
    <!--段落标记-->
    <p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花,觉得花落以后埋在土里最干净,说明她对美有独特的见解。她写了葬花词,以花比喻自己,在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话,成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花,觉得花落以后埋在土里最干净,说明她对美有独特的见解。她写了葬花词,以花比喻自己,在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话,成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花,觉得花落以后埋在土里最干净,说明她对美有独特的见解。她写了葬花词,以花比喻自己,在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话,成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花,觉得花落以后埋在土里最干净,说明她对美有独特的见解。她写了葬花词,以花比喻自己,在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话,成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花,觉得花落以后埋在土里最干净,说明她对美有独特的见解。她写了葬花词,以花比喻自己,在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话,成为《红楼梦》中一场情人之间解除误会的绝唱。</p>
    <!--标题字-->
    <h1>标题字</h1>
    <h2>标题字</h2>
    <h3>标题字</h3>
    <h4>标题字</h4>
    <h5>标题字</h5>
    <h6>标题字</h6>
    <!--换行标记-->
    hello 
    world!
    <!--长了一只眼睛,独目标记-->
    hello<br/> world!
    <!--水平线,独目标签-->
    <hr/>
    <!--color是一个属性,用来指定颜色值-->
    <!--color是属性的名字,red是属性的值-->
    <hr color="red">
    <!--HTML中的字符串可以使用单引号,也可以使用双引号-->
    <hr color='red'>
    <!--HTML的语法很松散,不严格,去掉单引号双引号也行!-->
    <hr color=green >
    <!--HTML不区分大小写!-->
    <HR>
    <!--预留格式-->
    <!--保留格式,在HTML源码上是什么格式,到网页上还是这个格式,不变。-->
    <pre>
    for(int i = 0; i < 100; i++){
      System.out.println("i = " + i);
    }
    </pre>
    <!--粗体字-->
    <b>粗体字</b>
    <!--斜体字-->
    <i>斜体字</i>
    <ins>插入字</ins>
    <del>删除字</del>
    10<sup>2</sup>
    m<sub>2</sub>
    <!--font字体标签-->
    <!--color是字体颜色,size是字号-->
    <font color="red" size="12">hello world!</font>
    <br><br><br><br><br><br><br><br><br><br>
  </body>
</HTML>

这里有几点需要大家注意:


1:HTML的语法很松散,不严格,去掉单引号双引号也行!


2:HTML中的字符串可以使用单引号,也可以使用双引号


3:HTML不区分大小写!


4:<meta charset="utf-8" /> 这个是告诉浏览器采用哪一种字符编码方式打开该页面。一般这个编码方式要和文件的编码方式相同,不然会乱码。

  windows操作系统的浏览器在没有指定任何编码方式的时候,浏览器默认采用GBK的简体中文的方式打开,这是因为我们的windows操作系统是简体中文环境。

  而我们程序员,一般工作区当中文件的编码方式都是UTF-8,因为unicode更加通用。

  当前这个文件就是utf8的编码方式,如果不写以下代码,浏览器会采用GBK的方式打开,就会出现乱码。  


相关文章
|
14小时前
常用HTML标签及其作用
常用HTML标签及其作用
|
1天前
|
搜索推荐
html【标签】meta base
html【标签】meta base
6 0
|
1天前
|
前端开发 JavaScript 数据安全/隐私保护
一篇教你学会HTML:常用标签 | 表格 | 表单 | 特殊符号转义
一篇教你学会HTML:常用标签 | 表格 | 表单 | 特殊符号转义
|
4天前
HTML中的<iframe>标签及其属性
HTML中的<iframe>标签及其属性
15 5
|
4天前
|
Web App开发 移动开发 搜索推荐
HTML <meta> 标签及其属性介绍
HTML <meta> 标签及其属性介绍
11 1
|
4天前
HTML中的<br>、<hr>和<pre>标签使用指南
HTML中的<br>、<hr>和<pre>标签使用指南
12 2
|
4天前
|
JavaScript UED
HTML中的<a>标签使用指南
HTML中的<a>标签使用指南
16 6
|
4天前
|
存储 前端开发 UED
HTML中的<img>标签使用指南
HTML中的<img>标签使用指南
14 3
|
4天前
|
算法 前端开发 JavaScript
HTML中的文本标签:微观排版的艺术
HTML中的文本标签:微观排版的艺术
11 1
|
4天前
|
前端开发 开发者 SEO
HTML基础标签解析:H1-H6、DIV与P的正确使用方法
HTML基础标签解析:H1-H6、DIV与P的正确使用方法
11 0