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(文章底部)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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