html5学习笔记(1)

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的版本


基础标签:

<!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元素:从开始标签到结束标签的所有代码

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

html的代码是可以嵌套的:

<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:规定元素的额外信息

<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


<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

h1{
    color : chartreuse;
}

在.html文件中引入:

<!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:高

<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

<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


你可能感兴趣的:(html5)