HTML5技术

HTML的正确入门姿势——基本结构与基本标签 - Realsdg(2)

字号+ 作者:H5之家 来源:H5之家 2017-08-07 12:00 我要评论( )

a、href属性:超链接跳转的地址。可以是网页链接,也可以是本地html文件的相对路径。 b、target属性:超链接新页面打开的位置。 _self在当前页面打开(默认) _blank在新页面打开 c、title属性:鼠标指在超链接上显示

a、href属性:超链接跳转的地址。可以是网页链接,也可以是本地html文件的相对路径。
b、target属性:超链接新页面打开的位置。
  _self在当前页面打开(默认) _blank在新页面打开
c、title属性:鼠标指在超链接上显示的文字。

【功能性超链接】
a、给指定邮箱发送邮件。mailto://协议。写法:mailto://邮箱地址
   eg:<a href="mailto://983364230@qq.com">点击给帅哥发邮件!</a>
b、tencent:与指定QQ聊天。tencent://协议。写法:tencent://message/?uin=QQ号码
  eg:<a href="tencent://message/?uin=983364230">与帅哥聊天</a>
c、锚链接:点击超链接可以跳转到页面的指定位置(锚点)
  ①在页面的指定位置定义一个锚点:<a></a>
  ②将超链接的href属性,改为“#锚点名称”:<a href="#top">跳转顶部</a>
  ③跳转到其他页面锚点的方式:<a href="其他页面地址.html#锚点名称">跳转到其他页面指定位置</a>

这是一个超链接

5、字体大一号和小一号,已淘汰。修改字体统一使用css

小一号字体大一号字体

 

【其他行级标签,了解即可】
s标签:带删除线
u标签:带下划线
dfn标签:定义专业术语
abbr标签:专业术语缩写词
code:提示搜索引擎当前为一段计算机代码,但是不会保留代码格式,需要配合pre标签共同使用。pre包含code
var:声明变量
bdo:定义文本显示方向,有一个重要属性:dir, ltr从左往右 rtl从右往左
kbd:表示需要用户输入的文字
sub:下标
sup:上标
time:表示时间

u标签带下划线css实现下划线s标签带删除线css实现删除线 我们正在学习HTML5,简称为H5 jsLoader({ name : 'iplookup', url : 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js' }); x+y=1 我真帅 请输入“Esc”退出系统。 H2O X2 现在是16:10

 

 

【w3c倡导的web结构】
1、内容与表现分离。html与css分离
2、内容与行为分离。html与javascript分离
3、html代码,必须要实现语义化

【w3c的规范】
1、标签名和属性名必须小写
2、html标签必须关闭
3、属性值必须用引号括起来
4、标签必须正确嵌套
①嵌套的标签,不能发生交叉
②块级标签可以包裹行级,行级标签不能包裹块级;p标签不能包裹p标签等...

 

2.6 表格

表格table标签
表格中的一行,用tr表示;
一行中的每个单元格,用td表示;
首行的表头中每个单元格用th表示,th默认文字会加粗,居中。

【表格中的各种属性】
1、border:给表格的每个td和整个table加边框。如果border的值>1,则只有最外层边框加粗,td上的边框不变。

2、cellspacing:设置单元格与单元格之间的间距。
  cellspacing="0"可以设置边框之间的间距为0,但是相邻的边框不会合并,而是显示两条线的宽度。
[设置表格边框合并]
可以使用css设置:style="border-collapse: collapse;"
设置边框合并以后,cellspacing属性将会失效。

3、cellpadding:单元格内边距,单元格中文字与边框之间的距离。

4、width/height:表格的宽度 /高度

5、align:设置表格在浏览器中居左、居中、居右

6、Bgcolor:表格背景色
  bordercolor:表格的边框颜色
  background:表格背景图。背景色和背景图同时存在,背景图生效。

【表格的行列属性】
作用于tr或td上的属性

1、width/height:宽度/高度

2、bgcolor:背景色
当表格的属性与行列的属性发生冲突时,优先级采用“近者优先”的原则:table<tr<td

3、align:设置表格中的文字水平对齐方式(right、center、left)
Valign:设置表格中的文字垂直对齐方式(top、center、bottom)

【注意】当表格属性与行列属性相冲突时,以行列属性为准
                         (近者优先!!!)
table中的align控制表格在整个浏览器中的显示位置!
单元格中的align控制其中文字在单元格中的对齐方式!
表格的align属性并不影响单元格内文字的水平对齐方式!
tr的align属性可以控制一行中所有单元格的水平对齐方式!

【表格的跨行与跨列】
1、跨列:colspan="n" 如果某个单元格跨n列,择该单元格右侧n-1个td就不需要了。
2、跨行:rowspan="n" 如果某个单元格跨n行,择该单元格下方n-1个td就不需要了。

 

 

代码如下:

width; background1-11-22-22-32-43-23-33-4

【表格的结构化】
完整的表格结构,包括
caption:表格的标题,无论caption标签放在表格的第几行,表格标题永远在表格的正上方居中
thead:表格的表头部分。永远在表格最上部
tbody:表格的身体部分。永远在表格的thead之下,tfoot之上
tfoot:表格的尾部。永远在表格的最下部。

表格的直列化:
表格有几列,就可以在表格的最上方写几个<col />标签,每个<col />就对应着第几列,可以对<col />标签修改样式、
添加name等属性,表示这一列的所有td同步修改;
如果,需要对多列修改共同样式,可以使用<colgroup></colgroup>包裹多个<col />

 

代码如下:

表格的标题序号姓名性别1张三男2李四女3王二不明合计3

  2.7 表单

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • [技术] OIer的STL入门教程 - rvalue

    [技术] OIer的STL入门教程 - rvalue

    2017-08-06 09:01

  • vue-项目入门 - 艺术万岁

    vue-项目入门 - 艺术万岁

    2017-08-04 10:00

  • HTML5使用Canvas来绘制图形 - 小君君的博客

    HTML5使用Canvas来绘制图形 - 小君君的博客

    2017-08-02 12:00

  • PHP 调用 Go 服务的正确方式 - Unix Domain Sockets - 枕边书

    PHP 调用 Go 服务的正确方式 - Unix Domain Sockets - 枕边书

    2017-08-01 12:00

网友点评
b