前端内容整合

前端内容整合

• 前端知识之HTML

• 前端知识之CSS

• 前端知识之JavaScript

• 前端知识之BOM与DOM

• 前端知识之JQuery

• 前端知识之Bootstrap框架

HTML

1.web服务本质
    浏览器发请求-->HTTP协议-->服务端接收请求-->服务端返回响应-->服务端把HTML文件内容发给浏览器-->浏览器渲染页面
2.HTML是什么
    超文本标记语言(Hypertext Markup Language,HTML)是一种用于创建网页的标记语言
3.body内常用标签
    # 基本标签（块级标签和内联标签）
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    <p>段落标签</p>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <!--换行-->
    <br>
    <!--水平线-->
    <hr>

• 特殊字符

内容	对应代码
空格
>	>
<	<
&	&
￥	¥
版权	©
注册	®

# img标签
    <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
# a标签（超链接标签）
    <a href="http://www.oldboyedu.com" target="_blank" >点我</a>
    href属性指定目标网页地址。该地址可以有几种类型：
    1.绝对URL-指向另一个站点（比如 href="http://www.jd.com）
    2.相对URL-指当前站点中确切的路径（href="index.htm"）
    3.锚URL-指向页面中的锚（href="#top"）
    target：
    1._blank表示在新标签页中打开目标网页
    2._self表示在当前标签页中打开目标网页

• 列表

1.无序列表
    <ul type="none">
        <li>第一项</li>
        <li>第二项</li>
    </ul>
type属性：
    disc（实心圆点，默认值）
    circle（空心圆圈）
    square（实心方块）
    none（无样式）
2.有序列表
    <ol type="1" start="2">
        <li>第一项</li>
        <li>第二项</li>
    </ol>
type属性：
    1 数字列表，默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马
3.标题列表
    <dl>
        <dt>标题1</dt>
        <dd>内容1</dd>
        <dt>标题2</dt>
        <dd>内容2</dd>
    </dl>

• table表格

<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>ldb</td>
        <td>运动</td>
    </tr>
    <tr>
        <td>2</td>
        <td>jack</td>
        <td>玩游戏</td>
    </tr>
    </tbody>
</table>
# 属性
    border: 表格边框.
    cellpadding: 内边距
    cellspacing: 外边距.
    width: 像素 百分比.（最好通过css来设置长宽）
    rowspan: 单元格竖跨多少行
    colspan: 单元格横跨多少列（即合并单元格）

• form表单

# 功能
    表单用于向服务器传输数据，从而实现用户与Web服务器的交互
    表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等
    表单还可以包含textarea、select、fieldset和label标签

• 表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定 action 属性中地址的目标（默认：_self）

• input

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

• input属性说明

<input type="text" name="111" value="222">
    name：表单提交时的“键”，注意和id的区别
    value：表单提交时对应项的值
        type="button", "reset", "submit"时，为按钮上显示的文本年内容
        type="text","password","hidden"时，为输入框的初始值
        type="checkbox", "radio", "file"，为输入相关联的值
    checked：radio和checkbox默认被选中的项
    readonly：text和password设置只读
    disabled：所有input均适用

• select标签（选择框）

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
# 属性说明
    multiple：布尔属性，设置后为多选，否则默认单选
    disabled：禁用
    selected：默认选中该项
    value：定义提交时的选项值

• label标签

定义：<label>标签为input元素定义标注（标记）
说明：
    1.label元素不会向用户呈现任何特殊效果
    2.<label>标签的for属性值应当与相关元素的id属性值相同
<form action="">
    <label for="username">用户名</label>
    <input type="text" id="username" name="username">
</form>

• textarea多行文本

<form action="">
    <textarea name="ldb" id="ldb" cols="30" rows="10">默认内容</textarea>
</form>
# 属性说明
    name：名称
    rows：行数
    cols：列数
    disabled：禁用

CSS

