行级标签

行级标签

• 行级标签，按行逐一显示
  

span 范围
img 图片
a 超链接
label 标记（当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上）
em 强调 倾斜
i 倾斜
strong 强调 加粗
b 加粗
s 删除线
u 下划线
big 放大
small 缩小

范围标签 <span></span>

<p>    笔记本电脑<span style="font-size: 50px;color: red">1</span>元起</p>

笔记本电脑1元起

• span标签没有任何默认样式

规范：

• 标签名和属性名必须小写
• html标签必须关闭
• 属性值必须用用引号括起来
• 标签必须正确嵌套

超链接<a></a>

<a href="" target="" rel=""> xxx </a>

• 超链接分类
  
  • 页面间链接
  • 锚链接
  • 功能性链接

页面间链接

<!--外部页面跳转--><a href="https://www.baidu.com/" target="_blank">百度</a><!--本地页面链接--><a href="Demo13.html" target="_self">Demo13</a>

百度
Demo13

• href： 指定页面跳转的路径
• target： 页面打开的位置
  
  • _self： 当前页面打开
  • _blank： 在新页面打开

锚链接

<!--Demo15.html--><a href="#top"><button style="position: fixed;height:100px;width:100px;bottom: 30px;right: 30px">↑回顶部</button></a><div style="background-color: dodgerblue;text-align: center">    <a name="top">顶部</a><!--锚点--></div><div style="height: 2000px;background-color: beige"></div><div style="background-color: dodgerblue;text-align: center">    <a name="bottom">底部</a><!--锚点--></div>

<!--从外部跳转至Demo15.html的锚点--><a href="Demo15.html#bottom">Demo15底部</a>

功能性链接

<a href="tencent://message/?uin=1761713585">给QQ1761713585发信息</a><a href="mailto://[e-mail]">给[e-mail]发邮件</a>

图片标签 <img/>

<img src="" alt=""/>

• 属性
  
  • src 图片路径
  • alt 加载失败时的提示信息
  • width 宽度
  • height 高度
  • align 对齐方式
  • border 边框

表格标签 <table>

<table border="1">    <tr>        <th>标题1</th>        <th>标题2</th>        <th>标题3</th>    </tr>    <tr>        <td>手机充值</td>        <td>IP卡</td>        <td>网游</td>    </tr>    <tr>        <td>移动</td>        <td>联通</td>        <td>魔兽</td>    </tr></table>

标题1 标题2 标题3 手机充值 IP卡 网游 移动 联通 魔兽

• <table>标签属性
  

  border 规定表格边框的宽度
  cellspacing 规定单元格之间的空白
  cellpadding 规定单元边沿与其内容之间的空白
  width 规定表格的宽度
  height 规定表格的高度
  align 表格的对齐方式
  bgcolor 背景色
  background 背景图片
  bordercolor 边框颜色

• <tr><td>标签的属性

  width 行或单元格的宽度
  height 高度
  bgcolor 背景颜色
  align 内部内容的水平对齐方式
  valign 垂直方向的对齐方式
  nowrap 规定表格单元格中的内容不换行

• 行的对齐方式有：align和valign

  • align：left/center/right
  • valign：top/middle/bottom/baseline(与基线对齐)
• 表格的属性和单元格的属性相同的情况下，单元格属性优先（就近原则）

表格跨行跨列

<table border="1" width="200">    <tr>        <td colspan="3" align="center">学生成绩</td>    </tr>    <tr>        <td rowspan="2">张三</td>        <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>26</td>    </tr></table>

学生成绩 张三 语文 98 数学 95 李四 语文 88 数学 26

• colspan 横向跨列
• rowspan 纵向跨行

了解一下：
<caption></caption>
<tbody></tbody>
<thead></thead>
<tfoot></tfoot>
<colgrounp></colgrounp>

表单 <form>

<form action="" method="get/post"></form>

• action：表单提交的地址
• method:用来指定数据传递到服务端的基本方法
  
  1. get:传递的数据会拼接到url后面
     优点：简单，快速
     缺点：暴露敏感信息，数据传输量有限
  2. post：传递的数据会隐藏起来，放在请求体。
     优点：数据传输量大，信息保密性好
     缺点：相比get请求，速度慢一些

常用表单控件

• 文本框

<input type="text">

• 密码框

<input type="password">

• 单选按钮

<input type="radio" name="r1" value="1">男<input type="radio" name="r1" value="2">女

• 多选按钮

<input type="checkbox">

• 上传文件

<input type="file">

• 提交按钮

<input type="submit>

• 按钮

<input type="button">

• 重置按钮

<input type="reset">

• 图片提交按钮

<input type="image">

• 隐藏域

<input type="hidden">

• 文本域

<textarea cols="30" rows="10">  <textarea>

• 下拉列表

<select>    <option>选项1</option>    <option>选项2</option>    <option>选项3</option></select>

表单外框及标题

• 外框 fieldset
• 标题 legend

元素顺序

• tabindex

H5中的新表单控件

数字、日期、邮箱、电话、url的输入框以及滑动块等

H5中的新属性

• autocomplete :自动完成功能（自动补全），属性值：on 开启，off 关闭
• autofocus :自动获得焦点
• form :所属表单
• required :必填
• pattern :验证input的模式
• placeholder :提示

form属性

<form id="form1" action="a.html" method="get">    ……</form><input type="text" form="form1" name="t1">

• form 属性规定输入域所属的一个或多个表单
• form 属性适用于所有 标签的类型
• form 属性必须引用所属表单的 id