html5学习笔记(1)

时间:2022-06-11 15:01:53

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

html5学习笔记(1)

<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