行内标签与块级标签、form标签、wrapper网页布局--html基本知识（学习笔记）

最近，又回顾学习了html的一些基本知识，在此mark一下：

一、块级标签、行内标签与自闭合标签

        ①块级标签：占据一整行，高度、行高、内边距和外边距都可以改变，宽度和游览器的宽度一样，和内容无关，可以容纳块级标签和其他行内标签；

        ②行内标签：只占内容宽度大小、高度、行高，内边距和外边距是可以部分可以改变的。

        行内元素一般是内容的容器，而块级元素一般是其他容器的容器。因此，行内元素适合显示具体的内容，而块级元素适合做布局。常用的行内元素和块级元素如下：

 

级别	元素
行内元素	a,b,strong,span,img,label,button,input,select,textarea
块级元素	header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

    一般情况下，行内元素只包含内容和其他行内元素，宽度和长度依据内容而定，不可以设置，可以和其他元素和平共处一行；而块级元素可以包含行内元素和其他块级元素，且占据父元素的整个空间，可以设置width和height属性，游览器通常会在块级元素前后另起一个新行。

    之所以，说“一般情况”，是因为元素的级别不是一成不变的，游览器是按照规范规定的元素的默认级别来显示，但是，也可以通过"display"的属性来改变其级别。

    常用的display值

    常用的display可能的值如下：

 

值	说明
inline	以行内元素行为展示
block	以块级元素行为展示
inline-block	行内元素和块级元素特性兼而有之，既不会占满父元素，又可以设置width和height属性
table	以表格的形式展示
table-cell	以表格单元格的形式展示
table-row	以表格行的形式展示
table-column	以表格列的形式展示
flex	CSS3 新增，虽然处于CR阶段，但是很多现代浏览器已经支持无前缀的该特性，IE从11开始部分支持。类似块级元素，但是可以用于制作自适应布局
inline-flex	类似行内元素，但是可以用于制作自适应布局
grid	CSS3 新增，目前处于“实验阶段（Experimental）”,只是得到了IE11和edge的部分支持

    注：flex属性因其在WEB端的兼容性不是很好，但是，在移动端支持良好，利用flex布局可以更好的制作出自适应布局，解决移动端各种手机屏幕的适应问题。

    块级元素与overflow

    块级元素当没有明确指定width和height值时，块级元素尺寸由内容确定，当指定了width和height的值时，内容超出规定的尺寸就会溢出，元素的尺寸并不会随着内容改变。这时候，使用overflow可以指定内容超出时的行为，当然，overflow只对块级元素起作用，指定当内容超出块级容器的时候，块级元素该如何处理内容的显示。overflow可能的值如下表示：

 

值	说明
visible	默认值，如果内容超出容器尺寸，不做任何处理
hidden	超出的内容被截断并隐藏
scroll	无论内容是否超出，总是显示滚动条。可以控制只显示一个方向的滚动条，这时应该设置 overflow-x 和 overflow-y
auto	内容没有超出时，不显示滚动条；内容超出时，显示滚动条，且如果只有一个方向超出，那么只显示该方向上的滚动条

    相关实例：

<!--
  块级标签： 占据一整行， 高度，行高，内边距和外边距都可以改变
      宽度和浏览器的宽度一样，和内容无关
      可以容纳块级标签和其他行内标签
  行内标签： 只占内容宽度大小， 高度，行高，内边距和外边是部分可以改变
  -->
    <span class="rowLabel">hello world</span>

    <div class="div1"></div>

      <!--闭合标签-->
      <div onclick="fillFont(this)" data-myself="div element">this is a </div>
      <article>this is a article 1</article>
      <article>this is a article 2</article>


      <!--自闭合标签,在HTML5标准中并非要求一定/闭合，xhtml中要求-->
      <img src="./" alt="">
      <!--block element：默认独占一行的-->
      <address style="display:inline">地址详情</address>
      <h1 style="display:inline">大标题是什么</h1>

      <!--inline element-->
      <a style="display:block">link</a>
      <dfn style="display:block">font size</dfn>
      <big style="display:block">large font</big>

.div1{
    height: 100px;
    background: #6DC5DC;
  }
  .rowLabel{
    background: yellow;
    display: block;
  }
  [data-myself] {
    background: red;
  }

 function fillFont(obj) {
       var name = obj.getAttribute("data-myself");
       alert(obj.innerHTML + '' + name);
      }

    在游览器显示如下：

二、form标签

   <form>标签，用于创建供用户输入的HTML表单。form元素包含一个或多个表单元素，比如：button,input,keygen,object,output,select,textarea.

     HTML4.01与HTML5之间的差异

     HTML5拥有一些新的属性，同时不再支持HTML4.01中的某些属性。

      属性

 

