码迷,mamicode.com
首页 > Web开发 > 详细

前端学习之HTML5

时间:2018-10-08 21:33:22      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:单元素   刷新   响应   ted   lin   方法   page   border   title   

一、文本与段落标记

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本与段落标记</title>
</head>
<body>
<h1>欢迎来到HTML5</h1><br>
<hr width="500px" size="10px" color="red" aline="center">
<b>欢迎来到HTML5</b><br>
<i>欢迎来到HTML5</i><br>
<strong>欢迎来到HTML5</strong><br>
<font size="5" color="#ff00ff" face="黑体">欢迎来到HTML5</font><br>
<p align="center">欢迎来到HTML5</p>
</body>
</html>

技术分享图片

二、列表标签

1、有序列表

<ol type="序号类型>
    <li>...</li>
    <li>...</li>
</ol>

其中,属性type指定列表项前的项目编号的样式,其取值:1编号为阿拉伯数字(默认值);a小写英文字母;A大写英文字母;i小写罗马数字;I大写罗马数字

2、无序列表

<ul type="类型样式>
    <li>...</li>
    <li>...</li>
</ul>

其中type指定列表项前的项目符号样式,其取值为disc:实小原点;circle:空心圆点;square:实心方块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<ol type="i">
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
</ol>
<hr width="100%" size="10px" color="red">
<ul type="circle">
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
</ul>
</body>
</html>

技术分享图片

三、超链接标签

超链接格式:

<a href="url">超链接名称或图片</a>

其中:属性href:指定链接的目标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<h4>超链接标签的使用</h4>
<a href="http://www.mount-tai.com.cn/nature.shtml">泰山风景介绍</a>
<hr width="100%" size="1" color="red">
<h4>图片超链接标记的使用</h4>
<a href="http://www.mount-tai.com.cn/nature.shtml">
    <img src="baiguan.JPG" width="80px" height="80px" alt="点击该图片">
</a>
</body>
</html>

技术分享图片

四、定时刷新与跳转

1、定时刷新

基本语法: <meta http-equiv="refresh" content="1" />
该语句表示,页面每隔一秒刷新一次,其中属性content的值代表间隔的时间。

2、定时跳转

基本语法: <meta http-equiv="refresh" content="3;http://www.sohu.com" > 
该语句表示,页面3秒后自动转到搜狐主页。 注意:上述标签一般放在head标签中。

五、表格

表格由行、列、单元格组成,一个表格是由<table>(表格)、<tr>、<td>(数据)或<th>(列名)标 记来定义的

基本语法:

<table>
    <caption>表格标题</caption>
    <tr><th>列名一</th><th>列名二</th>......</tr>
    <tr><td>数据一</td><td>数据二</td>......</tr>
    ......
</table>

 技术分享图片

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table width="500px" height="400px" border="1px red solid" align="center" cellpadding="2px" cellspacing="30px" bgcolor="#faebd7">
    <caption>这里是表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>学号</th>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>123</td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>123</td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>123</td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>123</td>
    </tr>
    <tr align="center">
        <td rowspan="2">1</td>
        <td>2</td>
    </tr>
    <tr align="center">
        <td>3</td>
    </tr>
    <tr align="center">
        <td colspan="2">张三</td>
    </tr>
</table>
</body>
</html>

技术分享图片

 

六、图片标签

<img src="url" height="" width ="" alt="图片显示错误">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<img src="baiguan.JPG" height="500" width="500" alt="图片显示错误">
</body>
</html>

 技术分享图片

七、表单标签

1、form标记及其属性 

表单是由文本框、密码框、多行文本框、单选、复选框、下拉菜单/列表、 按钮、文件域、隐藏域等各种表单元素及其标记组成的。

表单使用<form>和</form>来定义的,<form>标记有属性:name、method、action、target等属性。
<form name="表单名" method="提交方法" action="处理程序‘>
...
</form>

 

2、input标记及其属性

<input name="输入域名称" type="域类型" value="输入域的值"> 
<input>标记主要有六个属性: type,name,size,value,maxlength,check。
其中,name和type是必选的两个属性: name:属性的值是响应程序(由form标记中的action属性指定)中的变量名

type的九种类型如下:

技术分享图片

3、下拉列表框:<select>、<option>

<select name="" size="" multiple>
<option value="" selected>...</option>
<option value="">...</option> ...... </select>

4、多行文本框

<textarea name="" rows="" cols="" wrap="off|virtual|physical">
  初始值
</textarea>
其中:rows设置输入域的行数;cols设置输入域的列数;wrap设置是否自动 换行。

八、窗口分割与设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架集</title>
</head>
<body>
<iframe src="html6.html" width="600px" height="400px"></iframe>
<iframe src="Html7.html" width="600px" height="400px"></iframe>
</body>
</html>

技术分享图片

 

前端学习之HTML5

标签:单元素   刷新   响应   ted   lin   方法   page   border   title   

原文地址:https://www.cnblogs.com/wangbobobobo/p/9752492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!