图片标签
属性 |
说明 |
src |
图像的路径 |
alt |
图像不能显示时的替换文字 |
title |
鼠标悬停时显示的内容 |
border |
设置图像边框的宽度 |
align |
对齐方式 |
相对路径
相对路径分类 |
符号 |
说明 |
同一级路径 |
|
图像文件位于HTML文件同一级 <img src="baidu.gif"/> |
下一级路径 |
/ |
图像文件位于HTML文件下一级 <img src="images/baidu.gif"/> |
上一级路径 |
…/ |
图像文件位于HTML文件上一级 <img src="../baidu.gif"/> |
超链接
属性 |
作用 |
target |
用于指定链接页面的打开方式,-self是默认值,_blank为在新窗口的打开方式 |
锚点链接
通过给内容中特定位置加id值来标记位置,然后用<a href="#id名">
来实现位置的跳转
表格的基本语法
属性 |
说明 |
<table> </table> |
定义表格的标签 |
<tr> </tr> |
定义表格的行,嵌套在table标签中 |
<td> </td> |
定义表格的单元格,嵌套在tr标签中 |
<th> </th> |
定义表头部分,可以使单元格里的内容加粗居中 |
cellspacing |
单元格之间的空白位置的大小,就是表格线的宽度 |
cellpadding |
单元边沿与其内容之间的空白,就是内容与表格线的距离 |
<table border="1" cellspacing="0" cellpadding="4">
<tr> <th>球员</th> <th>薪资</th> <th>年龄</th> </tr>
<tr> <td>salah</td> <td>2亿欧元</td> <td>28岁</td> </tr>
<tr> <td>salah</td> <td>2亿欧元</td> <td>28岁</td> </tr>
</table>
合并单元格
- 跨行合并:
rowspan="合并单元格的个数"
- 跨列合并:
colspan="合并单元格的个数"
三部曲
- 先确定跨行还是跨列
- 把合并代码写在目标单元格内(跨行就写在最上侧的单元格,跨列就写在最左侧的单元格)
- 删除多余的单元格
列表
属性 |
说明 |
ul元素 |
无序列表,没有层级,都是并列的,列表项前会有点 |
li |
嵌套在ul,ol里面的列表项 |
ol元素 |
有序列表,会有顺序,1,2,3, |
start |
加在ol里面,可以设置编号的起始值<ol start="2"> |
dl元素 |
自定义列表,列表项前什么都没有,dt,dd |
表单
form:用来定义表单域,就是创建表单
<form action="网址" method="提交方式" name ="表单名称">
input 标签中的type属性
- 单行文本输入框
<input type="text"/>
- 密码输入框
<input type="password"/>
,输入的内容用圆点显示
- 单选按钮
<input type="radio"/>,
几个选项添加相同name值后,可以单选(小圆圈)
- 复选框
<input type="checkbox"/>
常用于多选(小正方形)
- 普通按钮
<input type="button"/>
- 提交按钮
<input type="submit"/>
- 重置按钮
<input type="reset"/>
input 中的其他标签
属性 |
说明 |
value |
规定input控件的默认文本值 |
maxlength |
规定输入字段中的最大长度 |
checked |
首次加载就被选中,就是默认选中 |
textarea元素:创建多行文本框
<textarea cols="每行中的字符数" rows="显示的行数"></textarea>
select元素:创建下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<opyion>选项3</opyion>
...
</select>
在option中可以添加selected="selected"来设置默认选项
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
评论(0)