⾏内标签与块级标签、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 >地址详情</address>
<h1 >⼤标题是什么</h1>
<!--inline element-->
<a >link</a>
<dfn >font size</dfn>
<big >large font</big>
.div1{
height: 100px;
background: #6DC5DC;
}
.rowLabel{
background: yellow;
display: block;
}
[data-myself] {
background: red;
}
function fillFont(obj) {
var name = Attribute("data-myself");
alert(obj.innerHTML + '' + name);
}
在游览器显⽰如下：
⼆、form标签
<form>标签，⽤于创建供⽤户输⼊的HTML表单。form元素包含⼀个或多个表单元素，⽐如：button,input,keygen,object,output,select,textarea.
HTML4.01与HTML5之间的差异
HTML5拥有⼀些新的属性，同时不再⽀持HTML4.01中的某些属性。
属性
说明
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 >
<summary>html5</summary>
hello world
</details>
在游览器显⽰如下：
三、基本⽹页布局
随着H5的使⽤，WEB标签的语义化，可以利⽤标签更明了的显⽰⽹页的基本布局了。 HTML5中的⼀些新标签列举：
标签描述
定义注释。
定义⽂档类型。
定义超链接。
定义缩写。
HTML 5 中不⽀持。定义⾸字母缩写。
定义地址元素。
html中提交表单用什么属性HTML 5 中不⽀持。定义 applet。
定义图像映射中的区域。
定义 article。
定义页⾯内容之外的内容。
定义声⾳内容。
定义粗体⽂本。
定义页⾯中所有链接的基准 URL。
HTML 5 中不⽀持。请使⽤ CSS 代替。
定义⽂本的⽂本⽅向，使其脱离其周围⽂本的⽅向设置。定义⽂本显⽰的⽅向。
HTML 5 中不⽀持。定义⼤号⽂本。
定义长的引⽤。
定义 body 元素。
插⼊换⾏符。
定义按钮。
定义图形。
定义表格标题。
HTML 5 中不⽀持。定义居中的⽂本。
定义引⽤。
定义计算机代码⽂本。
定义表格列的属性。
定义表格列的分组。
定义命令按钮。
定义下拉列表。
定义定义的描述。
定义删除⽂本。
定义元素的细节。
定义定义项⽬。
HTML 5 中不⽀持。定义⽬录列表。
定义⽂档中的⼀个部分。
定义定义列表。
定义定义的项⽬。
定义强调⽂本。
定义外部交互内容或插件。
定义 fieldset。
定义 figure 元素的标题。
定义媒介内容的分组，以及它们的标题。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论