关于HTML的标签

本文最后更新于：2021年7月15日 上午

HTML文件中的所以内容都是用标签来修饰的。这些标签也被称为HTML元素，元素的内容则是开始标签和结束标签之间的内容。这些元素还支持嵌套使用。

1
2
3
4
5
6
7
8
9
<html>
    <head>
        ...
    </head>

    <body>
        ...
    </body>
</html>

比如在这个只有结构的文档中，<body>标签就是嵌套在<html>标签中的。

标签的语法

目前我们见到的标签几乎都是双标签，但HTML也定义了相当数量的单标签，比如<img>，定义图片、<hr>定义一道线。

HTML语法算是容错机制很强的了，一些标签即使你忘记关闭，也能被浏览器正确解析，但不介意这么做。同时，使用大写或者小写定义标签都是可以显示的，不过w3c建议使用小写定义标签。

常见的标签

  • <h1> 定义标题，使用标题不仅仅至少把字体变大，这也有利与浏览器分析文档的结构
  • <p> 定义段落
  • <a> 定义锚点(Anchor)，可以指向其它HTML文档或者本文档的某个位置
  • <img> 定义一张图片
  • <br> 手动换行，对于HTML中的连续空格或者换行，浏览器会将其视为一个空格，所以如果需要换行就需要使用<br>标签
  • 更多标签…

标签的属性

HTML的标签几乎都有它自己的属性，属性写在开始标签中。

1
<a href="www.example.com">一个链接</a>

比如这个<a>标签，它有一个href属性，这个属性用来指定跳转的地址。属性总是以键值对的方式指定， 属性名=属性值 。

标签通用的属性：

  • class 给标签分配一个类名
  • id 给标签分配一个id
  • style 指定标签的样式属性
  • title 指定标签的附加信息（鼠标悬浮在标签内容上时显示）
    -更多标签属性…

HTML基本标签的使用

HTML中有大量的标签用于描述各种各样的内容，文本，图片，视频等，我们先从文本开始。

文本格式化

  • <b> 可以将文本加粗
  • <strong> 强调文本，默认的显示效果和<b>加粗是一样的。
  • <i> 将文字变成斜体
  • <sub> 定义下标文字
  • <sup> 定义上标文字
  • <ins> 定义插入字
  • <del> 定义删除字
  • <abbr> 定义缩写，通过标签的title属性定义全称。
  • 更多标签

单就从默认的显示效果上来说的话，<b>和<strong>是一样的。它们的区别体现在，用<strong>修饰的文本除了在视觉上有了加粗效果外，还有对其中的文本加上强调的意义，这有利于屏幕阅读器理解内容；而<b>标签仅仅是给修饰的文本带上加粗效果。

<a> Anchor

超链接可以说是HTML最突出的特点了，使用它可以把众多的网页连接在一起。
<a href="https://www.gogle.com">Google</a> 定义了一个到Google的超链接，<a>标签之间的内容不一定是文本，也可以是图片等。

target，超链接的target属性用于定义浏览器打开超链接的方式；
_blank值表示新开一个标签页打开，，_self表示在当前标签页打开。

超链接除了导向其它HTML页面，还能定位到本文档的某个位置。

1
2
3
4
<h1 id = "top">顶部</h1>
<!-- 如果想要使 a 标签跳转到 h1，需要给 h1 自定义一个 id 属性，
任何把 a 标签的 href 属性写出 #'h1的id' 就可以了 -->
<a href = "#top">返回顶部</a>

返回 h1

HTML 中的 head

前面提到过，<head>标签对中的内容，是用来描述网页的，而不是像<body>那样显示在页面上。

<head>中常见的标签

  • title定义文档显示在浏览器顶部的标题
  • link 用于引用外部文件，比如引入外部css或者外部js文件，也可以用它在head中引入一张图片。这张图片将作为网页图标显示。
  • seyle定义文档内部的css样式
  • script定义网页的脚本文件
  • meta meta定义网页的’元数据’，用于描述网页文件的数据比如定义网页的作者、字符集、优化网页在搜索引擎中的显示效果

