39.超文本标记语言HTML详解（下）

• 表单
  • 表单输入元素
    • input
      • label
      • datalist
    • textarea
    • select
      • optgroup
      • option
  • fieldset
    • legend
  • button
  • 表单输出
• HTML框架
• HTML颜色
• HTML脚本
• HTML字符实体
• HTML与CSS样式

转载请注明原始出处：http://blog.csdn.net/a464057216/article/details/52332548

表单

<form></form>：定义一个表单，属性值列表：

• action：表单提交地址。
• enctype：表单编码格式，有3种：
  
  • application/x-www-form-urlencoded：enctype的默认值，空格转换成+号，特殊字符转换成ASCII HEX编码。
  • multipart/form-data：不对特殊字符编码，上传文件时，必须用此格式。
  • text/plain：空格转换成+号，但是不对特殊字符编码。
• method：表单提交方式（post/get）。
• autocomplete：是否开启自动完成（on/off）。
• novalidate：不对表单进行验证，比如：
  
  这样表单不会对email这种input做验证。
• target：在什么位置提交表单，即在什么位置显示表单提交后的结果，与<a>标签的target属性一样。

表单输入元素

input

<input>标签是最基本的form表单的输入元素，属性列表如下：

• type：输入的类型：
  
  • button：点击按钮，与javascript配合使用。
  • checkbox：复选框，checked="checked"表示预选该框，配合name和value属性使用。
  • color：拾色器，后台接收到的是#RRGGBB值：
    
  • date：日期选择器，后台接收到的是YYYY-MM-DD值：
    
  • datetime-local：日期时间选择器，后台接受的是YYYY-MM-DDTHH:mm值：
    
  • email：邮箱，有邮箱格式判断，但是没有判断空字符串（Chrome浏览器），移动设备会根据此类型变化输入法键盘格式。
  • file：文件，有“浏览”按钮供选择文件。
  • hidden：隐藏值，配合name、value、Javascript使用。
  • image：将图片作为提交按钮，同时浏览器还会上传用户点击图片的坐标点，以x、y表示。
  • month：月选择器，后台接收到的是YYYY-MM值（虽然客户端可以选择到天）。
  • number：数字选择器，配合min、max、step、value可以规定最小值、最大值、步长、默认值。
  • password：密码。
  • radio：单选按钮，checked="checked"表示预选该按钮，配合name和value属性使用。
  • range：不精确数字输入，配合min、max规定最小值、最大值：
    
  • reset：重置按钮，充值表单为默认值。
  • search：搜索字段，外表看起来与text没有什么不同。
  • submit：提交按钮，可以不提供value属性。
  • tel：电话号码字段，没有格式检查。
  • text：单行文本字段。
  • time：时间选择器，后台接受HH:mm（小时：分钟)值。
  • url：URL，有基本的格式检查，同样没有判空（Chrome)。
  • week：年和周选择器，后台接受YYYY-WMM值，比如2016-W08表示2016年8月。
    
