# 前端菜鸟打怪路：HTML重难点标签（三）

月石子君
328 阅读10分钟

HTML重难点标签

英语小课堂

准备工作（通过命令行打开网页）

  • 第一种方法

    1. 在cmder中安装yarn global add http-server

    2. 在终端输入输入http-server -c-1 缩写 hs -c-1

    3. http://10.50.205.126:8080/[文件名]打开

  • 第二种方法：

    1. 在cmder中安装yarn global add parcel

    2. 在终端输入中 parcel [文件名]打开

a标签

  • href：表示为URL引用

    • <a href="http://baidu.com">超链接</a>

  • target : 指定在那个页面打开

    • <a href="https://developer.mozilla.org" target="_blank">

  • download：理论上是“下载这个网页”，但现在大部分浏览器不支持

  • rel=noopener：目前理解不了，防止一个bug，JS

    作用

  • 跳转到外部页面

  • 跳转到内部锚点

  • 跳转到邮箱或者电话

    a的href取值（九大取值）

  • 网址

    • baidun.com
    • baidun.com
    • //baidun.com（无协议网址）
      • 打开开发者工具
      • Network中勾选preserve log
      • 点击链接开发者工具中Location中会显示链接
      • 链接中会进行三次跳转，最后跳转到www.google.com
      • 以后写代码一定要用这种无协议网址的的写法

  • 路径

    • (绝对路径)/a/b/c 代表以及 （相对路径）a/b/c[理解里面的根目录变化]

      • 因为开启了HTTP服务（使用命令行parceld XXX.html打开的），就会使根目录不再是硬盘目录，而是哪里开启的目录就是根目录，出现下图的情况
      • 若是进入文件夹点击文件.html，这就是使用文件夹的根目录(以本地电脑文件为绝对路径)
      <a href="/a/b/c.html">C</a>
或
<a href="a/b/c.html">C</a>

    • index.html以及./index.html(直接写文件名，会在当前目录中找文件c.html)

<a href="c.html">C</a>

  • 伪协议

    • javascript:;中:;绝对不可以删
      • 点击之后没有动作的a标签（特殊需求）
    <a href="javascript:;">C</a>
    • mailto:邮箱
     <a href="mailo:ac97nj@126.com">发邮箱</a>
    • ter:手机号
     <a href="tel:123456789">打电话</a>
    • id
    href=#XXX

    a的target的取值

  • 内置名字

    • _blank
      • 在空白页面打开
      <a href="//google.com" target="_blank"> AAAAAAA</a>
    • _top
      • 在所有iframe里最顶层页面打开,使用iframe层级包裹的关系显示出_top的顶部打开
      <a href="//google.com" target="_top"> AAAAAAA</a>
<iframe width="900" height="900" src="cc.html">我是iframe</iframe>

    • _parent
      • 当成链接所在的iframe的上一层打开，父级页面打开
      <a href="//google.com" target="_parent"> AAAAAAA</a>
<iframe  width="500" height="500"  src="cc2.html">我是iframe</iframe>

    • _self
      • 在当前页面打开，默认值打开
      <a href="//google.com" target="_self"> AAAAAAA</a>
    • 在上述元素中_parent,_top使用iframe层层嵌套，才可以显示本标签的重要意义。

  • 程序员命名（Goodby打开使用）

    • window的name
    • iframe的name

iframe标签

  • 很少在使用了只有老系统还在使用，现在前端都在使用JS

table

相关标签

  • table正确的写法三种
    • <thead></thead>
      表的的头部
    • <tbody></tbody>
      表的身体
    • <tfoot></tfoot>
      表的脚部
    • tr //table row ，table里面的一行
    • td //table data 数据
    • th //表示他是一个表头
    • 以下为正确的语法书写方式
  <table>
   <thead>
     <tr>
       <th>英语</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>98</td>
     </tr>
   </tbody>
   <tfoot>
     <tr>
       <td>70</td>
     </tr>
   </tfoot>
 </table>

相关样式

  • table-layout

    <style>
  table{
  table-layout: auto/fiexed;
  }
  </style>

    • auto
      表格及单元格的宽度取决于表格的内容。

    • fiexed
      表格和列的宽度通过表格的宽度来设置,表格宽度尽量平均

  • border-collapse：用来决定表格的边框是分开的还是合并的,collapse合并的意思

     <style>
   table { border-collapse: collapse; }
 </style>

  • border-spacing
    决定表格与表格之间的距离

    <style>
   table { border-spacing: 10px; }
 </style>

  • 让边框显示出来

     td, th {border: 1px solid blue; }

img标签

作用

  • 发出get请求，展示一篇图片

属性

    <body>
      <img
        height="400"
       width="400"
       src="[文件地址]"
        alt="图片加载失败时显示的文字"
     />
     </body>
  • alt图片加载失败显示的文字
  • height图片高度，若是只有高度，宽度自适应
  • width图片宽度，若是只有宽度，高度自适应
  • src图片地址

