HTML基础标签（第一天）

最新推荐文章于 2021-11-11 07:42:27 发布

zjgm_jlw

最新推荐文章于 2021-11-11 07:42:27 发布

阅读量142

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/zjgm_jlw/article/details/100677825

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以下是HTML部分常用基础标签

标题标签

单词缩写： head 头部. 标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

 <h1><h1/>
 <h2><h2/>
 <h3><h3/>
 <h4><h4/>
 <h5><h5/>
 <h6><h6/>

注释标签

用来注释信息，方便代码阅读
快捷键：Ctrl + /

 <!-- 内容 -->

段落标签

单词缩写： paragraph 段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

 <p></p>

水平线标签

单词缩写： horizontal 横线

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

就是创建横跨网页水平线的标签。其基本语法格式如下：

 <hr/>

在网页中显示默认样式的水平线。

换行标签(熟记)

单词缩写： break 打断 ,换行

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

 <br/>

这时如果还像在word中直接敲回车键换行就不起作用了

div span标签(重点)

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

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span, 跨度，跨距；范围

语法格式：

 <div><div/>
 <span><span/>

文本格式化标签

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

粗体

b 只有使用没有强调的意思，strong 比 b 语义表达更强烈一些，表达意思一样，都是加粗

 <b>b</b>
 <strong>strong</strong>

内容如下图：
在这里插入图片描述

斜体

i 只有使用没有强调的意思，em 比 i 语义表达更强烈一些，表达意思一样，都是斜体

 <i>i</i>
 <em>em</em>

内容如下图：
在这里插入图片描述

删除线

s 只有使用没有强调的意思，del 比 s 语义表达更强烈一些，表达意思一样，都是加粗

 <s>s</s>
 <del>del</del>

内容如下图：
在这里插入图片描述

下划线

u 只有使用没有强调的意思，ins 比 u 语义表达更强烈一些，表达意思一样，都是加粗

 <u>u</u>
 <ins>ins</ins>

内容如下图：
在这里插入图片描述

标签属性

属性就是特性比如手机的颜色手机的尺寸，总结就是手机的。。

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

 <标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中，

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

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

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

采取键值对的格式 key=“value” 的格式

比如:

 <hr width="400" />

属性是宽度

值是 400

提倡：尽量不使用样式属性。

图像标签

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：

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

 <img src="图像URL" />

链接标签

单词缩写： anchor 的缩写。基本解释锚, 铁锚的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

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

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

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

注意：

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

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

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

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

特殊字符标签

&nbsp 空格标签 &lt 小于号 &gt 大于号 &amp &

  &nbsp （空格标签)
  &lt (小于号)
  &gt (大于号)
  &amp (&)

列表标签

什么是列表？

容器里面装载着文字或图表的一种形式，叫列表。

列表最大的特点就是整齐、整洁、有序

无序列表 ul

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

	<!-- 1.无序列表 ul -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

内容如下图：
在这里插入图片描述

有序列表 ol

	<!-- 2.有序列表 ol -->
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>

内容如下图：
在这里插入图片描述

自定义列表 dl

	<!-- 3.自定义列表 dl -->
    <dl>
        <dt>言情</dt>
        <dd>女孩子喜欢看的小说</dd>
        <dt>玄幻</dt>
        <dd>比较热血的小说</dd>
    </dl>

内容如下图：
在这里插入图片描述

锚点定位

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

1.使用“a href=”#id名>“链接文本"</a>创建链接文本。

2.使用相应的id名标注跳转目标的位置。

例如：
下面两行代码分别写在body内代码的最上面和最下面，用来快速定位

<a href="#foot" id="header">快速到达底部</a><br>

<a href="#header" id="foot">快速到达头部</a>

base 标签

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

base 写到

<head> </head>

之间
例如：

<head>
 <base href="http://www.baidu.com">
 <base target="_blank">
</head>

注：感觉没啥用，放上去后，锚点标签会被干扰

zjgm_jlw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录