HTML基础知识(3)

来源：互联网发布：java io流读取视频编辑：程序博客网时间：2024/06/05 16:48

1.列表：由列表类型和列表项组成

列表类型：有序列表<ol>和无序列表<ul>

列表项：用于指示列表的具体内容<li>,只要有<li>出现就有一个项目编号

2.有序列表：（在项目中用的比较少）

...

</ol>

注：其中type属性值可以为：1,A,a,i,I(其中1为默认值)

3.无序列表：（在项目中用的比较多）

...

</ul>

注：其中type属性值可以为可以为：disc（disk）实心圆（默认值）,circle空心圆,square实心矩形。当出现子项目时，type值默认会发生变化.在项目中多用于制作一组多个并列关系的内容，例如菜单、导航

4.定义列表<dl>:相当于名词解释、词典

<dl>--标记一个定义列表

<dt>...</dt>--标记定义了一个定义列表中的术语

<dd>...</dd>--标记对定义列表中的术语进行定义

</dl>

注：一组定义列表<dl>可以有多组定义内容，一个<dt>可以有多个<dd>进行定义。定义列表由于具有层级关系，在项目中多用于制作有一定一组层级关系的内容，或用于制作图片下方有一行或两行文字描述类似的内容。只要有层级关系的内容都可以用dl来做。而并列关系的内容用ul来做。

5.列表嵌套：如果将嵌套关系的列表写在li里，会在嵌套列表最前面出现项目编号，所以嵌套列表不要写在li里

6.表单：显示收集信息，并将信息提交到服务器

表单组成：1.实现数据交互的可见的界面元素，比如文本框和按钮。

2.提交后的表单处理

界面元素：1.使用<form>元素创建表单,在form里面添加name才能分清具体提交的是哪个表单

2.在form中添加其他表单可以包含的控件元素<input />(单标签,默认为空的情况下就是一个输入的文本框)

<input />的type类型：

文本框：<input type="text"/>

密码：<input type="password"/>

按钮：<input type="submit" value="按钮名称"/>（如果不定义value，该按钮上的文字在不同浏览器中显示不同）

name属性：用于确保填好的信息能被提交到服务器，否则无法提交，name属性值不要用中文

<input />其他属性：maxlength（最大字符数，一个汉字是两个字符），readonly（只读），disable（禁用，会变灰，和readonly不同的是它可以用在按钮中），size（定义文本框的长度，比较少用，因为IE的一些版本中会显示长度有差异），required(必须填写字段，在IE8以下版本中有兼容性问题)

7. 单选框：<input type="radio" name="组名" value=“ 值名称”>

复选框：<input type="checkbox" name="组名" value=“ 值名称”>

注：a.一组单选框或复选框的组名必须相同

b. value值必须命名，否则无法将输入信息上传到服务器

c. checked:设置默认被选中

ｄ.单选按钮和多选按钮都可以有多个checked属性。但是单选按钮中的checked属性，如果同时在一组按钮中加了两个或两个以上checked，那么最后的默认被选中的是最后一个。

8. 文件域：<input type="file" name="文件名">

     重置：<input type="reset" value="名称">
  <input type="button" value="名称">这个按钮点击后什么也不做，相关于一个空的按钮，但是这个按钮可以搭配JavaScript来做，从而实现网页界面效果，比如打印，关闭，弹出页面对话等
  隐藏域：<input type="hidden" value="名称">，希望有些东西能提交上去，但是又不希望用户看到，就可以用隐藏域
    注：name属性是为了提交数据，对于必须要提交数据的按钮如果不用name是无法提交的，但是像reset，submit这样的不需要提交数据的可以不用name的，它们只是在页面中实现某种功能.
    value对应的是按钮上的字。

9.label元素：<label for="id名称">文本</label>

主要属性：for(表示与该属性相联系的控件的ID值，因此需要相关联的按钮需要赋值一个ID)

功能：实现将本文与控件联系在一起，点击文本就相当于是点击控件

10.选项框：两种，下拉选项框和滚动列表
    下拉菜单<select>创建选项框，其属性有：name（选项框命名）,size（大于1，则为滚动列表）,multiple(设置多选,如果在下拉选项框中加上该属性就会变成滚动列表)
    <option>选项，其属性有：value（选项的值,一般需要定义这个值，如果不定义value值，就会把后面的文本字段给提交上去），selected（预选中，就是默认选中项）
    下拉选项框，例：
      <select name="xueli">
        <option>请选择您的学历</option>
        <option value="gaozhong">高中</option>
        <option value="daxue">大学</option>
        <option value="boshi" selected>博士</option>
      </select>
      滚动列表，例：
        <select name="xueli" size="3" multiple>
        <option>请选择您的学历</option>
        <option value="gaozhong">高中</option>
        <option value="daxue">大学</option>
        <option value="boshi" selected>博士</option>
      </select>

