html 常用标签、特殊符号

最新推荐文章于 2024-03-10 19:03:57 发布
最新推荐文章于 2024-03-10 19:03:57 发布
阅读量5.6k 收藏 18
点赞数 2
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42940217/article/details/84668749
版权

 排版标签:  排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

 

h 标签： 作为标题使用，并且依据重要性递减。

  • 一行只能放一个标题

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

p 段落标签  ：  默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

<p>  文本内容  </p>

hr 水平线标签： 将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成

<hr />是单标签

br 换行标签 ： 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 

<br />

div 和 span标签(重点)：

div span 是没有语义的 是我们网页布局主要的2个盒子 

<div> 这是头部 </div> 


<span>今日价格</span>

 

文本格式化标签(设置文字的标签)：

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签显示效果
<b></b> 和 <strong></strong>文字以粗体的方式显示（xhtml 推荐使用strong）  b 只是加粗 strong 除了可以加粗还有 强调的意思， 语义更强烈。
<i></i>  和 <em></em>文字以斜体的方式显示 ( xhtml 推荐使用em )
<s></s> 和 <del></del>文字以加删除线的方式显示  ( xhtml 推荐使用del )
<u><u/> 和 <ins></ins>文字以加下划线的方式显示 ( xhtml 推荐使用 ins )

 

预格式化文本pre

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

有了这个标签，里面的文字，会按照我们书写的模式显示，不需要段落和换行标签了。但是，比较少用，因为不好整体控制 

<pre>

  此例演示如何使用 pre 标签

  对空行和 空格

  进行控制

</pre>

 

图像标签img (重点):

该语法中src属性用于指定图像文件的路径和文件名，它是 img标签的必需属性。 

​
<img src="图像URL" />  它是一个单标签
​

img 标签属性：

    属性属性值描述
src url 图像的路径
alt 文本图片不能正常显示时显示在页面的替换文本
title文本鼠标悬停时显示的文本内容
width像素设置图像的宽度
height像素设置图像的高度
border数字设置图像的边框的宽度

  1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

  2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

  3. 任何标签的属性都有默认值，省略该属性则取默认值。

  4. 采取 键值对 的格式 key="value" 的格式

 

链接标签(重点) a : 

在HTML中创建超链接非常简单，只需用标签把文字包括起来就好，其基本语法格式如下：

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。

target：用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。 

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

  1. 外部链接 需要添加 http:// www.baidu.com

  2. 内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

  3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

  4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位 （难点）

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

1.使用“<a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
  <a href="#two">   

2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3>

 

base 标签:   <base target="_blank" />

  1. base 可以设置整体链接的打开状态

  2. base 写到 <head> </head> 之间

  3. 把所有的连接 都默认添加 target="_blank"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <base target="_blank"/>
</head>
<body>
    
</body>
</html>

 

html 中的注释标签 ： 

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

  <!-- 注释语句 -->

 

html 中的特殊字符( 符号 ):

  1. 是以运算符&开头,以分号运算符;结尾。

  2. 他们不是标签，而是符号。

  3. HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

特殊字符描述字符的代码
 空格&nbsp;
