目录

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>

<!--

注释

-->

标签

标签分类

按是否封闭分类

  • 双标签：h1, a
  • 自闭合标签: img

按级别分类

  • 块级标签，独占一行

    h1~h6, p, br, hr, div

    可以嵌套其他块标签和行内标签

    注意：p不能嵌套任何块级标签，只能嵌套行内标签

  • 行内标签

    s, i, u, b, span

    内部文本有多大，就占多大

标签属性

  • id， 同一个html文档中，唯一
  • class, 类属性， 可以继承类的样式

head内常用标签

title

style 内部支持写css代码

link 引入外部css样式文件

script 内部可以直接写js代码

meta 定义网页源信息

body内常用标签

h1~h6 标题标签

p 段落标签

s 删除线

b 加粗

u 下划线

i 斜体

br 换行

hr 一条分割线

body内重要标签

div

span

a 标签

a

<a herf='' id='a1'> 跳转到id为a1的标签</a>

<a herf='https://www.baidu.com'> 跳转到百度首页 </a>

img 标签

src： 1. 图片地址， 2. url

alt: 图片加载不出来的时候，展示的提示信息

title: 鼠标悬停上去之后展示的提示信息

width

height

ul 标签

无序列表

type参数：

    dis 实心圆点

    circle 空心圆

    square 实心方块

ol 标签

表格标签

<table>

    <thead>

        <tr>

            <th>column1</th>

            <th>column2</th>

        </tr> 一个tr是一行

    </thead>

    <tbody>

        <tr>

            <td>valu1</td>

            <td>valu2</td>

        </tr>

    </tbody>

</table>

body内特殊符号

&nbsp; 空格

&amp; &

&yen;

&gt; >

&lt; <

&copy;

&reg;

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的更多相关文章

  1. HTML和xhtml，CSS

    索引: 初学者入门书籍 高级进阶书籍 W3C官方手册 网站架构 移动平台网站开发 视频资源 开发工具 初学者入门书籍: 中文电子书    深入浅出html pdf中文版 魅丽的网页设计 JAVA WE ...

  2. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  3. 【MVC】 js，css 压缩

    [MVC] js,css 压缩 一. 引用 System.Web.Optimization.dll : 使用 Nuget ,在控制台输入 Install-Package Microsoft.AspNe ...

  4. AngularJS开发指南12：AngularJS的模板，CSS，数据绑定详解

    模板 AngularJS模板是一种声明式的规则.它包含了模型和控制器的信息,最后会被渲染成用户在浏览器中看到的视图.它是静态的DOM,包含HTML,CSS和AngularJS指定的元素和属性.Angu ...

  5. Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  6. JS，CSS，HTML制作网页首页，视频轮播，隐藏点击等等。

    在整个项目中,总共写了1000+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉 ...

  7. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  8. html，css所遇问题（一）

    html,css所遇问题(一) div中添加背景图片必须设置宽高 例如:下述代码没有设置icon的宽高值,那么网页中也不会显示出背景图片,因为div 里面有内容才会出现背景,没内容又没设置宽高,那di ...

  9. 在线API，桌面版，jquery，css,Android中文开发文档,JScript,SQL掌用实例

    学习帮助文档大全 jquery,css,Android中文开发文档,JScript,SQL掌用实例 http://api.jq-school.com/

随机推荐

  1. java.lang.NoSuchMethodError: org.apache.tomcat.JarScanner.scan(Ljavax/servlet/ServletContext;Ljava/lang/ClassLoader;Lorg/apache/tomcat/JarScannerCallback;Ljava/util/Set;)V

    java.lang.NoSuchMethodError: org.apache.tomcat.JarScanner.scan(Ljavax/servlet/ServletContext;Ljava/l ...

  2. python：Asyncio模块处理“事件循环”中的异步进程和并发执行任务

    python模块Asynico提供了管理事件.携程.任务和线程的功能已经编写并发代码的同步原语. 组成模块: 事件循,Asyncio 每个进程都有一个事件循环. 协程,子例程概念的泛化,可以暂停任务, ...

  3. 微信公众号配置及微信jsAPI支付

    公众号配置 一.基本配置 首先登陆微信公众平台,在开发--->配置--->公众号开发信息,获取到AppId,开发者秘钥是后台需要的,给到后台,IP白名单配置就是你服务器的IP地址写到里面就 ...

  4. 使用MongoDB的Spring Boot和MongoTemplate教程

    在本教程中,我们将构建一个Spring Boot应用程序,该应用程序演示如何使用MongoTemplate API访问MongoDB数据库中的数据. 对于MongoDB,我们将使用mLab,它提供了M ...

  5. 使用RNN进行imdb影评情感识别--use RNN to sentiment analysis

    原创帖子,转载请说明出处 一.RNN神经网络结构 RNN隐藏层神经元的连接方式和普通神经网路的连接方式有一个非常明显的区别,就是同一层的神经元的输出也成为了这一层神经元的输入.当然同一时刻的输出是不可 ...

  6. 创建指定python版本的虚拟环境

    使用virtualenvwrapper管理虚拟环境 鉴于virtualenv不便于对虚拟环境集中管理,所以推荐直接使用virtualenvwrapper. virtualenvwrapper提供了一系 ...

  7. Java基础面试题及答案（二）

    容器 18. java 容器都有哪些? 常用容器的图录: 19. Collection 和 Collections 有什么区别? java.util.Collection 是一个集合接口(集合类的一个 ...

  8. LESSON 5 - Markov Sources

    1.      Markov sources The state of the Markov chain is used to represent the “memory” of the source ...

  9. Vue之组件及组件通信

    组件之全局组件 //注意:需要在Vue实例化之前注册全局组件,使用Vue.component("组件名",{ template:`组件模板` }) Vue.component(&q ...

  10. react中简单倒计时跳转

    其实在react中实现倒计时的跳转方法有很多中,其中我认为较为好用的就是通过定时器更改state中的时间值. 首先在constructor中设置10秒的时间值: constructor () { su ...