前端--html基础
一、Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1、页面编码
<meta charset="UTF-8"> #指定编码类型为UTF-8
2、刷新和跳转
<meta http-equiv="refresh" content="5"> #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页
3、关键字
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。
<meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
4、描述
例如cnblog里的就是一个描述：
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
5、X-UA-Compatible
X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
6、title
网页头部信息，如下图所示：
7、Link
网页头部的图标
<link rel="shortcut icon" href="favicon.ico">
效果图如下：
导入CSS类似python中导入模块类似
<link rel="stylesheet" href="css/css_model.css">
8、Style
1、在当前文件中写Css样式
2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用
< style type="text/css" >
.bb{
background-color: red;
}
< /style>
9、Script
1、在当前文件中写JS
2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
引进文件 < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script > 写js代码 < script type="text/javascript" > ... </script >
二、body
1.标签一般分为两种：块级标签 和 行内标签
标签一般分为两种：块级标签 和 行内标签
a、span、select 等 为块级标签
div、h1、p 等 为行内标签
<div style="">12</div>
<span style="" data-mce-style="color: #0000ff;">>12</span>
<a > #如果打印输出尖括号用这种方式
显示效果
2.常用标签
1）p表示段落，默认段落之间是有间隔的
br 是换行
<p>dfasdfasfda<br/>sfasfasfadfdas</p>
显示效果
2）a标签-
<a href="http://www.autohome.com.cn"> 跳转1</a> <a href="http://www.autohome.com.cn" TARGET="_blank">跳转2</a>
显示效果
3.页内标签 寻找页面 中id=i1的标签，将其显示页面顶部
<a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a>
id 没有一个标签的id属性值不允许重复，id属性可以不写
<div id="i1" style="height: 500px ";>第一章内容</div> <div id="i2" style="height: 500px ";>第二章内容</div> <div id="i3" style="height: 500px ";>第三章内容</div>
显示效果
4 标题
<h1>a</h1> <h2>a</h2> <h3>a</h3> <h4>a</h4> <h5>a</h5> <h6>a</h6> <h6 style="font-size:65px;">a</h6>
显示效果
5.表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <input type="text" /> </form> <form> <div style="border: 1px solid red;"> <p>用户名：<input type="text" /> </p> <p>密码：<input type="password" /> </p> <!--<p>邮箱：<input type="email" /> </p>--> <p>性别(单选框)： <br /> 男<input type="radio" name="ee" /> <br /> 女<input type="radio" name="ee"/> </p> <p>爱好（复选框）： <br /> 男1<input type="checkbox" /> <br /> 男2<input type="checkbox" /> <br /> 男3<input type="checkbox" /> <br /> 男4<input type="checkbox" /> <br /> 男5<input type="checkbox" /> </p> <p>城市： <select> <option>上海</option> <option>北京</option> <option>广州</option> </select> <select multiple size="10"> <option>上海</option> <option>北京</option> <option>广州</option> </select> <select> <optgroup label="AAA"> <option>上海</option> <option>北京</option> </optgroup> <optgroup label="BBB"> <option>广州</option> </optgroup> </select> </p> <p>文件：<input type="file" /></p> <p>备注 ： <textarea></textarea> </p> <input type="submit" value="submit"/> <input type="button" value="button"/> <input type="reset" value="reset"/> </div> </form> </body> </html>
显示效果
6.表格 table
1）
<table border="1"> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> <th>第四列</th> </tr> </thead> <tbody> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> <td>第四列</td> </tr> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> <td>第四列</td> </tr> </tbody> </table>
显示效果
2）合并单元格
<table border="1"> <tr> <th colspan="3">标题一</th> <th>标题二</th> </tr> <tr> <td>内容一</td> <td>内容二</td> <td>内容三</td> <td>内容三</td> </tr> <tr> <td>内容一</td> <td rowspan="2">内容二</td> <td>内容三</td> <td>内容三</td> </tr> <tr> <td>内容一</td> <td>内容三</td> <td>内容三</td> </tr> <tr> <td>内容一</td> <td>内容二</td> <td>内容三</td> <td>内容三</td> </tr> </table>
显示效果
7.框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>老男孩车之家</h1> <iframe style="width: 100%;height: 2000px;" src="http://autohome.com.cn"></iframe> </body> </html>
显示效果
