HTTP协议的四大特性
数据格式
- 状态码
HTML概念
标签
form表单
- 参数
input标签
- type参数
- select 标签
- textarea标签
CSS
- CSS语法结构
- CSS三种引入方式
选择器
文字属性
背景属性
- 参数
- 简写
边框
- 简写：
Display属性
盒子模型
- margin
- border
- padding
- content
浮动
- float
- clearfix
溢出
定位
是否脱离文档流
z-index控制z轴
透明度

HTTP协议的四大特性

基于TCP/IP协议
基于请求响应
无状态
无连接

数据格式

请求格式：

请求行(请求方式 协议版本)

请求头

\r\n

请求体

状态码

是用来反应服务器的响应情况的，最常见的如

200 OK， 404 NOT FOUND

1XX 接收到请求，继续处理

2XX 成功

3XX 重定向

4XX 客户端错误

5XX 服务端错误

301 重定向

304 Not Modified，取缓存

# 如果是POST请求，301重定向会导致数据丢失

# 用307重定向可以保持原来的数据

HTML概念

超文本标记语言

作用: 告诉浏览器接收到的数据使用什么样的数据组织形式进行显示。

互联网的三大基石：

HTML，超文本标记语言
URL，统一资源定位符
HTTP，超文本传输协议

HTML的文档声明：

文件名.html,

HTML的标准文档结构

<html>

    <head></head> # 主要是配置浏览器显示数据的配置信息，例如字符编码，一般给浏览器使用

    <body></body> # 给用户使用的数据

    <标签名 /> # 单标签

</html>

<!--

注释

-->

form表单

参数

action: 控制提交的地址

method: 提交表单的方式， get或post

value: 默认值

disable，禁用该input

enctype

input标签

通常input要结合label一起使用

           <label for="username">

               用户名<input type="text" name="username" id="username">

           </label>

type参数

text 普通文本

password 密码

date 日期

radio 单选圆圈

checkbox 多选框，可设置checked属性，会默认选择

hidden 隐藏

file 文件选择

button 普通按钮

reset 重置按钮

submit 提交按钮，能够自动触发form表单提交数据的动作, button标签也可实现提交

     如果要提交数据必须加上enctype="multipart/form-data"

select 标签

配合option标签使用，加上multiple参数，可以变成多选

textarea标签

长文本

CSS

CSS语法结构

选择器 {属性1:属性值}

CSS三种引入方式

通过link标签引入
```
<link rel="stylesheet" href="xxx.css"
```
直接在html页面中head内通过style标签直接书写
行内式，直接在标签内通过style属性书写
```
<h1 style='color:red'> xxxx </h1>
```

选择器

基本选择器

元素选择器， h1
id选择器， #idxx
类选择器， .cls1
通用选择器, *

组合选择器

子孙选择器， div span
子选择器 div>span
兄弟选择器 div~span
毗邻选择器 div+span

属性选择器

[password]

[username='xxxx']

span[username='xxx']

伪类选择器

a:link

a:hover

a:active

a:visited

input:focus

span:hover

伪元素选择器

p:first-letter

p:before

p:after

选择器优先级

选择器相同的情况

谁最后执行，就使用谁的样式

选择器不同的情况

行内选择器 > id选择器 > 类选择器 > 元素选择器

分组

div, span, p {

color: blue;

}

文字属性

text-align

center, left, right, justify

text-decoration

underline, line-through, none

a {

    text-decoration: none; # 去掉a标签默认的下划线

}

text-ident

背景属性

参数

background-color

background-image

background-repeat

repeat-x, repeat-y, repeat

不写默认铺满整个屏幕

background-position

background-position: center center

background-attachment

fixed

简写

background: url('xxx.png') red no-repeat center center

边框

border-top

border-top: 3px solid red;

border-left, border-right, border-bottom

border-radius

简写：

border-style: dot-dash;

border-color: red;

border: solid 10px red;

Display属性

inline: 将块级标签变为行内标签

blcok: 让行内标签独占一行，并且可以设置长宽

inline-block: 既可设置长宽，也可在行内显示

display:none标签隐藏，并且标签原来占的位置也没有了

visibility:hidden 隐藏标签，但是标签原来的位置还在

盒子模型

margin

标签与标签之间的距离

margin: 10px 20px; # 控制上下和左右

margin: 10px 20px 30px; # 控制上， 左右， 下

margin: 0m auto; 左右居中

border

边框

padding

内部文本与内边框的距离

content

文本大小

浮动

float

clearfix

去除浮动带来的影响

.clearfix: after {

    content: '';

    clear: both;

    display: block;

}

溢出

overflow: hidden; 溢出的直接隐藏

overflow: auto;

应用，圆形头像

