HTML结构标签

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  (HTML 4.01 支持框架)
<!doctype html>  (HTML 5)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="" content="">
<meta name="" content="">
<title>标题</title>
<base href="所有链接的基准url" target="_blank/_self/_parent/_top/framename" />
<link href="style.css" rel="stylesheet" type="text/css" >
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript" src=""></script>
<style>......CSS......</style>
</head>

<body>
<p></p>
<hr />     <br /><br /><br />                  
<h1>….</h1>
<h2>….</h2>  (标记标题,1~6)
<h6>….</h6>
<a href="xxxxxxxx"></a>
<img src="xxxxxx" width="…" height="…"/>
<ul>
    <li></li>
    <li></li>
</ul>
<dl>
    <dt>
        <dd></dd>
    </dt>
</dl>
<form>
    <table>  
        <tr>
            <th></th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    ......Script......
</script>

</body>
</html>                    

 

html的级关系:父级(parent)  <<继承关系  子级(child);同级(siblings)

  子级浮动,父级未浮动,父级高度无法依赖子级;由父级自行解决(属性要加给父级)加上“overflow:hiddlen;”(不用设height,因为height会根据子级的高度自行调整)

  宽度由父级决定,宽度尽量只给父级

  内联标签不支持宽度和高度的属性

  “display:block;”可以将内联标签变成块标签,或者用float也可以变成块标签

块级标签(block)

  <div></div>:容器标签,特点:独占一行空间;

  <h1></h1>--<h6></h6>:标题标签,特点:独占一行空间,有字体大小的设置(font-size),文本有加粗强调的设置(font-weight),上下文之间有很大的空间;

  <p></p>:段落标签,特点:独占一行空间,上下文之间有一定的间距;

    段落中文本的对齐方式 <p align="left/right/center/justify"></p>  建议使用CSS修饰的"text-align"替代

  <dir><li>项目1</li><li>项目2</li></dir>:目录式列表,每个项目不能超过20个字元即10个中文字  (HTML5已不支持<dir></dir>标签);

  <ul><li>项目1</li><li>项目2</li></ul>:无序列表,特点:ul和li必须一起用,ul和li都独占一行空间,ul上下文之间有很大间距,li有列表的样式显示且有文本缩进(list-style);

    项目符号  <ul type="disc/circle/square"></ul>(定义全部的列举项)  <li type="disc/circle/square"></li>(定义这个及其后的列举项)  (HTML5已不支持该属性)

      disc:实心圆点(预设);circle:空心圆点;square:实心方块;

  <ol><li>项目1</li><li>项目2</li></ol>:有序列表

    <ol type="a/A/i/I/1"></ol>(定义全部的列举项)  <li type="a/A/i/I/1"></li>(定义这个及其后的列举项)  (HTML5已不支持该属性)

      a:表示以小写英文字母作为项目编号

      A:表示以大写英文字母作为项目编号

      i:表示以小写罗马数字作为项目编号

      I:表示以大写罗马数字作为项目编号

      1:表示以阿拉伯数字作为项目编号(预设值)

    <ol start="欲开始计数的序数"></ol>(定义全部的列举项)  <li value="欲指定的序数"></li>(定义这个及其后的列举项)   (HTML5已不支持该属性)

    <ol reversed="reversed"></ol>  指定列表倒序  (HTML5新属性)

  <dl><dt>项目名称1</dt><dd>描述1</dd><dd>描述2</dd><dt>项目名称2</dt><dd>描述</dd></dl>:描述性列表标签,特点:dl、dt、dd都独占一行空间,dl上下文之间有很大空间,dd有文本缩进现象;

