首页 > 代码库 > 前端基础学习一
前端基础学习一
一、html学习
web通信的本质就是浏览器作为客户端发送请求，服务端通过socket对象接受请求并相应的过程
例子:
#!/usr/bin/python
# --*-- coding:utf-8 --*--
import socket
def 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>常用标签
<meta>: 提供有关页面的元信息，针对搜索引擎和更新频度的描述关键词，提供的信息是用户不可见的
例子:
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="http://www.mamicode.com/css.css"> 加载css样式文件
<script src="http://www.mamicode.com/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为其赋予不同表现
图形标签
<img src="" title="" width="" height>
src属性表示图片路径，alt表示图片错误是显示的提示信息，title表示鼠标悬浮式显示的信息,width表示宽度，height表示高度
超链接
<a href="http://www.mamicode.com/www.baidu.com" target="_blank">click</a>
href属性表示链接的地址, target在页面哪个位置打开新的链接地址
绝对url: www.baidu.com
相对url: index.html
锚: href="http://www.mamicode.com/#id" 指向锚
<ul>:无序列表
<li>: 列表项
<ol>:有序列表
<dl>:自定义列表
<dt>:列表标题
<dd>:列表项
表格标签<table>
<table border="1">
<tr>
<td>标题1</td>
<td>标题2</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</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="http://www.mamicode.com/username" id="username"></p>
<p><label for="password">密码: </label><input type="password" name="password" value="http://www.mamicode.com/password" id="password"></p>
<p><input type="radio" name="sex" value="http://www.mamicode.com/0">男  <input type="radio" name="sex" value="http://www.mamicode.com/1">女</p>
<p><input type="checkbox" name="ball" value="http://www.mamicode.com/0">篮球 <input type="checkbox" name="ball" value="http://www.mamicode.com/1">足球</p>
<input type="file" name="file" value="http://www.mamicode.com/file"><br>
<input type="submit" name="submit" value="http://www.mamicode.com/提交"><br>
<input type="button" name="btn" value="http://www.mamicode.com/btn"><br>
<input type="reset" name="reset" value="http://www.mamicode.com/重置">
</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 style="background-color: rebeccapurple">hello yuan</p>
内嵌式：
<style>
p{
background-color: red;
}
</style>
链接式: <link rel="stylesheet" href="http://www.mamicode.com/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(内容): 盒子的内容，显示文本和图像。
本文出自 “linux技术” 博客，请务必保留此出处http://haoyonghui.blog.51cto.com/4278020/1948169
前端基础学习一