HTML学习3:常用标签之文本标签
前面说到HTML是一种标记语言,在HTML中就是用一个个标签来标记网页的,下面就来进行常用标签的学习。我们说到网页,首先关注到的就是网页中显示的文本内容,而这些文本内容就是用文本标签来标记的。
在说常用的标签之前,我们先来说说标签的组成。
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
1HTML 标签是由尖括号包围的关键词,比如 <html>
2HTML 标签通常是成对出现的,比如 <b> 和 </b>
3标签对中的第一个标签是开始标签,第二个标签是结束标签
4开始和结束标签也被称为开放标签和闭合标签
HTML的基本结构在《初始HTML》大家已经看到,最基本的有四个文本标签:
<span style="font-size:18px;"><html><head><title>网页标题</title></head><body>网页内容</body>
</html></span>
说明:
1)html:告知各浏览器,此文档是Web文档,要按照HTML语言规则对文档中的内容进行解释,用来描述网页。
2)head:描述文档的头信息。常用的子标签有:<link>、<meta>、<script>、<style>、<title>。
3)title:加载网页中最先看到的网页标题。
4)body:正文标记,包含了网页文档的内容。文字,图像,动画,超链拉以及其他的HTML标记均位于该标记中,是网页中可见的文本内容。
此外还有一个就是和其他语言相似的一个注释标记:<!--注释内容-->。
文本标签是网页中最基础的标记,包括<p>、<br>、<hn>(n从1到6)、<hr>、<font>、<b>、<i>、<u>、<s>、<sup>、<sub>、<big>、<small>、<strike> 等等。我们只是介绍一些最常用的文本标签。
一,标题标签:HTML 标题是通过 <h1> - <h6> 等标签进行定义的
<span style="font-size:18px;"><html><head><title>文本标签演示</title></head><body><!--HTML注释:这是一级到六级的标题标签。--><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6><!--HTML段落是通过 <p> 标签进行定义的。--><p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p></body>
</html></span>
网页显示结果为:
二,段落标签:HTML段落是通过 <p> 标签进行定义的
<span style="font-size:18px;"><html><head><title>文本标签演示</title></head><body><p>这是段落1。生活的无奈,有时并不源于自我,别人无心的筑就,那是一种阴差阳错。生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p><p>这是段落2。心有明灯,便不会迷路,便可拒绝黑暗、胆怯,拥有一份明朗的心情,一份必胜的信念,一份坦荡的胸怀……心有小窗,便有亮丽的阳光进来,小酌一些温暖的故事,便有自由清风邀约一些花香或者白云。心有琴弦,纵然客去茶凉,仍有小曲缓缓响起,仍有满树桂花知音而化为酒香。</p><p>这是段落3。惊涛拍岸,卷起千堆雪,是一道风景;东风栽柳,碧如丝绦,是一道风景;小荷初露,涓涓清泉,是一道风景;可是,你可知道,聪明的你就是一道风景:虽然没有东风栽柳的多情,没有小荷初露的恬美;但是你有青春的活力,你有抵御艰难的柔韧,你有闪光的心灵。</p><p>段落元素由 p 标签定义。</p></body>
</html></span>
网页结果显示为:
三,HTML <font> 标签:<font> 规定文本的字体、字体尺寸、字体颜色
<span style="font-size:18px;"><html><head><title>文本标签演示</title></head><body><h1>这是<font face="宋体" size="+6" color="#FF0000">一级</font>标题</h1></body>
</html></span>
网页显示结果为:
四,HTML <b> 标签:<b> 标签规定粗体文本
<span style="font-size:18px;"><html><head><title>文本标签演示</title></head><body><p>这是普通文本</p><hr /><b>这是粗体文本</b></body>
</html></span>
网页显示的结果为:
五,HTML <i>、<u>、<s>、<sup>、<sub>、<big>、<small>等等一些标签,还有其他的一些文本标签我们就不再一一列举了。好的HTML编辑器都会有这些文本标签。
<i> 标签显示斜体文本效果。
<u> 标签可定义下划线文本。
<s> 标签可定义加删除线文本定义。
<sup> 标签可定义上标文本。
<sub> 标签可定义下标文本。
<big> 标签呈现大号字体效果。
<small> 标签呈现小号字体效果。
六,换行标签<br />和水平制表符标签<hr />
<span style="font-size:18px;"><html><head><title>文本标签演示</title></head><body><p>山一程,水一程。身向榆关那畔行,夜深千帐灯。 风一更,雪一更。聒碎乡心梦不成,故园无此声。</p><hr /><p>谁念西风独自凉,萧萧黄叶闭疏窗。沉思往事立残阳。被酒莫惊春睡重,赌书消得泼茶香,当时只道是寻常。</p><br />人生若只如初见,何事秋风悲画扇。等闲变却故人心,却道故人心易变。</body>
</html></span>
网页结果显示为:
关于文本标签就先说到这里,后面学习了CSS样式列表我们还会重新进行更丰富的变化。
HTML学习3:常用标签之文本标签相关推荐
- Web学习第一天——HTML简介及常用标签(文本标签)
第一天 HTML简介及常用标签(文本标签) 一. HTML简介 1. 什么是HTML 2. HTML的编写工具 3. HTML的文档结构 4. W3C标准 二.HTML中的常用标签 (一). head ...
- 常用标签以及文本标签(下)
常用标签 无序列表 没有序列的一组内容 (1)语法 <ul> <li>苹果</li> <li>香蕉</li> </ul> (2) ...
- 051 <css语法> 学习之: 常用标签(input等)
文章目录 标签 先说input这一簇 获取信息: input 标记: label 表单: form 再说table这一簇 表格: table 表格行: tr 表格头: th 表格内容: td 行内元素 ...
- Bootstrap学习笔记--常用标签和类模板
h标签:bootstrap中的h标签被改写了 比原标签字体要细 <h1>我是标题1 h1</h1> <h2>我是标题2 h2</h2> <h3&g ...
- HTML学习笔记_常用标签的使用及注意事项
html学习笔记 本文根据B站pink老师的视频整理而成,包含常用标签的使用及注意事项. 注意:本篇文章排版不好看,不方便大家阅读,重新排版后的文章在这里:HTML学习笔记 | 常用标签的使用及注意事 ...
- html入门基础知识及常用标签
一.html简介 html被称为超文本标记语言(简单来说就是比文本更加高级的语言),俗称网页,由内容和标签组合在一起的只能使用浏览器来观看的一种语言.不只是能放文字数字等,还可以放图文声像. html ...
- 1,html常用标签学习
1.html常用标签学习: 1.1.<em>和<strong>标签主要是用来做强调用的,其中<em>是让文字变成斜体,而<strong>把文字进行加粗显 ...
- a标签里面设置onclick_HTML学习笔记:各种常用标签
今天是刘小爱自学Java的第76天. 感谢你的观看,谢谢你. 话不多说,继续html的学习: 昨天学习了最基础的文本标签及属性,除此之外还有很多其它标签,今天逐一学习. 一.链接标签(a标签) a标签 ...
- 前端--HTML,常用标签学习
文章目录 一.HTML 1. 概述 2.入门案例 3.使用HBuilder 二.常用标签 1.概述 2. 常用标签 3.表格标签 4.表单标签form 5,无法提交的问题 6.练习表单标签 一.HTM ...
最新文章
- double和float计算精度不准的问题
- SQL Server递归查询无限级分类
- 防止asp.net页面多次提交数据
- IIS中架设二级域名网站
- 【图像】Dog(高斯差分)检测角点
- iservice封装有哪些方法_请问这段Java代码能不能封装成一个方法
- jQuery 事件介绍
- 【Elasticsearch】es 各种查询 详解
- HDU2050 折线分割平面【组合】
- 传媒大学媒体中心资源批量获取工具的制作
- 【优化算法】正弦余弦算法(SCA)【含Matlab源码 1308期】
- 火狐浏览器装ie tab出现问题出现组件冲突,标题栏一直显示正在连接,附加组件打不开,解决
- win10上运行ROS时报:qt.qpa.plugin:Cound not find the Qt platform plugin “windows“
- 计算机网络中WLAN是指,什么是WLAN网络 WLAN是什么意思
- char[]和char* 输出长度不同
- python smtp QQ邮箱 发送附件
- android webview使用html5input id=input type=file/ 上传相册、拍照照片
- CVE-2018-12613 --- 本地文件包含造成远程代码执行漏洞复现
- linux grep -a命令 grep用法
- SVN插件 for VS--VisualSVN
热门文章
- C++中国象棋:铁滑车杀棋二级大师,弃车绝杀,勒道挂角车!
- java计算机毕业设计客服管理系统源码+mysql数据库+系统+lw文档+部署
- 什么是汽车胎压监测系统(TPMS)?
- linux升级ssh注意事项,Linux下升级 OpenSSH
- matlab中枝切法解包裹,一种基于改进枝切法的激光散斑相位解包裹方法与流程
- 弹飞绵羊——好惨一只羊
- STCubeMX翻译
- 推荐20个非常优秀的网站菜单设计案例
- 【100%通过率】华为OD机试真题 C 实现【通信误码】【2022.11 Q4 新题】
- mdf ldf 转mysql_SQL Server的ldf和mdf文件转移