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

一、主要内容

1、HTML  （20个标签）
2、CSS    （颜色和位置）
3、JS

二、HTML

head标签
1、doctype 对应关系
<!DOCTYPE html>
2、html 标签，标签内部可以写属性
  1. <html lang="en">
3、注释： <!--  注释的内容  -->
  1. <!-- 类似html这种格式，标签，叫做html标签 -->
例如：
写一个a标签，点击跳转到指定的URL
需要在body里面写：
  1. <body>
    <a href="http://www.cn.bing.com";>必应</a>
</body>
4、标签分类
head下面的东西
  • 自闭和标签：没有一个主动的结尾，例如：
  1. <meta charset="UTF-8">
其他都是主动闭合
  • 刷新
  1. <meta http-equiv="refresh" content="3" >
  • 多少s跳转到网站
  1. <meta http-equiv="refresh" content="3;Url=http://www.cn.bing.com" >
  • 关键字
  1. <meta name="keywords" content="星际2，测试"
  • 描述
  1. <meta name="description" content="汽车之家提供权威报价">
IE主动兼容高版本
  1. <meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8;">
搞个图标
  1. <link rel="shortcut icon" href="image/favicon.ico">
小结：
head标签中：
  • <meta> 编码，跳转，刷新，关键字，描述，IE兼容
  • title 标签：IE上显示名称，可以为任意自定义
  • link  搞图标
  • style
  • script
 
body标签
空格
  1. <a href="http://www.cn.bing.com">必&nbsp;应</a>
大于号和小于号
  1. <a href="http://www.cn.bing.com">必&gt;&lt;应</a>
p标签和br
  1. <p>段落段落段落段落段落<br />段落段落段落段落段落段落段落</p>
<p>段落</p>
<p>段落</p>
实现效果：
h加大加粗，块级标签，占用一整行
  1. <h1>发财</h1>
<h2>发财</h2>
<h6>发财</h6>
span标签，行内标签，只占自己
  1. <span>hello</span>
<span>hello</span>
<span>hello</span>
div 标签，白板，块级标签
  1. <div>1</div>
<div>2</div>
<div>3</div>
定位到右下角：
  1. <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
  1. <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"
 
提交到别人的服务端，直接跳转
  1. <form action="https://www.cn.bing.com" >
    <input type="text" name="query" />
    <input type="submit" value="搜索" />
 
</form>
 
选择性别然后提交到后台
  1. <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>
 
终极版本
  1. <!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>
效果图：
文本框
  1. <textarea name="meno" >sdfdd</textarea>
 
下拉框，默认是上海,selected=selected，下拉框有10个 size=10
  1. <select name="city" size="10">
    <option value="1">北京</option>
    <option value="2" selected="selected" >上海</option>
    <option value="3">仙桃</option>
</select>
 
下拉框多选 ：在select标签里加入multiple
  1. <select name="city" size="10" multiple="multiple">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">仙桃</option>
</select>
 
a 标签
跳转
  1. <a href="http://www.cn.bing.com" target="_blank">必应</a>
锚（小说的例子，就是点一个跳转到相应地方）
href=#某个ID" 标签的ID不允许重复
  1. <a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<div id="i1" style="height: 600px;">第一章内容</div>
<div id="i2" style="height: 600px;">第二章内容</div>
 
引入图片
  1. <a href="http://www.cn.bing.com">
   <img src="1.jp" title="大美女" style="height: 200px; 200px;" alt="美女">
</a>
 
列表
实现代码如下：
  1. <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>
 
表格
下面写到不是很规范
  1. <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>
实现效果如下：
点击查看详细可以跳转到我指定的页面，点击修改不跳转
 
这会生成就全了：
  1. <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>
效果如下：
 
合并单元格，横向和纵向合并
  1. <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>
 
点用户名出现光标编辑
显示如下：
代码如下：
  1. <body>
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user" />
</body>
 
实现下面边框功能
代码如下：
  1. <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属性
  1. <divstyle="height: 48px;">1</div>
效果如下：
这是一种方法，另外，我们我可以在head标签写style
ID选择器
例如：
  1. <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
           
            height:48px;
        }
    </style>
</head>
然后呢，引用直接写id=1即可
  1. <body>
    <div id="i1">1</div>
 
还有一种class选择器
  1. .c1{
   
    height: 10px;
}
引用
  1. <span class="c1">dfdf2</span>
 
找到所有的div然后给予上色
标签选择器
把所有div设置成此样式 
  1.     div{
           
            color: white;
        }
    </style>
</head>
<body>
    <div class="c1">1</div>
    <span class="c1">dfdf2</span>
    <div class="c1">3</div>
</body>
效果如下：
 
指定span标签下面的应用样式
层级选择器
  1. span div{
   
    color: white;
}
body里面写的：
  1. <span class="c1">dfdf2
    <div class="c2">sdafs</div>
</span>
效果就是只给span标签里面的div生效
 
还有就是在.c1 下面加div
  1. .c1 div{
    
    color: white;
}
效果跟上面是一样的
 
层级用空格关联，下面的组合用逗号来关联
 
  1. .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
 
属性选择器：
对选择到的标签再通过属性在进行一次筛选
  1. .c1[n="jixuege"]{100px;
   height:200px;}
   
   body里面的写法
<input class="c1" type="text" n="jixuege">
<input class="c1" type="password" >
实现效果：
 
上面就是一大堆的选择器，class选择是最多的。
 
优先级
  1. <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样式写到文件里
  1. <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样式，本质就是把文件拿到然后给你填过来
 
  1. .c1{
   
    color: white;
 
}
.c2{
    font-size: 58px;
    color: black;
}
 
边框
宽度，样式，颜色
border   solid  red
  1. <div style="border: 1px solid red;" >
        sdfsdf
</div>
 
高度和宽度的练习：
  1. <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 让标签浪起来，块级标签也可以堆叠
  1. <div style=" 20%;float: left;">1</div>
<div style=" 60%;">1</div>
实现效果：
但凡遇到左边一个右边一个，固定一个都要用到float
其实就是div嵌套div，然后里面来回float ，然后需要用<div style="clear: both;"></div>来压他们。
  1. <!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
  1. <div style="display: inline;">asd</div>
<span style="display: block;">asd</span>
 
行内标签：无法设置高度，宽度，
块级标签： 设置高度，宽度
  1. <span style="display: inline-block; height: 50px;">alex</span>
display：none 让块消失，用法，视频网站的开灯关灯
 
 
边距padding  margin(0,auto)
内边距padding和外边距margin
应用：
默认情况 html两边有边距，想去掉
<body style="margin: 0" >
 
 
 
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jixuege-1/p/6364121.html