飞龙前端殿堂0：html最常用的标签: 标签金字塔.txt
feilong.org 修订于2021-01-22 12:18:55 394 次浏览html最常用的标签: 标签金字塔
version:fl20160718gz
可以先记住这些单词，用笔在纸张上写写。
|
1 2 3 4 5 6 7 8 9 10 |
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
按标签的等级关系，标签金字塔，飞龙简述如下：
一、页面 大布局 用
|
1 2 3 4 5 |
<html></html> <head></head> <body id="jIndex"> </body> |
body标签必带整站内唯一的ID号
h1 站名区，内一般带 logo 。 h1=head 1
|
1 |
<h1><a class="logotop" href="index.html">站名</a></h1> |
div 大布局 划区。div=division， 常用
|
1 2 3 4 5 6 7 8 9 10 |
<div class="all"> <div class="head" role="页头"> <!-- head --></div> <div class="wrap" role="大包围"> <div class="main" role="主内容"><!-- main --></div> <div class="seco" role="侧边栏"><!-- seco --></div> <!-- wrap --></div> <div class="foot" role="页脚"> <!-- foot --></div> <!-- all --></div> |
暂时不用这些太新的标签：header footer article 。
坚决不用过时的标签。
二、中布局 用
div 横向分区
|
1 2 3 4 |
<div class="area1"> <!-- area1 --></div> <div class="area2"> <!-- area2 --></div> |
div 纵向分栏
|
1 2 3 4 5 6 7 8 |
<div class="area1"> <div class="cola"> <!-- cola --></div> <div class="colb"> <!-- colb --></div> <div class="colc"> <!-- colc --></div> <!-- area1 --></div |
二、常见模块 用
.mod 模块外衣
.mh 模块头
.cot 模块内衣
.itm 模块项
1、模块外衣 用
|
1 2 |
<div class="a0mod"> <!-- a0mod --></div> |
2、模块头 用
h2 正文模块头。h2=head 2， 常用
|
1 |
<h2 class="a0ph"></h2> |
h3 普通模块头。h3=head 3， 常用
|
1 |
<h3 class="a0mh"></h3> |
h4 模块项头，或者 子模块头。h4=head 4， 常用
|
1 |
<h4 class="a0nh"></h4> |
3、模块内衣 用
A、列表模块内衣
ul 无序列表,内放 li标签 。 ul=unordered list， 常用
|
1 2 3 |
<ul class="a0cot"> <li class="a0itm">列表项</li> </ul> |
B、段落模块内衣
|
1 2 3 4 5 6 7 8 |
<p class="a0cot"> 段落内的文字 <!-- a0cot --></p> 或者 div 内放多个 p，此时p是段落项。 <div class="a0cot"> <p class="a0itm">段落项</p> <p class="a0itm">段落项</p> <!-- a0cot --></div> |
正文模块内衣的写法
|
1 2 3 4 |
<div class="a0post"> <p>第一自然段</p> <p>第一自然段</p> <!-- a0post --></div> |
C、定义模块内衣
|
1 2 3 4 5 6 7 |
dl 定义内衣 dl=definition list dt 定义标题 dt=definition title dd 定义描述 dd=definition description <dl class="a0dl"> <dt class="a0dt"></dt> <dd class="a0dd"></dd> </dl> |
或者 div 内放多个 dl，此时dl是定义项。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="a0cot"> <dl class="a0dl"> <dt class="a0dt"></dt> <dd class="a0dd"></dd> </dl> <dl class="a0dl"> <dt class="a0dt"></dt> <dd class="a0dd"></dd> </dl> <!-- a0cot --></div> |
3、模块项 简单模块项的 class属性 可不要。
|
1 2 3 4 5 6 7 8 9 |
A、 li 列表模块项，简称列表项。li=list item 常用 <li class="a0itm"></li> B、 p 段落模块项，简称段落项。p=paragraph 常用 <p class="a0itm"></p> C、 dt或dd 定义模块项，简称段落项。p=paragraph 常用 <dl class="a0dl"> <dt class="a0dt"></dt> <dd class="a0dd"></dd> </dl> |
三、微结构 用
一般用做模块的内部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之类过时的标签
四、呈现数据 用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//链接 a[href] 链接 <a href="jblog.html">锚文本</a> //图像 img[src] <img src="pic/lipin.jpg" /> //音频 audio[src] <audio src="media/ee.mp3"></audio> //视频 vedio[src] <video src="media/feilong.mp4"></video> //表格数据：table tr th td， 表格 行(row)、 //字段头(thead) 、数据体(tbody)。 //不要用table做 大布局 小布局 模块 微结构！ <table> <tr><th></th></tr> <tr><td></td></tr> </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标签：
|
1 2 3 4 5 6 |
//开始： <a> //闭合： </a> <a href="http://www.w3school.com.cn">W3School</a> |
a标签内部带各种“属性”，比如 href是链接指向； W3School叫“锚文本”
链接标签 a 是网页最常见标签：
|
1 2 3 4 5 6 |
//基本属性 href： <a href="page.html">链文本</a> //常见属性 title： <a href="page.html" title="链接悬停提示">链文本</a> //常见属性 target： <a href="page.html" title="链接悬停提示" target="_blank" rel="noopener noreferrer">链文本</a> |
2、自我闭合：
比如 link img input br
|
1 2 3 4 |
<link href="skin/a_reset.css" rel="stylesheet" /> <img src="skin/a.jpg" /> <input type="text" name="n" value="v" /> <br /> |
标签金字塔
三大模块 9大组件
css主次 关键css 辅助css
css排序 28宿
盒子左中右摆法
start-fl20151029gz
更新网址：https://feilong.org/front-end-temple-tags-tower
最初发布：20170606 03:25:29 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： html css 教程