HTML列表、表格和表单

//无序列表
<ul>    //声明无序列表  
      <li>范冰冰演藏族女孩</li>
      <li>撞死两个人后自拍</li>
      <li>诗隆甜蜜出游</li>
      <li>一线城市楼市退烧</li>  //<li> 声明列表项
 </ul>
//有序列表
<ol>  //声明有序列表 
  <li>范冰冰演藏族女孩</li>
  <li>撞死两个人后自拍</li>
  <li>诗隆甜蜜出游</li>
  <li>一线城市楼市退烧</li>
</ol>
//定义列表
<dl> //声明定义列表  
    <dt>水果</dt> //定义列表项定义列表项
    <dd>苹果</dd>//定义内容
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>
//定义列表的特性：没有顺序，每个<dt>标签、<dd>标签独占一行，默认没有标记没有顺序

表格

html 复制代码

// 语法
<table border="1"> //border="1"表示有边框 默认为0
        <tr>
             <td>11</td>
             <td>12</td>
        </tr>
        <tr>
             <td>21</td>
             <td>22</td>
        </tr>
</table>

//表格的跨列
<table border="1">
        <tr>
            <td colspan="2">学生成绩</td>  //colspan表示跨列
        </tr>
        <tr>
            <td>语文</td>
            <td>98</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>95</td>
        </tr>
</table>

//表格的跨行
<table border="1">
        <tr>
             <td rowspan="2">张三</td> //rowspan表示跨行
             <td>语文</td>
             <td>98</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>95</td>
        </tr>
        <tr>
            <td rowspan="2">李四</td>
            <td>语文</td>
            <td>88</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>91</td>
        </tr>
</table>

媒体元素

html 复制代码

//视频元素
<video src="视频路径"  controls></video>
//音乐元素
<audio src="音频路径" controls></audio >

src：指定要播放的音频文件的路径
controls：提供播放、暂停和音量的控件

页面布局

html 复制代码

 <header><h2>网页头部</h2> </header>
 <section><h2>网页主体部分</h2></section>
 <footer><h2>网页底部</h2></footer>

表单语法

html 复制代码

<form  method="post" action="result.html"> 
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填"/> 
   </p>
</form>
method:规定如何发送表单数据  常用值：get  | post
action:表示向何处发送表单数据
                                              
 //表单元素格式语法
<input  type="text"  name="fname" value="text"/>
  type ：元素类型
  name ：元素名称
  value：元素的值

表单元素

文本框

<input type="text" name="userName" value="用户名" size="30" maxlength="20" />

密码框

单选按钮

html 复制代码

//name="gen" 表明这两个单选按钮属于同一组
//checked:当 checked 属性被添加到某个单选按钮时，这个按钮在页面加载时就会被选中。

复选框

列表框

按钮

多行文本域

邮箱

//会自动验证Email地址格式是否正确

网址

//会自动验证URL地址格式是否正确

表单的高级应用

隐藏域

只读和禁用

表单元素的标注

表单初级验证的方法

文本提示 placeholder

html 复制代码

//input类型的文本框提供一种提示（hint）
//可以描述文本框期待用户输入何种内容
//提示语默认显示，当文本框中输入内容时提示语消失
//适合于input标签：text、search、url、email和password等类型

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
  placeholder:文本框输入内容提示

必填项required

html 复制代码

//规定文本框填写内容不能为空，否则不允许用户提交表单
//适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" name="username"  required/>
required:表示此项必填

验证规则 pattern

html 复制代码

//用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
例如：昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"
     密码：pattern="^[\dA-Za-z]{6,16}$"
     手机号码：pattern="1[3578]\d{9}
     年龄：pattern="\d|[1-9]\d|1[0-2]\d"