标签学习

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

其中srcsource)是<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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值