一个初学者的辛酸路程-前端知识

时间：2017-02-04 11:12:27 阅读：223 评论：0 收藏：0 [点我收藏+]

一、主要内容

1、HTML （20个标签）

2、CSS （颜色和位置）

3、JS

二、HTML

head标签

1、doctype 对应关系

<!DOCTYPE html>

2、html 标签，标签内部可以写属性

<html lang="en">

3、注释：

例如：

写一个a标签，点击跳转到指定的URL

需要在body里面写：

<body>

<a href="http://www.cn.bing.com";>必应</a>

</body>

4、标签分类

head下面的东西

自闭和标签：没有一个主动的结尾，例如：

<meta charset="UTF-8">

其他都是主动闭合

刷新

<meta http-equiv="refresh" content="3" >

多少s跳转到网站

<meta http-equiv="refresh" content="3;Url=http://www.cn.bing.com" >

关键字

<meta name="keywords" content="星际2，测试">

描述

<meta name="description" content="汽车之家提供权威报价">

IE主动兼容高版本

<meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8;">

搞个图标

<link rel="shortcut icon" href="image/favicon.ico">

小结：

head标签中：

<meta> 编码，跳转，刷新，关键字，描述，IE兼容

title 标签：IE上显示名称，可以为任意自定义

link 搞图标

style

script

body标签

空格

<a href="http://www.cn.bing.com">必 应</a>

大于号和小于号

<a href="http://www.cn.bing.com">必><应</a>

p标签和br

<p>段落段落段落段落段落<br />段落段落段落段落段落段落段落</p>

<p>段落</p>

<p>段落</p>

实现效果：

h加大加粗，块级标签，占用一整行

<h1>发财</h1>

<h2>发财</h2>

<h6>发财</h6>

span标签，行内标签，只占自己

<span>hello</span>

<span>hello</span>

<span>hello</span>

div 标签，白板，块级标签

<div>1</div>

<div>2</div>

<div>3</div>

定位到右下角：

<div id="i1" style="position: fixed;bottom: 0;right: 0;">我要找它</div>

小结：

body标签中：

所有标签分为2类：块级标签（即使内容少也占一整行），行内标签（自己有多少占用多少）

块级标签：div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）

行内标签： span（白板）

标签之间可以嵌套

标签存在的意义，CSS操作，JS操作

chorme审查元素的使用

body内标签之input系列

登录页面

input 系列：

input type=‘text’ name属性 value=“test” 默认值

input type=‘password‘ name 属性 value=“1234” 默认值

input type=‘submit‘ value=“提交” 提交按钮，表单

input type=‘radio‘ 单选框 value,name 属性（name相同则互斥） checked=checked默认选中

input type=‘checkbox‘ 复选框 value，name属性（批量获取数据） checked=checked默认选中

input type=‘file‘ 依赖form表单的一个属性enctype="multipart/form-data"

input type=reset" 重置

<textarea>默认值放中间</textarea> - name 属性

select标签 name，内部option value ，提交到后台，size，multiple

img - src alt title

<form action="http://www.baidu.com">

<input type="text" name="user" />

<input type="password" name="pwd" />

<input type="button" value="登录1"/>

<input type="submit" value="登录2"/>

</form>

分析：

向后台发数据： form标签

发给谁： form标签内的action

按钮： input标签里的type="submit"

提交默认：默认是GET 或者在form标签写上method="GET"或method="POST"

提交到别人的服务端，直接跳转

<form action="https://www.cn.bing.com" >

<input type="text" name="query" />

<input type="submit" value="搜索" />

</form>

选择性别然后提交到后台

<form>

<div>

<p>请选择性别：</p>

男：<input type="radio" name="gender" value="1" />

女：<input type="radio" name="gender" value="2" />

中：<input type="radio" name="gender" value="3" />

<input type="submit" value="提交" />

</div>

</form>

终极版本

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<form enctype="multipart/form-data ">

<div>

<p>请选择性别：</p>

男：<input type="radio" name="gender" value="1" checked="checked" />

