HTML认知

时间:2019-12-14
本文章向大家介绍HTML认知,主要包括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的区别主要是:更严格,元素均为小写,属性都是在引号以内,标签都有闭合标签,便签嵌套更有逻辑等。

$flag 上一页 下一页