HTML入门--标签番外篇(2)

这节主要回顾下除HTML标签外其他的的知识点，属性、格式化、注释、样式、框架、实体等。

1.HTML属性

　　属性主要是为HTML标签提供更多的附加信息，上篇标签中有接触到name、value等属性。

　　常用属性：class/id/name/style/title/value/type/size/disabled/readonly等

　　1>属性始终书写在HTML元素的开始标签中。

　　2>尽量使用小写，虽然HTML不区分大小写，标准规定最好使用小写。

　　3>属性值使用引号包裹，常用双引号，但属性值中有双引号，那么外层可以使用单引号。

    <form action="">
        <!-- 这里的type/name/value/size都是当前input标签的属性，都书写在起始标签中 -->
        用户名:<input type="text" name="firstname" value="John" size="60">
    </form>

2.样式style

　　style作为HTML标签的属性，主要用于改变HTML元素的样式，我们可以使用内嵌式style属性，也可以使用外链式样式表。

　　废弃的标签：

<center> -- 定义居中的内容。

扫描二维码关注公众号，回复： 998955 查看本文章

、<basefont> -- 定义HTML字体　　使用style中的font样式替换

<s>、<strike> -- 定义删除线文本　　使用<del>替换

-- 定义下划线文本　　　　　　使用style中的underline替换

　　废弃的属性：

　　　　align -- 定义文本的对齐方式　　使用text-align代替

　　　　bgcolor -- 定义北京颜色　　使用background-color代替

　　对于废弃的元素、属性，我们都可以使用style样式进行实现。

3.文本格式化标签

　　用于格式化对应文本的标签。

　　1>文本格式化标签

-- 设置粗体文本，<big> -- 设置大号字体， -- 设置加重文字， -- 设置斜体， -- 设置小号字体， -- 定义加重语气

-- 设置下标字， -- 设置上标字，<ins> -- 设置插入字体样式，<del> -- 设置删除字体样式

    <!-- 纯粹的加粗文本，只是做样式上的加粗 -->
    <b>This text is bold</b>
    <br />
    <!-- 也是以粗体显示，着重内容 -->
    <strong>This text is strong</strong>
    <br />
    <!-- 大号字体显示 -->
    <big>This text is big</big>
    <br />
    <!-- 对内容做强调的作用 -->
    <em>This text is emphasized</em>
    <br />
    <!-- 斜体显示 -->
    <i>This text is italic</i>
    <br />
    <!-- 文本以小号字体显示 -->
    <small>This text is small</small>
    <br /> This text contains
    <!-- 下标字 -->
    <sub>subscript</sub>
    <br /> This text contains
    <!-- 上标字 -->
    <sup>superscript</sup>
    <br />
    <!-- 插入字体显示 -->
    <ins>superscript</ins>
    <br />
    <!-- 删除字体显示 -->
    <del>superscript</del>

　　2>计算机输出标签

<code> -- 格式化代码，<kbd> --格式化键盘码，<samp> -- 定义计算机代码样本，<tt> --格式化打字机代码，<var> -- 定义变量，<pre> -- 定义预格式文本。

    <!-- pre就是保证标签中的内容原样输出 -->
    <pre>
        这是预格式文本,它保留了      空格
        和换行。
    </pre>
    <!-- 元素不保留多余的空格和折行：     -->
    <code>
        var person = {
            firstName:"Bill",
            lastName:"Gates",
            age:50,
            eyeColor:"blue"
        }
    </code>
    <br />
    <kbd>
        <p>To open a file, select:</p>
        <p>
            <kbd>File | Open...</kbd>
        </p>
    </kbd>
    <br />
    <samp>demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189</samp>
    <br />
    <var>E = m c<sup>2</sup></var>

　　3> 引用、术语定义

<abbr> -- 定义缩写，<acronym> -- 定义首字母缩写，<address> -- 定义地址，<bdo> -- 定义文字方向，<blockquote> -- 定义长的引用

