HTML块级元素

HTML块级元素

1.h1 - h6

• 标题使用< h1 > 至 < h6 >标签进行定义.具有align属性,属性值可以使left.center,right

•      <h1 align="right">一级标题</h1>
       <h2>二级标题</h2>
       <h3>三级标题</h3>
       <h4>四级标题</h4>
       <h5>五级标题</h5>
       <h6>六级标题</h6>

2.列表

• 列表分为三种,有序列表ol,无序列表和定义类表dl,其中ol和ul必须结合li标签使用,而dl则必须结合dt,dd使用

• ol ordered list 有序列表

  • li list item，列表项

• ul unordered list 无序列表

  • li list item，列表项

• dl definition list 定义列表

• • <dt>：definition title 列表的标题，这个标签是必须的

  • <dd>：definition description 列表的列表项，如果不需要它，可以不加

• li不能单独存在,必须包裹在ul或者dl中

3.排版标签

• 段落标签<p>

• 属性

  • align = "属性值" : 对齐方式包括left,right,center

  • HTMl是分等级的,html将所有的标签分为两种

    • 文本级标签,p,span,a,b,i,u,em.文本级标签里只能放文字,图片,表单元素

    • 容器级标签: div,h系列,li,dt,dd,容器级标签里可以放任何东西

• div

  • div和span是非常重要的标签1,div的语义是division"分割"

  • div : 把标签中的内容作为一个块儿来对待,必须单独占一行

  • div标签的属性:

    • align = "属性值" ; 设置块儿的位置,属性值可以选择 ; left,right,center

  • 单独在网页中插入这个元素,不会对页面产生影响,这两个元素是撞门为定义css样式而生的,或者说,DIV+CSS可以实现各种样式,

  • div+css,div标签负责布局,负责结构,负责分块,css负责样式

4.hr

• 水平分割线,可以在视觉上将文档分隔成各个部分

5.内容居中标签< center >

• 此时center代表的是一个标签,不是一个属性值,只要是在这个标签里面内容,都会居于浏览器的中间

• 在H5中不建议使用center标签

6.预定义(预格式化)标签< pre >

• 含义:将保留其中所有的空白字符(空格,换行符),原封不动的输出结果(高速浏览器不要忽略空格和空行)

• 说明: 真正排网页的过程中,< pre > 标签基本不用,但在PHP中用于打印一个数组时使用

7.table

• 一个 表格标签用< table >表示,由< table > 由表头< thead >和表格内容< tbody >组成的.其中每一行是< tr >,每一格是由, < td >组成的

• 表格属性

  • boder:边框<像素为单位

  • style = "boder-collapse:collapse:" : 单元格的线和表格边框线合并

  • width : 宽度,像素为单位

  • height : 高度,像素为单位

  • bordercolor : 表格的边框颜色

  • align:表格的水平对齐方式,属性值可以填 ;left right center

    • 这里的是水平对齐方式,不是表格内容的对齐方式,要想设置表格内容对齐方式,需要在< td >中添加

  • cellpadding : 单元格内容到边的距离,像素为单位,默认情况下,文字是紧挨着左边那条线的,即默认情况下的值为0,默认是以到四边的左边那条线,如果设置属性dir = "rtl",那么就是指内容到右边的那条线的距离

  • cellspacing : 单元格之间的距离(外边框),

  • bgcolor = "#99ccff" : 表格的背景颜色

  • backgrand = "路径src /" : 背景图片

    • 图片的优先级大于颜色的优先级

  8.table行

  • dir ; 公有属性,设置这一行单元格的排列方式,可以取值,ltr : 从左到右(left 头right),rtl反之

  • bgcolor : 这一行单元格的背景色,没有backgrand属性,要想设置只能通过css实现

  • height : 一行的高度

  • align = "center" : 一行的内容水平居中显示,取值 : left ,center ,right

  • valign ="center" ;一行的内容垂直居中,取值 : top,middle,botto

  9.table 单元格

  • 属性

    • align ; 内容的横向对齐方式,left right center

    • valign : 纵向,top,middle bottom

    • width 绝对值或者相对值(%)

    • height : 单元格高低

    • bgcolor : 单元格背景色

    • < th >:加粗的单元格,相当于< td > + < b >

      • 属性通< td > 标签

    • < caption > 表格的标题,使用时和tr标签并列

    • < thead > ,< thead >,< tfoot >,决定表格的显示顺序,默认按照代码从上到下显示

      • 在表格内容非常大的时候,设置这三个属性属性可以变获取边显示,如果不写,则必须等表格的内容全部从服务器获取完成才能显示

  • 操作

    • colspan : 横向合并,colspan = "2"表示在当前单元格在水平方向上要占据两个单元的位置

    • rowspan ; 纵向合并,例如rowspan = "2",表示在当前单元格在垂直方向上要占据两个单元格的位置

8.表单

