行级标签
- 行级标签,按行逐一显示
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>
- 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://1761713585@qq.com">给1761713585@qq.com发邮件</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:用来指定数据传递到服务端的基本方法
- get:传递的数据会拼接到url后面
优点:简单,快速
缺点:暴露敏感信息,数据传输量有限 - post:传递的数据会隐藏起来,放在请求体。
优点:数据传输量大,信息保密性好
缺点:相比get请求,速度慢一些
- get:传递的数据会拼接到url后面
常用表单控件
- 文本框
<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