HTML重难点标签(笔记)
a标签(常用)
-
href 超链接地址
-
target 指定在哪个窗口打开超链接
<a href="//baidu.com" target="_blank">在新窗口(空白页)打开</a> <a href="//baidu.com" target="_parent">在父框架中打开</a> <a href="//baidu.com" target="_search">如果之前已打开一个新窗口,则在已打开的窗口重新打开此链接,否则在新窗口(空白页)打开</a> <a href="//baidu.com" target="_self">(默认)在当前窗口打开</a> <a href="//baidu.com" target="_top">在整个窗口中打开</a> <a href="//baidu.com" target="framename">在指定窗口(framename)中打开</a> -
download 下载页面(不是所有浏览器都支持,尤其是手机浏览器可能不支持)
<a href="" download></a>
table 表格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 文件字符编码 -->
<meta charset="utf-8">
<!-- 兼容手机,禁止缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 告诉IE使用最新内核 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>标题</title>
<style type="text/css">
table{
table-layout: fixed;//表格布局
border-collapse:collapse;//boder是否合并
border-spacing: 0;//boder之间的距离
}
</style>
</head>
<body>
<!-- 单表头 -->
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<!-- 表的头部 -->
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1-1</td>
<td>data1-2</td>
<td>data1-3</td>
</tr>
<tr>
<td>data2-1</td>
<td>data2-2</td>
<td>data2-3</td>
</tr>
<tr>
<td>data3-1</td>
<td>data3-2</td>
<td>data3-3</td>
</tr>
<tr>
<td>data4-1</td>
<td>data4-2</td>
<td>data4-3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>data_total-1</td>
<td>data_total-2</td>
<td>data_total-3</td>
</tr>
</tfoot>
</table>
<!-- 双表头 -->
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<!-- 表的头部 -->
<tr>
<th></th>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<th>data1</th>
<td>data1-1</td>
<td>data1-2</td>
<td>data1-3</td>
</tr>
<tr>
<th>data2</th>
<td>data2-1</td>
<td>data2-2</td>
<td>data2-3</td>
</tr>
<tr>
<th>data3</th>
<td>data3-1</td>
<td>data3-2</td>
<td>data3-3</td>
</tr>
<tr>
<th>data4</th>
<td>data4-1</td>
<td>data4-2</td>
<td>data4-3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总计</th>
<td>data_total-1</td>
<td>data_total-2</td>
<td>data_total-3</td>
</tr>
</tfoot>
</table>
</body>
</html>
img 图片标签
<!-- 作用:发出get请求,展示一张图片
属性:alt/height/width/src 只写height或width,另外一个属性会自适应
事件:onload/onerror
响应式 max-width:100%;
-->
<style>img{max-width: 100%;}</style>
<img src="./img/timg.jpg" id="touxing" alt="这是一张图片" >
<script type="text/javascript">
touxing.onload=function(){
// 图片加载成功
console.log('图片加载成功);
}
touxing.onerror = function(){
// 图片加载失败
console.log('图片加载失败);
// 如果加载失败,可替换图片
touxing.src='/404.ong'
}
</script>
form 表单
<!--
form表单
属性
action:请求地址
method:请求方式 post/get
autocomplete:是否自动填充 on/off
target:请求地址打开窗口
事件:onsubmit
表单必须要有type="submit"的提交按钮
input标签事件:
onchange:值发生改变时触发
onfocus:获取焦点时触发
onblur:失去焦点时触发
注意事项:
1.一般不监听input 的click事件
2.form里面的input要有name
3.form里面要放一个type="submit"的提交按钮才能触发submit事件
-->
<form action="#" method="post" autocomplete="on">
文本框:<input type="text"/><hr >
颜色:<input type="color"/><hr >
密码框:<input type="password"/><hr >
单选框:<input type="radio" name="gender"/>男 <input type="radio" name="gender"/>女<hr >
多选框:<input type="checkbox" name="hobby" />电影 <input type="checkbox" name="hobby" />代码<hr >
上传文件:<input type="file" multiple/><hr >
<input type="hidden"/><hr >
多行文本:<textarea rows="6" style="resize: none;" cols=""></textarea><hr >
<select name="">
<optgroup label="数字">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option selected="" value="">4</option>
</optgroup>
<optgroup label="文字">
<option value="">一</option>
<option disabled value="">二</option>
<option value="">三</option>
<option value="">四</option>
</optgroup>
</select>
<input type="submit" value="提交"/>
<button type="submit">注册</button>
<!-- input 和 button 区别
<input type="submit" value="提交"/> 只能有文本
<button type="submit">注册</button> 可以有任何东西 -->
</form>
8415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
