html标签大纲

标准通用属性
id  class  style  title
注释(不能嵌套)
<!——         ——>

xhtml

属性值加双引号,单标记需要加斜杠,所有的标签必须是小写

h5

目标是使用更简洁的html代码

head里面可以出现的元素

1.title

2.css

3.javascript

4.meta

元数据标记(写在其中便于搜索引擎搜索)
name keywords content(别太多)
name description content
name auther content
http-equiv content-type
content="text/html;charset="UTF-8"(缩写为charset="UTF-8")(GB2312 简体中文,BIG5 又叫大五码,是繁体中文)
保存文件类型ANSI(对应GB2312),UTF-8对还应UTF-8。
UTF-8是多语言的包括简体中文,繁体中文和一些特殊字符,国际上一般使用utf-8,因为GB2312必须要装简体中文语言包,utf-8不需要                          http-equiv= refresh content =3          每3秒刷新一次                                          http-equiv= refresh content =3 ;url=http://www.sohu.com每三秒刷新一次,并进行页面的跳转

搜索引擎优化(绝大多数限制关键字数目,定义的多,会把所有的关键字都忽略掉)
1能提供大量有效信息的网站
2代码结构优化,一目了然

body里面的元素(body属性:bgcolor,text文字颜色,background背景图)

文本

<br/>(break的缩写,强制换行)

<nobr></nobr>不换行,会出现滚动条,里面如果有<br/>仍然会换行

<h1>——<h6>独占一行,是块标签
<p></p>独占一行,是块标签              属性:align   title
<hr/>块标签                                                   width:有两种表达方式,像素,或者百分比(浏览器窗口的百分比)                     size:                   align:                  color:
<div></div>块元素

<span></span>

这四种xhtml不推荐,表示样式,但在项目中使用很多

<i></i>斜体

<b></b>加强

<u></u>

<s></s>

所以xhtml中推荐strong加强  em斜体,这两种描述的是语义

<sub></sub>下标

<sup></sup>上标

转义字符

&trade;商标

图片发自简书App



图像  img

属性:

1src  

2width

3height(图片的宽高比例不对,图片会失真,只定义一个,可以等比例缩放)

像素值     百分比(可以实现自适应的大小)

4alt  

5title如果没有定义alt,只定义了title,则title也有alt的功能

图像格式(jpeg,gif,png)

链接  a

属性

1href(网址,图片,mp3,压缩包会下载,mailto:邮箱(把目标指向电子邮箱地址))

2target

_self

_blank新窗口

3name

table  (属性:border单元格宽  width  height cellspacing  cellpadding (如果tr的height小于这个值的2倍,则它会撑大单元格) align   bgcolor  background(默认情况下背景图会自动平铺重复)bordercolor)

根据内容分配表格大小

内嵌元素   tr   align   height   valign

               td  align height    valign   colspan rowspan

td其他的同table的属性    

thead   tbody    tfoot

分组后thead和tfoot会变小,rowspan不可以跨组

tr里面只可以嵌套td或者th

td里面才可以嵌套其他内容,包括嵌套的table

caption表格标题:table的子元素,不管放在哪里只能位于table的上面


列表  

ol

属性 type 取值I    i    A  a

        start

ul

属性type  取值disc(默认)   square  circle

嵌套列表

定义列表dl   dt   dd

表单(name,method(浏览器默认提交方式get(1不安全2地址栏容纳字符数有限制)post(将表单里所有信息打个包,将包发送出去)action(服务器端用来处理表单的文件路径)enctype(表单里数据的编码方式))

)

1实现数据交互的可见界面元素

2提交后的表单处理

form相当于table只定义form什么都没有

input   type取值  text   password   submit,reset,button,image(图片按钮,相当于提交按钮)(按钮型(只有value属性))

(还有一种按钮<button>不需要定义type和value)

文本框通用属性:name(按钮没有,其他的类型有才可以提交)  value(submit的按钮上的字)  maxlength  size

radio:name要相同,才表示为同一组,必须要指定name,value是其对应的选项值,checked如果两个都有默认为后一个

checkbox:同radio,checked可以有多个

select 属性name   size(行数)   multiple(菜单可多选,单行下拉框不能添加)                                option 传递的值可以是option的属性value的值,也可以是option中的字   selected菜单默认选择

textarea  双标记,双标记之间的内容是默认值        cols 字符 rows 行数  

label可以用id使汉字和表单元素绑定   用for属性来绑定

hidden隐藏域,没有必要看到,但提交的时候必须用到的,比如京东订单号

file

fieldset

legend

小元素

iframe浮动框架

src   frameborder  name(超链接打开方式)scrolling(yes或者no),width,height

加在一对iframe之间的字是替代文字,有的浏览器不支持框架的时候显示


mark高亮

meter度量

属性:min max value title (可以显示)
之间的文字不可以显示没有任何用

摘要与细节

details
summary
可以展开的

time(用的比较少)

属性datetime 固定格式2011-7-11T3:55

小知识

语义化(正确的标签做正确的事情)

作用:

1搜索引擎排名靠前

2屏幕阅读器,方便读取,喜欢结构清晰的代码。
web站点的路径不要包含特殊字符,中文和空格,可以包括_和-
url     绝对路径   :   协议名,主机名,目录结构,文件名                                    相对路径          
cc抄送   mcc密送  
一屏内容   在不脱动滚动条的情况下的第一屏内容,一个网页不建议超过7屏
图片发自简书App

可以使用空白占用符可以让页面屏多一些

id命名:不能是中文,不能是纯数字,不能以数字开头
语义化                                                     结构标记:(因为兼容性问题,大型网站用的少)      缺乏标准,需要标准的完善 header(一个网页里可以有多header,频率高)                                           nav(一般只做主导行,频率不高)           section(可以有多个,一般用来做主体内容)                                             article(用的比较少,定义独立于文档的其他部分的内容)                     aside(侧边栏,独立于主体内容)           footer(文章底部)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,705评论 1 92
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,327评论 0 17
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,505评论 18 399
  • 花开花落,几度春秋。 从天真到成熟,多少离愁。 从梦开始到结束 许多人越走越远 我们也越走越迷茫 多少事情都不曾看...
    刘琪仙掉渣了阅读 197评论 0 1
  • 表单:数据的提交 ---------action:数据提交地址,默认是当前页面 -------method:数据提...
    fa54021d36e2阅读 91评论 0 0