《HTML重点标签》

小X
370 阅读4分钟

a标签

属性

  • href

超级链接/超级引用

  • target

指定窗口打开链接

两个工具：

  • yarn global add http-server 直接输入 http-server -c-1 （hs-c-1）
  • yarn global add http-parcel 直接输入parcel+空格+html文件

作用

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

a的href的取值

网址

  • https：//google.com

  • http：//google.com

  • //google.com

直接省略前面两个，因为 //google.com 最高级，会自动选用 https 或者 http

路径

  • /a/b/c 以及 a/b/c

注意：这里面的/不是根目录，http服务的根目录

  • index.html 以及 ./index.html

在a标签里写 index.html ，就是在当前的目录下找到 index.html ； ./index. html 意思也是一样的

伪协议

  • javascript:代码；

先写 javascript 单词的全小写，冒号和分号不能删（少了谁都不行），然后在 ：和 ；中间写代码。如果想要写个a标签，又不想它刷新和回到顶部，就直接写 javascript:; 就可以，因为它相当于执行了js代码，但什么都没做

  • id

href=#xxx 就会自动跳转到指定的标签

  • malito：邮箱

在页面点击之后可以发邮件

  • tel：手机号

可以直接打电话

a 的target的取值

内置名字

  • _blank

在空白的页面下打开

  • _top

在顶级窗口上打开，或者是当面页面里所有 iframe 最上面的窗口打开

  • _parent

当前链接所在的 iframe 的上一层打开

  • _self

self就是默认值

程序员命名

  • Window 的 name
  • iframe 的 name

table标签

相关的标签

  • table

表格

  • thead

thead 标签用于组合 HTML 表格的表头内容

  • tbody

tbody 标签用于组合 HTML 表格的主体内容

  • tfoot

tfoot 标签用于组合 HTML 表格的页脚内容

  • tr

table row ,tr 标签定义 HTML 表格中的行 ，一个 tr 元素包含一个或多个 td 或 th 元素

  • td

table data , td 标签定义 HTML 表格中的标准单元格，td元素中的文本通常是普通的左对齐文本。

  • th

th 标签定义 HTML 表格中的表头单元格，th 元素中的文本通常呈现为粗体并且居中

注：表头单元格 - 包含头部信息（由 th 元素创建）；标准单元格 - 包含数据（由 td 元素创建）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>小明</th>
                <th>小红</th>
                <th>小红</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>91</td>
                <td>90</td>
                <td>89</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>91</td>
                <td>90</td>
                <td>89</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>91</td>
                <td>90</td>
                <td>89</td>
            </tr>
        </tbody>
        <tfoot>
            <tfoot>
                <th>总分</th>
                <td>273</td>
                <td>271</td>
                <td>269</td>
            </tfoot>
        </tfoot>
    </table>
</body>
</html>

相关的样式

  • table-layout

属性值有：

  1. automatic ：默认，列宽度由单元格内容设定
  2. fixed ：列宽由表格宽度和列宽度设定
  • border-spacing

属性值有：

  1. length length ： 规定相邻单元的边框之间的距离；使用 px、cm 等单位，不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距；如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
  • border-collapse

属性值有：

  1. collapse ：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
  2. separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性

img标签

  • img

img 标签定义 HTML 页面中的图像；标签有两个必需的属性：src 和 alt

  • 作用

发出get请求，展示一张照片

  • 属性

src/alt/height/width

  1. src ：显示图像的地址（URL）
  2. art ：图像的替代文本
  3. height ：图像的高度
  4. width ：图像的宽度 注：只写图像的宽度，高度会自适应；只写图像的高度，宽度也会自适应。同时写上图像的高度和宽度，图片会变形。但绝对不能让图片变形！！！
  • 事件

onload/onerror

  1. onload 事件会在页面或图像加载完成后立即发生（图片加载成功）
  2. onerror 事件在加载外部文件（文档或图像）发生错误时触发（图片加载失败），如果图片加载失败，此时需要一个救援图片来挽救图片加载失败
  • 响应式

max-width：100% 响应式图片会自动适配各种尺寸的屏幕

form标签

  • 作用

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

  • 属性

action/autocomplete/method/target

  1. action是控制请求哪个页面
  2. method是控制用get还是用post来请求
  3. autocomplete是自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
  4. target是告诉浏览器我需要提交到哪个页面，哪个页面应该刷新
  • 事件

onsubmit

  1. form 想要触发submit事件就必须要有一个type=submit
avatar
文章
阅读
粉丝