11.多行文本框<textarea>文本</textarea>，可以显示多行文本，其主要属性有：name,cols(指定文本区域的列数),rows（指定文本区域的行数）,readonly（只读）

注意<textarea>和</textarea>中间不要换行，否则会出现空格

name最好不要是中文或者纯数字

12.为控件分组：<fieldset>(为控件分组)，<legend>（为分组指定一个标题）

如：<fieldset width="400px">

地址：<input type="text" /><br/>

邮编：<input type="text" />

</fieldset>

13.<form>的其他属性：method="get（信息会显示在地址栏。不安全）/post(将表单中的信息打包，能包含更多信息，安全性比较高，不会显示出来)"，action="服务器端处理该表单程序的路径"

14. <iframe>元素，是一个浮动框架，可以在网页中显示多个页面文档

主要属性：src(浮动框架中网页的URL),height,width

其他属性：frameborder：定义iframe的边框是否显示，其指只有0,1两个

scrolling：值为“yes”或者“no”，便是是否显示滚动条

name:可以指定链接在浮动框架中打开

<a href="1.html" target="window">练习一：项目列表练习</a>

15.摘要与细节<details><summary>,目前只能在谷歌浏览器中显示，其他浏览器都不兼容。<summary>用来包含<details>元素的标题，是在<details>标签里面，作为<details>的第一个子元素。二者必须配合使用。能实现折叠和展开的效果，例：

<div>

发票抬头：<input /><br/>

发票内容：<input /><br/>

</div>

</details>

16.<meter>元素：显示一个元素在页面中显示的比例，常用于静态的比例显示，搭配js可以做动态显示。其属性有：min（范围最小值，默认是0）,max(最大范围，默认为1),value（度量值，默认是0）,titile（属性设置后当鼠标放在上面后会显示文字提示）

例：<meter min="0" max="100" value="20" title="20%"></meter>

17.<time>具体时间</time>属性，语义化的，，也可以在<time>中进行定义，如<time datetime="2015-12-12T18:00" pubtime="2010-12-12">第一场雪</time>,其中datetime是规定的日期或时间，最后更新时间，日期和时间中间用T隔开，pubtime则是第一次更新的时间。

18. <mark>被标记的文字</mark>，用于标记需要特别显示的文字，被该元素包围的文本会显示额外的背景色。

19.总结：

     表单：
    form:表单体
      属性：name 定义表单的名称
               method 定义表单的提交方式，get/post
               action 提交动作，一般是处理表单数据的服务器端程序的路径

enctype:定义表单的编码方式，如果表单内容为纯文本，则无需定义，但是要上传附件就必须定义

input：type定义input的功能，值有以下几种：

                  text 普通文本框
                 password 密码框
                 radio 单选框
                 checkbox 复选框
                  submit 提交按钮

file 文本域

reset 重置按钮

button 普通按钮

hidden 隐藏域

input标签的其他属性：

                   name 没有name无法提交
                  value 初始值，默认值，按钮文字...
                  maxlength 文本框最大字符数
                  readonly  只读   disable禁用
                  checked选择框默认选中状态
                  size 文本框宽度，单位为字符
     select 选择菜单
            用option定义菜单项，selected表示默认选中
            size 行数，可为多行的菜单
            multiple 多选，仅多行菜单使用
            name

       Textarea 文本域，多行文本框
            默认的填写在文本域中的文字放在一对<textarea>标记中间
            cols  列数，即高度
            rows  行数，即宽度
            name
     label 文字标签，可用for属性与checkbox的ID进行绑定，单击label相当于单击checkbox

表单元素分组：fieldset，legend定义组标题

其他常用标记：

iframe 浮动框架

属性：src（必备），width,height,frameborder(0/1),scrolling滚动条是否显示(yes/no),name（框架名，可以在链接的target框架中指定该名称，使链接在框架中打开）

details 详情与摘要

summary 定义摘要

详情中可以包含文字、图片

meter 度量衡，表示比例关系

min 范围最小值

max 范围最大值

value 当前值

time 定义时间，语义化标签

datetime: (date)T(time)

pubtime: 发布时间

mark 重点、标记

0 0