html5学习笔记(1)

于 2015-12-03 18:34:28 发布
阅读量470 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/thystar/article/details/50164641
版权

之前这部分写在51cto上面（1-7），为了保证完整，转过来. 直接粘贴的，格式有点问题，可以在：

http://4440271.blog.51cto.com/4430271/1664146  查看

HTML5

  • 用于绘画的canvas标签

  • 用于媒介回放的video和audio元素

  • 新的特殊元素：article，footer， header， nav, section

  • 新的表单控件：calender，date， time，Email，url， search

  • 浏览器支持，IE9以后

  • 本地离线存储的更好的支持


开发环境：http://www.jetbrains.com/idea/


基础知识：

    

<!DOCTYPE html>

html5声明，代表当前是html5的版本


基础标签：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
< html >
< head  lang = "en" >  <!--文字的显示形式，zh表示中文-->
     < meta  charset = "UTF-8" >  <!--编码格式-->
     < title >html5</ title > <!--标题-->
</ head >
< body > <!--页面内容-->
     Thystar
     < h1 >Thystar</ h1 > <!--h1...h6表示字体大小-->
     < h3 >Thystar</ h3 >
     < h6 >Thystar</ h6 >
     <!--段落标签，定义一段文字-->
     < p >hello thystar</ p >
     <!--链接标签-->
     < a  href = "http://www.baidu.com" >baidu</ a >
     <!--图像标签-->
     < img  src = "img/qi.png" >
     <!--空标签-->
     html< br />
</ body >
</ html >

html5元素，属性及格式化


html元素：从开始标签到结束标签的所有代码

1
2
3
< p >hello thystar</ p >
<!--空标签-->
html< br />

html的代码是可以嵌套的：

1
< p >hello thystar< a  href = "http://www.baidu.com" >baidu</ a ></ p >


html属性

  • 标签可以拥有属性为元素提供更多的信息

  • 属性以键值对的形式出现：href="http://www.baidu.com"

  • 常用的属性标签

    • <h1>:align对齐方式

    • <body>:bgcolor背景颜色

    • <a>:target规定在何处打开连接

  • 通用属性：

    • class：规定元素的类名

    • id：规定元素的唯一ID

    • style：规定元素的样式

    • title：规定元素的额外信息

1
2
3
4
5
< body  bgcolor = "#ffebcd" > <!--页面内容-->
     < a  href = "hrefht.html"  target = "_blank" >open</ a >
     < h1  align = "center" >Thystar</ h1 > <!--h1...h6表示字体大小-->
     < h2  id = "h2ID" >thystar</ h2 >
</ body >


html格式化：

标签描述
<b>定义粗体字。
<big>定义大号字
<em>着重文字
<i>斜体字
<small>小号字

具体参考：http://www.w3school.com.cn/tags/index.asp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< body  bgcolor = "#ffebcd" > <!--页面内容-->
     welcome jike
     < b >welcome jike</ b >
     < br />
     < big >welcome jike</ big >
     < br />
     < em >welcome jike</ em >
     < br />
     < i >welcome jike</ i >
     < br />
     < small >welcome jike</ small >
     < br />
     < strong >welcome jike</ strong >
     < br />
     welcome< sub >welcome jike</ sub >
     < br />
     welcome< sup >welcome jike</ sup >
     < br />
     < ins >welcome jike</ ins >
     < br />
     < del >welcome jike</ del >
</ body >


html5的样式：

1.标签：

  • <style>:样式定义

  • <link>: 资源引用

2.属性：

  • rel="stylesheet":外部样式表

  • type="text/css":引入文档的类型

  • margin-left：边距


样式的插入方法：

  • 外部样式表：

    • <link rel="stylesheet" type="text/css" href="mystyle.css">

  • 内部样式表：

    • <style type="text/css">body{background-color:red}p{margin-left:20px}</style>

  • 内联样式表：

    • <p style="color:red">


对于外部样式表：定义css文件mystyle.css

1
2
3
h1{
     color : chartreuse;
}

在.html文件中引入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html >
< head  lang = "en" >  <!--文字的显示形式，zh表示中文-->
     < meta  charset = "UTF-8" >  <!--编码格式-->
     < title >html5</ title > <!--标题-->
     < link  rel = "stylesheet"  type = "text/css"  href = "mystyle.css" > <!--外部样式表-->
     < style  type = "text/css" > <!--内部样式表-->
         p{
             color: blueviolet;
         }
     </ style >
</ head >
< body  bgcolor = "#ffebcd" > <!--页面内容-->
     < h1 >weclome jike</ h1 >
     < p >weclome to jike</ p >
     < a  style = "color: darkgreen" >click</ a > <!--内联样式表-->
</ body >
</ html >


html链接：

1.链接数据：

  • 文本链接

  • 图片链接

2.属性：

  • href属性：指向另一个文档的链接

  • name属性：创建文档内的链接

3.img属性：

  • alt:替换文本属性

  • width：宽

  • height：高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< body >
     < a  href = "http://www.baidu.com" >click</ a >
     < a  href = "http://www.baidu.com" >
         < img  src = "img/qi.png"  width = "100px"  height = "100px"  alt = "logo" >
     </ a >
     < br />
     < a  name = "tips" >hello</ a >
     < br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />
     < br />< br />< br />< br />< br />< br />< br />< br />
     < br />< br />< br />< br />< br />< br />< br />< br />
     < br />< br />< br />< br />< br />< br />< br />< br />
     < br />< br />< br />< br />< br />< br />< br />< br />
     < a  href = "#tips" >跳转到hello</ a >
</ body >


html表格：

http://www.w3school.com.cn/tags/html_ref_byfunc.asp

wKioL1WH4aGh-XbSAAFJGfxjt9k817.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
< body >
     < table  border = "1" >
         < caption >表格</ caption >
         < tr >
             < th >
                 单元
             </ th >
             < th >
                 单元
             </ th >
             < th >
                 单元
             </ th >
         </ tr >
         < tr >
             < td >单元格</ td >
             < td ></ td >
             < td >单元格</ td >
         </ tr >
         < tr >
             < td >
                 < ul >
                     < li >苹果</ li >
                     < li >苹果</ li >
                     < li >苹果</ li >
                 </ ul >
             </ td >
             < td >单元格</ td >
             < td >单元格</ td >
         </ tr >
     </ table >
     < table  border = "1"  cellpadding = "10"  cellspacing = "10"  background = "img/qi.png"  >
         < caption >表格</ caption >
         < tr >
             < th >
                 单元
             </ th >
             < th >
                 单元
             </ th >
             < th >
                 单元
             </ th >
         </ tr >
         < tr >
             < td >单元格</ td >
             < td ></ td >
             < td >单元格</ td >
         </ tr >
         < tr >
             < td >
                 < ul >
                     < li >苹果</ li >
                     < li >苹果</ li >
                     < li >苹果</ li >
                 </ ul >
             </ td >
             < td >单元格</ td >
             < td >单元格</ td >
         </ tr >
     </ table >
</ body >




极客学院：http://www.jikexueyuan.com/course/181.html


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值