<q> -- 定义短的引用语，<cite> -- 定义引用，<dfn> -- 定义一个定义项目。

    <address>
        Written by
        <a href="mailto:[email protected]">Donald Duck</a>.
        <br> Visit us at:
        <br> Example.com
        <br> Box 564, Disneyland
        <br> USA
    </address>
    <!-- 是缩短词，规则不限，比如 min. (minute), Inc. (including), etc. (et cetera), FBI 等等 -->
    <abbr title="etcetera">etc.</abbr>
    <br />
    <!-- 特殊的 <abbr>，通常以每个单词首字母组成，且发音通常以组合后的词为准： -->
    <acronym title="World Wide Web">WWW</acronym>
    <br />
    <!-- rtl表示right-to-left，文字从右向左显示，对应的有ltr正好作用相反。 -->
    <bdo dir="rtl">
        Here is some Hebrew text
    </bdo>
    <br />
    <!-- blockquote 元素，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。 -->
    <blockquote>
        这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
    </blockquote>
    <q>
        这是短的引用。
    </q>
    <br />
    <!-- 删除线和插入效果文本 -->
    <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

3.HTML注释

用于对文档中的内容进行解释说明，

　　1>HTML注释标签

<!-- 这是段落标签，显示独占一行，属于块元素 -->
<p>这是一个段落。</p>

　　2>HTML条件注释

　　　　通过条件判断方式而实现的代码注释。

//定义只有在浏览器是IE8时，执行其中的代码。
<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

4.HTML框架

　　可以在同一个浏览器窗口中显示不止一个页面。每一个HTML文档就是一个框架，并且每个框架都独立于其他的框架。

1><frameset>框架结构标签

　　　　通过frameset标签定义了很多的行和列，将网页分割成不同的部分。

<!-- 通过frameset中的cols属性将窗口分成三部分，分别展示三个页面 -->
<frameset cols="25%,50%,25%">
    <!-- frame 标签中放置每个框架中的 HTML 文档。 -->
    <frame src="/example/html/index1.html">
    <frame src="/example/html/index2.html">
    <frame src="/example/html/index3.html">
</frameset>

　　注意：

　　　　1、为了避免拖动框架改变其大小，需要在frame中添加noresize="noresize"属性。

    <frameset cols="25%,50%,25%">
        <!-- 通过noresize属性设置毕业拖动改变大小 -->
        <frame noresize="noresize" src="/example/html/index1.html">
        <frame src="/example/html/index2.html">
        <frame src="/example/html/index3.html">
    </frameset>

　　　　2、不能将body标签和frameset标签混合使用。

　　　　3、当浏览器不支持框架标签时，需要使用noframes标签添加内容进行说明，且文字必须包含在body标签中。

<frameset cols="25%,50%,25%">
    <!-- 通过noresize属性设置毕业拖动改变大小 -->
    <frame noresize="noresize" src="/example/html/index1.html">
        <frame src="/example/html/index2.html">
            <frame src="/example/html/index3.html">
</frameset>
<noframes>
    <body>您的浏览器无法处理框架！</body>
</noframes>

　　　　4.frameset可以嵌套布局

<!-- 外层框架将窗口上下分割 -->
<frameset rows="50%,50%">
    <frame src="/example/html/index1.html">
    <!-- 内层框架将剩余的部分左右分割 -->
    <frameset cols="25%,75%">
        <frame src="/example/html/index2.html">
        <frame src="/example/html/index3.html">
    </frameset>
</frameset>

2><iframe>内联框架

　　　　用于在网页中嵌套显示网页，可以使用height和width设置其宽、高。

<body>
        <!-- width、height设置iframe的宽、高，frameborder设置为0，隐藏其边框 -->
        <iframe src="./index1.html" frameborder="0" width="800" height="600"></iframe>
    </body>

　　　　iframe作为a标签的目标　　　

　　　　　　链接的 target 属性必须引用 iframe 的 name 属性：

　　　　<iframe src="./02 体验CSS样式规则.html" name="iframe_a"></iframe>
    　　<p>
        　　<!-- 点击后iframe中的页面会变成百度首页 -->
        　　<a href="http://www.baidu.com" target="iframe_a">页面1</a>
    　　</p>

5.HTML中的字符实体

在 HTML 中不能使用小于号（<）和大于号（>），浏览器会误认为它们是标签，对于预留字符必须用字符实体替换。

　　常用字符实体：

　　　　空格： 　　　　页面上的空格需要用字符实体替换

小于/大于号：</>

　　　　引号："

　　　　撇号：'

　　　　版权：©

总结：通过两篇回顾了HTML中的基础知识，重新捡拾了遗忘的知识，也掌握了写之前未留意的知识点。

HTML入门--标签番外篇(2)

猜你喜欢