HTML重难点标签(笔记)

HTML重难点标签(笔记)

a标签(常用)

  1. href 超链接地址

    • 网址

      • //baidu.com—自动选择http 或 https
    • 路径 (相对路径或绝对路径)

    • 伪协议

      • JavaScript:JS代码;—javascript:;点击之后没有动作的伪协议

        <a href="javascript:;">点击之后没有动作的伪协议</a>
        
      • mailto:邮箱

        <a href="mailto:596417202@qq.com">发邮件</a>
        
      • tel:手机号—在手机上可以直接打电话

        <a href="tel:13112345678">打电话给我</a>
        
  2. 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>
    
  3. 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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值