html和CSS学习笔记（3）：认识基本标签

最新推荐文章于 2023-04-17 23:03:39 发布

克莉丝汀娜

最新推荐文章于 2023-04-17 23:03:39 发布

阅读量447

点赞数

分类专栏： html和CSS

本文链接：https://blog.csdn.net/u014679804/article/details/46584079

版权

html和CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）
语义化的好处：
1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

常用标签(1):

<body>标签:

网页上显示的内容；

<p>标签

添加段落；<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

<hx>标签

为你的网页添加标题。h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

<strong>和<em>标签

强调语气。但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调；

<span>标签

为文字设置单独样式；

<q>标签

短文本引用。注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号；

<blockquote>标签

长文本引用；

<br>标签

标签分行显示文本；
在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入。

<hr>标签

添加水平横线；

<address>标签

为网页加入地址信息。在浏览器上显示的样式为斜体；

<code>标签

加入一行代码。如果是多行代码，可以使用<pre>标签；

<pre>标签

为你的网页加入大段代码。

常用标签(2):

无序列表：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

有序列表：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

<div>标签：

定义： <div id="版块名称">…</div>

作用：确定逻辑部分

说明：

1.逻辑部分：相互关联的一组元素，可以理解为一个栏目板块；
2.<div>容器，DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层；
3.作用：<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
4.在 HTML 4.01 中，div 元素的 "align" 属性不被赞成使用。

<table>标签：

说明：

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头

使用CSS样式为表格添加边框，在头标签内加入语句：<style type="text/css"> table tr td,th{border:1px solid #000;} </style>

摘要：

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：<table summary="表格简介文本">

<caption>标签：

用以描述表格内容，标题的显示位置：表格上方。

语法：

<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

常用标签（3）：

<a>标签：

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

在新窗口中打开链接：

<a href="目标网址" target="_blank" >click here!</a>

链接email地址：

<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。

栗子：

<img>标签：

作用：插入图片。

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

说明：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

克莉丝汀娜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html和CSS学习笔记（3）：认识基本标签

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）语义化的好处：1. 更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出网页内容。常用标签(1):标签:网页上显示的内容；标签添加段落；标签不只是为显示计算机的源代码时用的，在你需
复制链接

扫一扫