zoukankan html css js c++ java

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

一、主要内容

1、HTML （20个标签）

2、CSS （颜色和位置）

3、JS

二、HTML

head标签

1、doctype 对应关系

<!DOCTYPE html>

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

```
<html lang="en">
```

3、注释：

<!-- 类似html这种格式，标签，叫做html标签 -->

例如：

写一个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">必&nbsp;应</a>

大于号和小于号

<a href="http://www.cn.bing.com">必&gt;&lt;应</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; 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"]{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" style="color: pink;" >fsdfsadf</div>-->
    <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; 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=" 20%;float: left;">1</div>
<div style=" 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=" 300px;border: 1px solid red;">
          <div style=" 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
          <div style=" 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
          <div style=" 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
          <div style=" 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
          <div style=" 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两边有边距，想去掉

<body style="margin: 0" >

查看全文

相关阅读:
urlencode 和 rawurlencode 的区别
 magic_quotes_gpc
变量的值是多少
 git diff patch
drupal前端开发的第一点
 git drupal eclipse
spm总结
 features block
alu features menu
git reset 理解

原文地址：https://www.cnblogs.com/jixuege-1/p/6364121.html