html5学习笔记(2)

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

html5


列表：

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


wKiom1WH49zRYI-5AAFKRucI-sE867.jpg

列表：

  • 无序列表：

    • 使用标签<ul><li>

    • 属性：disc, circle, square

  • 有序列表：

    • 使用标签<ol><li>

    • 属性：A,a,I,i,start

  • 嵌套列表：

    • 使用标签：<ul>,<ol>,<li>

  • 自定义列表：

    • 使用标签：<dl>,<dt>,<dd>

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
< body >
     < ul  type = "circle" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ul >
     < ul  type = "square" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ul >
     < ol  type = "a" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ol  type = "A" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ol  type = "i" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ol  type = "I" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ol  start = "10" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ul  type = "square" >
         < li >fruit</ li >
             < ol >
                 < li >apple</ li >
                 < li >bnana</ li >
                 < li >orange</ li >
             </ ol >
         < li >vegetable</ li >
             < ol >
                 < li >potato</ li >
                 < li >tomato</ li >
                 < li >cabbage</ li >
             </ ol >
     </ ul >
     < dl >
         < dt >helloworld</ dt >
             < dd >print helloworld</ dd >
         < dt >helloworld</ dt >
             < dd >print helloworld</ dd >
     </ dl >
</ body >


html块

  1. html块元素

    1. 块元素在显示时，通常以新行开始

    2. <h1>,<p>.<ul>

  2. html内联元素：

    1. 内联元素通常不会以新行开始

    2. <b>,<a>,<img>

  3. html <div>元素：

    1. <div>元素也被称为块元素，其主要是组合html元素的容器

  4. html<span>元素：

    1. <span>元素是内联元素，可作为文本的容器

<div>和<span>通常一起使用


index.html:

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
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < link  rel = "stylesheet"  type = "text/css"  href = "divcss.css" >
     < style  type = "text/css" >
         span{
             color: crimson;
         }
     </ style >
     < title ></ title >
</ head >
< body >
     < p >hello world</ p >
     < h1 >hello world</ h1 >
     < br />
     < b >helloworld</ b >
     < a  href = "hrefht.html" >hrefht</ a >
     < br />
     < div  id = "divid" >
         < p >helloworld</ p >
         < a >click</ a >
     </ div >
     < div  id = "divspan" >
         < p >< span >hello world</ span >this is a text</ p >
     </ div >
</ body >
</ html >


divcss.css:

1
2
3
#divid p{
     color : chartreuse;
}

wKioL1WISMaiRHY5AABrROF4FYs078.jpg

html布局：

    

使用<div>布局   

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
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < style  type = "text/css" >
         body{
             margin: 0px;
         }
         div#container{
             width: 100%;
             height: 950px;
             color : gainsboro;
         }
         div#heading{
             width: 100%;
             height: 10%;
             background-color: cornflowerblue;
         }
         div#content_menu{
             width: 30%;
             height: 80%;
             background-color: gainsboro;
             float: left;
         }
         div#content_body{
             width: 70%;
             height: 80%;
             background-color: burlywood;
             float: right;
         }
         div#footing{
             width: 100%;
             height: 10%;
             background-color: black;
             clear: both;
         }
     </ style >
     < title ></ title >
</ head >
< body >
     < div  id = "container" >
         < div  id = "heading" >头部</ div >
         < div  id = "content_menu" >内容菜单</ div >
         < div  id = "content_body" >内容主体</ div >
         < div  id = "footing" >底部</ div >
     </ div >
</ body >
</ html >

    

使用<table>布局

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
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body  marginheight = "0px"  marginwidth = "0px" >
     < table  width = "100%"  height = "950px"  style = "background-color: aliceblue" >
         < tr >
             < td  colspan = "2"  width = "100%"  height = "10%"  style = "background-color: cornflowerblue" >头部</ td >
         </ tr >
         < tr >
             < td  width = "20%"  height = "80"  style = "background-color: darkgray" >
                 < ul >
                     < li >ios</ li >
                     < li >ios</ li >
                     < li >ios</ li >
                 </ ul >
             </ td >
             < td  width = "60%"  height = "80%"  style = "background-color: azure" >实体</ td >
             < td  width = "20%"  height = "80"  style = "background-color: darkgray" >左菜单</ td >
         </ tr >
         < tr >
             < td  colspan = "2"  width = "100%"  height = "10%"  style = "background-color: blue" >底部</ td >
         </ tr >
     </ table >
</ body >
</ html >



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

thystar
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值