HTML常用标签

【资料来源：杭州饥人谷教育科技有限公司】

1. HTML 重点标签

1.1 a 标签

A. 属性

(1) href = hyper reference 超链接
  • 适用网址：http, https, 无协议（继承当前文件的协议）
跳转demo.png
  • 适用路径，如跳转页面 绝对目录/a/b/c.html 或 相对目录a/b/c.html，index.html或./index.html
    ps. 这里的/a 是指http服务的目录，不再是文件目录，所以双击打开再跳转链接会跳转到文件目录，失去意义
  • JS伪协议 javascript:代码;，直接执行js代码，现在比较少用
    什么都不做的a标签: <a href="javascript:;" />
    <a href="" /> 点击后会刷新页面
    <a href="#" /> 点击后不会刷新页面，但会回到页面顶部
  • 适用元素id，如: <a href="#xxx" />，页面将跳转至id为'xxx'的元素位置
  • 发邮件mailto: + email，跳转到发邮件页面，并把email地址输入到收件人框
  • 打电话tel: + 电话号码，手机上点击直接跳转到打电话界面，电话号码直接输入完毕
(2) target 在哪一个窗口打开超链接
  • '_self' 表示在当前页面打开
  • '_blank' 表示在空白页打开
  • '_top' 表示在最上级页面打开
    【补充知识】iframe 引用其他页面
    <iframe src='a-target-iframe.html' frameborder="0"></iframe>
    【重要】如果主页面包含iframe，在iframe中有一个a标签：
    <a href="//google.com" target="_top"></a> -> 点击后将在主页面打开链接页面
    <a href="//google.com" target="_self"></a> -> 点击后将在iframe页面打开链接页面
  • '_parent' 表示在父级页面打开
    如：有3个iframe嵌套，第三的iframe的链接如果设置父级页面打开将在第二个iframe打开，如果设置'_top'将在主页面打开
  • '窗口名' 表示在名为指定名称的窗口（window.name）打开，如果没有则创建
  • 'iframe名' 表示在名为指定名称的iframe打开
    <iframe src='a-target-iframe.html' name="xxx"></iframe>
  • 【补充知识】打开页面的方式 -> 把本机作为服务器在端口部署网址:
    手机同在一个wifi也可以访问
    a. http-server
    step1: cd 到网页文件路径
    step2: 命令: http-server . -c-1 缩写为 hs . -c-1
    step3: 浏览器打开URL后接文件名，如：192.168.56.1:8080/index.html
    b. parcel
    step1: cd 到网页文件路径
    step2: 命令: parcel index.html
    step3: 浏览器打开URL
(3) download 下载网页，但大部分情况不支持
(4) rel=noopener 用于防止特殊bug

1.2 iframe 标签

不需要深入学习，目前前端已使用其他方法实现

1.3 table

A. 属性

  • tr: table row
  • th: table header会加粗
  • td: table data
(1) thead

常用 thread > tr > th：

<thead>
  <tr>
    <th> Type1 </th>
    <th> Type2 </th>
  </tr>
</thead>
(2) tbody

常用 tbody > tr > td：

<tbody>
  <tr>
    <td> data1 </td>
    <td> data2 </td>
  </tr>
   <tr>
    <td> data3 </td>
    <td> data4 </td>
  </tr>
</tbody>
(3) tfoot

常用 tfoot > tr > td：

B. 常用格式

(1) 横纵双表头

在tbody和tfoot中将横向表头位置改成<th>即可

<tbody>
  <tr>
    <th> Math </th>
    <td> data1 </td>
    <td> data2 </td>
  </tr>
   <tr>
    <th> English </th>
    <td> data3 </td>
    <td> data4 </td>
  </tr>
</tbody>

ps.
a. 如果在table中不写thead、tbody、tfoot，html将自动把<tr>等格式放入tbody中
b. thead、tbody、tfoot不一定要按照顺序写，html会自动调换位置

(2) 相关样式
  • table-layout 布局
    auto: 自动布局，按内容计算宽度
    fixed: 等宽
  • border-spacing 单元格间距
  • border-collapse: collapse 合并单元格间隔

1.4 img

A. 作用

  • 发出get请求，展示图片

B. 属性

(1) Alt - alternative 请求失败时用一段文字代替图片
(2) width 宽，height 高

ps. 如果只写宽度，高度会自适应；只写高度，宽度会自适应；两个一起写，图片会按照指定宽高展示，可能会变形！
永远不要让图片变形！

