Html总结（一）

最新推荐文章于 2022-07-23 23:02:43 发布

Dannii_

最新推荐文章于 2022-07-23 23:02:43 发布

阅读量500

点赞数

分类专栏： Html/Css 文章标签： html

本文链接：https://blog.csdn.net/qq_36748278/article/details/69873523

版权

Html/Css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

此文总结是根据自己在某些方面知识不牢固而总结的。

假如一个框架有可见边框，用户可以拖动边框来改变它的大小.
noresize=”noresize”：加入此条语句说明，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，边框无法移动的

frameset

框架结构标签<frameset>可定义一个框架集。定义如何将窗口分割为框架,每个 frameset 定义了一系列行或列rows/columns的值规定了每行或每列占据屏幕的面积

<frameset cols="40%,60%">
        <frame src="none_one.html">
        <frame src="none_two.html">
    </frameset>

这里写图片描述

不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
为不支持框架的浏览器添加 <noframes> 标签。若添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于<body></body> 标签内。

<noframes>
    <body>您的浏览器无法处理框架！</body>
</noframes>

iframe

iframe 元素：会创建包含另外一个文档的内联框架（即行内框架）。
frameborder 属性：规定是否显示 iframe 周围的边框。1 ：有边框（默认值）。0：关闭边框。
这里写图片描述

这里写图片描述

letter-spacing属性：增加或减少字符间的空白（字符间距）。

pubdate 属性：指示 <time> 元素中的日期 / 时间是文档的发布日期。

tabindex 属性：规定元素的 tab 键控制次序（当 tab 键用于导航时）。值为数字

onsubmit 事件：在表单中的确认按钮被点击时发生。
novalidate 属性：规定当提交表单时不对其进行验证。

表格：

frame属性：控制围绕表格的边框。如frame=”below”:只有下框； frame=”above”:只有上框； frame=”hsides”:有上下框； frame=”vsides”:有左右框
align属性：单元格内容排列方式。如align=”left”:左对齐
cellpadding属性：定义单元格内边距
cellspacing属性：定义单元格之间的间距
bgcolor属性：背景颜色
background属性：背景图像

<base> 标签为页面上的所有链接规定默认地址或默认目标。然后全部的URL或target都会以此为基准
<base> 标签必须位于 head 元素内部。

`<label>`的control属性

在HTML5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <title>zifuchuan</title>
</head>

<form>
    <label id="label">
        邮编：
        <input id="txt_zip" maxlength="6">
        <small>请输入六位数字</small>
    </label>
    <input type="button" value="设置默认值" onclick="setValue()"/>
</form>
<script>
    function setValue()
    {
        var label=document.getElementById("label");
        var textbox=label.control;
        textbox.value="213001";
    }
</script>

通过label的control属性控制input输入框的value，所以点“设置默认值”按钮，将邮编输入框值初始化为”213001”。

details

<details> 标签用于描述文档或文档某个部分的细节。
与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
open 属性：规定在 HTML 页面上 details 应该是可见的。<details open="open">

<!DOCTYPE html>
<html lang="en">
<body>  
    <details id="detail1" ontoggle="detail_ontoggle(this)" style="cursor:pointor">
        <summary>精武风云</summary>
        <p id="p" style="visibility:hidden"/>陈真当年为报杀师之仇。。。。</p>
    </details>

    <script>
        function detail_ontoggle(detail)
        {
            var p=document.getElementById("p");
            if(detail.open)
                p.style.visibility="visible";
            else
                p.style.visibility="hidden";
        }
    </script>
</body>
</html>

这里写图片描述

dialog

<main> 标签规定文档的主要内容。
<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    <input type="button" value="打开对话框" onclick="document.getElementById('dg').show();">

    <!--在页面打开时即显示 dialog元素，可使用open属性-->
    <dialog id="dg" style="width:15%;text-align:center;">
        <h1>用户登录</h1>
        <main>
            <form>
                <label for="txtName" value="用户名："/>
                <input type="text" id="txtName"/>
                <br/>
                <label for="txtPassword" value="密码":"/>
                <input type="password" id="txtPassword"/>
                <br/>
                <input type="button" value="登录"/>
                <input type="button" value="关闭" onclick="document.getElementById('dg').close();"/>
            </form>
        </main>
    </dialog>
</html>

这里写图片描述

fieldset

fieldset 元素：可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<legend> 标签为 fieldset 元素定义标题。
form 属性：规定 fieldset 所属的一个或多个表单。form 属性的值必须是所属表单的 id。如需引用一个以上的表单，使用空格分隔。
disabled 属性：规定应该禁用一组表单元素（一个 fieldset）。被禁用的 fieldset 不可用，也不可点击。
name 属性：规定 fieldset 的名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <title> form-list</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>健康信息</legend>
            身高：<input type="text"/>
            体重：<input type="text"/>
        </fieldset>
    </form>
</body>
</html>