目录

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. 获取单列集合，双列集合，数组的Stream流对象以及简单操作

    获取流对象 获取单列集合,双列集合,数组的流对象 单列集合获取流对象: 1.java.util.Collection接口中加入了default方法stream()获取流对象,因此其所有实现类均可通过此 ...

  2. workspaces only allow trusted client with self-signed cert

    1. 生成ca. openssl genrsa -out CA_neonone.workspace.key 2048 openssl req -x509 -new -nodes -key CA_neo ...

  3. Spring中的事务回滚机制

    初学者笔记 问题:在Java项目汇中,添加@Transactional注解,报错之后,事务回滚未生效,数据仍插入数据库中.经查看报错位置位于新增成功之后.空指针异常. 一.特性 先了解一下@Trans ...

  4. 2019-9-20：渗透测试，基础学习,phpstudy搭建Wordpress，Burpsuite抓取WorePress cms的post包

    一.搭建WordPress的cms网站管理系统 1,下载Wordpress cms源码,下载地址:https://wordpress.org/download/ 2,将源码解压到phpstudy目录下 ...

  5. js模块导入/导出大全

    说明 module.exports与exports是CommonJS的规范 export与export default是es6规范 require 是 AMD规范引入方式 import是es6的一个语 ...

  6. jsp中标签的序号问题

    采用ststus.count进行序号的显示,但是设置了分页之后会出现点击下一页之后第二页的序号还是从1开始排序的,有时候并不方便,所以本文章针对带有分页的序号进行设置: <c:forEach i ...

  7. 自定义cell的步骤

    ---恢复内容开始--- 自定义cell的步骤(每个cell的高度不一样,每个cell里面显示的内容也不一样) 1.新建一个继承自UITableViewCell的子类 2.在initWithStyle ...

  8. 如何编写可怕的Java代码？

    我决定告诉你如何编写可怕的Java代码.如果你厌倦了所有这些美丽的设计模式和最佳实践,并且想写些疯狂的东西,请继续阅读. 如果你正在寻找有关如何编写良好代码的建议,请查看其它文章! 对一切使用异常 你 ...

  9. 不服跑个分：ARM鲲鹏云服务器实战评测——华为云鲲鹏KC1实例 vs. 阿里云G5实例【华为云技术分享】

    原文链接:https://m.ithome.com/html/444828.htm 今年一月份,华为正式发布了鲲鹏920数据中心高性能处理器,该处理器兼容ARM架构,采用7纳米制造,最高支持64核,主 ...

  10. 云享专家倪升武：微服务架构盛行的时代，你需要了解点 Spring Boot

    [摘要] 微服务架构的本质在于分布式.去中心化. 随着互联网的高速发展,庞大的用户群体和快速的需求变化已经成为了传统架构的痛点. 在这种情况下,如何从系统架构的角度出发,构建出灵活.易扩展的系统来快速 ...