暑假充电之————HTML5 NO.2

##暑假充电之——HTML5学习笔记NO.2

###<ul><ol><li>标签

语法:

<ul><li>信息</li></ul>

此标签为无序标签,显示效果会在“信息”前面加一个小黑点 ·

<ol><li>信息</li></ol>

此标签为有序标签,显示效果为在每个信息点前面加数字编号(默认从1开始)

###<div>标签

语法:

<div id="板块名称">信息</div>

<div>标签相当于一个容器,用id属性为<div>提供唯一的名称

###<table>表格标签

创建表格有4个元素:table,tr(行),th(单元格),tb(表头)

语法:

<table>
    <table summary="XXX">
    <caption>表格标题</caption>
    <tr>
        <th>表格表头</th>(默认加粗居中)
    </tr>
    <tr>
        <td>表格单元格</td>
    </tr>
</table>

边框属性:在

中添加<table border="1">,会显示边框
###<a>链接标签

####链接
<a hrdf="目标网址">链接显示文字</a>
本语句会在当前浏览器窗口打开此链接

<a href="目标网站" target="_blank">链接显示文字</a>

本语句会在新的浏览器窗口打开此链接,但是此属性不符合w3c规范,在HTML5中被废除了

可以用图片作为链接,只需要将“链接显示文字”修改成图片的位置

例如:

<a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a>
####使用mailto在网页中链接Email地址

语法:

<a href="mailto:Email@email.com"?subject=test&body=test>链接文字</a>

mailto功能表
功能 关键字
邮箱地址 mailto
抄送地址 cc=
密件抄送地址 bcc=
多收件人
邮件主题 subject=
邮件内容 body=
PS:若mailto后面有多个参数,第一个参数必须以***“?”***开头,后面的每一个都由***“&”***分隔
####name属性(书签) name属性规定锚(anchor)的名称
`锚(显示在页面上的文本)`
先命名一个锚:`基本的注意事项 - 有用的提示`
再创建指向该锚的链接:`有用的提示`
例: 文本输入输出框

###<img>图片标签

语法:

<img src="图片地址" alt="下载失败时的替换文本" title="提示文本" width="" height="">

src:标识图像位置

alt:指定图像的描述性文本

title:提供在图像可见时对图像的描述(鼠标滑过时的显示文本)

width:宽

height:高



###<form>标签

在HTML5中可以使用id进行串联表单
比如:

<html>
<form id="ting"></form>
<input type="text" name="text" value ="" form="ting">
</html>

####使用表单标签,与用户交互

语法:

<form>

<input method="传送方式" action="服务器文件">

</form>

  • action:用户输入的数据被传输到的地方
  • method:数据传送的方式(get/post)
####文本输入输出框
语法:
`<form>`<br>
`<input type="text/password" name="名称" value="文本">`<br>
`</form>`
  • type: a.当type为text时,为文本输入框(明文)
    b.当type为password时,为密码输入框(星号点)
  • name:为文本框命名,方便后台程序ASP/PHP调用
  • value:为文本输入框设置默认值
####文本域
语法:
``
举例如下:
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>文本域</title>
    </head>
    <body>
        <form action="save.php" method="post" >
            <label>个人简介:</label>
            <textarea cols="20" rows="3">别试了,只是一个例子而已o(╯□╰)o没有后台的</textarea>
            <input type="submit" value="确定"  name="submit" />
            <input type="reset" value="重置"  name="reset" />
        </form> 
    </body>
</html>

效果如下:

文本域

####单选域,复选框
语法:
`文本`
type:  当type为radio时,控件为单选框;
          当type为checkbox时,控件为复选框。
value:提交数据到服务器的值(供后台程序PHP使用)
name:维空间命名,以备后台程序PHP,ASP使用
checked:当设置为checked="checked"时,被默认选中
PS:单选框的 **name** 值要一样
举例:
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>单选框、复选框</title>
    </head>
    <body>
        <form action="save.php" method="post" >
            <label>性别:</label>
            <label>男</label>
            <input type="radio" value="1"  name="sex" />
            <label>女</label>
            <input type="radio" value="2"  name="sex" />
        </form>
    </body>
</html>

效果如下:

单选框、复选框
####下拉列表
语法:
``
当加入selected="seleted"属性时,该选项被默认选中
当在`