行内标签与块级标签、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	内容没有超出时，不显示滚动条；内容超出时，显示滚动条，且如果只有一个方向超出，那么只显示该方向上的滚动条

    相关实例：

    hello world

    


      
      
this is a 
      
this is a article 1
      
this is a article 2


      
      
      
      
地址详情
      
大标题是什么

      
      link
      font size
      large font

.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标签

  

标签，用于创建供用户输入的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.

    相关实例：

 form 标签
  
     
     
    
     
    
     
    
     
     
     
    
     
    
     
    
      demo1
      demo2
      demo3
     
    
    
     

    
  
   二分之一 
   

    
html5
    hello world
  
 

在游览器显示如下：

三、基本网页布局

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

    HTML5中的一些新标签列举：

 

标签	描述
	定义注释。
	定义文档类型。
	定义超链接。
	定义缩写。
	HTML 5 中不支持。定义首字母缩写。
	定义地址元素。
	HTML 5 中不支持。定义 applet。
	定义图像映射中的区域。
	定义 article。
	定义页面内容之外的内容。
	定义声音内容。
	定义粗体文本。
	定义页面中所有链接的基准 URL。
	HTML 5 中不支持。请使用 CSS 代替。
	定义文本的文本方向，使其脱离其周围文本的方向设置。
	定义文本显示的方向。
	HTML 5 中不支持。定义大号文本。
	定义长的引用。
	定义 body 元素。
	插入换行符。
	定义按钮。
	定义图形。
定义表格标题。
	HTML 5 中不支持。定义居中的文本。
	定义引用。
	定义计算机代码文本。
定义表格列的属性。
定义表格列的分组。
	定义命令按钮。
	定义下拉列表。
	定义定义的描述。
	定义删除文本。
	定义元素的细节。
	定义定义项目。
	HTML 5 中不支持。定义目录列表。
	定义文档中的一个部分。
	定义定义列表。
	定义定义的项目。
	定义强调文本。
	定义外部交互内容或插件。
	定义 fieldset。
	定义 figure 元素的标题。
	定义媒介内容的分组，以及它们的标题。
	HTML 5 中不支持。
	定义 section 或 page 的页脚。
	定义表单。
	HTML 5 中不支持。定义子窗口（框架）。
	HTML 5 中不支持。定义框架的集。
to	定义标题 1 到标题 6。
	定义关于文档的信息。
	定义 section 或 page 的页眉。
	定义有关文档中的 section 的信息。
	定义水平线。
	定义 html 文档。
	定义斜体文本。