.c1 {height: 120px;

width: 120px;

border: 5px solid white;

border-radius: 50%;

overflow: hidden;

}

img {

    width: 100%;

}

定位

相对定位

position: relative;

left: 100px;

top: 100px;

# 其父标签必须有position: relative

绝对定位

position: absolute;

top: -50px;

left: 200px;

# 父标签必须是定位过的标签

固定定位

position: fixed;

bottom: 50px;

right: 50px;

是否脱离文档流

不脱离文档流

相对定位
脱离文档流

浮动元素，绝对定位，固定定位

z-index控制z轴

z-index: xxx;

透明度

opacity: 0.6;

THLM，CSS的更多相关文章

HTML和xhtml，CSS
索引: 初学者入门书籍高级进阶书籍 W3C官方手册网站架构移动平台网站开发视频资源开发工具初学者入门书籍: 中文电子书深入浅出html pdf中文版魅丽的网页设计 JAVA WE ...
纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
【MVC】 js，css 压缩
[MVC] js,css 压缩一. 引用 System.Web.Optimization.dll : 使用 Nuget ,在控制台输入 Install-Package Microsoft.AspNe ...
AngularJS开发指南12：AngularJS的模板，CSS，数据绑定详解
模板 AngularJS模板是一种声明式的规则.它包含了模型和控制器的信息,最后会被渲染成用户在浏览器中看到的视图.它是静态的DOM,包含HTML,CSS和AngularJS指定的元素和属性.Angu ...
Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
JS，CSS，HTML制作网页首页，视频轮播，隐藏点击等等。
在整个项目中,总共写了1000+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉 ...
CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
html，css所遇问题（一）
html,css所遇问题(一) div中添加背景图片必须设置宽高例如:下述代码没有设置icon的宽高值,那么网页中也不会显示出背景图片,因为div 里面有内容才会出现背景,没内容又没设置宽高,那di ...
在线API，桌面版，jquery，css,Android中文开发文档,JScript,SQL掌用实例
学习帮助文档大全 jquery,css,Android中文开发文档,JScript,SQL掌用实例 http://api.jq-school.com/

随机推荐

Java 数据持久化系列之JDBC
前段时间小冰在工作中遇到了一系列关于数据持久化的问题,在排查问题时发现自己对 Java 后端的数据持久化框架的原理都不太了解,只有不断试错,因此走了很多弯路.于是下定决心,集中精力学习了持久化相关框架 ...
Java数组深入
Java数组深入内存中的数组前边提到:数组是一种引用类型,数组引用变量只是一个引用,当它指向有效内存的时候才可以通过数组变量来访问数组元素,也就是说数组变量和数组元素在内存中是分开放的. 可以这么 ...
Gemini.Workflow 双子工作流高级教程：数据库设计及各表作用说明
整体数据库设计,可见这一篇:Gemini.Workflow 双子工作流高级教程:数据库-设计文档这里对各数据表进行介绍: 工作流里的设计表并不多,核心只有以下8个: 下面按照流程的顺序来介绍一下表的 ...
【CPLUSOJ】【动态规划】最短回文串
题目链接 [问题描述] 如果一个字符串正过来读和倒过来读是一样的,那么这个字符串就被称作回文串.例如abcdcba,abcddbca就是回文串,而abcdabcd不是. 你要解决的问题是:对于任意一个 ...
网站优化之使用Free marker静态化网站文章页
博客做出来的时候就想要把一些栏目和文章页都静态化处理,当时没啥时间搞,就一直没去弄.但是最近的工作就是做网站,用cms快速搭出了几个网站,cms搭建网站是真的方便啊如果没有需要二次开发实现的功能,那 ...
Requests小技巧
yum运行报错：libcurl.so.4: cannot open shared object file: No such file or directory
/usr/lib64/目录下存在libcurl.so.4文件 CURL的动态库找不到,这里我们加入到ld.so.conf [root@localhost bin]# vim /etc/ld.so.c ...
全球 43 亿 IPv4 地址已耗尽！IPv6，刻不容缓
大家都知道目前网络协议使用的主要是 IPv4,全称为 Internet Protocol version 4,作用是为每一个网络和每一台主机分配一个 IP,IP 地址是一个 32 位的二进制数,算下来 ...
CentOS 7上利用systemctl添加自定义系统服务
Centos 7 之 systemctl CentOS 7继承了RHEL 7的新的特性,例如强大的systemctl,而systemctl的使用也使得以往系统服务的/etc/init.d的启动脚本的方 ...
形式语言与自动机|DFA识别句子
实验二 DFA识别句子一.实验目的加深对DFA工作原理的理解. 二.实验内容 1.设计固定DFA.也就是说用if-then-else(一般用来实现字母表中只有两个字母的情况).switch(大于两 ...

THLM，CSS