(3) src 图片地址（可以为绝对地址、相对地址、URL）

C. 事件

  • 监听图片是否加载成功
(1) onload 图片加载成功触发
(2) onerror 图片加载失败触发
<img id="xxx" src="dog.png"></img>
<script>
  xxx.onload = function() {
    console.log("Succeed!");
  };
  xxx.onerror = function() {
    console.log("Failed!");
    <!-- 图片加载失败时进行挽救 -->
    xxx.src = "/404.png";
  };
</script>

D. 响应式

  • 设置max-width: 100%，实现图片永远填满屏幕且不会变形
  • 手机上浏览: F12 左上角第二个按钮

手机预览按钮

1.5 form

  • 一个form表单必须包含一个type="submit"的input或button，表单才能提交！
  • form里面的input都要有name

A. 作用

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

B. 属性

(1) action
  • 表单数据路径，即向何处发请求 返回form-data response
(2) 一般表单含输入框和提交按钮
<form action="/xxx">
  <input type="text" />
  <input type="submit" />
</form>

ps. <input type="submit" /> 系统会自动识别使用的语言替换submit按钮的文字，如果要改变可写成<input type="submit" value="submit" />
【重要】<input type="submit" /> 和 <button type="submit"></button> 区别

  • input中不能带其他标签
  • button中可以含其他标签，如:
<button type="submit">
  <strong>
    here!
  </strong>
</button>

(3) method 指定请求方法

  • 发送post请求<form action="/xxx" method="POST"></form>

(4) autocomplete 自动推荐输入

将自动填充开启autocomplete="on"，并在指定输入框设定推荐输入name="username"，会在输入框推荐输入项

<form action="/xxx" autocomplete="on">
  <input name="username" type="text" />
  <input type="submit" />
</form>

(5) target 要提交到哪个页面，在哪个页面刷新

  • 用法如a标签的target

C. 事件 - onsubmit

1.6 input

A. 作用

  • 让用户输入内容

B. Type

  • text 让用户输入文本的输入框
  • color 颜色铺满输入框
  • password 不显示输入的文字，用点表示
  • radio 单选框（圆形）
    注意名字要一致才能实现多选1
<input name="gender" type="radio" />male
<input name="gender" type="radio" />female
  • checkbox 多选框（方形）
    用法同radio一致，名字相同才会被认为是一组
<input name="habit" type="checkbox" />Video Game
<input name="habit" type="checkbox" />Cycling
<input name="habit" type="checkbox" />Chessing
  • file 选择文件
    ps. 选择多个文件，加上multiple: <input type="file" multiple />
  • hidden 看不见的input，不是给人填的，给JS自动填入

C. 事件

一般不监听用户click事件

  • onchange 当用户输入改变时触发
  • onfocus 当用户把鼠标移动到元素上时触发
  • onblur 当用户把鼠标离开元素时触发

D. 验证器

  • 要求用户必须填写，加入required: <input type="text" required />

E. 其他输入标签

(1) textarea 多行输入

锁死输入区域大小（不允许用户拖动）

<textarea style="resize:none; width:50%; height:300px;"></textarea>
(2) select 下拉选单

option中的value是真正选择的值，文本值是展示的值

<select>
  <option value="">- 请选择 -</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
</select>

2. 其他感想

方方老师讲的很好，本节课内容真的丰富又有质量，细节拉满，需要花时间好好消化！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
禁止转载，如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容

  • HTML常用标签详解
    对于新手来说，HTML的框架可以可以用IDE来解决，但是标签的用法还是需要通过自己的理解记忆来灵活运用 <a>标签...
    生命在流逝阅读 3,923评论 0赞 0
  • HTML 常用标签
    1. iframe 标签 iframe 标签主要用途是嵌套页面，目前使用较少，只有一些遗留项目在用。具体可以参考 ...
    大喵chary阅读 3,247评论 0赞 0
  • HTML常用标签介绍（二）
    本文将继续上文接着介绍一些HTML常用标签 1:HTML全局属性 在介绍常用常见的HTML标签之前，先以最简单的方...
    憨憨二师兄阅读 2,934评论 0赞 0
  • HTML 常用标签
    一、常用标签 1. iframe 标签 嵌套页面。需要新开一个窗口，速度比较慢。 iframe 直接使用 直接打开...
    养乐多__阅读 3,746评论 0赞 5
  • HTML常用标签的笔记整理
    iframe a form input select textarea table iframe iframe单独...
    前端_学徒阅读 3,375评论 0赞 0