# CSS选择器
1.元素选择器
    p {color: red}
2.ID选择器
    #d1 {
        width: 100px;
        height: 80px;
        background-color: red;
    }
3.类选择器
    .c1 {
        width: 100px;
        height: 80px;
        background-color: red;
    }
    p.c1 {font-size: 48px}
4.通用选择器
    * {color:green}
5.组合选择器
    /*li内部的a标签设置字体颜色*/
    li a {color:green}
    /*选择所有父级是<div>元素的<p>元素*/
    div>p {font-family: "Arial Black"}
    /*选择所有紧接着<div>元素之后的<p>元素*/
    div+p {margin: 5px}
    /*div后面所有的兄弟p标签*/
    div~p {border:2px solid royalblue}
6.属性选择器
    /*用于选取带有指定属性的元素*/
    p[title] {color:red}
    /*用于选取带有指定属性和值的元素*/
    p[title="213"] {color:green}
7.分组
    /*div和p标签统一设置字体为红色*/
    div,p {color:red}
8.嵌套
    /*c1类部所有p标签设置字体颜色为红色*/
    .c1 p {color:red}
9.伪类选择器
    /*未访问的链接*/
    a:link {color:#FF0000}
    /*鼠标移动到链接上*/
    a:hover {color:#FF00FF}
    /*选定的链接*/
    a:active {color:#0000FF}
    /*已访问的链接*/
    a:visited {color:#00FF00}
    /*input输入框获取焦点时样式*/
    input:focus {
        outline: none;
        background-color: #eee;
    }
10.伪元素选择器
    /*给首字母设置特殊样式*/
    p:first-letter{
        font-size: 48px;
        color:red;
    }
    /*在每个<p>元素之前插入内容*/
    p:before{
        content:"*";
        color:red;
    }
    /*在每个<p>元素之后插入内容*/
    p:after{
        font-size: 48px;
        color:blue;
    }
# 文本颜色
    十六进制值 - 如: ＃FF0000
    一个RGB值 - 如: RGB(255,0,0)
    颜色的名称 - 如:  red
    rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间

• 文字属性

1.文字对齐
    text-align属性规定元素中的文本的水平对齐方式
    left    左边对齐 默认值
    right   右对齐
    center  居中对齐
    justify 两端对齐
2.文字装饰
    text-decoration属性用来给文字添加特殊效果
    none    默认。定义标准的文本。
    underline   定义文本下的一条线。
    overline    定义文本上的一条线。
    line-through    定义穿过文本下的一条线。
    inherit 继承父元素的text-decoration属性的值。
    # 常用的为去掉a标签默认的自划线
    a {text-decoration: none}
3.首行缩进
    将段落的第一行缩进32像素
    p {text-indent: 32px}
4.背景属性
    /*背景颜色*/
    background-color: red;
    /*背景图片*/
    background-image: url('1.jpg');
    /*
     背景重复
     repeat(默认):背景图片平铺排满整个网页
     repeat-x：背景图片只在水平方向上平铺
     repeat-y：背景图片只在垂直方向上平铺
     no-repeat：背景图片不平铺
    */
    background-repeat: no-repeat; 
    /*背景位置*/
    background-position: left top;
    /*background-position: 200px 200px;*/
    支持简写：
    background:#336699 url('1.png') no-repeat left top;

• CSS盒子模型

margin（外边距）
border（边框）
padding（内填充）
content（内容）
顺序：上右下左

• overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow 属性的值

• 定位（position）

static（静态定位，默认值）
relative（相对定位，不脱离文档流）
absolute（绝对定位，脱离文档流）
fixed（固定定位，脱离文档流）
# z-index（设置对象的层叠顺序，数值大的压盖住数值小的）
# opacity（用来定义透明效果，取值范围是0~1）、rgba(255,0,0,0.3)
# 伪元素清除浮动
    .clearfix:after {
        content:"";
        display: block;
        clear: both;
    }