码迷,mamicode.com
首页 > 其他好文 > 详细

前端知识介绍

时间:2016-11-05 00:05:48      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:大致   eth   返回   css   targe   gre   pos   alt   ie7   

<!DOCTYPE html>
<html lang="en">
<head>
<!--meta是自闭合标签
属性:name="keywords" 描述网站的关键字
属性name="description" 网站内容的大致描述
属性http-equiv="Refresh" 刷新网站
-->
<!--<meta name="keywords",-->
<!--content="网站关键字">-->

<!--<meta name="description"-->
<!--content="网站描述">-->

<!--2秒钟后跳转到www.baidu.com,如果不添加网站则没2秒钟刷新一次网站-->
<!--<meta http-equiv="refresh"-->
<!--content="2;URL=https://www.baidu.com">-->

<!--<meta http-equiv="refresh"-->
<!--content="2">-->

<!--定义文档编码方式-->
<meta http-equiv="content-type" charset="UTF-8">
<!--IE浏览器专用定义兼容模式-->
<!--<meta http-equiv="X-UA-COMPATIBLE" CONTENT="IE-EmulateIE7">-->
<!--网站显示名称-->

<title>抽屉测试页面</title>

<!--网站图标icon设置-->
<link rel="icon" href="chouti.ico">

<!--css和js代码也放到head标签里面-->
<!--css代码第二种方式-->
<style>
/*div{*/
/*color: red;*/
/*background: green;*/
/*}*/
/*span{*/
/*color: green;*/
/*background: indianred;*/
/*}*/
#div1{
height: 500px;
background: orange;
}
#div2{
height: 600px;
background: orangered;
}
#div3{
height: 700px;
background: coral;
}
</style>
<script></script>

</head>
<body>
<!--h标签是块标签-->
<!--<h1>This is H1...</h1>-->
<!--<h2>This is H2...</h2>-->
<!--<h3>This is H3...</h3>-->
<!--<h4>This is H4...</h4>-->
<!--<h5>This is H5...</h5>-->
<!--<h6>This is H6...</h6>-->

<!--br标签是in-line标签-->
<!--将进酒·君不见<br><hr>-->
<!--君不见,黄河之水天上来,奔流到海不复回。<br><hr>-->
<!--君不见,高堂明镜悲白发,朝如青丝暮成雪。<br><hr>-->
<!--人生得意须尽欢,莫使金樽空对月。<br><hr>-->
<!--天生我材必有用,千金散尽还复来。<br><hr>-->

<!--div标签无任何text渲染,css代码第一种方式
div是块级标签,独占一行
-->
<!--<div style="color: red;">Hello div...!</div>-->
<!--Hello Before-->
<!--<div>Hello div1...</div><div>hello div2...</div>Hello After-->

<!--span标签与div标签一样,无任何text渲染,css代码第一种方式-->
<!--<span style="color: greenyellow;">Hello span!</span>
span标签是内联标签,
-->
<!--<span>Hello span!</span>-->

<!--所有的标签都可以划分到块级标签和内联标签两类里面-->

<!--p标签也是块级标签,换行和隔行的作用,其他与div类似-->
<!--<p>hello p1...</p> <p>hello p2...</p>-->
<!--<p>-->
<!--以下标签以后都用css替代-->
<!--<b>b标签给字体加粗</b>-->
<!--<em>em标签将字体变成斜体</em>-->
<!--<strike>strike给字体添加删除线</strike>-->
<!--<del>del标签与strike标签一样</del>-->
<!--s<sub>3</sub>-->
<!--s<sup>3</sup>-->
<!--&nbsp;代表空格&copy;代表版权符号&lt小于&gt大于-->
<!--Hello&nbsp;&nbsp;World!&copy;&lt;h1&gt;-->
<!--</p>-->

<!--img标签显示图片
src属性控制路径,
width控制长度,
height控制高度
alt属性控制加载失败后的提示内容,
title属性控制光标悬浮状态下的显示内容
-->
<!--<img src="美女1.jpg"-->
<!--width="500px"-->
<!--height="700"-->
<!--alt="美女"-->
<!--title="美女"-->
<!--&gt;-->