女：<input type="radio" name="gender" value="2" checked="checked" />

中：<input type="radio" name="gender" value="3" />

<p>爱好</p>

篮球：<input type="checkbox" name="favor" value="1" checked="checked" />

足球：<input type="checkbox" name="favor" value="2" />

台球：<input type="checkbox" name="favor" value="3" />

网球：<input type="checkbox" name="favor" value="4" />

<p>技能</p>

干活：<input type="checkbox" name="skill" value="1"/>

搞事情：<input type="checkbox" name="skill" value="2" />

<p>上传文件</p>

<input type="file" name="fname" />

<input type="reset" value="重置" />

</div>

<input type="submit" value="提交" />

</form>

</body>

</html>

效果图：

文本框

<textarea name="meno" >sdfdd</textarea>

下拉框，默认是上海,selected=selected，下拉框有10个 size=10

<select name="city" size="10">

<option value="1">北京</option>

<option value="2" selected="selected" >上海</option>

<option value="3">仙桃</option>

</select>

下拉框多选：在select标签里加入multiple

<select name="city" size="10" multiple="multiple">

<option value="1">北京</option>

<option value="2" selected="selected">上海</option>

<option value="3">仙桃</option>

</select>

a 标签

跳转

<a href="http://www.cn.bing.com" target="_blank">必应</a>

锚（小说的例子，就是点一个跳转到相应地方）

href=#某个ID" 标签的ID不允许重复

<a href="#i1">第一章</a>

<a href="#i2">第二章</a>

<div id="i1" style="height: 600px;">第一章内容</div>

<div id="i2" style="height: 600px;">第二章内容</div>

引入图片

<a href="http://www.cn.bing.com">

<img src="1.jp" title="大美女" style="height: 200px;width: 200px;" alt="美女">

</a>

列表

实现代码如下：

<ul>

<li>adf</li>

<li>adf</li>

<li>adf</li>

</ul>

<ol>

<li>df</li>

<li>df</li>

<li>df</li>

</ol>

<dl>

<dt>123</dt>

<dd>ttt</dd>

<dd>ttt</dd>

<dd>ttt</dd>

</dl>

表格

下面写到不是很规范

<table border="1">

<tr>

<td>主机名</td>

<td>端口</td>

<td>操作</td>

</tr>

<tr>

<td>1.1.1.1</td>

<td>80</td>

<td>

<a href="s2.html">查看详细</a>

<a href="#">修改</a>

</td>

</tr>

</table>

实现效果如下：

点击查看详细可以跳转到我指定的页面，点击修改不跳转

这会生成就全了：

<table border="1">

<thead>

<tr>

<th>表头1</th>

<th>表头2</th>

<th>表头3</th>

<th>表头4</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>3</td>

<td>3</td>

<td>3</td>

<td>3</td>

</tr>

</tbody>

</table>

效果如下：

合并单元格，横向和纵向合并

<tbody>

<tr>

<td rowspan="2">1</td>

<td colspan="2">2</td>

<td>4</td>

</tr>

<tr>

<td>3</td>

<td>3</td>

<td>3</td>

</tr>

</tbody>

点用户名出现光标编辑

显示如下：

代码如下：

<body>

<label for="username">用户名：</label>

<input id="username" type="text" name="user" />

</body>

实现下面边框功能

代码如下：

<fieldset>

<legend>登录</legend>

<label for="username" >用户名：</label>

<input id="username" type="text" name="user" />

<br/>

<label for="pwd" >密码</label>

<input id="pwd" type="password" name="pwd" />

</fieldset>

CSS

我们可以在标签上设置style属性

<divstyle="height: 48px;">1</div>

效果如下：

这是一种方法，另外，我们我可以在head标签写style

ID选择器

例如：

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#i1{

height:48px;

}

</style>

</head>

然后呢，引用直接写id=1即可

<body>

<div id="i1">1</div>

还有一种class选择器

.c1{

height: 10px;

}

引用

<span class="c1">dfdf2</span>

