首页手记前端基础学习一

前端基础学习一

标签：

JavaScript

一、html学习

web通信的本质就是浏览器作为客户端发送请求，服务端通过socket对象接受请求并相应的过程

例子:

#!/usr/bin/python# --*-- coding:utf-8 --*--import socketdef main():    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)    sock.bind(('127.0.0.1', 8081))    sock.listen(5)    while True:        print("server is working...")        conn, addr = sock.accept()        request = conn.recv(1024)        conn.sendall(bytes("HTTP/1.1 200 OK\r\n\r\n<h1>Hello</h1>","utf-8"))        conn.close()if __name__ == '__main__':    main()

html是（Hypertext Markup Language，HTML）超文本标记语言，网页内容由标签构成.

标签语法:

<标签属性名="属性值" ...>内容<标签> #闭合标签

<标签属性名="属性值" .../> #自闭合标签

<!DOCTYPE html> 声明标签告诉浏览器文本遵循哪种规范html5,xhtml等

常用标签介绍:

<html>: 文档开始标签固定语法

<head>: 头部标签包含头部信息，内嵌<meta>,<title>,<link>常用标签

例子:

Title

meta属于自闭合标签，包含name, content, http-equiv属性

name属性值keywords表示搜索引擎能够按照content关键字搜到的内容，name和content成对出现

name属性值description表示搜索引擎搜到以后显示的描述信息

http-equiv相当于http的头信息，向浏览器传回一些有用信息，以便正确显示网页内容

http-equiv属性值Refresh，2秒后页面跳转到www.baidu.com

X-UA-Compatible跟兼容性有关

非<meta>标签:

<title>显示网页头信息

<link rel="icon" href="http://www.jd.com/favicon.ico">

显示title小图标

<link rel="stylesheet" href="css.css">加载css样式文件

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index.js"></script>加载js文件

<body>标签，内嵌自标签，分为块级标签和行内标签,判断是块级标签还是行级标签就看是否换行

<hn>标签，n表示1，2，3，4，5，6，表示从大到小的标题，属于块级标签

<p>标签, 段落标签,上下文之间有空白间隔，属于块级标签

<b>标签加粗文本，行内标签

<strong>同上

<em>文字变斜体

<sup>,<sub>上角标，下角标

<br>换行

<hr>水平线

特殊字符，查看html特殊字符编码

<div>标签块级标签，无实际意义，主要通过css为其布局

<span>标签行内标签，无实际意义，主要通过css为其赋予不同表现

图形标签

src属性表示图片路径，alt表示图片错误是显示的提示信息，title表示鼠标悬浮式显示的信息,width表示宽度，height表示高度

超链接

<a href="www.baidu.com" target="_blank">click</a>

href属性表示链接的地址, target在页面哪个位置打开新的链接地址

绝对url: www.baidu.com

相对url: index.html

锚: href="#id" 指向锚

<ul>:无序列表

<li>: 列表项

<ol>:有序列表

<dl>:自定义列表

<dt>:列表标题

<dd>:列表项

表格标签<table>

<tr>

</tr>

<tr>

</tr>

属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）
    
  
  
  表单标签<form>
  表单主要用于向服务器提交数据,程序接收数据做相应处理
  表单包含<input>标签
  例子:
<form action="" method="post">
    <p><label for="username">用户名: </label><input type="text" name="username" value="username" id="username"></p>
    <p><label for="password">密码: </label><input type="password" name="password" value="password" id="password"></p>
    <p><input type="radio" name="sex" value="0">男&nbsp&nbsp;<input type="radio" name="sex" value="1">女</p>
    <p><input type="checkbox" name="ball" value="0">篮球&nbsp;&nbsp;<input type="checkbox" name="ball" value="1">足球</p>
    <input type="file" name="file" value="file"><br>
    <input type="submit" name="submit" value="提交"><br>
    <input type="button" name="btn" value="btn"><br>
    <input type="reset" name="reset" value="重置">
</form>
  
  action: 提交给服务端的程序
  method: 提交方法
  <label for="id"> 点击用户名时，光标会自动移动到输入框
  type:输入框类型：
          text: 输入文本
          password: 输入密码
          radio: 单选按钮
          checkbox: 多选按钮
          file:上传文件
          submit: 提交按钮
          button: 提交事件，结合js绑定事件
          reset： 重置按钮
  name属性和value属性 成对出现，提交给服务端都是以字典的方式
  dict = {‘username’:'username', 'password': password, 'sex': '0', 'ball':['0','1']}
  
  <selected>标签选择下拉菜单
  <select name="sel" size="3" multiple="multiple">
    <option>河南</option>
    <option selected="selected">河北</option>
    <option>广东</option>
    <option>浙江</option>
</select>
size一次显示3个选项, multiple多选
selected默认选中

多行文本框
<form id="form1" name="form1" method="post" action="">
        <textarea cols=“宽度” rows=“高度” name=“名称”>
                   默认内容
        </textarea>
</form>


二、css
css规则由两部分构成, 选择器以及声明，语法格式:
select { 
property: value;
property: value;
...
}

css四种引入方式:
行内式: <p >hello yuan</p>

内嵌式：
<style>
    p{
        background-color: red;
    }
</style>

链接式: <link rel="stylesheet" href="css.css">

导入式: 
<style type="text/css">
      @import"mystyle.css";
</style>

选择器:
标签选择器: p {...}
id选择器：#username {...}
class选择器: .username {...}
通配选择器: * {...}

组合选择器:
E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔      :div,p { color:#f00; }

E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝

E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color:#f00; }
  
E + F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; } 

E ~ F   普通兄弟选择器（以破折号分隔）                 :.div1 ~ p{font-size: 30px; }

属性选择器：
E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }


E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }


E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }

E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}

E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}

E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}


属性

text-align 属性规定元素中的文本的水平对齐方式。
left      把文本排列到左边。默认值：由浏览器决定。
right    把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。

边距:
margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding:           用于控制内容与边框之间的距离；   
Border(边框):     围绕在内边距和内容外的边框。
Content(内容):   盒子的内容，显示文本和图像。

点击查看更多内容