<!--<p></p>-->
<!--a标签提供的功能之一是:超链接,另一个重要的功能是锚
href属性控制超链接地址以及要定位的其他页面
target属性控制新窗口跳转
没有target属性则表示本地跳转
-->

<!--<a href="https://www.jd.com" target="_blank">-->
<!--<b>京东</b>-->
<!--</a>-->
<!--<a href="https://www.jd.com">-->
<!--<b>京东</b>-->
<!--</a>-->
<!--<div id="div_top">Top</div>-->
<!--<a href="#div1">第一章</a>-->
<!--<a href="#div2">第二章</a>-->
<!--<a href="#div3">第三章</a>-->

<!--<div id="div1">第一章</div><a href="#div_top">返回</a>-->
<!--<div id="div2">第二章</div><a href="#div_top">返回</a>-->
<!--<div id="div3">第三章</div><a href="#div_top">返回</a>-->

<!--ul:不排序标签,ul标签里面固定嵌套li标签-->
<!--<ul>-->
<!--<li>1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--</ul>-->

<!--ol: 排序标签,ol标签里面也固定嵌套li标签-->
<!--<ol>-->
<!--<li>1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--</ol>-->

<!--dl: 定义列表
dt: 标题
dd: 数据
-->
<!--<dl>-->
<!--<dt>第一章</dt>-->
<!--<dd>content</dd>-->
<!--<dt>第二章</dt>-->
<!--<dd>content</dd>-->
<!--</dl>-->

<!--form表单用户向服务器传送数据
method属性控制客户端向服务端提交数据的方式
get方式提交的键值对,放在地址栏url,提交的内容长度有限制,安全性相对较差
post方式提交的键值对,放在请求体里面,安全性相对较高,提交的内容长度理论上没有限制
这两种提交方式在服务器端都是字典的形式接收,一般form表单提交都是以post方式
action属性控制提交的目的地址
-->
<!--<form action="127.0.0.1:8080/index" method="get">-->
<!--input标签是自闭合标签
type属性控制输入的类型
name属性是提交给服务器的
-->
<!--<p>输入框名称:<input type="text"></p>-->
<!--<p>姓名:<input type="text" name="username"></p>-->
<!--<p>密码:<input type="password" name="password"></p>-->
<!--<p>爱好:篮球<input type="checkbox" name="hobby" value="1">-->
<!--足球<input type="checkbox" name="hobby" value="2"></p>-->
<!--<p>性别:男<input type="radio" name="gender">-->
<!--女<input type="radio" name="gender"></p>-->
<!--<p>所在城市:-->
<!--<select name="city" multiple="multiple" size="5">-->
<!--<optgroup label="北京">-->
<!--<option value="chaoyang">朝阳</option>-->
<!--<option value="chaoyang">海淀</option>-->
<!--<option value="chaoyang">东城</option>-->
<!--<option value="chaoyang">西城</option>-->
<!--</optgroup>-->
<!--<optgroup label="湖南">-->
<!--<option value="changsha">长沙</option>-->
<!--<option value="yueyang">岳阳</option>-->
<!--<option value="zhuzhou">株洲</option>-->
<!--<option value="xiangtan">湘潭</option>-->
<!--</optgroup>-->
<!--</select>-->
<!--</p>-->
<!--<p>自我简介:-->
<!--<textarea rows="10" cols="50">正文</textarea>-->
<!--<label for="qualifications">学历</label>-->
<!--<input id="qualifications" type="text">-->
<!--<label for="school">学校</label>-->
<!--<input id="school" type="text">-->
<!--</p>-->
<!--<p>证件:<input type="file"></p>-->
<!--<p>重置:<input type="reset" value="reset"></p>-->
<!--<p>提交:<input type="submit" value="press"></p>-->
<!--<p>提交:<input type="button" value="button由js中的事件触发"></p>-->
<!--</form>-->

</body>
</html>

前端知识介绍

标签:大致   eth   返回   css   targe   gre   pos   alt   ie7   

原文地址:http://www.cnblogs.com/libisheng-20160828/p/6031812.html

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