zoukankan      html  css  js  c++  java
  • HTML认知

    <!DOCTYPE html>的作用
    1、定义
      DOCTYPE是一种标准通用标记语言的文档类型的声明,目的是告诉标准通用标记语言解析器,该用什么方式解析这个文档。
      <!DOCTYPE>必须在第一行,在html标签之前。
    2、作用
      申明文档的解析类型(document.compatMode),避免怪异解析模式
      加上该标记就会以符合w3c要求的标准模式来解析,从而达到在任何浏览器展现的内容都相同。
      浏览器有两种解析模式:
        怪异解析(backCompat):就是以浏览器自己的解析渲染模式来解析,每个浏览器解析的方式可能都不相同,也就会导致不同浏览器有不同的展现方式。
        标准模式(CSSICompat):以符合w3c标准模式的方式来解析文档,不同浏览器解析渲染出来的展现方式也会相同。

    HTML的块级元素和行级元素

    转自:https://www.cnblogs.com/iverson666/p/9169274.html
    
    
    块级元素:块级大多为结构性标记
    
      <address>...</adderss>   
    
      <center>...</center>  地址文字
    
      <h1>...</h1>  标题一级
    
      <h2>...</h2>  标题二级
    
      <h3>...</h3>  标题三级
    
      <h4>...</h4>  标题四级
    
      <h5>...</h5>  标题五级
    
      <h6>...</h6>  标题六级
    
      <hr>  水平分割线
    
      <p>...</p>  段落
    
      <pre>...</pre>  预格式化
    
      <blockquote>...</blockquote>  段落缩进   前后5个字符
    
      <marquee>...</marquee>  滚动文本
    
      <ul>...</ul>  无序列表
    
      <ol>...</ol>  有序列表
    
      <dl>...</dl>  定义列表
    
      <table>...</table>  表格
    
      <form>...</form>  表单
    
      <div>...</div>
    
    行内元素:行内大多为描述性标记
    
      <span>...</span>
    
      <a>...</a>  链接
    
      <br>  换行
    
      <b>...</b>  加粗
    
      <strong>...</strong>  加粗
    
      <img >  图片
    
      <sup>...</sup>  上标
    
      <sub>...</sub>  下标
    
      <i>...</i>  斜体
    
      <em>...</em>  斜体
    
      <del>...</del>  删除线
    
      <u>...</u>  下划线
    
      <input>...</input>  文本框
    
      <textarea>...</textarea>  多行文本
    
      <select>...</select>  下拉列表
    
    ·块级元素
    
      1.总是从新的一行开始
    
      2.高度、宽度都是可控的
    
      3.宽度没有设置时,默认为100%
    
      4.块级元素中可以包含块级元素和行内元素
    
      5.都有align属性
    
      6.dispay都是block
    
    ·行内元素
    
      1.和其他元素都在一行
    
      2.高度、宽度以及内边距都是不可控的
    
      3.宽高就是内容的高度,不可以改变
    
      4.行内元素只能行内元素,不能包含块级元素
    
      5.没有align属性
    
      6.display都是inline

    eg:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
            <div>
            块级元素展示,大多为机构性标记
            <address>这是块级元素,这个标签是用来存放地址信息的</address><address>块级元素即使放在同一列也会换行</address>
            <center>center标签,默认居中显示</center><center>都是居中吗?</center>
            <h1>标题一级</h1><h6>标题六级</h6>
            <hr>水平分割线
            <pre>pre是预格式化标题</pre><pre>pre中会保留编写时的样式,   空格,换行都会预留  </pre>
            <blockquote>blockquote标签,用来段落缩进</blockquote><blockquote>blockquote标签,是怎么进行段落缩进的呢?</blockquote>
            <marquee>marquee标签用来滚动文本</marquee><marquee>marquee标签不太常用,试试看什么作用</marquee>
            <ul>ul标签无序列表</ul><ol>ol标签有序列表<ol>
            <table></table><form></form><dl></dl>
            </div>
            
            <div style="background-color:yellow">
            行内元素,大多为描述性标记
            <span>span就是行内元素</span><span>还在一行内</span>
            </div>
            <div style="background-color:yellow">
            行内元素,大多为描述性标记
            <a>a标签</a><b>b标签</b><strong>strong标签</strong><img>img标签<input value="input标签"/><textarea>teatarea标签</textarea>
            </div>
        </body>
    </html>

    展示效果图:

     <head>头部元素的容器,可以添加的标签有,title、meta、base、link、script、style;

      meta:元数据,提供关于html的元数据,不会被展示在页面中,对于机器是可读的。主要用于对于文档的描述、作者、修改时间等记录信息。

    XHTML是一种比HTML更严格更纯净的语言超文本标签语言,X是EXTensible(可扩展的)缩写。

    XHTML跟HTML的区别主要是:更严格,元素均为小写,属性都是在引号以内,标签都有闭合标签,便签嵌套更有逻辑等。

  • 相关阅读:
    96. Unique Binary Search Trees1和2
    576. Out of Boundary Paths
    686. Repeated String Match判断字符串重复几次可以包含另外一个
    650. 2 Keys Keyboard
    Penetration Test
    Penetration Test
    Penetration Test
    Penetration Test
    CISSP 考试经验分享
    2019-2020 ICPC Asia Hong Kong Regional Contest J—Junior Mathematician 数位dp
  • 原文地址:https://www.cnblogs.com/qcq0703/p/12040526.html
Copyright © 2011-2022 走看看