5.HTML5

1. Form继续

1. 1 Select > option 下拉列表（combox）

  • name:写在select上
  • size： 显示几条
  • multiple=multiple; 可多选
  • option的属性
    • value= :用于提交的参数值
    • label : 和内容一样用显示

四大恶心属性： 别的属性 size=10 有值。！ 这四个有和没有的关系值无所谓

disabled: 灰的不可用。tab选不到。表单提交不了？？？？？ type=“hidden” 隐藏的

        <input name="a1" disabled value="10" />
        <input type="hidden" name="a1" value="10" />

readonly: 不可改，tab能选中

checked； checkbox和radio

selected: 用于selected

1.2 TextArea : text文本输入框 textarea多行文本输入框。

  • ※ 内容就是提交的值。 注意标签之前不要有内容

  • rows ； 行数

  • cols： 列数不准

1.3. Label标签：配合输入项

用于手残的点到文字上。for的标签获取焦点（focus）

        <textarea rows="10" cols="10" name="a4">safaaf</textarea>
        <label for="username">用户名</label>
        <input name="username" id="username" />

1.4 tabindex: 从小到大的顺序

Z原则+倒N原则
在这里插入图片描述

2. 框架：frameSet

HTML4:三种： 严格个strict 、宽松过渡的Transitional 、 框架集frameset

  • frameset没有body
  • rows=“比例|长度,*”； 行设置 *代表auto
  • cols= ; 列设置

2.1 frame: 已经淘汰

  • name： 用于 链接指定 target

    <frameset rows="100px,*">
    <frame src="top.html" noresize="noresize" scrolling="no" frameborder="1"  ></frame>
    <frameset cols="30%,*">
        <frame src="left.html" noresize="noresize" scrolling="no" frameborder="1"  ></frame>
        <frame src="main.html" noresize="noresize" scrolling="no" name="main" frameborder="1"  ></frame>
    </frameset>
</frameset>
-- left.html
    <a href="test1.html" target="_blank">test1.html</a>
    <a href="test1.html" target="_parent">test1.html</a>
    <a href="test1.html" target="_top">test1.html</a>
    <a href="test1.html" target="main">test1.html</a> 可以区域跳转

3. 内联框架 Iframe: 自由没有被淘汰

  • src: 包含的文件
  • name: 用于 链接指定 target

4. Base: meta中的标签： 修改相对路径的位置

!慎用

<head>
    <base href="http://127.0.0.1:5500/imgs/" />
    <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>
    112312 <a href="abc.do" target="innerframe">baidu</a>
    <iframe src="test1.html" width="600px" height="800px" name="innerframe"></iframe>
    431241
    <img src="../imgs/a.webp" alt="图片不存在" title="meinv" />111
    <img src="./a.webp" alt="图片不存在" title="meinv" />

5. 其他标签：

  • address: H5

    address {
    display: block; 块
    font-style: italic; 斜体
}

    display: block: 块：前后换行

    display: inline: 行内:

    display:inline-block; 有宽高的行内

    display:table/table-cell/table-row;

  • blockquote: H5 长引用

    • 块引用： 一大段话
    blockquote {
    display: block; 
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

  • q: 短引用：自动加引号

    q {
    display: inline;
}

q::before {
    content: open-quote; 在之前
}
user agent stylesheet
q::after {
    content: close-quote; 在之后f
}

isplay: inline;
}

q::before {
content: open-quote; 在之前
}
user agent stylesheet
q::after {
content: close-quote; 在之后f
}
posted @ 2021-05-16 11:44  剑心空明  阅读(5)  评论(0)  编辑  收藏  举报  来源