好久没有学习前端了,从今天开始打算每天记录自己的学习复习记录。
HTML标签总结
常用标签
<!DOCTYPE html> 告诉浏览器按照html5版本来加载页面
<html lang="en"> 告诉浏览器html代码中的代码是英文的
<head>
<meta charset="UTF-8"> 编码方式 告诉浏览器按照什么方式解码。utf-8万国码
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 下面两个是移动端
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
</body>
</html>
标签名 | 含义 |
---|---|
center | 居中 |
strong/b | 加粗 |
em/i | 倾斜 |
del/s | 删除 |
ins/u | 下划线 |
div | 一个大盒子,独占一行 |
span | div的小盒子 |
图像标签
图像标签 | 说明 |
---|---|
img | 所有属性都要在img中 |
src | 图片路径(相对/绝对) |
alt | 替换文本 |
title | 提示文本 |
width | 图像宽度,等比例缩放 |
height | 图像高度,默认等比例缩放 |
border | 填写数值,表格边框宽度(一般css设置) |
相对路径和绝对路径
相对路径
同一级src = “baodu.gif”
下一级:文件夹名/
上一级:…/
绝对路径
绝对路径斜杠向右\ 相对路径向左
超链接标签
加到其他标签里面
<a href="http://www.qq.com" target="_blank">腾讯</a>
<a href="http://www.qq.com"><img src="../img/腾讯logo.jpeg"></a>
超链接标签 | href属性 | 说明 |
---|---|---|
外部链接 | target=“_blank” | 新窗口打开 |
内部链接 | target=“_self” | 当前窗口打开 |
空链接 | href=“#” | 占位作用 |
下载链接 | href=“…/xx.rar” | href中地址是.exe或者.rar |
网页元素链接 | href=网页元素链接 | 网页中各种元素(文字/图像/表格/音频)都可加链接 |
锚点链接 | href=“#名字” id=“名字” | 快速定位(返回顶部) |
表格标签
表格标签是用来展示数据的,不是用来布局页面的
表格结构标签
表格结构标签 | 说明 |
---|---|
table | 表格大标签 |
thead | 表头 |
tbody | 表身 |
tr | 一个tr是一行 |
th | 表头属性 |
td | 单元格内容 |
table表格大标签 一个tr占一行 tr-th 表头 tr-td 表格内容
表格属性标签
这些属性写到table标签中。实际开发中通过css设置
表格属性标签 | 说明 |
---|---|
align | 对齐方式 left/center/right |
border | 边框 " "/1 |
cellpadding | 单元边沿与内容之间空白 |
cellspacing | 单元格之间空白 |
width | 表格宽 像素值/百分比 |
合并单元格
合并单元格步骤:
1、确定合并方式(跨行/跨列)
2、找到目标单元格,要合并的数目
3、删除多余单元格
<table align="center" border="3" cellpadding="10" cellspacing="0">
<tr>
<th colspan="5">个人简历</th>
</tr>
<tr>
<td>姓名:</td>
<td></td>
<td>性别:</td>
<td></td>
<td rowspan="3">照片</td>
</tr>
<tr>
<td>出生年月:</td>
<td></td>
<td>民族:</td>
<td></td>
</tr>
<tr>
<td>政治面貌:</td>
<td></td>
<td>学历:</td>
<td></td>
</tr>
</table>
列表标签
表格是用来显示数据的,列表是用来布局页面的
列表整齐有序额,布局页面更加自由和方便
列表类型 | 标签 | 说明 |
---|---|---|
无序列表 | ul – li | ul中只能放li li中可以任何 |
有序列表 | ol – li | 前面有序号 |
自定义列表 | dl --dt --dd | dl中只能有dt和dd;dt和dd是并列关系 |
表单标签
表单:用于收集用户信息
表单的组成:表单域、表单控件(表单元素)、提示信息
1、input输入表单元素
type类型 | 说明 |
---|---|
text | 文本框 |
password | 密码框 用户看不见按输入的密码 |
radio | 单选框 checked="checked"默认勾选 设置name |
checkbox | 复选框 设置name checked |
submit | 提交 将表单数据发送到服务器 |
reset | 重置按钮 还原初始状态 |
button | 普通按钮 定义(验证码) |
file | 文件域 可上传文件 |
label标签——用于绑定一个表单元素 增加触发范围
<input type="radio" name="sex2" id="nan"> <label for="nan">男</label>
<input type="radio" name="sex2" id="nv"> <label for="nv">女</label>
2、select下拉表单元素
select - option
select=“selected”默认选择
3、text area文本域标签
<textarea rows="3" cols="60">感谢您的留言
</textarea>