html常用标签认识与练习（一）

最新推荐文章于 2022-07-25 12:31:43 发布
最新推荐文章于 2022-07-25 12:31:43 发布
阅读量364 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bangyou2019/article/details/88240961
版权

一、文本格式化元素

常用的标签：

<b> 定义粗体文本    

<i>定义斜体

<em>定义强调文本

<strong>定义粗体文本与<b>标签基本相同

<small>定义小号字体文本

<sup>定义上标文本

<sub>定义下标文本

 <bdo>定义文本显示的方向，用dir属性来指定，只能是ltr或者rtl

eg:

<!DOCTYPE html>

 <html>

  <head>

    <meta http-equiv="Content-Type" conten="text/html;charset=utf-8" >

    <title>文本格式化元素应用</title>

  </head>

  <body>

  <span><b>加粗文本</b></span><br />

  <span><i>斜体文本</i></span><br />

  <div><b><i>粗斜体文本</i></b></div>

  <div><em>被强调的文本</em></div>

<big><span>大号字体文本</span></big><br />

<small><span>小号字体文本</span></small><br />

<div>普通文本<sup>上标文本</sup></div>

<div>普通文本<sub>下标文本<sub></div>

<bdo dir="ltr">文字从左向右排列</bod><br />

<bdo dir="rtl">文字从右向左排列</bdo><br />

  </body>

</html>

 

二、语义相关元素

<abbr>用于表示一个缩写

<address>用于表示一个地址

<blockquote>用于定义一段长的引用文本，浏览器以缩进的方式显示，其cite属性可以指定引用文本网址的url

<q>用于定义一段短的引用文本，浏览器会为这段文本添加引号

<cite>用于表示作品（一本书、一部电影、一首歌曲）的标题，浏览器常用斜体表示

<code>用于表示一段计算机代码

<dfn>用于定义一个专业术语，浏览器会用粗体或斜体显示

<del>定义文档中被删除的文本，浏览器以画线的形式显示

<ins>定义文档中插入的文本，浏览器常以下划线形式显示，其中cite属性定义一个url；datetime定义文本删除或者插入的时间

<pre>用于表示该元素已经进行预格式化，元素包含的文本空格、回车、tab等格式都会保留下来

<samp>用于定义示范文本内容

<kbd>用于定义键盘文本，用于表示文本是通过键盘输入的

<var>表示一个变量，通常用斜体显示

eg:

<!DOCTYPE html>

<html>

  <head>

   <meta http-equiv="Content-type" content="text/html;charset=uft-8"> 

  <title>语义相关元素使用</title>

 <head>

  <body>

  <!--使用q表示一段短的引用文本-->

  <p>上学的时候老师常交待：<q cite="http://www.zqnhb.com">欲速则不达</q>

<div>

<!--使用blockquote引用一段长文本-->

<blockquote>

床前明月光，<br />

疑是地上霜。<br />

举头望明月，<br />

低头思故乡。<br />

</blockquote>

是李白著名的《静夜诗》诗句

</div>

<!--用cite来表示作品标题-->

<div>

李白著名的诗还有很多，比如<cite>《望庐山瀑布》</cite>、<cite>《蜀道难》</cite>等

</div>

<!--使用code来定义一段代码-->

<code>

public class People{<br />

private string name="Lucy";<br />

}<br />

</code>

<!--使用pre来展示预格式化文本-->

<pre>

  public class People{

    private string name="Lily";

}

</pre>

<!--使用abbr定义缩写-->

<div>中华人民共和国的英文缩写是<abbr title="中国">China</abbr><div>

<!--使用address定义地址-->

<div>武汉致清鸟环保公司地址是<address>武汉蔡甸大拇指广场1期5栋1217</address></div>

<!--使用dfn定义专业术语-->

<div><dfn>Java</dfn>是一种高级程序语言</div>

<!--使用kbd展示键盘输入-->

<div><kbd>list -l</kbd>用于linux系统里面展示所有文件、目录的详细信息</div>

<!--使用samp定义示范文本-->

<samp>重新学习html的压力是很大的，需要付出更多的时间和努力，自己更希望运用这个机会来督促和逼迫自己学会努力坚持做一件</samp>

<!--使用var展示变量定义的样式-->

<div>

<var>i</var><var>j</var><var>k</var>常在程序语言中作为循环变量进行定义

</div>

<!--使用del和ins展示修订样式-->

<div>十年前学了C语言、数据结构、Java，<del>但是</del><ins>由于</ins>没有经常使用忘得一干二净，后悔都来不及</div>

 </body>

</html>

 

 