HTML 和 CSS

通过 css 我们可以修改自定义 html 标签的外观，css 可以和 html文件定义在一起，还可以单独放在一个文件里面然后引入。

内联样式

内联样式是直接把css效果和html标签定义在一起，是一种比较方便的做法。

1
<h1 style="color: red;text-align: center;">标题</h1>

通过标签的style属性就能定义标签的css样式，css值则是键值对的形式。

内部样式表

将标签中的css属性从标签中抽出来，定义在<style>标签中。

1
2
3
4
5
6
7
8
9
<style>
p {
    color:blue;
    }
h1 {
    color: red;
    text-align:center;
}
</style>

抽离出来后通过css选择器选中标签，然后定义它的属性。

外部样式表

这是最理想的方式，方便维护。将css属性定义在一个单独的文件里面，然后通过<link>标签引入就行。

1
<link rel="stylesheet" type="text/css" href="cssfile.css">

href属性就是css文件的位置。

HTML和JS

脚本是HTML的灵魂，通过一对<script>标签就可以定义js文件了。和css一样，脚本文件也推荐定义在一个单独的文件里面， 不过js是指定<script>的src属性来引入外部js文件。

1
2
<script>本地js</script>
<script scr="外部js文件.js"></script>

HTML布局

HTML标签有两种类型，一种是块级元素，一种是内联元素。块级元素会占满整行，然后高度包裹自身。因此块级元素会带有类似换行的效果。块级元素的典型代表是<div>。

而内联元素会紧接着上一个标签元素从左往右排列。内联元素的代表是<span>标签。

HTML表单

表单在网页中用于和用户交互。表单由<form>标签定义。

<form>有两个常用的属性

  • action 指定发送表单到哪里，通常是一个链接。
  • method 指定发送表单的方式，常见内容有get、post。

输入框

使用<input>标签定义一个输入标签，它是一个单标签，一个输入标签有很多类型。 <input>还有一个checked属性，加上这个属性，在提交表单时就会要求改输入标签不为空。

input: <input type="text" name="inputtext">

  • 文本输入框：
  • 密码输入框：

把<input>标签的type属性定义为text就能生成一个文本输入框。改成password就能生成一个密码输入框，输入后里面的内容将显示为 * 号。

按钮

按钮同样也是使用<input>标签定义，只要修改下属性就行了。

  • 单选按钮 <input type="radio" name="sex" value="male">
    Male Female
  • 多选按钮 <input type="checkbox" name="vehicle" value="Bike">
    EatSleep
  • 提交按钮
    <input type="submit" value="Submit">

单选按钮使用radio，一组单选按钮name属性必须一样；多选使用checkbox。点击提交按钮将直接发送标签给指定的连接。

lable标签与表单

label标签让它将它自身包裹的值于表单元素关联起来，使用lable标签更有利于指出输入表单的内容。具体表现出来的效果就是，直接点击文本也能激活输入框。


<label for="t1">带lable的输入框：</label><input id="t1" type="text">

下面是一个完整的表单代码

1
2
3
4
5
<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

<iframe>

使用<iframe>标签可以定义一个指向其它html页面的框架。说简单点就是在html页面内部嵌套另一个html页面。

1
2
3
4
<iframe src="http://www.runoob.com/" frameborder="0" width="200px" 
height="200px" name="ifremea"> <br>

<a href="http://anothlink.com" target="ifremea">
  • src 指定要加载页面的url
  • freameborder 指定边框

通过指定 a 标签的target属性为<iframe>的name属性，可以将 a 标签指向的页面加载到指定的<iframe>框架中。

前端 > HTML
#前端 #HTML
关于HTML的标签
https://travelerentity.github.io/2021/07/关于HTML的标签/
作者
LinYun
发布于
2021年7月11日
许可协议