ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML认知

2019-12-14 19:02:03  阅读:159  来源: 互联网

标签:块级 ... 行内 元素 标签 认知 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的区别主要是:更严格,元素均为小写,属性都是在引号以内,标签都有闭合标签,便签嵌套更有逻辑等。

标签:块级,...,行内,元素,标签,认知,HTML,解析
来源: https://www.cnblogs.com/qcq0703/p/12040526.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有