欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML重难点标签(笔记)

程序员文章站 2022-05-11 09:05:33
...

HTML重难点标签(笔记)

a标签(常用)

  1. href 超链接地址

    • 网址

      • //baidu.com—自动选择http 或 https

    • 路径 (相对路径或绝对路径)

    • 伪协议

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

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

      • mailto:邮箱

        <a href="mailto:[email protected]">发邮件</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>
相关标签： 学习笔记 html

上一篇： CSS3选择器 :checked选择器

下一篇： 在HTML中引入多个css文件

推荐阅读