A00专业甲醛检测治理84993686
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML常用标签练习
weixin_53125457的博客
12-03 357
HTML常用标签 目录1.定义列表2.超链接3.锚点4 .表格4.1表格合并 1.定义列表 定义列表标签：dl dt dd dl 表示定义一个定义列表 dt 定义列表的标题（列表项） dd 定义对标题的说明和解释 一般应用于页面文字描述的导航栏等 嵌套关系：dl>dt>dd -格式： <dl> <dt>标题</dt> <dd>对标题解释</dd> </dl> 2.超链接 <a
HTML简介和标签练习（一）
haha的博客
03-11 523
HTML简介和常见的文本标签练习
html基本标签练习
weixin_34067980的博客
09-11 205
Alt  显示工具栏 f2修改文件名称 内联元素：&lt;div&gt;只占一行&lt;/div&gt; 块级元素：&lt;span&gt;&lt;/span&gt;   以utf8无bom格式编码   安装notepad++  代码格式化需上网下载插件 tidy2  ，安装方法：将Tidy2.dll复制到Notepad++目录下的plugins中,然后重新启动Notepad++程序 ...
HTML标签练习（二）
haha的博客
05-13 561
HTML标签练习：媒体标签、表格标签、表单标签、框架标签
HTML5标签练习
name_liv的专栏
10-09 928
function drawCanvas() { var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FFF000'; ctx.fillRect(200,0,80,100); } Aside 的内容是独立的内容，但应与文档内容相关。
kettle-cooked-jalapeno:我的第一个 Git 中心存储库
06-10
因此，我们可以推断这个项目可能是一个Web开发练习，创建了一个包含HTML页面的简单网站或者是一个关于HTML学习的教程。 基于提供的压缩包文件名称"kettle-cooked-jalapeno-master"，我们可以猜测这是项目的主分支或...
认识实习大纲网络部分
04-25
- [1] **常用HTML语言语法**：提供HTML语言的基础语法知识，包括常用标签的使用方法。 - [2] **常用网络测试命令**：详细介绍网络测试命令的使用方法及其应用场景。 - [3] **华为HW-RouteSim实验指南**：指导学生...
初学者练习的javaWeb所需jar包
08-11
3. **JSTL (JavaServer Pages Standard Tag Library)**: JSTL提供了一组标准的标签库，用于在JSP页面中处理常见任务，如迭代、条件判断、XML操作等，降低了使用脚本语言的复杂性。常用的JSTL库文件为`jstl.jar`和`...
有关html教学的志愿
11-02
- 常用基本标签：如`<h1>`到`<h6>`的标题、`<p>`段落、`<a>`超链接、`<img>`图像等。 - 块级与内联元素的区别：理解它们在布局中的不同作用。 - 表格元素：`<table>`、`<tr>`、`<td>`和`<th>`等，用于创建数据...
京东静态网页项目(静态)
06-24
掌握各种HTML标签的使用，如`<header>`、`<nav>`、`<section>`、`<article>`、`<aside>`、`<footer>`等语义化标签，以及`<h1>`至`<h6>`标题、`<p>`段落、`<a>`超链接、`<img>`图片、`<ul>`和`<ol>`列表等常用标签。...
初步认识HTML+表单标签练习
weixin_64449292的博客
07-25 606
适合初学者，内容比较基础。学好表单标签非常重要。
HTML一些简单标签的练习&复习
skrboy的博客
07-30 745
简单复习一下HTML的几个标签
二、HTML标签练习
m0_49524888的博客
08-02 222
<b>规定粗体文本 <body> <p>青春</p> <b>青春</b> </body> <base>标签为页面上的所有链接规定默认地址或默认目标。href属性设置或返回对页面中所有链接的基准URL（统一资源定位器）；id设置或返回<base>元素的id；target设置或返回针对页面中所有链接的默认目标。 <head> <base href="http...
html5的基础标签及练习(1)
weixin_45829736的博客
06-09 706
html5第一部分1.一篇简单的博客(标题、倾斜字体、分隔线、换行)2.仿百度新闻(超链接跳转，文本编号)3.图片的使用(导入图片，更改宽度) 1.一篇简单的博客(标题、倾斜字体、分隔线、换行) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>这是个博客</title> </head> <body> <h1>论数
HTML 语法练习---常见标签
qq_43563187的博客
12-26 623
HTML 语法练习
对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记
weixin_34124651的博客
05-03 311
HTML是什么，HTML5是什么？ ——HTML：超文本标记语言，一种用于创建网页的标准标记语言； ——HTML5：目前最新的HTML标准，包含新的元素、属性、行为，基于它们的功能特征将他们分成不同的组别： * 语义：能够让你更恰当地描述你的内容是什么； * 连通性：能够让你和服务器之间通过创新的技术方法进行通信； * 离线&存储：能够让网页在客户端本地存储数据更高效地离线运行； ...
html标签的练习
辞树
01-07 316
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;text&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="width:
html标签练习
qq_31926899的博客
05-02 134
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>text</title> <linkrel="stylesheet"type="text/css"href="11.css"/> </head> <body> <h1>忆江南(1)</h1> <h4>唐白居...
HTML标签练习
m0_49524888的博客
08-01 200
一、HTML标签 通过对HTML标签练习，熟悉HTML <!DOCTYPE >告诉浏览器web页面使用哪个版本的HTML编写网页的。它位于第一行，在<html>标签之前 超链接标签<a></a> rel 属性指定从目标文档到源文档的关系，rev 属性指定源文档到目标文档的关系；download属性规定被下载的超链接目标；target属性规定在何处打开链接文档。 <body> <p><a href="my pho
HTML常用标签详解与实战
本资源是一份关于HTML常用标签的教程，涵盖了从标题、文本到图像等基础元素的介绍，旨在帮助学习者理解并掌握HTML的基本语法和常见标签的使用。 在HTML中，标题标签（h1至h6）是至关重要的，它们用于定义文档结构，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值