内联标签(inline)

  <span></span>:最干净的内联标签,本身无任何修饰;

  <a></a>:超链接标签,链接样式由href属性决定,链接样式:文本颜色(color)、带下划线的文本修饰(text-decoration)、鼠标变成手型光标(cursor),有状态的色彩提示,点击后可跳转到对应的文件路径;

    <a href="url?...&...&..." id="" title="" target="_self" download="baidu.jpg" hreflang="zh/en" media="print and (resolution:300dpi)" rel="friend" type="MIME_type"></a>

      href:规定链接的目标URL,如<a href="mailto:xxx@qq.com?subject=邮件的主题"></a>

      id:设定锚点,如<a id=""></a>,链接到锚点:<a href="url#..."></a>(如果锚点在另一个路径文档)<a href="#..."></a>(如果锚点在当前文档)

      title:鼠标停在链接上显示的提示性文件

      target:规定在何处打开链接文档;

        _self:默认,在当前网页所在窗口中打开连接

        _blank:打开新的浏览器窗口来显示链接目标

        _parent:如果是嵌套框架,则在父框架或窗口中打开链接,如果不是则与_self等效

        _top:将目标文件载入整个浏览器窗口,删除所有框架以全视窗显示

        framename:框架名称,在指定框架中打开链接

      download:指定被下载的链接目标,<a>标签中必须设置href属性,该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)

      hreflang:规定被链接文档的语言,<a>标签中必须设置href属性

      media:规定目标 URL 是为什么类型的媒介/设备进行优化的,该属性用于规定目标 URL 是为特殊设备(比如 iPhone)、语音或打印媒介设计的,该属性可接受多个值,只能在 href 属性存在时使用;

        可用运算符:“and”、“not”、“,”(or)

        设备:all(默认)、aural(语音合成器)、braille(盲文反馈装置)、handheld(手持设备,小屏幕,有限的带宽)、projection(投影机)、print(打印预览模式/打印页面)、screen(计算机屏幕)、tty(电传打字机以及使用等宽字符网格的类似媒介)、tv(电视类型设备,低分辨率、有限的分页能力)

        值:width(规定目标显示区域的宽度,可使用 "min-width" 和 "max-width")、height(规定目标显示区域的高度,可使用 "min-height" 和 "max-height")、device-width(规定目标显示器/纸张的宽度,可使用 "min-" 和 "max-" 前缀)、device-height(规定目标显示器/纸张的高度,可使用 "min-" 和 "max-" 前缀)、orientation(规定目标显示器/纸张的取向,可能的值:"portrait" 或 "landscape")、aspect-ratio(规定目标显示区域的宽度/高度比)、device-aspect-ratio(规定目标显示器/纸张的 device-width/device-height 比率)、color(规定目标显示器的 bits per color)、color-index(规定目标显示器能够处理的颜色数)、monochrome(规定在单色帧缓冲中的每像素比特)、resolution(规定目标显示器/纸张的像素密度 dpi/dpcm)、scan(规定 tv 显示器的扫描方法,可能的值是:"progressive" 和 "interlace")、grid(规定输出设备是网格还是位图,可能的值:"1" 代表网格,"0" 是其他)

      rel:指定当前文档与被链接文档的关系,只能在 href 属性存在时使用;

        alternate:文档的可选版本(例如打印页、翻译页或镜像)

        stylesheet:文档的外部样式表

        start:集合中的第一个文档

        next:集合中的下一个文档

        prev:集合中的前一个文档

        contents:文档目录

        index:文档索引

        glossary:文档中所用字词的术语表或解释

        copyright:包含版权信息的文档

        chapter:文档的章

        section:文档的节

        subsection:文档的子段

        appendix:文档附录

        help:帮助文档

        bookmark:相关文档

        nofollow:Google 使用 "nofollow",用于指定 Google 搜索引擎不要跟踪链接

        licence、tag、friend

      type:规定目标文档的MIME类型,只能在 href 属性存在时使用;

单标签(元素标签)

  <img src="图像文件地址" alt="图像不显示时显示的文本" title="鼠标经过图像时的提示" />  插入图像标签

  <input type="" />  输入标签

  <hr />水平横线

  <br />换行符

 

合理化使用标签:

  1、尽量用块来包含内联

  2、在无法确定使用哪个标签时就用<div>

  3、通常有宣传意义的图用<img>标签,只是为了修饰而存在的用背景图background-image

  4、横向导航常用无序列表(ul、li)进行布局

  5、竖向导航常用菜单列表(dl、dt、dd)

  6、用语义的方式来安排标签,建议在<div>内包含<h1>或<p>标签来布局(尽量把div作为布局父元素来使用)

posted @ 2018-04-16 12:55  Autumn_n  阅读(222)  评论(0编辑  收藏  举报
TOP