您的位置：首页 > Web前端 > HTML

html 常用标签、特殊符号

2018-11-30 23:18 120 查看

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

 

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

  • 一行只能放一个标题

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

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

[code]<p>  文本内容  </p>

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

[code]<hr />是单标签

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

[code]<br />

div 和 span标签(重点)：

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

[code]<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> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

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

[code]<pre>

此例演示如何使用 pre 标签

对空行和 空格

进行控制

</pre>

 

图像标签img (重点):

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

[code]​
<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为在新窗口中打开方式。 

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

  1. 外部链接 需要添加 http:// https://blog.csdn.net/qq_42940217/article/details/www.baidu.com

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

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

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

锚点定位 （难点）

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

[code]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"

[code]<!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文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

[code]  <!-- 注释语句 -->

 

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

  1. 是以运算符

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

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

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

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

 

 

 

 

 

[code]<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航