最近,又回顾学习了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以表格列的形式展示
flexCSS3 新增,虽然处于CR阶段,但是很多现代浏览器已经支持无前缀的该特性,IE从11开始部分支持。类似块级元素,但是可以用于制作自适应布局
inline-flex类似行内元素,但是可以用于制作自适应布局
gridCSS3 新增,目前处于“实验阶段(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中的某些属性。

      属性

 

属性描述
acceptMIME_typeHTML 5 中不支持。
accept-charsetcharset_list规定服务器可处理的表单数据字符集。
actionURL规定当提交表单时向何处发送表单数据。
autocomplete
  • on
  • off
规定是否启用表单的自动完成功能。
enctype见说明规定在发送表单数据之前如何对其进行编码。
method
  • get
  • post
规定用于发送 form-data 的 HTTP 方法。
nameform_name规定表单的名称。
novalidatenovalidate如果使用该属性,则提交表单时不进行验证。
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语义化?点击打开链接

 

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

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