前端-----html（1）
基本结构
Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
<!DOCTYPE html>
bead标签
Meta
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1、页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
2、刷新和跳转
< meta http-equiv=“Refresh” Content=“30″> <!--30秒钟刷新一次页面--> < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> <!--5秒钟后跳转新网页-->
3、关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" > <!--给网址收录用的-->
4、描述
<meta name="description" content="这个是简介。" /> <!--这个是你网址的描述-->
5、X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
Title
网页头部信息
Link
css < link rel="stylesheet" type="text/css" href="css/common.css" > icon <link rel="shortcut icon" href="image/favicon.ico"> <!--定义标签页图标-->
Style
在页面中写样式
例如：
< style type="text/css" >
.bb{
background-color: red;
}
< /style>
Script
引进文件
< script type=”text/javascript” src=”http://www.googletagservices.com/tag/js/gpt.js”> </script >
写js代码
< script type=”text/javascript” > … </script >
常用标签
分为块级标签，行内标签：
块级标签，div（白板），H系列（加大加粗），p标签（段落与段落之间有间距）
行内标签，span（白板）
标签之间可以嵌套
标签存在的意思，css操作，js操作
各种符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
p 和 br
p表示段落，默认段落之间是有间隔的！
br 是换行
H 标签
1-6标题从大到小排序
span标签
<span>asd</span>白板标签，方便css调用
div标签
<div>asd</div>白板标签，最常用
input标签
输入：
<form action="http://url">
<input type="text" name="user"> name属性
<input type="password" name="passwd"> name属性
<input type="button" value="提交1"> 按钮
<input type="submit" value="提交2"> 提交按钮，表单
</form>
以get方式提交数据，会把内容以拼接url的方式发送
post会把数据放在内容里传输过去，form标签默认以get方式发送数据
例子：
<!DOCTYPE html> <!--规范化 对应关系-->
<html lang="en"> <!-- html标签，只能有一个-->
<head> <!-- head标签，只能有一个-->
<meta charset="UTF-8"> <!--指定字符集-->
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title> <!--标签名-->
</head>
<body>
<form action="https://www.sogou.com/web" method="get">
<input type="text" name="query">
<input type="submit" value="提交">
</form>
</body>
</html>
点击提交按钮会自动跳转
选择：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form>
<div>
<p>请输入性别：</p> <!--单选框测试-->
男：<input type="radio" name="gender" value="men"/> <!--name值设置为一样，可以限制为只能选择一个-->
女：<input type="radio" name="gender" value="women"/>
<p>爱好：</p> <!--多选框测试-->
足球：<input type="checkbox" name="favor" value="football"/> <!--复选框用同一个name方便后台接收-->
篮球：<input type="checkbox" name="favor" value="basketball" checked="checked"/> <!--checked可用于默认被选中-->
网球：<input type="checkbox" name="favor" value="volleyball"/>
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
上传文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form enctype="multipart/form-data"> <!--文件上传依赖的属性-->
<div>
<p>上传文件：</p> <!--上传文件测试-->
<input type="file" name="fname">
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
重置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form enctype="multipart/form-data"> <!--文件上传依赖的属性-->
<div>
<p>上传文件：</p> <!--上传文件测试-->
<input type="file" name="fname">
</div>
<input type="submit" value="提交" />
<input type="reset" value="重置" /> 重置所有填进去的表单内容
</form>
</body>
</html>
textarea标签
<textarea>默认值</textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form>
<textarea name="memo">默认值</textarea>
<br>
<input type="submit" value="提交" />
</form>
</body>
</html>
下来框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form>
<div>
<p>选择家乡：</p>
<select name="city" size="4" multiple="multiple"> <!--size默认为1,multiple为支持多选，默认不支持-->
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
<option value="chongqing" selected="selected">重庆</option> <!--默认选择-->
</select>
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
a标签
1、target属性，_black表示在新的页面打开
<a href="http://www.baidu.com.cn" target="_blank">百度 </a>
2、锚，标签的id不允许重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1" style="height:600px">第一章的内容</div>
<div id="i2" style="height:600px">第二章的内容</div>
<div id="i3" style="height:600px">第三章的内容</div>
</body>
</html>
img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="2.JPG" title="图片" style="height: 200px;width: 200px;" alt="图片无法加载会显示这个">
</a>
</body>
</html>
#图片用a标签包起来，可以实现点击图片跳转网址
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<ul>
<li>sdfs</li>
<li>sdfs</li>
</ul>
<ol>
<li>werwer</li>
<li>werwer</li>
</ol>
</body>
</html>
表格
第一种实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<table border="1">
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
<td>第一行，第三列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
<td>第二行，第三列</td>
</tr>
</table>
</body>
</html>
第二种实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead> <!--表头的定义-->
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody> <!--定义表的body-->
<tr>
<td rowspan="2">1</td> <!--占用两个单元格，效果为行合并单元格-->
<td>1</td>
<td colspan="2">1</td> <!--占用两个单元格，效果为列合并单元格-->
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
fieldset标签和label标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<fieldset>
<legend>登陆</legend>
<label for="1">用户名：</label> <!--for跟id搭配实现点击用户名也能自动切换到输入框-->
<input id="1" type="text" name="user">
<br />
<label for="2">密码：</label> <!--for跟id搭配实现点击用户名也能自动切换到输入框-->
<input id="2" type="text" name="password">
</fieldset>
</body>
</html>
实现效果如下：
版权声明：本文为jinyuanliu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。