• 表单功能

  • 表单用于向服务器传输数据,从而实现用户与web服务器的交互

  • 表单能够包含input系列标签,比如文本字段,复选框,单选框,提交按钮等等

  • 表单还能把汗textrea ,select,fledset,label标签

• 表单属性

  • 属性	描述
    accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
    action	规定向何处提交表单的地址（URL）（提交页面）。
    autocomplete	规定浏览器应该自动完成表单（默认：开启）。
    enctype	规定被提交数据的编码（默认：url-encoded）。
    method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
    name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
    novalidate	规定浏览器不验证表单。
    target	规定 action 属性中地址的目标（默认：_self）。

• 表单元素

  • 基本概念

    • html表单是html元素中较为复杂的部分,表单往往和脚本,动态页面,数据处理等功能相结合

    • 一般用收集用户的输入信息

    • 表单工作原理:

      • 访问者在浏览有表单的网页时,可填写必须的信息,然后按某个按钮提交,这些信息通过intert传送到服务器上

      • 服务器专门的程序对这些数据进行处理,有错误信息会返回错误信息,并要求纠正错误,当数据完整无误后,服务器反馈一个输入完成的信息

• 属性

  • name:表单的名称,用于js来操作或控制表单时使用,就想分组一样,可以重复

  • id: 表单的名称,用于js来操作或控制表单时使用,html中的唯一标识,不可重复

  • acton ; 指定表单数据的处理程序,一般是PHP,如action = "login.php”

  • method: 表单数据的提交方式,一般取值get(默认)和post

    • get 和 post 的区别

      • get将表单数据以"name=value"的形式追加到action指定的处理程序后面,两者之间用"?"隔开,每一个表单的"name=value"间用"&"隔开

        • 特点 : 只适合提交少量的信息,并不天安全(不要提交敏感数据),提交的类型只限于

      • post将表单数据直接发送(隐藏)到action指定的处理程序,post发送的数据不可见,action指定的处理程序可以获取到表单数据

        • 特点 : 可以提交海量信息,相对来说比较安全,提交的数据格式是多样的(word,Excel,rar,img等)

  • Enctype

    • 表单数据的编码方式(加密方式)取值可以是 : application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

    • application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

  • < inpit > 输入标签(文本框)(内联标签)

    • type属性值	表现形式	对应代码
      text	单行输入文本	<input type=text" />
      password	密码输入框（不显示明文）	<input type="password" />
      date	日期输入框	<input type="date" />
      checkbox	复选框	<input type="checkbox" checked="checked" name='x' />
      radio	单选框	<input type="radio" name='x' />
      submit	提交按钮	<input type="submit" value="提交" /> #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
      reset	重置按钮	<input type="reset" value="重置" /> #页面不会刷新，将所有输入的内容清空
      button	普通按钮	<input type="button" value="普通按钮" />
      hidden	隐藏输入框	<input type="hidden" />
      file	文本选择框	<input type="file" />

    • type = "属性值",文本类型,属性值可以是:

      • text(默认)

      • password ; 密码类型

      • radio: 单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想要互斥,必须要有相同的name属性,

      • checkbox : 多选按钮,名字相同的按钮作为一组选择

      • checked ; 将单选或者多选按钮默认处于选中状态

      • hidden : 隐藏框,在表单中包含不希望用户看见的信息

      • button ; 普通的按钮,结合js代码进行使用

      • submit ; 提交按钮,将当前表单数据给服务器或者其他程序进行处理

      • reset : 重置按钮,清空当前表单的内容,并设置为最初的默认值

      • image : 图片按钮,和提交按钮一样的功能,不过图片按钮可以显示图片

      • file: 文本选择框

        • 可配合js来实现验证,对上传的文件进行安全的检查,一是扩展名的检查,二是文件数据的检查

    • value = "内容" 文本框中默认的内容

    • size = "50" : 表示文本框内可以显示五十个字符,一个英文或者一个中文都算一个字符

    • readonly : 文本框只读,不能编辑,光标进不去,属性值可以不写

  • < select > :下拉列表标签(内联标签)

    • < select > 标签里的每一项都用< option > 表示,select 就是选择,option" 选项"

    • select 标签和ul,ol,dl一样,都是组标签

    • 属性

      • multiple : 可以对下拉列表中的选项进行多选,没有属性值,ctrl+鼠标点选

      • size = "3",如果属性值大于1,则列表为滚动视图,默认属性值为1,即下拉列表

  • < option >标签的属性

    • selected : 预选中,没有属性值

  • < textarea >标签:多行文本输入框(内联标签)

    • text就是文本,area就是区域

    • 属性

      • value : 提交给服务器的值

      • rows = "4" :指定文本区域的行数

      • cols = "20" :制定文本区域的列数

      • readonly: 只读

  • < label> 标签(内联标签)

    • 单选复选框只有点击小圆圈才能选中,可以用label解决,

      •  input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
         <input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

      •