前端知识介绍
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端知识介绍相关的知识，希望对你有一定的参考价值。
<!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>-->
<!-- 代表空格©代表版权符号<小于>大于-->
<!--Hello World!©<h1>-->
<!--</p>-->
<!--img标签显示图片
src属性控制路径,
width控制长度,
height控制高度
alt属性控制加载失败后的提示内容,
title属性控制光标悬浮状态下的显示内容
-->
<!--<img src="美女1.jpg"-->
<!--width="500px"-->
<!--height="700"-->
<!--alt="美女"-->
<!--title="美女"-->
<!-->-->
<!--<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>
以上是关于前端知识介绍的主要内容，如果未能解决你的问题，请参考以下文章