发表更新笔记 / 前端11 分钟读完 (大约1601个字)

暑假充电之————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"属性时，该选项被默认选中
当在`

评论

关注我
×