首页 > Web开发 > 详细

HTML学习笔记之标签基础

时间:2019-02-13 00:26:57      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:ati   out   换行   相同   单位   文本   宽度   baidu   斜杠   

1、基本标签

(1)标题与段落

标签 <h1> ~ <h6> 分别用于定义一至六级标题,标签 <p> 用于定义段落,它们都是块级元素,因此浏览器会自动地在标题和段落的前后添加空行

<!DOCTYPE html>
<html>
    <body>
        <h1>一级标题</h1>
        <p>在一级标题下显示的段落</p>
        <h2>二级标题</h2>
        <p>在二级标题下显示的段落</p>
        <h3>三级标题</h3>
        <p>在三级标题下显示的段落</p>
        <h4>四级标题</h4>
        <p>在四级标题下显示的段落</p>
        <h5>五级标题</h5>
        <p>在五级标题下显示的段落</p>
        <h6>六级标题</h6>
        <p>在六级标题下显示的段落</p>
    </body>
</html>

(2)注释

注释的内容虽然不会显示在页面上,但是对代码的理解却有十分重要的作用

① 普通注释

<!--注释内容-->

② 条件注释

<!--[if 这里写限定条件]>
    这里写注释内容
<![endif]-->

(3)格式化

① 一般文本格式

<!DOCTYPE html>
<html>
    <body>
        <b>粗体</b>
        <br />
        <i>斜体</i>
        <br />
        <ins>下划线</ins>
        <br />
        <del>删除线</del>
        <br />
        <big>增大字号</big>
        <br />
        <small>减小字号</small>
        <br />
        这是<sup>上标</sup>
        <br />
        这是<sub>下标</sub>
        <br />
    </body>
</html>

② 计算机代码格式

预格式 <pre> 支持固定的字母尺寸和间距,保留空格和换行,适合显示计算机代码

具有类似功能的还有键盘输入示例 <kbd>,计算机输出示例 <samp>,编程代码示例 <code>

<!DOCTYPE html>
<html>
    <body>
        <pre>
        int sum = 0;
        for (int i = 0; i < 10; i++)
            sum += i;
        cout << sum << endl;
        </pre>
    </body>
</html>

(4)引用

<q> 标签用于短引用,浏览器会自动给短引用加上双引号

<blockquote> 标签用于长引用,浏览器会自动对长引用做缩进处理

<!DOCTYPE html>
<html>
    <body>
        <p> 这是一段短引用:
            <q> Talk is cheap. Show me the code. </q>
        </p>
        <p> 这是一段长引用:
            <blockquote> Talk is cheap. Show me the code. </blockquote>
        </p>
    </body>
</html>

(5)缩略词

<abbr> 用于对缩略词进行标记,能够为浏览器、翻译系统以及搜索引擎提供有用的信息

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

2、链接

(1)基本介绍

<a> 标签定义超链接,链接的内容可以是文本,也可以是图像,对于文本而言,其默认的样式是:

  • 未被访问的链接为蓝色,带有下划线
  • 已被访问的链接为紫色,带有下划线

(2)常用属性

① href

定义链接地址,它的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JS 代码段

<a href="https://www.baidu.com/">链接(显示在页面上的内容)</a>

注意 :必须保证将斜杠添加到子文件夹,否则会产生意想不到的结果

② name

定义锚的名称,用于创建文档内书签,跳转到文档内指定位置,在 HTML5 中已经不再支持 name 属性,但可以使用 id 属性替代

<a name="anchorName">锚(显示在页面上的内容)</a>

下面以一个例子说明创建锚的步骤:

a、在 HTML 文档中对锚进行命名

<a name="anchor">锚的内容</a>

b、在同一个文档中创建指向该锚的链接

<a href="#anchor">指向锚的内容</a>

注意 :必须在 <a> 标签内必须提供 href 属性或 name 属性

③ target

规定在何处打开目标文档,在使用 href 属性后才可以使用,其可选值如下:

  • _self:默认值,在相同窗口或相同框架中载入目标文档
  • _parent:在父窗口或父框架集中载入目标文档
  • _blank:在新窗口中载入目标文档
  • _top:在包含该超链接的整个窗口中载入目标文档
  • frameName:在指定的框架中载入目标文档

④ download

HTML5 中规定的 <a> 标签的新属性,定义被下载的链接目标,它的值为下载文件的名称,浏览器将自动检测正确的文件拓展名,在使用 href 属性后才可以使用

3、图像

(1)基本介绍

<img> 标签定义图像,但是 <img> 标签并不会在网页中插入图像,而是在网页上链接图像,实际上其定义的是被引用图像的占位空间

(2)常用属性

① src

