zoukankan      html  css  js  c++  java
  • HTML+CSS

    1 HTTP

      socket就是对TCP和UDP的封装, 都是基于网络层的

      套接字编程的是CS模式

      浏览器访问页面是BS模式

      HTTP的特点

        1) 支持的是BS模式

        2) 简单快速

        3) 灵活

        4) 无连接: 限制每次链接只处理一次请求

        5) 无状态: 不记录状态, 一次连接就从头开始

      HTTP URL(统一资源定位符)

      格式: http://域名:端口/绝对路径

      HTTP请求

        HTTP请求 = 请求行 + 消息报头 + 请求正文

      1) 请求行 

      格式

    Method Request-URI HTTP-Version CRLF

      其中Method表示请求方法, Request-URL表示统一资源定位符, HTTP-version表示HTTP的版本, CRLF表示回车和换行

        请求方法:

          GET  请求获取Request-URI所标识的资源

          POST  在Request-URI所标识的资源后附加新的数据

          HEAD  请求获取由Request-URI所标识的资源的响应消息报头

          PUT  请求服务器存储一个资源,并用Request-URI作为其标识

          DELETE  请求服务器删除Request-URI所标识的资源

          TRACE   请求服务器回送收到的请求信息,主要用于测试或诊断

          CONNECT 保留将来使用

          OPTIONS 请求查询服务器的性能,或者查询与资源相关的选项和需求

      2) 请求报头

      3) 请求正文

      同理HTTP的相应格式是

        HTTP响应 = 状态行 + 消息报头 + 响应正文

      1) 状态行

      格式

    HTTP-Version Status-Code Reason-Phrase CRLF

      其中Reason-Phrase表示状态码的文本描述

      状态码

        由三个数字组成, 第一个数字定义相应类别

          1xx:指示信息--表示请求已接收,继续处理

          2xx:成功--表示请求已被成功接收、理解、接受

          3xx:重定向--要完成请求必须进行更进一步的操作

          4xx:客户端错误--请求有语法错误或请求无法实现

          5xx:服务器端错误--服务器未能实现合法的请求

        常见的状态码

          200 OK  客户端请求成功

          400 Bad Request  客户端请求有语法错误,不能被服务器所理解

          401 Unauthorized  请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用 

          403 Forbidden  服务器收到请求,但是拒绝提供服务, 一般是没有权限访问

          404 Not Found  请求资源不存在,eg:输入了错误的URL

          500 Internal Server Error  服务器发生不可预期的错误

          503 Server Unavailable  服务器当前不能处理客户端的请求,一段时间后可能恢复正常

      2) 消息报头

      3) 响应正文

      关于消息报头, 分为普通报头, 请求报头, 相应报头, 实体报头

      格式

    名字:空格 值

    2 HTML

      整体结构

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
    
        </body>
    </html>

      HTML分为两部分 DOCTYPE + HTML

      其中DOCTYPE表示文件类型, 没有的话浏览器会按照怪异模式解析, 加上之后按照标准模式解析

      HTML是整个内容标签, 分为两部分 HEAD + BODY

      1) HEAD标签

      HEAD分为 META 和 非META标签

      关于META标签

    <!--网站内容的关键字-->
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <!--网站的描述-->
    <meta name="description" content="网站信息描述">
    <!--经过2秒之后跳转到百度-->
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
    <!--文档格式是UTF8-->
    <meta http-equiv="content-Type" charset="UTF8">
    <!--告诉浏览器以什么浏览器渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7 " />

      具体的有

      非META标签

    <title>标签标题</title>
    <!--设置标签的icon-->
    <link rel="icon" href="http://www.jd.com/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="css/drawer.css"/>
    <script src="js/main.js" type="text/javascript" charset="utf-8"></script>

      2) BODY

      BODY内的标签分为 块级元素 和 内联元素

        块级(block)元素的特点:

          ①总是在新行上开始;

          ②高度,行高以及外边距和内边距都可控制;

          ③宽度缺省是它的容器的100%,除非设定一个宽度;

          ④它可以容纳内联元素和其他块元素。 

        内联(inline)元素的特点:

    ①和其他元素都在一行上;

    ②高,行高及外边距和内边距不可改变;

    ③宽度就是它的文字或图片的宽度,不可改变;

    ④内联元素只能容纳文本或者其他内联元素。 

      1) 块级元素

    div:文档节

      div没有特殊效果, 使用频率最该

    h1,h2,h3,h4,h5,h6:标题

    p:段落

    ul:无序列表

      里面的项目用li表示

    ol:有序列表

      里面的项目用li表示

    table:表格

    tr:表格行

    th:表头单元格

    td:表格单元

    caption:表格标题

    thead:组合表头内容(th)

    tbody:组合主体内容(td)

    tfoot:组合表注内容(td)

    dl:列表

    dt:列表项目

    dd:项目描述

    form:表单

    br:换行(空标签)

    hr:水平分割线(空标签)

    更多的标签:

    section:文档节

    dir:目录列表

    nav:导航

    header:页眉

    article:文章

    aside:文章侧栏

    footer:页脚

    details:元素的细节

    summary:details元素可见的标题

    dialog:对话框窗口

    menu:命令的菜单,列表

    menuitem:菜单项目

    command:命令按钮

    fieldset:围绕元素的边框(可用于表单内元素分组)

    legend:在边框上的标题

    select:选择列表(内联元素)

    optgroup:组合选择列表选项

    option:选择列表选项(也可做datalist选项)

    datalist:下拉列表(id要与input中list属性值绑定)

    col:表格列属性;(空标签)

    colgroup:表格格式化列组

    iframe:内联框架

    figure:媒介内容分组

    figcaption:figure标题

    map:图像映射

    area:图像区域

    canvas:图形容器(脚本来绘制图形)

    video:视频

    source:媒介源

    track:文本轨道

    audio:声音内容

    pre:格式文本

    blockquote:块引用

    address:文档联系信息

    center:居中文本(不赞成使用)

    spacer:在水平和垂直方向插入空间(空元素) 

      2) 内联元素

    a:链接

    img:图片

    select:下拉列表

    span:内联容器

    strong:粗体强调

    b:粗体

    i:斜体

    label:input标记(点击文本触发控件)

    input:输入框

    textarea:多行文本输入框

    更多标签

    abbr:缩写

    em:强调

    mark:突出显示的文本

    bdi:文本方向

    bdo:文字方向

    big:大字体

    small:小字体

    sup:上标

    sub:下标

    del:被删除的文本

    strike:删除线

    s:删除线

    ins:被插入的文本

    u:下划线

    nobr:禁止换行

    wbr:单词换行时机(空标签)

    tt:打字机文本

    kbd:键盘文本

    time:日期/时间

    cite:引用

    q:短引用("")

    font:字体设定(不常用)

    acronym:缩写(html5不支持)

    dfn:字段(不常用)

    embed:内嵌(空标签)

    button:按钮

    keygen:生成秘钥(空标签)

    output:输出结果

    ruby:中文注音

    rt:注音

    rp:浏览器不支持ruby元素显示的内容

    progress:进度条

    meter:度量

    var:定义变量

    code:计算机代码文本

    samp:计算机代码样本

    3 CSS

      引用CSS的方法

        1) 在标签内部用属性style

    <p style="background-color: red">hello css</p>

        2) 在head中编写style标签

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                background-color: #2b99ff;
            }
        </style>
    </head>

        3) 在head中使用标签link导入css文件

    <link rel="stylesheet" type="text/css" href="css/drawer.css"/>

        4) 在head中的style中使用 @import 导入

        但是此方法是在网页加载完毕之后再加载CSS文件, 所以页面会闪烁一下(从没有样式到加载样式)

    <style type="text/css">
              @import"mystyle.css";
    </style> 

      基本选择器

        1) 标签选择器

          直接是标签名字

    div{
    
    }

        2) id选择器

          使用id定义

          使用 #id

          id是唯一的, 如果有重复的id, 都会选择到

    #myid{
    
    }

        3) 类选择器

          使用class定义

          使用 .类名

          class不是唯一的, 可以多个使用 这才是最常用的

    .myclass{
    
    }

        4) 通配选择器

    *{
    
    }

      组合选择器

    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;}

      伪类

    a:link(没有接触过的链接),用于定义了链接的常规状态。
    a:hover(鼠标放在链接上的状态),用于产生视觉效果。     
    a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。    
    a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。    
    伪类选择器 : 伪类指的是标签的不同状态:  
    a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 
    a:link {color: #FF0000} /* 未访问的链接 */
    a:visited {color: #00FF00} /* 已访问的链接 */
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
    before after伪类 :
    :before    p:before       在每个<p>元素之前插入内容     
    :after     p:after        在每个<p>元素之后插入内容     
    例:p:before{content:"hello";color:red;display: block;}

      CSS优先级

    1 内联样式表的权值最高      style=""------------1000;
    2 统计选择符中的ID属性个数。       #id --------------100
    3 统计选择符中的CLASS属性个数。   .class -------------10
    4 统计选择符中的HTML标签名个数。    p ---------------1

      

    人若有恒 无所不成
  • 相关阅读:
    dotnet core 获取 MacAddress 地址方法
    dotnet core 获取 MacAddress 地址方法
    dotnet core 发布只带必要的依赖文件
    dotnet core 发布只带必要的依赖文件
    Developing Universal Windows Apps 开发UWA应用 问答
    Developing Universal Windows Apps 开发UWA应用 问答
    cmd 如何跨驱动器移动文件夹
    cmd 如何跨驱动器移动文件夹
    C++ 驱动开发 error LNK2019
    C++ 驱动开发 error LNK2019
  • 原文地址:https://www.cnblogs.com/weihuchao/p/6880830.html
Copyright © 2011-2022 走看看