1.3.2.1语法
1 <>闭合:
与之对应,自闭合的,如2 标签可以带一个或多个属性
3 嵌套,闭合时应注意嵌套顺序,先闭合后闭合
4 注释注释内容用户不可见
书写规范
1 书写用小写
2 属性值用双引号
3 标签有嵌套应进行统一的缩进,代码清晰维护方便
常用属性
id只能出现一个
class可以多个出现
style
title额外信息
1.3.2.2章节标签
文档章节
- body
- header 章节或页面的头部
- nav 导航性质
- aside 和主要内容不相关的内容
- article 可嵌套,主要内容
- section 文档中的区域或一节,相邻相关
- footer 章节或页面的尾部
- hx
标题(h1-h6)
重要性的差别,重要性递减
1.3.2.3文本标签
文本
超链接
- 创建指向另一个文档的连接
科技
电影
财经
还有一种情况:target="inner"
默认情况下,在当前窗口打开
- 创建一个文档内部的锚点
下单支付
下单支付…
- 连接到email地址
联系我们
13612345678
联系我们(抄送)
邮箱地址可为多个
强调
-em,strong
strong是比em更强的强调,em是斜体,strong是粗体。
39元
市场价45元
行内容器
-span
不一样的样式,给标签一特定的样式
换行
-br
一行文字
我想另起一行
引用
-cite
-q
鲁迅在故乡中写道地上本没有路,走的人多了,便有了路
代码
-code
function say(){alert("hello world");}
格式化
-b 粗体
-i 斜体
HTML是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
其中标记为关键字加粗
该项目采用html,css等实现。
html css 标记为斜体
1.3.2.4组标签
分区
div
div本身无语意,用来分区。div为其他标签的容器
段落
p
p标签表段落
列表
ul ,ol,dl
分为三种,无序列表,有序列表,自定义列表。
- 无序列表
- 列表一
- 列表二
- 列表三
- 有序列表
- 排行一
- 排行二
- 排行三
有序列表可以实现a,b,c, 排序
表示从b开始。
- 自定义列表
- 作者
- Cbuck Musiano
- Bll Kennedy
- 出版年
- 2007-4
如问题回答列表,元素,书的信息。dt只能有一个,dd可以有多个。呈现如下:
作者
Cbuck Musiano
Bll Kennedy
出版年
2007-4
列表可以嵌套
其它标签
- pre
经过格式化的内容保存在pre标签下,可保存换行符和空格 - blockquote
表示大段的引用
1.3.2.5 资源标签
- img
- iframe
- object
- embed
- video
- audio
img
如音乐专辑封面
![封面](http://p4.music.126.afdf.jpg?parm=200y200)
src后为图片地址,若不能显示则为alt后的封面图片
iframe
嵌入页面,如网站广告
type属性中写插件的类型,上例为flash插件
插件的参数放在param参数中,地址可以放在move参数中,也可放在data属性中但ie8并不兼容data属性,如下
用embed嵌入,type属性写插件的类型,src属性写地址
video
视频
- 因为不同浏览器对视频的格式支持度不同所以需要准备多个视频格式
- 在source标签中在src属性下写上视频的地址,type写视频的类型,浏览器会选择他支持的视频类型进行播放
- 如果视频文件只有一个,可以把视频文件放在video标签的src属性下,因为video标签只有高版本的浏览器才支持,为了提高用户体验,可以在下面写上提示文字,这样不支持video标签的用户就会显示这里的文字
- 用controls属性可以控制播放器控制条的显示,poster属性视频的封面,track属性是视频的字幕。
- 如果需要视频一进来就是播放的需要加autoplay属性,需要循环播放需要加loop属性,如下:
audio
audio标签与video标签类似,这里不详细介绍
嵌入资源
图
-canvas
-svg
- canvas基于像素,他提供了一些绘制函数,通过脚本来绘制图形图像,对于性能比较高的场景复杂的,如实时数据的展示,游戏可以使用它
- sag是矢量的他提供了一系列图形,对于高保真的静态的图形图像可以使用它。
热点区域
-map
-area
![封面](http://p4.music.126.afdf.jpg?parm=200y200)
- 可以通过map的name属性和img的use map属性使得map和img相关联
- 里面的热点通过area这个标签实现,通过shape属性定义形状,通过coords定义关键的点位置,如上例为矩形,那么可定义左上角和右下角。
1.3.2.6表格标签
照片冲印价格详情
照片尺寸 富士 柯达
6寸 0.45 0.6
…
运费8元/单,满99元免运费
- 表格的标题放在caption标签下,表格的头部放在thaead标签下,表格的尾部放在tfoot标签下。
- 表格的每一行用tr标签表示,单元格有两种表示方式th和td,其中th为表头或者第一列的表示,td为普通单元格表示方法。
- 表格的列可以跨,用colspan,上例中“colspan=3“表示跨了3列
- 同样可以跨行,用rowspan表示
大体效果如下,作后一行合并单元格,不知用markdown怎么写?
相片尺寸
富士
柯达
6寸
0.45
0.6
全景六寸
0.45
0.6
7寸
0.89
1
8寸
1.69
2
10寸
3.89
5
运费8元/单,满99元免运费
1.3.2.7表单标签
表单
- action属性为表单的后台地址,需要把表单的数据提交到哪一个后台的接口就写道action里
- method属性为表单提交的方式,常用的为post方式
- 若表单的内容很多要对表单进行分区,常用的为fieldset标签,分区的标题用legend标签表示
- input标签有以下属性,name名称,值用value属性表示
- input标签有不同的类型,如文件上传type="file",尺寸选择多选框type="checkbox", 单选框type="radio",单行文本框type="text"
- 同一类型的多选框name值相同。
- 默认选中需要加checked属性,若如让用户操作需要用disable属性。如下所示
- 按钮也可用input标签表示,在type属性中提交用submit表示,重置用reset表示,如下
为了更好的语意化用button标签表示,如下
下拉选择框
- 下拉选框用标签表select标签表示,里面的每一项用option标签表示
- label标签表示了每一个select或input提示的信息,通过for属性与标签中的id属性对应,这两个值要一致,表示此label的内容表示了如下标签。
- 默认选择项为第一项,若要将其它项设为默认项需加selected属性,如上例中将“平邮”设为默认值。
- 可将下拉选项分组,用optgroup标签进行分组,将“快递”与“EMS”分到group1组里,如下所示
单行文本框
- 单行文本框可添加placeholder属性,为提示内容,在高级的浏览器中可有体现
- 若有默认值可写在value属性中
- 若文本框不能输入内容只是让用户观看,可添加readonly属性,之后用户不可修改
- 若想要变为隐藏的,可添加hidden属性,之后用户看不到内容,但数据也可传到后台
多行文本框
多行文本框用textarea标签表示
input type
-email
-url
-number
-tel
-search
-range
-color
-date picker
1.3.2.8语义化
什么是语义化?
在一个网页上,每个标签的用途,用正确的标签来表示正确的页面
图片用img标签,段落用p标签,节目列表用户列表用ul标签表示,歌曲列表用table标签表示,评论功能用form标签表示。
语义化的作用
- 有利于SEO(search engine optimization)
搜索引擎EO化,页面是给搜索引擎看的,搜索引擎可根据语义化的标签来去定标签的权重,这样页面和用户的关键字可以更加匹配。搜索引擎可以对语义化的标签给更高的权重,这样可以使页面更早的出现在用户的搜索结果中。
- 提高可访问性
页面可能是给盲人看的,他们通过屏幕阅读器来访问页面,屏幕阅读器对不同的标签可以发出不同的声音,使用更语义化的标签可以传达不同信息的重要性,使他们跟好的理解页面的内容。
- 提高代码的可读性
页面也是给开发人员看的,语义化可以提高代码可读性,更好的用于修改维护,提高多人的开发效率
页面头部代码
页面标题用h1标签来表示,导航用ul标签来表示,同样下面次要导航也用ul标签来表示,导航里的每一项因为使连接,所以用a标签来表示
歌单详情
![封面](http://p4.music.126.afdf.jpg?parm=200y200)
巴西
…
有待咖啡馆Vol.18
介绍:影片“Brazil”从小说《1984》当中获得灵感,使用…
图片用img标签表示,标题用h2标签表示,用户头像用img标签表示,灰色文字无具体语义灰色样式用span标签表示,播放次数的强调用em标签表示,下面的标题用h3标签表示,描述内容用p标签表示。
列表
他们也收藏了这个DJ节目
包含歌曲列表
6首歌
歌曲标题 时长 歌手 专辑
1
北京之雪
04:19
…
歌曲列表标题用h2标签表示,表格数据用table标签表示,表格的头部放在thead标签中,表格的主要能容放在tbody标签中,里面的每一行用tr标签表示
评论部分
-
菜单很适合睡觉的时候试试看哈很适合很适合睡觉的时候试试看哈
2012-05-29
…
标题用h2来表示,评论的功能用form标签表示,里面的评论框用textarea标签表示评论按钮用button标签表示,下面的评论列表用ul标签表示,里面的每一项用li标签表示,每一项里的图片用img标签表示,因为头像可以点击所以嵌在a标签里面,评论的内容用p标签表示,评论时间没有具体语义用span标签表示
页面尾部
标题用h3标签表示,描述文字用p标签表示相关文档连接用a标签表示,由于里面的内容并无语义,但有一个灰色的样式,所以用span标签表示
你可能感兴趣的:(1.3.2标签)
评论
共条评论