zoukankan      html  css  js  c++  java
  • 人生苦短,我用python-- Day14之html

    目录介绍                      

    • html交互过程
    • Doctype标签  ------->告诉浏览器使用什么样的html或xhtml规范来解析html文档
    • meta标签      ------->提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
      • 页面编码(告诉浏览器是什么编码)
      • 刷新和跳转
      • 关键词
      • 描述
      • IE兼容性
    • title标签     -------->网页头部信息   
    • link标签    -------->连接文件,这里只说ioc图标是怎么使用link标签实现
    • 各种符号     
    • p标签          -------->段落标签
    • br标签             -------->换行符标签
    • a标签              -------->连接标签
      •    超链接
      •      锚点
    • H标签              -------->标题标签
    • span标签         -------->行内标签,不带任何装饰,也是一个白板
    • div标签            -------->白板标签
    • 标签分类:块标签、行内标签
    • 标签存在的意义
    • 主动闭合标签和自闭和标签区别和用法
    • GET和POST两种请求区别
    • input标签         -------->输入框标签
      • text标签  -------->普通输入框属性
      • password标签 -------->密码输入框属性
      • submit标签 -------->提交按钮输入框属性
      • butto标签 -------->普通按钮输入框属性
      • radio标签 -------->单选输入框属性属性
      • checkbox标签 -------->复选框输入框属性
      • file标签 -------->输入框标签上传文件输入框属性
      • rest标签 -------->重置输入框属性
    • textarea标签
    • select标签
    • a标签中锚点
    • img标签
    • table标签
      • thead标签
      • tbody标签
      • tr标签
      • td标签
      • colspan标签
      • rowspan标签
    • css讲解
    • 标签选择器
    • class选择器
    • id选择器
    • 关联选择器
    • 组合选择器
    • 属性选择器

    html交互过程                  

    所有和web服务器交互的过程,其实都是一个客户端和服务器之间使用socket通讯的过程,服务器端发送的所有数据都是字符串,只有当浏览器把接收到的数据经过翻译以后,才会呈现出我们想要的效果。

     Doctype标签                   

     Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

    有和无的区别
    1. BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
    2. CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

     这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

    有,用什么?

    Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

     

    Meta(metadata information)              

    提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

    1.页面编码(告诉浏览器是什么编码)

    < meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

    2.刷新和跳转

    <!--30秒刷新一次浏览器-->
    < meta http-equiv=“Refresh” Content=“30″>
    <!--5秒刷新界面,刷新后跳转到autohome.com.cn网站-->
    < meta http-equiv=“Refresh” Content=”5; Url=http://www.autohome.com.cn“ />

    3.关键词

    <!--关键词是用来做网站收录,爬虫等用的-->
    < meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

    4.描述

    <meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全,最精彩的汽车新闻、行情、评测、导购内容,是提供信息最快最全的中国汽车网站。">

    5.X-UA-Compatible

    微软的IE6是通过XP、Win2003等操作系统发布出来,作为占统治地位的桌面操作系统,也使得IE占据了通知地位,许多的网站开发的时候,就按照IE6的标准去开发,而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候,采用了微软公司内部标准以及部分W3C的标准,这个时候许多网站升级到IE7的时候,就比较痛苦,很多代码必须调整后,才能够正常的运行。而到了微软的IE8这个版本,基本上把微软内部自己定义的标准抛弃了,而全面的支持W3C的标准,由于基于对标准彻底的变化了,使得原先在早期IE8版本上能够访问的网站,在IE8中无法正常的访问,会出现一些排版错乱、文字重叠,显示不全等各种兼容性错误。

    与任何早期浏览器版本相比,Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此,针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题,Internet Explorer 8 引入了文档兼容性的概念,从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式;这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示,则可以更新该站点以支持最新的 Web 标准(首选方式),也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中,可以实现这一点。

    当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时,它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型,则 Internet Explorer 8 将以 IE5 模式(Quirks 模式)显示该网页。更多

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    title标签                         

    网页头部的信息

    <title>第一个html</title>

    link标签                         

    <!--这个ico就是网站标签上面的那个小图标-->
    < link rel="shortcut icon" href="image/favicon.ico">

    各种符号                        

    http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html 

    空格符号为:&nbsp

    大于号符号:&gt;

    小于号符号:&lt;

    p标签                           

    p表示段落,默认段落之间是有间隔的! 

    <p>你猜猜这里是p标签</p>

    br标签                            

     br 是换行标签,作用

    <p>你猜猜这里是p标签</p>
    <br>
    <p>你猜猜这里是p标签</p>

    a标签                                  

     1.超链接标签

    <a href="http://www.baidu.com" target="_parent"> 老男孩官网 </a>

    target属性,_black表示在新的页面打开

    2.锚点

      也是超链接,但是超链接的地址是页面本身页面的某个id

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="#1"> 第一章 </a> &nbsp;
        <a href="#2"> 第二章 </a> &nbsp;
        <a href="#3"> 第三章 </a> &nbsp;
        <a href="#4"> 第三章 </a> &nbsp;
        <div id="1" style="height: 600px;">
                第一张
        </div>
    
        <div id="2" style="height: 600px;">
                第二张
        </div>
        <div id="3" style="height: 600px;">
                第三张
        </div>
        <div id="4" style="height: 600px;">
                第四张
        </div>
    </body>
    </html>

    H标签                           

     h标签总共有6个等级,分别为h1、h2、h3、h4、h5、h6

     加大加粗

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
    </body>
    </html>

    span标签                                  

    span 是一个白板标签,里面有多少个字符,就占多大的像素。不会跨行,后面的东西在span标签后面继续追加

    <span>span1</span>
    <span>span2</span>

    div标签                                    

    div标签也是一个白板标签, 

    <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

    如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

    标签的分类                                  

    标签分为行内标签(也叫内联标签)、块标签

      快标签:div,a,h,p等

      行内标签:span标签,特殊符号等

    标签存在的意义                              

    后面我们学了css和js等,与div使用会使div变换成各种各样的效果

    注意:标签之间是可以互相嵌套的

    1

  • 相关阅读:
    明星球队的傲慢
    VS2010测试方面的文章重点
    项目管理有感
    团队从小到大,再到体验团队
    css实现文字渐变
    echarts坐标轴文字过长省略
    mustache+mock
    你有选择的权利
    呵呵,初学者小编
    Centos7升级到OpenSSH_8.8p1、OpenSSL 1.1.1l版本
  • 原文地址:https://www.cnblogs.com/xinzhiyu/p/6033009.html
Copyright © 2011-2022 走看看