底线

永远不要让图片变形

事件
(监听图片是否加载成功，用来加载失败时用来挽救)

  • onlad(加载成功调用onlad)
  • onerror(加载不成功调用onlad)
 <body>
 <img
   id="XXX"
   height="400"
   width="400"
   src="[文件地址]"
   alt="图片加载失败时显示的文字"
 />
 <script>
   xxx.onload = function)(){
       console.log("图片加载失败");
   };
   XXX.onerror = function(){
       console.log("图片加载失败");
   };
   XXX.src='404.png'

响应式
使手机上页面图片文字自适应任何手机屏幕

  • max-width:100%
<style>
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   img {
       max-width: 100%;
   }
 </style>

可替换元素

from 标签

作用

发出get或post请求，刷新页面

属性

<body>
  <form action="/xxxx" method="GET" autocomplete="on" target="_blank"  >
  <input name="username"  type="text">
  <input type="submit">
  <button>可修订的按钮</button>
  </form>
</body>
  • action
    提交表单时，要请求的那个页面的地址（何处发送表单数据，即是处理表单数据的目标地址）
<form action="/xxxx" ></form>

  • autocomplete，是否自动填充（账户，密码）
  • method
    浏览器用来控制发送的是get还是post
    • post：指的是 HTTP POST 方法
    <form action="/xxxx" method="post" >

  • get：指的是 HTTP GET 方法
<form action="/xxxx" method="GET" >

  • target 指提交到那个页面，那个页面应该刷新(把那个页面变成XXXX，是新开一个页面或者当前页面等等)

事件

  • onsubmit
    当用户要提交的时候就会触发这个事件

区分 input和button中使用submit的区别

  • （面试中常问的问题）
<input type="submit"  value="按钮">

不能有其他东西，不支持其他标签，只能用纯文本，其他什么都不支持

<buttontype="submit">可修订的按钮</button>

里面可以有任何东西，里面可以添加标签，图篇，各种样式,对按钮添加各种格式

  • 重要规则
    在一个from表单中一定要写type=subimt,按钮才可以提交，若是没有写浏览器会自动加上，注意type=subimt不可以写成别的type=botton否则按钮无法提交，没有反应。

input标签

作用

  • 让用户输入内容

属性

type 描述 基础例子
button 没有默认行为的按钮，上面显示 value 属性的值，默认为空。
checkbox 复选框，可设为选中或未选中。
color 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
date 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
datetime-local 输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
email 编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file 让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
hidden 不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
image 带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。
month 输入年和月的控件，没有时区。
number 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password 单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio 单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
range 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用htmlattrdefmin 和 htmlattrdefmax来规定值的范围。
reset 此按钮将表单的所有内容重置为默认值。不推荐。
search 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
submit 用于提交表单的按钮。
tel 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
text 默认值。单行的文本区域，输入中的换行会被自动去除。
time 用于输入时间的控件，不包括时区。
url 用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
week 用于输入以年和周数组成的日期，不带时区。
其他
type 描述 基础例子
name 所有 input表单控件的名字。以名字/值对的形式随表单一起提交
autofocus 所有 页面加载时自动聚焦到此表单控件
checked radio, checkbox 用于控制控件是否被选中
disabled 所有 表单控件是否被禁用
maxlength password, search, tel, text, url value的最大长度（最多字符数目）
pattern password, text, tel 匹配有效value的模式（pattern）
value 所有 表单控件的值。以名字/值对的形式随表单一起提交
placeholder password, search, tel, text, url 当表单控件为空时，控件中显示的内容

事件

  • onchange
    当用户输入改变时会触发这个事件
  • onfocus
    当用户把鼠标集中到他的身上时会触发这个事件
  • onblur
    用鼠标从里面出来会触发这个事件

验证器

  • HTML5的新功能
    验证用户是否输入字符
<input type="text" required/>
<button>可修订的按钮</button>

其他输入标签

标签
  • select+option
   <select name="pets" id="pet-select">
   <option value="dog">Dog</option>
   <option value="cat">Cat</option>
   <option value="hamster">Hamster</option>
   </select>

  • textarea
    可以控制这个文本输入框的大小
    <textarea name="textarea" rows="10" cols="50">Write something here</textarea>

  • label
    表示用户界面中某个元素的说明
<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

注意事项

  • 一般不监听inputde click事件
  • form里面input要有name
  • form里面放一个type=submit才能触发submit事件

其他标签

  • video
    用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放
  • audio
    用于在文档中表示音频内容
  • canvas
    用于定义图形，比如图表和其他图像，
  • svg

注意事项

  • 这些标签的兼容性一定要查看文档MDN

资料引用：
饥人谷方方老师
本文参考了饥人谷内部课程

avatar
文章
阅读
粉丝