找到所有的div然后给予上色

标签选择器

把所有div设置成此样式

div{

color: white;

}

</style>

</head>

<body>

<div class="c1">1</div>

<span class="c1">dfdf2</span>

<div class="c1">3</div>

</body>

效果如下：

指定span标签下面的应用样式

层级选择器

span div{

color: white;

}

body里面写的：

<span class="c1">dfdf2

<div class="c2">sdafs</div>

</span>

效果就是只给span标签里面的div生效

还有就是在.c1 下面加div

.c1 div{

color: white;

}

效果跟上面是一样的

层级用空格关联，下面的组合用逗号来关联

.i1,.i2,.i3{

color: white;

}

下面的body

<div class="i1">1</div>

<div class="i2">21</div>

<div class="i3">13</div>

这个就是组合选择器，如果下面是id那么上面就应该是#i1，#i2，#i3

属性选择器：

对选择到的标签再通过属性在进行一次筛选

.c1[n="jixuege"]{width:100px;

height:200px;}

body里面的写法

<input class="c1" type="text" n="jixuege">

<input class="c1" type="password" >

实现效果：

上面就是一大堆的选择器，class选择是最多的。

优先级

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.c1{

color: white;

}

.c2{

/**/

/*color: white;*/

font-size: 58px;

color: black;

}

</style>

</head>

<body>

<div class="c1 c2" style="color: pink;" >fsdfsadf</div>

</body>

优先级顺序为：标签上的style优先，其他按照编写的顺序，越往下越优先，就近原则

把css样式写到文件里

<head>

<meta charset="UTF-8">

<title>Title</title>

<link rel="stylesheet" href="css/commons.css"

</head>

<body>

<div class="c1 c2" >fsdfsadf</div>

</body>

CSS样式，本质就是把文件拿到然后给你填过来

.c1{

color: white;

}

.c2{

font-size: 58px;

color: black;

}

边框

宽度，样式，颜色

border solid red

<div style="border: 1px solid red;" >

sdfsdf

</div>

高度和宽度的练习：

<div style="height: 48px;width: 80%; border: 1px solid red;" >

sdfsdf

</div>

效果

字体大小：font-size: 36px;

字体颜色： color

高度： height

宽度： width 像素和百分比都可以

水平方向居中：text-align: center;

文字放在中间：line-height: 48px; 水平和垂直都居中，要给height值相同

加粗：font-weight: bold;

重点来了，float，飘

需求：

把整个屏幕分成二块，如何实现？

float 让标签浪起来，块级标签也可以堆叠

<div style="width: 20%;float: left;">1</div>

<div style="width: 60%;">1</div>

实现效果：

但凡遇到左边一个右边一个，固定一个都要用到float

其实就是div嵌套div，然后里面来回float ，然后需要用<div style="clear: both;"></div>来压他们。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.pg-header{

height: 38px;

line-height:38px;

}

</style>

</head>

<body style="margin: 0;">

<div class="pg-header">

<div style="float: left;" >收藏本站</div>

<div style="float: right;" >

<a>登录</a>

<a>注册</a>

<a>我的订单</a>

<a>VIP会员俱乐部</a>

<a>客户服务</a>

<a>关注</a>

<a>手机版</a>

</div>

</div>

<div style="width: 300px;border: 1px solid red;">

<div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>

<div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>

<div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>

<div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>

<div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>

<div style="clear: both;"></div>

</div>

</body>

</html>

实现效果

块级转换为内联标签，通过display：inline 和block inline-block

<div style="display: inline;">asd</div>

<span style="display: block;">asd</span>

行内标签：无法设置高度，宽度，

块级标签：设置高度，宽度

<span style="display: inline-block; height: 50px;">alex</span>

display：none 让块消失，用法，视频网站的开灯关灯

边距padding margin(0,auto)

内边距padding和外边距margin

应用：

默认情况 html两边有边距，想去掉

一个初学者的辛酸路程-前端知识

原文：http://www.cnblogs.com/jixuege-1/p/6364121.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)