Web前端开发笔记——第二章 HTML语言 第二节 基本标签
目录
- 前言
- 一、标题标签
- 二、段落标签和段内换行
- 三、预留格式标签
- 四、行内组合标签
- 五、水平线标签
- 六、注释标签
- 七、空格字符
- 例题（创建一个网页）
- 结语
前言
本节主要讲解HTML的一些基本标签。
一、标题标签
下面红框中的内容就是标题标签。
我们用h1～h6来表示不同的标题标签，依次是一级标题到六级标题，表示为<h1～h6>标题内容 </h1～/h6>，它会被自动加黑，一般建议一个页面只有一个一级标题，标题标签之间是该标题的内容即正文，如下：
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
...
简单地来说，就像这样，一级标题到六级标题它的标题字号大小依次递减：
例如下列html代码：
<!DOCTYPE html>
<html>
<body><h1>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h1><h2>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h2><h3>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h3><h4>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h4><h5>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h5><h6>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h6>
</body>
</html>
其运行结果是：
二、段落标签和段内换行
当编辑一行文字时，就要用到段落，其实在HTML中就是段落标签，它表示为<p>段落内容</p>，且在多个段落标签之间浏览器会默认添加一个段落间距。
而如果想要在段内换行时，就要用到段内换行标签，表示为<br />，它跟其它标签不一样，是单独出现的，表示这段内一行的直接结束，即换行。
例如下图中的红框内容：
实际在html源文件表示是这样的，如下：
<!DOCTYPE html>
<html>
<body><p>8月18日，腾讯控股（00700.HK，以<br />下简称“腾讯”）发布2021年第二季度<br />及半年度业绩报告。</p><p>财报显示，在今年第二季度，腾讯收<br />入1382.59亿元人民币（下同），净利<br />润425.87亿元，非国际财务报告准则<br />下的净利润340.39亿元。</p>
</body>
</html>
运行结果如下：
三、预留格式标签
可以通过预留格式标签来对文本中的空格和换行符进行保留，它表示为<pre>文本</pre>，文本中的内容都会被保留其原本的格式。
例如，下列html代码，我们在"JavaScript"后面敲了空格以及文字和代码之间空了一行，还有代码的格式：
<!DOCTYPE html>
<html>
<body><pre><p>JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。以下是一个JavaScript源代码中的一部分：function myFunction(){document.getElementById("myPar").innerHTML="你好世界！";document.getElementById("myDiv").innerHTML="你最近怎么样?";}</p></pre>
</body>
</html>
运行结果如下，空格和换行以及代码中的格式都得到保留：
四、行内组合标签
当要对一段文本当中的部分内容进行标注时，要用到行内组合标签，表示为<span>文本</span>，即将要另外标注的文本放在span标签之内，它的作用是组合行内的元素，以便在CSS样式中进行格式化。
例如，下列html代码中，用了CSS代码对span标签进行特殊样式的设置：
<!DOCTYPE html>
<html>
<body><p>我最喜欢她 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛。</p>
</body>
</html>
运行结果如下：
五、水平线标签
首先要知道水平线标签也是单独出现的，它表示为<hr />。例如，下列html代码中，我们在两个段落之间加入了水平线标签：
<!DOCTYPE html>
<html>
<body><p>8月18日，腾讯控股（00700.HK，以<br />下简称“腾讯”）发布2021年第二季度<br />及半年度业绩报告。</p><hr /><p>财报显示，在今年第二季度，腾讯收<br />入1382.59亿元人民币（下同），净利<br />润425.87亿元，非国际财务报告准则<br />下的净利润340.39亿元。</p>
</body>
</html>
运行结果如下：
六、注释标签
很多编程语言中都有注释，html中也有注释标签，它表示为<!--注释内容-->，可以跨行注释，要注意注释的内容是不会在浏览器中显示的，只有在源代码中可以找到。
例如，下列html代码中添加三行注释内容：
<!DOCTYPE html>
<html>
<body><p>8月18日，腾讯控股（00700.HK，以<br />下简称“腾讯”）发布2021年第二季度<br />及半年度业绩报告。</p><!--这里是注释内容第一段。这里是注释内容第二段。--><hr/><p>财报显示，在今年第二季度，腾讯收<br />入1382.59亿元人民币（下同），净利<br />润425.87亿元，非国际财务报告准则<br />下的净利润340.39亿元。</p><!--这里是注释内容第三段。-->
</body>
</html>
运行结果如下：
七、空格字符
当要在段落中使用空格时，要用到空格字符，它必须是全小写，表示为 ，注意这里的";"不能漏掉。
例如，下列html代码，在文本的开头桥加上了两个空格字符以及在"JavaScript"后面也加了一个空格字符：
<!DOCTYPE html>
<html>
<body><p> JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。</p>
</body>
</html>
运行结果如下：
例题（创建一个网页）
这里将通过一个例题，通过简单的制作网页过程以及结合上面的内容来更加深入地了解HTML语言。
例、用html语言编写这个页面。
1、打开SublimeText 3，新建文件并保存至本地路径。
3、生成html5的基本结构。
3、编辑网页的标题部分，即在<title></title>之间输入标题，如“我的网页”：
<!DOCTYPE html>
<html>
<head><title>我的网页</title><meta charset="utf-8">
</head>
<body></body>
</html>
4、编写body内容，先用标题标签，输入标题的内容为“前端开发”，然后输入段落文字以及两条水平线，如下：
<!DOCTYPE html>
<html>
<head><title>我的网页</title><meta charset="utf-8">
</head>
<body><h1>前端开发</h1>
<pre><p> 前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，<br />CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户<br />界面交互。</p></pre>
<hr />
<pre><p> 前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页<br />制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用<br />网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更<br />加美观，交互效果显著，功能更加强大。</p></pre>
<hr />
<pre><p> 前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，<br />Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p></pre></body>
</html>
使用浏览器解析的结果：
当然其中字体以及其它细节还需要CSS来进一步完善，这里暂且是这个样子。
结语
以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！
Web前端开发笔记——第二章 HTML语言 第二节 基本标签相关推荐
- Web前端开发笔记——第一章 Web前端概论
目录 前言 一.Web系统 (一)Web系统的定义 (二)前端和后端 二.网站和网页 (一)网站的开发历程 (二)网页的组成元素 三.浏览器 四.前端技术 (一)超文本标记语言(HTML) (二)层叠 ...
- Web前端开发笔记——第二章 HTML语言 第九节 框架标签、脚本标签
目录 一.框架标签 (一)显示目标页面 (二)规定大小的框架 (三)规定边框的框架 二.脚本标签 结语 一.框架标签 (一)显示目标页面 <iframe></iframe>标签 ...
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
- web前端开发笔记46-71，78-83 2022/11/04
web前端开发笔记 一.标签群组通配等选择器(TAG) 1.标签选择器 2.群组选择器(不同标签) 3.通配选择器(一锅端) 二.层次选择器 - 后代():M N - 父子:M > N - 兄弟 ...
- Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
目录 一.区域标签 (一)div标签的定义 (二)div标签的属性 二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
- Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
目录 一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性 二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
- Web前端开发笔记——第三章 CSS语言 第六节 CSS定位
目录 一.定义 二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素 三.浮动定位 (一)左浮动和右浮动 (二)清除浮动 四.层定位 (一)st ...
- Web前端开发笔记——第二章 HTML语言 第三节 文本格式化标签
目录 前言 一.文本加粗.斜体标签 二.文本字体缩小.放大标签 三.文本下标.上标标签 四.文本下划线.删除线标签 五.双引号字符 结语 前言 这里主要介绍对html语言中对文本的处理. 一.文本加粗 ...
- Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器
目录 前言 一.CSS选择器 (一)标签选择器 (二)id选择器 (三)类别选择器 二.针对标签的选择器嵌套 三.集体声明和全局声明 (一)集体声明 (二)全局声明 结语 前言 CSS代码由选择器和一 ...
最新文章
- MAT之ACA：利用ACA解决TSP优化最佳路径问题
- 光速OFFER，为AI奔赴，商汤2022届校招提前批正式启动！
- 怎么绕过论坛回复_铝散热片铆钉怎么压得快,有没有自动化设备
- YbtOJ#20081-[NOIP2020模拟赛B组Day8]树上排列【组合数,树形dp】
- Docker安装ActiveMQ（docker-compose.yml）
- Netty实现的一个异步Socket代码
- css修改layui的下拉框样式 js_layui，经典模块化前端UI框架，前端菜鸟带你初识栅格。...
- 使用sqoop导出mysql数据时错误处理【com.mysql.jdbc.RowDataDynami】
- 3.1~4 处理器架构IA32/x86介绍+IA32架构下汇编基本介绍
- java丢硬币boolean_抛硬币模拟器
- photoshop标尺工具_工具设置：PhotoShop
- eterm单人订座流程
- linux centos 环境下Device eth0 does not seem to be present,delaying initialization. 问题处理
- 支付宝PC（二维码扫码）支付（Java开发）完整版
- 计算机文档保存了在文件夹中找不到,word文档保存后找不到了如何解决
- css3中-moz-、-ms-、-webkit-、-o-分别代表什么内核
- C#通过函数名字符串执行相应的函数
- Stata：时间序列中的格兰杰因果检验
- Digilent Basys2开发板驱动安装失败
- jeesite 框架的简单应用