属性	值	描述
accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on off	规定是否启用表单的自动完成功能。
enctype	见说明	规定在发送表单数据之前如何对其进行编码。
method	get post	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top framename	规定在何处打开 action URL。

     说明

enctype属性可能的值：application/x-www-form-urlencoded,multipart/form-data,text/plain.

    相关实例：

 <mark>form 标签</mark>
  <form action="" method="post">
    <!-- email:--> 
    <input type="email" name="user_email" autocomplete="off"> 
    <!-- url: -->
    <input type="url" name="user_url" autocomplete="off"> 
    <!-- number: -->
    <input type="number" min="0" max="20" name="user_num" step="5"> 
    <!-- range: -->
    <input type="range" name="r" min="1" max="5"> 
    <!-- datatime-local:--> 
    <input type="datetime-local" name="user_date"> 
    <input type="search"  placeholder="请输入" name="user_search">
    <input type="button" value="确定"> 
    <!-- selected, checked html5 新用法 -->
    <input type="radio" checked> 
    <select name="s" id="sl">
      <option value="o">demo1</option>
      <option value="s" selected>demo2</option>
      <option value="v">demo3</option>
    </select> 
    <!--- datalist: -->
    <input type="search" list="list1">
    <datalist id="list1">
      <option value="1" label="w1"></option>
      <option value="2" label="w2"></option>
      <option value="3" label="w3"></option>
    </datalist> 

    <input type="submit">
  </form>
   <meter value="5" min="0" max="10">二分之一</meter> 
   <details style="display: inline;">
    <summary>html5</summary>
    hello world
  </details> 

在游览器显示如下：

三、基本网页布局

    随着H5的使用，WEB标签的语义化，可以利用标签更明了的显示网页的基本布局了。

    HTML5中的一些新标签列举：

 

标签	描述
<!--...-->	定义注释。
<!DOCTYPE>	定义文档类型。
<a>	定义超链接。
<abbr>	定义缩写。
<acronym>	HTML 5 中不支持。定义首字母缩写。
<address>	定义地址元素。
<applet>	HTML 5 中不支持。定义 applet。
<area>	定义图像映射中的区域。
<article>	定义 article。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<b>	定义粗体文本。
<base>	定义页面中所有链接的基准 URL。
<basefont>	HTML 5 中不支持。请使用 CSS 代替。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>	定义文本显示的方向。
<big>	HTML 5 中不支持。定义大号文本。
<blockquote>	定义长的引用。
<body>	定义 body 元素。
<br>	插入换行符。
<button>	定义按钮。
<canvas>	定义图形。
<caption>	定义表格标题。
<center>	HTML 5 中不支持。定义居中的文本。
<cite>	定义引用。
<code>	定义计算机代码文本。
<col>	定义表格列的属性。
<colgroup>	定义表格列的分组。
<command>	定义命令按钮。
<datalist>	定义下拉列表。
<dd>	定义定义的描述。
<del>	定义删除文本。
<details>	定义元素的细节。
<dfn>	定义定义项目。
<dir>	HTML 5 中不支持。定义目录列表。
<div>	定义文档中的一个部分。
<dl>	定义定义列表。
<dt>	定义定义的项目。
<em>	定义强调文本。
<embed>	定义外部交互内容或插件。
<fieldset>	定义 fieldset。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<font>	HTML 5 中不支持。
<footer>	定义 section 或 page 的页脚。
<form>	定义表单。
<frame>	HTML 5 中不支持。定义子窗口（框架）。
<frameset>	HTML 5 中不支持。定义框架的集。
<h1> to <h6>	定义标题 1 到标题 6。
<head>	定义关于文档的信息。
<header>	定义 section 或 page 的页眉。
<hgroup>	定义有关文档中的 section 的信息。
<hr>	定义水平线。
<html>	定义 html 文档。
<i>	定义斜体文本。
<iframe>	定义行内的子窗口（框架）。
<img>	定义图像。
<input>	定义输入域。
<ins>	定义插入文本。
<keygen>	定义生成密钥。
<isindex>	HTML 5 中不支持。定义单行的输入域。
<kbd>	定义键盘文本。
<label>	定义表单控件的标注。
<legend>	定义 fieldset 中的标题。
<li>	定义列表的项目。
<link>	定义资源引用。
<map>	定义图像映射。
<mark>	定义有记号的文本。
<menu>	定义菜单列表。
<meta>	定义元信息。
<meter>	定义预定义范围内的度量。
<nav>	定义导航链接。
<noframes>	HTML 5 中不支持。定义 noframe 部分。
<noscript>	定义 noscript 部分。
<object>	定义嵌入对象。
<ol>	定义有序列表。
<optgroup>	定义选项组。
<option>	定义下拉列表中的选项。
<output>	定义输出的一些类型。
<p>	定义段落。
<param>	为对象定义参数。
<pre>	定义预格式化文本。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<s>	HTML 5 中不支持。定义加删除线的文本。
<samp>	定义样本计算机代码。
<script>	定义脚本。
<section>	定义 section。
<select>	定义可选列表。
<small>	将旁注 (side comments) 呈现为小型文本。
<source>	定义媒介源。
<span>	定义文档中的 section。
<strike>	HTML 5 中不支持。定义加删除线的文本。
<strong>	定义强调文本。
<style>	定义样式定义。
<sub>	定义下标文本。
<summary>	定义 details 元素的标题。
<sup>	定义上标文本。
<table>	定义表格。
<tbody>	定义表格的主体。
<td>	定义表格单元。
<textarea>	定义 textarea。
<tfoot>	定义表格的脚注。
<th>	定义表头。
<thead>	定义表头。
<time>	定义日期/时间。
<title>	定义文档的标题。
<tr>	定义表格行。
<track>	定义用在媒体播放器中的文本轨道。
<tt>	HTML 5 中不支持。定义打字机文本。
<u>	HTML 5 中不支持。定义下划线文本。
<ul>	定义无序列表。
<var>	定义变量。
<video>	定义视频。
<xmp>	HTML 5 中不支持。定义预格式文本。

    随便插入一下，WEB的语义化的理解，WEB语义化分为三个阶段，而H5的出现正好处于第三阶段：

    ①最初，游览器和W3C组织推出了h1~h6、thead、ul、ol等HTML标签，用于在WEB页面中组织对应的内容，如网页标题、表头、无序、有序列表，以达到方便协作及传播互联网内容。这样，机器可以读懂内容，同时利于SEO。搜索引擎利用这些语义化标签抓取内容，又鉴于搜索引擎的巨大流量推荐，WEB前端不得不考虑SEO，从而两者实现有益的循环，共同推进着语义化标签的使用；

    ②起初的HTML语义化标签，不能满足WEB的发展，不足以实现对WEB页面各个部分的功能或位置描述，WEB人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加"id=footer"或者"class=footer"的属性，来弥补不足，同时在不同的前端人员与后端人员间实现交流；

    ③W3C组织意识到之前HTML版本的不足，推出的HTML5进一步推进了WEB语义化的发展，采用了如footer、section等语义化标签，来弥补采用"id=footer"或者"class=footer"的不足，以推动了WEB的发展。

    相关实例的基本布局：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>sematic</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="./18718939.jpg" type="image/x-icon">
