标签学习

最新推荐文章于 2024-09-11 11:40:23 发布

只道寻常_

最新推荐文章于 2024-09-11 11:40:23 发布

阅读量1.2k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_40759096/article/details/82356484

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<body>

把一张网页比作一个人<body>标签就表示一个人所有的可见部分，如五官、四肢、... 对于真实存在的但是肉眼不可见的部分，如思想、人格、性取向等<body>标签是管不着的。 <body>包含着页面中所有的可见元素，比如链接、段落、图片... <body>是所有的可见元素的先人。

<head>

把一张网页比作一个人<head>标签就包含了一个人的基础信息，虽然无法直接观察到，但确实存在，如姓名、人格、取向... <head>用于包含一张网页中抽象的基础信息（元信息）。

<head>和<body>的区别在于<body>只想包含看得见摸得着的内容，如身材、长相、肤色等等， <head>中只能包含抽象的元信息，并不是说<body>不能包含抽象内容，它可以，只是它不想，你硬要把抽象内容写进去也勉强行，但它更在乎看得见摸得着的。<head>不要，但<body>很诚实。

<title>

<title>标签用于指定浏览器标签上显示的标题，是个概括整张网页的存在

用法是放在<head>标签里

<html>
    <head>
       <title>淘宝网 - 淘！我最喜欢</title>
    </head>
</html>

<h1>-<h6>

<h1>，<h2>，<h3>，<h4>，<h5>，<h6>都是标题标签，用于概括页面中不同主题的内容，其中<h1>最大，<h2>其次，依次类推，没有<h7>。

<p>

<p>是段落标签（paragraph的缩写），用于给文字划分段落，一组<p>元素为一个段落

<div>

<div>是用于在网页中划分区域的（division的缩写），通常作为容器而存在，用于包含网页中的内容, 是最常用的网页元素之一。

div>的特点是非常纯粹，在没有明确指定的情况<div>下没有边框，没有填充，没有边距，完全透明，在标签中没有内容的情况下高度为零，完全不可见，它的高度随身体里的内容而定，内容多就高内容少就低，可以说<div>是个完美的容器，想象一个完全透明、没有质量、体积为零但容积自由伸缩无限、质量还极好的塑料袋，<div>就是个这样的存在。

<a>

<a>用于定义网页中的链接，链接也叫做锚或锚链接，而<a>即是anchor（锚）的缩写。

例如，要定义一个跳转到百度的链接可以这样写：

<html>
    <body>
        <a href="http://baidu.com">点击测试网络</a>
    </body>
</html>

其中href是<a>标签的一个属性，用于制定跳转的目标地址，此处要注意语法， href之后有等号，地址要写在等号右边，其值最好用引号包住（考虑到值有可能存在空格的情况）。

链接默认在当前页面打开，如果想在新标签页打开可以将target属性指定为_blank：

<html>
    <body>
        <a href="http://baidu.com" target="_blank">点击测试网络</a>
    </body>
</html>

target属性的默认值是_self，也就是在当前页面打开。

<a>中可以存在子元素，其子元素也会作为链接的一部分，图片链接便是通过这种特性实现的：

<html>
    <body>
        <a href="http://baidu.com" target="_blank">
            <img src="http://ww2.sinaimg.cn/mw690/006aIBkCjw1f8e693flooj30f0076jr7.jpg">
        </a>
    </body>
</html>

<img>

<img>用于定义网页中的图片。我们平常在网页中见到的大部分图片都是用这个标签定义的。

其中src（source）是<img>标签的一个属性，用于指定图片的地址。

<img> 不允许存在结束标签，以下的写法是有误的：

<img src="..."></img>

为什么？因为<img>不能存在子标签，所以无法作为容器存在，结束标签便没有意义了。没有空间的杯子只是个玻璃块，盖子完全没有意义。

<img>支持的所有的常用图片格式: .gif、.jpg、.png、.svg...

表格类标签

<table>标签用于定义表格，单独出现并没有什么用，它需要和他专有的子标签在一起才有意义。

<table>的子标签有：

<tr>（table row）：定义行，出现一组就是一行，出现多组就是多行。
<td> （table data）：定义单元格，一般包含在<tr>中。
<th> （table head cell）：定义表头单元格，一般包含在<thead>中。
<thead> （table head）：定义表头，见例子。
<tbody> （table body）：定义表身，见例子。

怎么用

对于简单的数据<table>的结构也可以简单些：

<table border="1"> <!--表格开始-->
  <tr> <!--第一行开始-->
    <td>王花花</td>
    <td>21岁</td>
  </tr> <!--第一行结束-->
  <tr> <!--第二行开始-->
    <td>李拴蛋</td> 
    <td>19岁</td>
  </tr> <!--第二行结束-->
</table> <!--表格结束-->

simple-table

而更复杂的数据可以用更严谨结构表示：

<table border="1">
  <thead> <!--表头开始-->
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>取向</th>
    </tr>
  </thead> <!--表头结束-->
  <tbody> <!--表身开始-->
    <tr>
      <td>王花花</td>
      <td>21</td>
      <td>拴蛋</td>
    </tr>
    <tr>
      <td>李拴蛋</td>
      <td>19</td>
      <td>花花</td>
    </tr>
  </tbody> <!--表身结束-->
</table>

table

<header><footer>

<header>标签用于定义页头，也就是页面中的引导性内容

<footer>用于定义页脚，也就是页面中的补充性内容

<link><script>

<link>标签用于加载外部资源（也就是不属于本页面的资源，比如样式表、雪碧图之类），<script>标签用于加载脚本（一般为JavaScript）。

<head>
    <link href='base.css'>
    <script src='base.js'></script>
</head>

<button>

<form>
姓：<input name='first_name'>
名：<input name= 'last_name'>
<button type='reset'>重置</button>
<button type='submit'>提交</button>
</form>

<abbr>

用来表示一个缩写词或字母缩略词。在某些浏览器中，当您把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时，<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。

<abbr title="Mother Money Payment">mmp</abbr

<input>

是什么

<input>用于接收用户的输入。没有<input>用户就没法输入数据，登录注册什么的都不能做，复杂的表单就别想了。

`type`属性

<input>的类型比较多，每一种侧重于不同的数据类型和结构：

<input type="text"> 默认值（可以不填type属性），用于输入文字，如用户名，昵称等等。
<input type="password"> 密码输入，我们平时输密码时的小黑点就是这么来的。
<input type="radio"> 单选框，在需要用到单选但选项少的情况下使用。如性别（只有两个选项）。
<input type="checkbox"> 多选框（复选框），在需要用到多选但选项少时使用，多选，但是选项少的情况下使用。如性取向˙Ꙫ˙ 。
<input type="file"> 选择文件，上传文件必用。
<input type="reset"> 重置表单。
<input type="hidden" value="秘密"> 隐形输入框，一般用于在表单提交时回传重要的令牌（就是一串自产自销的无序字符）来验证用户是真的或状态是对的。
<input type="button" value="点我"> 按钮，不推荐，正常情况下使用<button>即可，因为<button>可以包含子元素，而<input>不行，灵活度的问题。

举例：

<label>
  <input type="radio" name="sex" value="male">
  男
</label>
<label>
  <input type="radio" name="sex" value="female">
  女
</label>

<p>请选择你的性取向<p>
<label>
  <input type="checkbox" name="sex" value="male">
  男
</label>
<label>
  <input type="checkbox" name="sex" value="female">
  女
</label>

<p>请选择文件<p>
<input type="file" name="avatar">

<form>
  姓名：<input>
  <br>
  年龄：<input>
  <input type="reset" value="点我重置">
</form>