a 标签的用法

a标签的属性

1. href

  • 前置内容：

查看链接的方法：
在vscode终端上安装:hs
查看链接只要输入：hs -c-1
按ctrl点击给出的ip地址，在网页地址栏后缀添加文件名 即可

href的取值：

  1. 网址：
    1. https://www.baidu.com
    2. http://www.baidu.com
    3. //www.baidu.com 无协议网址；最高级；推荐使用这一种写法；自动选择适用的协议
  2. 路径:
    1. 绝对路径：/a/b/c.html

【非硬盘的根目录，是http服务的根目录，是使用hs时基于当前文件目录的根目录】

  1. 相对路径：index.html和./index.html
    1. 伪协议:
  2. javascript:代码;

写法：javascript: ; 【需要写冒号和分号】

  1.   1. 应用场景：希望点击a标签之后页面不刷新（链接为空时）也不返回到顶部（链接为#时），无动作：
  2.   1. <a href="javascript:0;"></a>
  3.   1. 这就相当于执行一段没有意义的js代码
  1. mailto:邮箱
    1. 点击发邮件给陈琼华 【可用于简历上】
  2. tel:手机号
    1. 点击打电话给陈琼华 【可用于简历上】
    2. id:

写法： href=#id名
可以跳转到带 该id名的标签
如

, 就可以定位到这个p标签

2. target

  • 指定是在本页面还是新开一个页面打开链接；
  • 取值：
    1.    1. a_blank 打开新页面
    2.    1. a_self 在当前页面打开
    3.    1. a_top 在当前页面的顶级窗口打开
    4.    1. a_parent 在父级页面打开（在当前页面的上一层打开）， 3和4适用于有Iframe内嵌窗口的情况

    3. download

    少用，一般网页不支持

    4. rel=noopener

    学习js后再来补充了解

a标签的作用

  • 跳转到外部页面
  • 跳转到内部锚点
  • 跳转到邮箱或电话等

img 标签的用法

作用：

发出GET请求，展示图片

属性：

  1. alt: 如果图片加载失败，会显示这个alt属性的文字作为提示
  2. width 如果只写宽度，高度会自适应；一般只写宽即可
  3. height 如果只写高度，宽度会自适应
  4. src: 图片地址；网络地址/相对路径/绝对路径

JS事件：

监听图片是否加载成功，只有在测试的时候调用，script标签必须写在监听对象标签的下方
功能：当得到图片加载失败的时候可以进行b计划进行挽救（用户体验优化）

  • onload 加载成功
  • onerror 加载失败

前提：在图片标签中添加id选择器方便调用；
写法：
image.png

响应式：

在css中添加：
img {
max-width: 100%;
}
图片就可以自适应不同的屏幕大小，一般自适应宽度即可

table 标签的用法

table 的子标签

table标签目前只能包含以下 三个子标签

1. thead

  • tr

table row 一行；可有多行

  • th

table head 表头的一行中的头，即垂直方向的第一个单元格

2. tbody

  • tr
  • td

table data 表格一行中的数据

3. tfoot

  • tr
  • td

    【简单】table代码示意如图：

    image.png
    效果如图：
    image.png

    【进阶】两个表头的表格如何实现？

    →如图所示，这里有两个表头，分别是小红小明小颖这一行和 数学语文英语这一列
    《HTML常用标签》 - 图4

image.png

table标签的相关样式

  • table-layout:
    • table-layout: auto; auto表示根据内容自动计算宽度（个性化平均）
    • table-layout: fixed; fixed表示定宽，在设置宽度的前提下，尽可能地让各宽度平均 （统一平均）
  • border-collapse(是否合并） 和 border-spacing（border与border之间的间隔）
    • 一般写于css reset中：
    • border-collapse:collapse
    • border-spacing:0

【以上三个样式均写于table样式中，注意：border写于td和th中、宽度设置于table中等前置要求】

form标签的用法

最简单的form标签一般包含[输入框]和[提交按钮]
即 input标签type为text 和 input标签type为submit

作用：

发送get或post请求，然后刷新页面

属性：

  • action=”/xxx”；

请求哪个页面
[一般为后端实现的路径]

  • method= “Get “或者” POST “

控制用哪种方式请求

  • autocomplete=”on”或者”off”

on：浏览器能够储存用户之前在表单里输入的值，在鼠标点击输入框的时候给出历史记录提示
off：无任何提示

  • target: 在当前页面提交，还是新开一个页面提交

Input的submit和button的submit有什么区别？

Input标签里不能再有其他的标签
button标签里可以有其他的标签

  1.  <form action="/xxx" method="GET" autocomplete="on">
  2.         <input type="text" name="username" id="">
  3.         <input type="submit" value="input提交">
  4.         <button type="submit">
  5.             <strong>button提交</strong>
  6.         </button>
  7.     </form>

效果如下
image.png

JS事件：

onsubmit
一个表单必须有一个type=”submit”的属性，这样才能提交请求；不写属性则默认是type=”submit”；
可以是input或者button，属性都必须加上type=”submit”

input标签的用法

作用：

让用户输入内容

JS事件：

onchange 当用户输入改变的时候触发
onblur 当用户鼠标从对象移开时触发
onfocus 当用户把鼠标集中在对象上时触发

属性：

类型type:

  • text 输入文本
  • password 输入密码
  • radio 单选
    • 【单选实现二选一效果】：令两个input的name都是同一个字符串，就能实现二选一效果
  • checkbox 多选
    • 【同一组类型的多选】：令多个input的name都是同一个字符串，这样浏览器提取值会自动归为同一数组
  • file 上传文件
    • 上传一个文件：
    • 上传多个文件
  • hidden 用户不可见
    • 不是给用户输入的；而是给机器输入的，比如让js自动填写id、字符串等数据
  • textarea 文本框
    • 常用固定文本框写法：
  • select 选择
    • 默认选中状态 的写法：value为空，自定义文本
    • 子标签为 option ：value写给自己看，文本写给用户看
      1. <select name="week" id="">
      2. <option value="">- 请选择 -</option>
      3. <option value="1">星期一</option>
      4. <option value="2">星期二</option>
      5. <option value="3">星期三</option>
      6. </select>

      验证器

      HTML5自带验证器，js的时候讲

eg. input的text标签内属性添加 required ，则输入框内必须填写内容才可提交

注意事项

  1. 一般不监听Input的click ，而是监听focus
  2. form里的Input都要有Name
  3. form里必须有一个type=submit的input或者button才能出发submit事件