<小于号&lt;
>大于号&gt;
￥人民币&yen;
X乘号&times;

 

 

 

 

 

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
vevezai
关注
  • 2
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML常用特殊符号对照表及一些标签说明.pdf
08-22
HTML常用特殊符号对照表及一些标签说明.pdf
HTML常见标签/特殊字符
fakerking的博客
07-13 1802
HTML常见标签
前端基础：HTML常用的标签、注释和特殊字符
weixin_49555741的博客
03-09 1785
关于html常用的标签：div、span标签、图像标签、文件路径链接标签、注释标签和特殊字符的学习。
html网页简单代码
最新发布
laodaoshuang886的博客
03-10 436
注意文件名后缀必须改成html。
stream流排序
qq_36763236的博客
12-21 2万+
List 倒序排列 List<Double> salesData = new ArrayList<>(); Collections.reverse(salesData); java8 stream多字段排序 List<类> rankList = new ArrayList<>(); 代表某个集合 //返回 对象集合以类属性一升序排序 rankList.stream().sorted(Comparator.comparing(类::属性一));
HTML5网页设计常用标记-链接标记和列表标记
m0_66168318的博客
03-20 2176
链接标记 在HTML语言中，利用<a>标记在网页中创建超链接。 语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> 文字设置为超链接后，默认显示为加下划线的蓝色字体；图片设置为超链接后，会自动加一个黑色的边框。 <a>标记常用的属性如下： （1）href属性：最重要的，必选属性，指定连接的目标资源URL地址。 （2）name属性：指定元素的名称，用于设置网页中的某个位置（锚点）。 target属性：设定
HTML常用标签和特殊符号
坚持不懈的大白的博客
07-17 7414
HTML常用标签和特殊符号 常用标签如下: 标签 含义 <h1>至<h6> 标题标签 <p> 段落标签 <br>、 <br/> 两者都可 换行标签 <hr>、 <hr/>两者都可 水平线标签 字体加粗 <strong> 斜体 <em> 字体样式标签 <img src=“图片路径” alt="" title="" width="" height=""&gt
HTML常用特殊符号对照表及一些标签说明.zip
10-25
HTML常用特殊符号对照表及一些标签说明
HTML的基础内容文档
03-16
常用标签、特殊符号、div标签、列表、图片、绝对路径和相对路径、超链接a标签、表格和表单
最常用的HTML转义字符 Escape Sequence
01-21
”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字
前端学习 ---常用标签
xss125的博客
02-15 1562
文本标签是双标签，自带加粗效果，有自己对应的文本大小，并且独占一行，有默认间距。
html特使数字符号,特殊符号大全
weixin_39873456的博客
06-11 3751
数学符号≈ ≡ ≠ ＝ ≤ ≥ ＜ ＞ ≮ ≯ ∷ ± ＋ － × ÷ ／ ∫ ∮ ∝ ∞ ∧ ∨ ∑ ∏ ∪ ∩ ∈ ∵ ∴ ⊥ ‖ ∠ ⌒ ⊙ ≌ ∽ √ ∟ ⊿ ㏒ ㏑ ％ ‰单位符号㎎ ㎏ ㎜ ㎝ ㎞ ㎡ ㏄ ㏎ ㏑ ㏒ ㏕ ℡ ％ ‰ ℃ ℉ °′″＄ ￡ ￥ ￠ ℅ ° ′ 〃 ¤注音符号ㄅ ㄉ ㄓ ㄚ ㄞ ㄢ ㄦ ㄆ ㄊ ㄍ ㄐ ㄔ ㄗ ㄧ ㄛ ㄟ ㄣ ㄇ ㄋ ㄎ ㄑ ㄕ ㄘ ㄨ ㄜ...
html中常见标签及其用法归纳大全
2301_79234439的博客
08-20 3019
用_blank属性，百度一下
CSDN 如何写出标签符号<>?
Regino的博客
04-19 436
CSDN 如何写出标签符号<>?解答。。。
特殊符号大全！
热门推荐
sunny的专栏
10-11 3万+
?可爱符号①规则形状（圆形、三角形、方形、菱形）○ ⊙ ◎ ? ? ? ? 。° o o O . · ? ? ● ? ? ☉⊕ Θ ? ?◣◢ ◤◥ ⊿ ? ? ? ? □ ? ▓ ? ? ? ? ? ? ? ? ? ? ? ■ ? 〓 ? ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▋▌▍? ? ? ? ? ? ◇ ? ◆ ?可爱符号②数字、数学符号? ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩
HTML解析以及编码总结
weixin_52397172的博客
07-29 2051
字符编码
html显示特殊字符（空格等） [大三TJB_708]
记一忘三二
10-11 1万+
在记事本中的文字排版不为在其网页上面显示的排版，如空格。若我们在记事本中手动的调整8个空格，通过浏览器显示的空格只有一个。有的时候我们需要在浏览器上面显示特定的格式：如示例代码的缩进。        html语言把空格，‘ 第一部分是一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。 为以上说明的三点举例：显
html常用标签及特殊字符总结
xianrenyingzi的专栏
03-20 5463
标签用于在HTML文档里定义一个段落。 浏览器在显示段落时，将在其前后分别插入一个空白行。这些空白是由浏览器在呈现网页时自动加入的，你也可以用样式表来指定显示多少空白。 标签 描述 定义斜体文本 定义粗体文本 定义大字体文本 定义小字体文本 标签用于插入一个换行符。 是一个空元素（empty elem
html中表示空格的特殊语言,在HTML中，( )用来表示特殊字符空格。
weixin_39942726的博客
06-02 1182
参考答案如下示特殊字智慧职教: 不符合多基因病的阈值.易患性平均值与发病率规律的是2.饲养牙鲆时要不断地喂食，符空保证所有牙鲆都能获得同样的饲料让牙鲆均匀生长，否则会出现大鱼吃小鱼的现象。在检验开始时，示特殊字一般采用 ____。符空03年前奥运会双打比赛中以下( )项目没有列入??示特殊字(单选题)个人所得税法中所称“临时离境”是指( )。符空____提出了过程控制理论以及控制过程的具体工具--...
实验目的 掌握HTML常用的标签 掌握CSS常用的样式 掌握JavaScript常用语法 实验内容 开发一个美观大方的修改密码表单界面，包含3个表单项：旧密码、新密码和确认密码，监听表单提交事件，当表单提交时完成如下3种检查 要求输入的旧密码字符个数必须大于6个字符小于12个字符，否则在旧密码输入框的后面以红色字体提示“旧密码长度有误”； 要求输入的新密码和确认密码相同，否则在确认密码的下面以红色字体显示“新密码与确认密码不一致”； 新密码里必须包含数字、字母和特殊符号，否则在新密码输入框后面提示“必须包含数字、字母和特殊符号”用html代码写
05-28
好的，以下是一个简单的HTML示例代码，包含一个修改密码表单界面，其中包含3个表单项：旧密码、新密码和确认密码，并实现了您所要求的三种检查功能： ``` <!DOCTYPE html> <html> <head> <title>修改密码表单界面</title> <style> .error { color: red; } </style> <script> function checkForm() { var oldPwd = document.getElementById("oldPwd").value; var newPwd = document.getElementById("newPwd").value; var confirmPwd = document.getElementById("confirmPwd").value; // 检查旧密码长度 if (oldPwd.length < 6 || oldPwd.length > 12) { document.getElementById("oldPwdError").innerHTML = "旧密码长度有误"; return false; } else { document.getElementById("oldPwdError").innerHTML = ""; } // 检查新密码和确认密码是否相同 if (newPwd != confirmPwd) { document.getElementById("confirmPwdError").innerHTML = "新密码与确认密码不一致"; return false; } else { document.getElementById("confirmPwdError").innerHTML = ""; } // 检查新密码是否包含数字、字母和特殊符号 var pattern = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,12}$/; if (!pattern.test(newPwd)) { document.getElementById("newPwdError").innerHTML = "必须包含数字、字母和特殊符号"; return false; } else { document.getElementById("newPwdError").innerHTML = ""; } // 如果检查通过，提交表单 document.getElementById("myForm").submit(); } </script> </head> <body> <form id="myForm" action="submit.php" onsubmit="return checkForm()"> <label for="oldPwd">旧密码：</label> <input type="password" id="oldPwd" name="oldPwd"><span id="oldPwdError" class="error"></span><br> <label for="newPwd">新密码：</label> <input type="password" id="newPwd" name="newPwd"><span id="newPwdError" class="error"></span><br> <label for="confirmPwd">确认密码：</label> <input type="password" id="confirmPwd" name="confirmPwd"><span id="confirmPwdError" class="error"></span><br> <input type="submit" value="提交"> </form> </body> </html> ``` 在这个示例代码中，首先定义了一个样式类 `.error`，用于设置红色字体。在 `<script>` 标签中定义了一个名为 `checkForm()` 的 JavaScript 函数，用于检查表单的输入项，并在不符合要求时设置相应的错误提示信息。在 HTML 表单中，通过给每个表单项设置一个唯一的 `id` 属性，以便在 JavaScript 中获取其值和设置错误提示信息。在 `<form>` 标签中设置了 `onsubmit="return checkForm()"`，表示在表单提交时调用 `checkForm()` 函数进行检查。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值