HTML快速入门(二)

一、列表

什么是列表
  按照一定的结构化方式显示数据，默认情况，是按照从上到下的方式来显示数据
列表的组成
  主要由列表类型和别表项来组成
语法
1.有序列表
标记：

<ol></ol>

列表项：

<li></li>

ex：

	<ol>
		<li></li>
		<li></li>
		....
	</ol>

属性：

type
作用：列表项前的标识
取值：
1数字，默认值
a小写字母
A大写字母
i小写罗马数字
I大写罗马数字

start
指定列表项从第几个字符开始显示

ex：

1.
2.
3.

取值+start=“25”(从25开始)

25.
26.
27.

2.无序列表
标记：

<ul></ul>

列表项：

<li></li>

属性：

type
disc： 实心圆(默认值)
circle： 空心圆
square： 实心方块
none： 没有(空)
3.列表嵌套
  通过列表嵌套，可以实现多层列表被嵌套的内容，必须放在li中
4.定义列表
  定义列表用于给出一类事物的定义情形(解释)

ex：
掩耳盗铃
    掩耳盗铃，汉语成语，读音为yǎn ěr dào líng。原为掩耳盗钟。释义：自己把自己的耳朵捂住偷铃铛，以为自己听不见，别人也不会听见，比喻自己欺骗自己。
语法

<dl></dl>：定义一个定义列表
<dt></dt>：定义列表中要解释的名词或术语
<dd></dd>：定义列表中对名词或术语的解释

3.使用场合
  图文混排时
结构标记
  用于表示页面中的布局，目的是为了提升标记语义化

二、结构标记

元素：<header>
语法：

<header></header>

作用：
定义文档的页眉
  用于取代

元素<nav>
语法

<nav></nav>

作用
  用于表示页面中的导航部分
元素<section>
语法：

<section></section>

作用
  用于表示页面中的主体部分
元素<article>
语法：

<article></article>

作用
  用于表示独立于文档的其他部分的内容
  比如：论坛中的帖子，新闻类王赞中具体一条新闻，博客或微博的条目，音视频…
元素<footer>
语法：

<footer></footer>

作用
  用于表示网页底部信息
元素<aside>
语法

<aside></aside>

作用：
  表示网页内容中的边栏信息

三、表单

表单作用
  用于显示、收集用户信息，并将信息提交给服务器
表单的组成：
  表单元素：负责将用户数据提交给服务器
  .表单空间：负责接收用户的数据(与用户进行数据交互)
表单元素
标记

<form></form>

属性：
action
  定义表单被提交时的动作，主要就是服务器上处理数据的应用程序URL
  默认值是提交给本页
method(默认值：get)
  指定表单数据提交的方式
  取值：
   get
   向服务器端要数据时的使用
   特点：
    显示提交：
     用户数据是可以显示在地址栏上的
     提交的数据有长度限制：
           2KB(每个浏览器都不一样)
   post
   向服务器传递数据时使用
   特点：
    隐式提交：
      所提交的数据是看不见的 – 安全性较高
      无数据大小限制
   enctype
   表单数据进行编码的方式
    取值：
       application/x-www-form-urlencoded(默认值)
       multipart/form-data
        使用场合：上传文件时使用
       text/plain
表单控件
作用：
  提供多种类型的表单空间，并且具备可视化的外观，可以接收用户的数据
表单控件分类
  input组元素，textarea,选项框(select和option),其他元素
  input元素
   语法：

<input>或<input/>

   属性：
     type
      根据type值，创建各种类型的输入字段，如文本框，密码框，单选按钮复选框等
    value
      值，要提交给服务器的值
    name
      控件的名称，服务器端使用，没有名字，无法提交
     disabled
      禁用控件，该属性无值，只要出现在控件中就表示禁用
        <input disabled>
分类
  文本框与密码框
   文本框：type=“text”
   密码框：type=“password”

属性：
maxlength
  限制输入的字符数
readonly
  只读，只能看不能改
name
  以控件的缩写+功能名称(首字母大写)组成
  文本框和密码框的缩写：txt
ex：
  用户名称
   ：txtUsername
  用户密码
   ：txtNickname
  value
   文本框默认值


分类：
  文本框与密码框
  单选按钮和复选框
    单选按钮：type=“radio”
    复选框：type=“checkbox”
属性：
name
  名称以及分组，一组单选按钮或复选框的话，名称必须一致
  单选按钮：rdo
  复选框：chk
value **
  值
checked
  设置默认被选中


按钮：
  提交按钮：type=“submit”
    负责提交数据到服务器
  重置按钮：type=“reset”
    将表单元素恢复到默认值
  普通按钮：type=“button”
    执行客服端脚本(Js)
属性：
name
  同一缩写：btn
value
  按钮上的显示文本
隐藏域和文件选择框
  隐藏域
   不想给用户看，但是要提交给服务器的数据

<input type="hidden">

属性：
name ：名称，缩写txt
value ：值


文件选择框
  提交(上传)文件时使用
  <input type=“file”>
属性：
name
  缩写 :txt
注意：
  保证form的method属性必须为post
  保证form的enctype属性必须为multipart/form-data
textarea元素
  多行文本框
语法：

<textarea>默认文本</textarea>

属性
name
  控件的名称，缩写 txt
readonly
  只读
cols 50个字符，汉字折半
  指定文本域的列数
  变相设置宽度
rows
  指定文本域的行数
  变相设置高度
选项框
  两种：
    下拉选项框
    滚动列表
语法

<select></select>

功能：
创建选项框(滚动列表)
属性：
name
  缩写：sel
size
  默认显示的选项数量，如果取值大于1的话，则为滚动列表
multiple
  设置多选

<option></option>

选项框中的选项
属性：
value
  值
selected
  预选中
其他元素
  label 元素
   作用：
     关联 文本 与表单控件。
  语法：

<label>文本</label>

属性：
  for ：表示与该元素相关联的表单控件的ID值
fieldset 元素
  作用：
   为控件分组
  语法：

<fieldset></fieldset>
为控件分组

 <legend></legend>
 为分组指定标题

button 元素
语法：

<button>内容</button>

注意：
<button>元素放在<form>中，就是提交按钮,放在<form>之外，就是普通按钮(IE除外)

四、其他标记

浮动框架
作用：
  可以在一个浏览器窗口中同时显示多个页面文档
语法：

<iframe>内容</iframe>

注意：
  必须是成对标记
  当浏览器不支持元素时，将显示"内容"作为该处的 内容
属性
src
  浮动框架中的网页URL
width
height
frameborder
  浮动框架的边框，设置为0，则取消边框
摘要与细节
作用：
  允许将页面某部分内容进行展开或收缩
语法：

<details>
	<summary>标题</summary>
</details>

度量元素
作用：
  用于显示静态比例的信息
语法：

<meter>文本</meter>

属性：
min
  度量范围的最小值，默认为0
max
  度量范围的最大值，默认为1
value
  当前显示的度量值，默认为0
时间元素
作用：
  用于关联时间的不同表现形式
语法：

<time>时间文本</time>

属性：
datetime
    关联的日期时间，可以只关联日期，也可以只关联时间。
    如果同时关联日期与时间的话，日期与时间之间用"T"来分割。
高亮文本显示
作用：
  将页面中的某部分文本，以特殊的背景颜色显示出来
语法：

<mark>高亮文本显示</mark>