HTML 重难点

久崎
222 阅读3分钟

a标签

属性

  • href
  • target
  • download (下载页面，不是所有浏览器都支持)
  • rel=noopener (防止一个bug)

作用

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

打开网页操作

方法一

// 在终端
// 安装 http-server
yarn global add http-server

// 打开网页 -c 是缓存，-1 是不要缓存
http-server . -c-1
// 缩写
hs . -c-1

方法二

// 在终端
// 安装parcel
yarn global add parcel

// 打开网页
parcel a-href.html

a 的 href 的取值

网址

路径

  • /a/b/c 以及 a/b/c
  • index.html 以及 ./index.html

伪协议

  • javascript:代码;（现在很少用，一般用javascript:;来设置空操作）
  • mailto:邮箱
  • tel:手机号

id跳转

  • #xxx 将页面跳转至 id=xxx 的位置

额外笔记

  • vscode简写： p{$}*30 生成30个p标签，{}表示序号，$表示按顺序来

a 的 target 的取值

内置名字

  • _blank （新的空白页面打开）
  • _top （最顶层页面，若有多个iframe就会在最顶层的frame打开）
  • _parent （父级窗口打开）
  • _self （默认，在本页打开）
  • xxx （如果有xxx这个窗口，就在这个窗口打开，没有就新建一个，后面所有target=xxx的超链接都会在这个窗口打开）

程序员命名

  • window 的 name
  • iframe 的 name

iframe 标签

  • 可以嵌套
  • 以 iframe 的 name 为 target 的超链接可以在 iframe 里打开
  • 多个 iframe 时，a 标签的target="_top" 会在顶层打开

table 标签

table的相关标签

  • table
  • thead
  • tbody
  • tfoot
  • tr (table row)
  • td (table data)
  • th
<thead>
    <tr>   // table row
        <th></th>   // 表头
    </tr>   
</thead>
<tbody>
    <tr>
        <td></td>   // table data
    </tr>
</tbody>
<tfoot></tfoot>

相关的样式

  • table-layout
    • auto (自动计算距离，根据内容)
    • fixed (自动计算距离，尽量平均)
  • border-collapse (控制边界距离)
    border-collapse: collapse
  • border-spacing

img 标签

作用

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

属性

  • alt / height / width /src
  • 只写高或者宽，另一半会自动适应，不要让图片变形

事件

  • onload / onerror
<img id="xxx" src="dog.png" alt="一只狗">

    <script>
        xxx.onload = function () {
            console.log("图片加载成功")
        };
        xxx.onerror = function () {
            console.log("图片加载失败");
            xxx.src = "404.png";
        };
    </script>

响应式

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

        img {
            max-width: 100%;
        }
    </style>

可替换元素

form 标签

作用

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

属性

  • action (请求哪个页面）
  • autocomplete （是否自动填充）
  • method (用GET还是用POST方法）
  • target （将哪个页面变成方法里的路径）
<form action="/xxx" method="GET" autocomplete="on" target="_blank">
        <input name="username" type="text">
        <input type="submit" value="搞起">
        <button type="submit">提交</button>
</form>

事件

  • onsubmit
  • input 的 type="submit" 和 button 的 type="submit" 的区别：
    • button 里还可以加东西，input 不能加东西

input 标签

作用

  • 让用户输入

属性

    <input type="text">
    <hr>
    <input type="color">
    <hr>
    <input type="password">
    <hr>
    <input type="radio" name="gender">
    <hr>
    <input type="checkbox" name="hobby" /> 唱
    <input type="checkbox" name="hobby" /> 跳
    <input type="checkbox" name="hobby" /> rap
    <input type="checkbox" name="hobby" /> 篮球
    <hr>
    <input type="submit">
    <hr>
    <input type="file" /> // 选择文件
    <hr>
    <input type="file" multiple /> // 多选
    <input type="hidden"> // 给计算机使得
    <hr>
    <textarea style="resize:none" width: 50%; height:300px></textarea>
    <select>
        <option value="">-请选择-</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
    </select>

事件

  • onchange / onfocus / onblur

验证器

  • HTML5 新增功能: 如input里的 require

其他输入标签

  • select + option （如上）
  • textarea （如上）
  • label

注意事项

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

小技巧

批量设置

  • ctrl + shift + p ——> Emmet wrap ——> ul>li*

多行输入

  • alt + 鼠标点击 ——> ESC（取消）

自动格式化

  • Fomate On Save

导航

<nav>
    <ol>
        <li></li>
    </ol>
</nav>

添加外部资源

添加图片

  • 注意不要让图片变形
  • 如果图片比例不对，需要使用工具裁剪一下
  • 如果图片尺寸过大，无需特殊处理
  • 如果图片体积过大（300kb），则需要压缩

添加链接

  • 国内一般需要添加 target=_blank
  • 添加完了之后要自己全部点一遍，防止出错

关闭页面

ctrl + W

兼容手机

<style>
        img{
            max-width: 100%;
        }
</style>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
avatar
文章
阅读
粉丝