必要,指定图像文件的存放位置,它的值可以是任何有效的相对或绝对 URL

<img src="/images/pic_01.jpg" />

② alt

必要,当图片无法显示时,将显示 <alt> 中定义的替代文本。

使用 alt 属性是一个良好的习惯,因为用户常常会由于各种原因而无法正常查看图片

<img src="/images/pic_01.jpg" alt="图片描述_01" />

③ height

设置图像的高度

④ width

设置图像的宽度

⑤ border

定义图像边框的宽度,单位为像素(pixels)

⑥ align

定义图像相对于周围元素的水平和垂直对齐方式,可选值如下:

  • left:把图像对齐到左边
  • right:把图像对齐到右边
  • middle:把图像与中央对齐
  • top:把图像与顶部对齐
  • bottom:默认值,把图像与底部对齐

注意 :在 HTML5 中已经不再支持 align 属性和 border 属性,但是可以使用样式表实现类似的功能

4、表格

(1)基本介绍

<table> 标签定义表格,<th> 标签定义表头(table header),<tr> 标签定义行(table row),<td> 定义表格单元(table data),表格单元里可以包含文本、图像、列表等元素

还可以用 <caption> 标签定义表格标题,用 <thead> 标签定义表格页眉,用 <tbody> 标签定义表格主体,用 <tfoot> 标签定义表格页脚

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

(2)常用属性

① border

定义表格边框宽度,单位为 pixels,如果没有显式定义该属性,则默认不显示边框

② cellpadding

规定单元格边沿与其内容之间的空白,单位为 pixels

③ cellspacing

规定单元格之间的空白,单位为 pixels

④ frame

定义外侧边框的哪个部分可见,除了 IE,其他浏览器都支持该属性,其可选值如下:

  • void:不显示外侧边框
  • above:显示上部的外侧边框
  • below:显示下部的外侧边框
  • lhs:显示左部的外侧边框
  • rhs:显示右部的外侧边框
  • hsides:显示上部和下部的外侧边框
  • vsides:显示左部和右部的外侧边框
  • box:在所有四个边上显示外侧边框
  • rules:定义内侧边框的哪个部分可见,在 Firefox 中可以正确显示,其可选值如下:
    • none:没有线条
    • rows:位于行之间的线条
    • cols:位于列之间的线条
    • groups:位于行组和列组之间的线条
    • all:位于行和列之间的线条

(3)常见问题

① 处理没有内容的空单元格

在某些浏览器中,对于空单元格可能没法正确显示出表格的边框,看起来十分不舒服,所以我们可以在空单元格中添加一个空格占位符 &nbsp;

② 处理跨行或跨列的单元格

可以在 <th>、<tr> 或 <td> 标签中使用 colspan 属性定义跨越的列数,使用 rowspan 属性定义跨越的行数

5、列表

(1)无序列表

无序列表是列表的一种,使用 <ul> 标签标记,每一个列表项为典型的粗体圆点,用 <li> 标签标记

在 <ul> 标签中有一个 type 属性,用于指定项目符符号,其可选值如下:

  • disc:默认值,黑色实心圆
  • circle:空心圆
  • square:黑色实心方块

(2)有序列表

同样的,有序列表也是里列表的一种,使用 <ol> 标签标记,每一个列表项为数字,用 <li> 标签标记

在 <ol> 标签中有一个 type 属性,用于指定项目符符号,其可选值如下:

  • 1:默认值,按数字排序(1、2、3、4)
  • a:按小写字母排序(a、b、c、d)
  • A:按大写字母排序(A、B、C、D)
  • i:按小写罗马数字排序(i、ii、iii、iv)
  • I:按大写罗马数字排序(I、II、III、IV)

在 <ol> 标签中还有一个 start 属性,用于规定有序列表中的起始值

(3)自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合,自定义列表以 <dl> 标签开始,每个自定义列表项以 <dt> 开始, 每个自定义列表项的定义以 <dd> 开始

6、块与布局

大多数 HTML 元素可以区分为块级元素或内联元素

<span> 是内联元素,可用作文本的容器,当与 CSS 一同使用时,可以为部分文本设置样式属性

<div> 是块级元素,当与 CSS 一同使用时,可以为内容块设置样式属性,另外还可以用于对文档进行布局,但是随着 HTML5 的出现,我们可以更多地使用基于 HTML5 的布局方法

HTML5 提供使用新的语义元素,用于定义网页的各个部分:

语义元素 描述
header 定义文档或节的页眉
nav 定义导航链接
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

HTML学习笔记之标签基础

标签:ati   out   换行   相同   单位   文本   宽度   baidu   斜杠   

原文:https://www.cnblogs.com/wsmrzx/p/10367582.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号