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的方式打开,就会出现乱码。  


相关文章
|
30天前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
48 5
|
3月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
51 0
|
2天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2天前
|
存储 移动开发 前端开发
|
29天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
37 2
|
29天前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
30 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
99 1
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
174 1
|
2月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
2月前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便