飞龙前端殿堂0:html最常用的标签: 标签金字塔.txt

html最常用的标签: 标签金字塔

version:fl20160718gz

可以先记住这些单词,用笔在纸张上写写。

div h1 h2 h3 h4

ul li p dl dt dd

span,em,b,i,
a,img,audio,video

table,tr,th,td,

form,label,input,select,textarea,

然后找资料,查看每个标签干嘛用?
基础知识非常的重要,学任何知识,抓好基础,才能解决平时碰到的难题。
温故能知新。
www.w3school.com.cn

按标签的等级关系,标签金字塔,飞龙简述如下:

一、页面 大布局 用






body标签必带整站内唯一的ID号

h1 站名区,内一般带 logo 。 h1=head 1

站名

div 大布局 划区。div=division, 常用

暂时不用这些太新的标签:header footer article 。
坚决不用过时的标签。

二、中布局 用

div 横向分区

div 纵向分栏

二、常见模块 用

.mod 模块外衣
.mh 模块头
.cot 模块内衣
.itm 模块项

1、模块外衣 用

2、模块头 用
h2 正文模块头。h2=head 2, 常用

h3 普通模块头。h3=head 3, 常用

h4 模块项头,或者 子模块头。h4=head 4, 常用

3、模块内衣 用

A、列表模块内衣
ul 无序列表,内放 li标签 。 ul=unordered list, 常用

  • 列表项

B、段落模块内衣

段落内的文字

或者 div 内放多个 p,此时p是段落项。

段落项

段落项

正文模块内衣的写法

第一自然段

第一自然段

C、定义模块内衣

	dl 定义内衣 dl=definition list
	dt 定义标题 dt=definition title
	dd 定义描述 dd=definition description
	

或者 div 内放多个 dl,此时dl是定义项。

3、模块项 简单模块项的 class属性 可不要。

A、 li 列表模块项,简称列表项。li=list item  常用
  • B、 p 段落模块项,简称段落项。p=paragraph 常用

    C、 dt或dd 定义模块项,简称段落项。p=paragraph 常用

    三、微结构 用
    一般用做模块的内部9组件

    常用行内元素/内联标签:

    span 无默认样式,无语义,行内元素。常做属性套。span=span
    em 强调,常做属性键。em=emphasis
    b 粗体 常做按钮。 b=bold
    i 斜体 常做图标。 i=italic
    a 超链接,简称 链接, 又叫 锚。 a=anchor

    无语义标签 主要有2个:
    div为 网页数据 作 块级容器 ,而span作 行内容器 。

    不常用微标签:
    small 略小
    strong 加粗
    sup 上角标
    sub 下角标
    abbr 简写
    address 名片标签
    kbd 键盘输入的文本
    dfn 新概念导入定义
    del 删除
    ins 插入
    pre 代码预置

    不用u/font之类过时的标签

    四、呈现数据 用

    //链接 a[href] 链接
    
    锚文本
    
    //图像 img[src]
    
    
    //音频 audio[src]
    
    
    //视频 vedio[src]
    
    
    
    
    //表格数据:table tr th td, 表格 行(row)、 
    //字段头(thead) 、数据体(tbody)。
     
    //不要用table做 大布局 小布局 模块 微结构!
    

    五、提交数据 用

    form标签 一般不要带样式。
    label 标记 for id
    em.need 必选项强调
    不用button标签

    input[type="text"] 文本框 单行文本输入框
    input[type="password"] 密码输入框
    input[type="button"] input按钮,一般用label套住
    input[type="checkbox"] 复选
    input[type="radio"] 单选
    input[type="submit"] 表单提交,一般用label套住

    textarea 文本域 多行文本输入区域
    select 弹出式选择菜单
    表单小骨架:推荐采用 ul li来做。不再使用p标签。

    六、其它
    iframe 内联框架。不推荐。
    frameset frame 框架集。不推荐。

    飞龙提示:

    以上 最基本标签 是按 主要作用 划分,总共30个左右。

    每个标签都需要闭合,有2种闭合形式:包裹式闭合和自我闭合。

    1、包裹式闭合:
    比如 a标签:

    //开始: 
      
    //闭合:
    
    
    W3School
    

    a标签内部带各种“属性”,比如 href是链接指向; W3School叫“锚文本”

    链接标签 a 是网页最常见标签:

    //基本属性 href: 
    链文本
    //常见属性 title: 
    链文本
    //常见属性 target: 
    链文本
    

    2、自我闭合:
    比如 link img input br

     
     
     
    

    标签金字塔
    三大模块 9大组件
    css主次 关键css 辅助css
    css排序 28宿
    盒子左中右摆法

    start-fl20151029gz