</head>
<body>
<div id="wrapper">
  <header class="siteHeader">
    <h1>页面的头，一号字体</h1>
  </header>
  <aside class="navSideBar">
    <h2>左边栏2号字体</h2>
    <ul>
      <li><a href="#aa">header标签的使用</a></li>
      <li><a href="#bb">aside变迁的使用</a></li>
      <li><a href="#cc">nav标签的使用</a></li>
      <li><a href="#dd">section标签的使用</a></li>
      <li><a href="#ee">article标签的使用</a></li>
      <li><a href="#ff">footer标签的使用</a></li>
    </ul>
    <article class="artSideBar">
      <h2>关于我们</h2>
      <p>这是一个简短的描述。这是一个简短的描述。
        简短的描述。这是一个简短的描述。这是一个简短的描述。</p>
    </article>
  </aside>
  <main class="content">
    <article>
      <nav>
        <a href="#">Home</a>
        <a href="#">Previous</a>
        <a href="#">Details</a>
        <a href="#">Next</a>
      </nav>
      <header class="artHeader">
        <h2 name="cc">欢迎来到前端大讲堂</h2>
        <h3>副标题： 支持所有的 EcmaScript 6 的浏览器</h3>
        <p class="byline">by ****</p>
      </header>
      <section class="artSection">
<p>
  “Usability” is a construct conceived by the human–computer interaction (HCI) community to denote a desired quality of interactive systems and products. Despite its prominence and intensive use in HCI research, the us…
</p>
<p>
  远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字。

　　远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字。

</p>
      </section>
      <br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/>
    </article>
  </main>
  <footer>
    <p class="disclaimer">版权所有，未经允许不得转载</p>
    <p>
      <a href="#">关于我们</a>
      <a href="#">练习我们</a>
      <a href="#">帮助</a>
    </p>
  </footer>
</div>
</body>
</html>

在游览器显示如下：

四、总结与思考

   利用这次回顾总结html基本知识的机会，随便又复习了一遍H5的新标签，同时，了解了一下WEB语义化的发展，对网页新标签的使用有了新的了解。

    如文章哪里有问题，欢迎大家留言，进行指正，谢谢！

参考博客：HTML行内元素与块级元素点击打开链接

参考博客：如何理解WEB语义化？点击打开链接

 

版权声明：本文为博主原创文章，未经博主允许不得转载。