• accept：仅用于type="file"时，表示接受的文件类型（如果有多个，使用逗号分隔），如：
  
  • audio/*：声音文件。
  • vedio/*：视频文件。
  • image/*：图片文件。
  • 其他MIME_TYPE：参考这里。
• alt：仅用于type="image"时，用于图片无法加载的替换文字。图片无法加载时，也会上传鼠标点击处在图片占位符中的偏移量的x、y值。
• autocomplete：同<form>标签的autocomplete属性。
• autofocus：该<input>元素自动获得焦点，如autofocus="autofocus"。
• checked：见<form>的type属性为checkbox和radio的标签，预选该多选框或单选按钮。
• disabled：禁用该<input>元素，不适用于type="hidden"的<input>元素。
• form：设置<input>元素所属的form的id（如果有多个，用空格分隔），表示该输入内容属于哪个表单，适用于<input>元素不在<form>元素中的情形。
• formaction：功能等同与<form>标签中的action属性，但是配合类型为submit或image的<input>标签可以实现更精细化的控制。
• formnovalidate：在type="submit"的标签中设置，表示采用不验证提交（会覆盖<form>元素的 novalidate 属性），比如<input type="submit" formnovalidate="formnovalidate" value="不验证提交" />。
• formtarget：表单在什么位置提交（会覆盖<form>元素的target属性），功能类似<form>元素的target属性。
• height：只适合type="image"的<input>元素，用来规定图片的高度。
• list：引用<datalist>元素的id，用于输入有预设值的列表，如：
  
  效果如下：
  
• max：定义<input>元素可以输入的最大值，可以配合type为如下值的<input>元素工作：number、range、date、datetime、datetime-local、month、time 和 week。
• maxlength：定义<input>元素可以输入的最多字符个数。
• min：同max属性，但是定义了最小值。
• multiple：表示<input>元素可以输入多个值，可以配合type为file或email的<input>元素使用：
  
  在浏览器中可以输入用逗号分隔的多个email地址：
  
  后台服务器收到的内容为整个字符串，要获取每个email地址需要自己分隔。
  
  在浏览器可以上传多个文件：
  
  后台服务器接收方法为（Flask）：request.files.getlist('pro')
• name：设置<input>元素的名称，服务器获取数据需要使用根据这个名字。
• pattern：设置<input>元素接受的输入格式，适用于type为text、search、url、tel、email 和 password的<input>元素，配合全局title属性为用户提供格式解释：
  
  效果如下：
  
• placeholder：为输入项提供简短的说明，适用于type为text、search、url、tel、email 和 password的<input>元素。
• readonly：属性值是只读的，需要配合value属性提供预设值，也可以配合Javascript实现更精细的控制。
• required：该<input>元素是必填项，适合type值为text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file的<input>元素。
• size：<input>元素的可见宽度，适合type值为如下的<input>元素：text、search、tel、url、email 和 password。
• src：适合type="image"的<input>元素，定义图片的来源。
• step：定义<input>元素的取值的步长，适合type值为如下的<input>元素：number、range、date、datetime、datetime-local、month、time 和 week。一般需要配合min和max属性使用。
• value：定义<input>元素的值，对于不同类型的<input>元素含义不同：
  
  • 对于 button、reset、submit 类型 - 定义按钮上的文本。
  • 对于 text、password、hidden类型 - 定义输入字段的初始（默认）值。
  • 对于 checkbox、radio、image类型 - 定义与<input>元素相关的值，当提交表单时该值会发送到表单的 action URL。
• width：适合type="image"的<input>元素，用来规定图片的宽度。

label

label标签用来为<input>元素添加说明，没有特殊视觉效果，不过如果在label元素内点击文本，与选择label标签绑定的元素效果一样，提高了鼠标用户的可用性。属性如下：

• for：与那个元素绑定，设置为被绑定元素的id。
• form：<label>元素属于哪个<form>元素，同样设置为form的id，多个id之间用空格分隔。

datalist

datalist元素为<input>标签提供有预选值的列表，有提示功能，也可以输入不是预选值的值，参考<input>元素type="list"属性的说明。

textarea

textarea是多行文本输入标签，默认可以输入无限字符，属性列表：

• autofocus：文本框在页面载入时自动获取焦点。
• cols：文本框的列数（以字符为单位）。
• disabled：文本框被禁用。
• form：文本框属于哪个<form>的id，多个id用空格分隔。
• maxlength：文本框允许输入的最多字符个数。
• name：文本框名称。
• placeholder：简短说明。
• readonly：文本框只读。
• required：文本框是必填项。
• rows：文本框行数。
• wrap：定义了cols属性时，如果一行文字超出了cols定义的宽度，提交的文本是否包含换行，取值为soft（不包括）或hard（包括）。

select

提供预选值的下拉列表，属性列表如下：

• autofocus：下拉列表在页面载入时自动获取焦点。
• disabled：下拉列表被禁用。
• form：下拉列表属于哪个<form>的id，多个id用空格分隔。
• multiple：下拉列表可以多选。实际使用中，Windows用户需要按住Ctrl进行多选，Mac用户需要按住Command进行多选，这需要提示给用户，所以这种情况下直接用多选框更好。
• name：下拉列表名称。
• required：提交表单前必须在下拉列表中选择一项。
• size：下拉列表的可见项数，默认值是1。如果size的值小于<option>元素的数量，自动会出现滚动条。

optgroup

optgroup元素将相关的选项元素分组，属性列表如下：

• disabled：选项组被禁用。
• label：为选项组添加描述

option

option元素定义<select>元素和<datalist>元素的一个选项，属性列表如下：

• disabled：选项被禁用。
• label：定义选项的更简短描述。
• selected：选项在页面初次加载时被选中。
• value：选项发往服务器的值。

比如：

效果如下：

fieldset

fieldset将表单中相关的输入元素分组，在浏览器上显示时会有一条框线，属性列表如下：

• disabled：该分组被禁用。
• form：该分组属于哪个form的id，多个id用空格分开，适用于fieldset不在form中的场景。
• name：分组的命名，可以配合javascript做精细控制。

比如：

效果如下（在form外部的fieldset中的元素的内容如果想上传到服务器，需要依靠元素自身的form属性 ，而不是fieldset的form属性）：

legend

legend标签配合fieldset标签，为表单的分组定义名字，比如：

效果如下：

button

button元素定义一个按钮，这个按钮可以在<form>元素中或者不在<form>元素中，由于浏览器兼容性问题，使用<button>元素时必须定义type和value两个属性。其属性列表如下：

• autofocus：页面加载时，按钮自动获得焦点。
• disabled：禁用按钮。
• form：按钮属于哪个表单的id，多个id用空格分隔。
• formaction：当type="submit"时，定义向何处发送表单数据，会覆盖form元素的action属性。
• formenctype：当type="submit"时，向服务器提交表单时采用何种编码，取值与form元素的enctype一样，但是会覆盖form元素的enctype的值。
• formmethod：当type="submit"时，向服务器提交请求的方式（get、post），会覆盖form元素的method属性。
• formnovalidate：当type="submit"时，定义该按钮提交的内容在客户端浏览器不必验证，覆盖form元素的novalidate属性。
• formtarget：当type="submit"时，定义表单返回的内容在什么位置显示，会覆盖form元素的target属性。
• name：定义按钮名称。
• type：按钮类型，取值为button/reset/submit。
• value：按钮的提交值，因为有的浏览器使用<button></button>标签之间的值，有的使用button元素的value值，所以最好定义成一致的值。

表单输出

output标签用于展示输出结果，属性列表如下：

• for：输出与页面中哪个元素有关，填写元素的id，如果id有多个，使用空格分隔。
• form：输出属于哪个表单，填写表单的id，如果有多个，使用空格分隔。
• name：输出对象的名称。

比如：

效果如下：

HTML框架

iframe标签定义内联框架，属性列表如下：

• height：框架的高度，单位为像素。
• width：框架的宽度，单位为像素。
• sandbox：沙盒，对框架中的内容增加限制，比如（如果是限制的组合，需要用空格分隔）：
  
  • ""：开启所有限制（不允许提交表单、不允许运行脚本、不允许超链接（除了target="_self"的以外））。
  • allow-forms：允许表单提交。
  • allow-scripts：允许运行脚本。
  • allow-top-navigation：允许超链接加载内容到*浏览视窗。
  • allow-same-origin：允许同域请求。
• seamless：框架没有边框和滚动条，看起来像是原网页的一部分。
• src：框架中显示网页的URL。
• srcdoc：规定框架中的页面的HTML代码。

通过HMTL框架在同一个浏览器窗口中显示不止一个页面，比如：

显示效果如下：

有一种应用场景是，在框架外部有一个超链接，点击之后希望将超链接对应的内容更新到iframe中去，这时需要在iframe中定义一个name，然后在超链接的定义中，target指向这个name:

开始访问页面时效果如下：

点击超链接后效果如下：

HTML颜色

RGB（Red，Green，Blue），由三个十六进制数字表示，#RRGGBB，可以有256*256*256种颜色表示。

HTML脚本

<script>标签可以用来添加客户端脚本，如javascript，比如：

<noscript></noscript>标签定义浏览器不支持脚本时的行为，比如：

如果浏览器禁用了Javascript，显示效果如下：

HTML字符实体

某些符号不能直接在HTML代码中出现，比如大于号或小于号，浏览器会认为他们是HTML标签，使用字符实体可以解决这个问题。比如：&entity_name;或&#entity_number;。使用entity name会比较方便，但是可能有的浏览器不支持某些实体名，不过所有浏览器对entity number的支持很完善。<表示<，>表示>。

HTML与CSS样式

• 内部样式
  在HTML<head>中添加样式信息：

<style type="text/css">
p {color: red}
sub,sup {color: blue}
</style>

• 内联样式
  <a href="mailto:[e-mail]" style="text-decoration:none">写信给mars</a>
• 外部样式
  <link rel="stylesheet" type="text/css" href="sample.css" />

更多控制外观的选项，比如：
<body style="background-color:PowderBlue">：设置背景颜色。
<h1 style="font-family:arial;text-align:center">：设置字体、对齐方式。
<p style="font-family:verdana;color:red;font-size:30px">：设置字体、颜色、文字大小。

如果觉得我的文章对您有帮助，欢迎关注我(CSDN:Mars Loo的博客)或者为这篇文章点赞，谢谢！