html 后手
1.a
(1.)超链接
<a href="new.html">点击进入到新网页</a>
这里可以直接跳转到一个页面
<a href="http://www.baidu.com" target="_blank">进入百度</a>
这里 target="_blank 指可以在空白页面打开新网址
target="_self 指可以再当前页面显示新网址
(2)标签内部跳转
锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<p>my</p>
<p>my</p>
<p>my</p>
<p>my</p><p>my</p>
<p>my</p>
<div id="zhangqing">张庆</div>
<p>my</p>
<p>my</p>
<p>my</p>
<p>my</p>
<p>my</p>
<p>my</p>
<p>my</p>
<p>my</p>
<p>my</p><p>my</p>
<p>my</p>
<p>my</p><p>my</p>
<p>my</p>
<p>my</p>
<p>my</p>
<p>my</p>
<p>my</p><p>my</p>
<p>my</p>
<p>my</p><p>my</p>
<p>my</p>
<p>my</p><p>my</p>
<p>my</p>
<p>my</p><p>my</p>
<p>my</p>
<p>my</p><p>my</p>
<p>my</p>
<p>my</p><p>my</p>
<p>my</p>
<p>my</p>
<a href="#zhangqing">找张庆</a>
<a href="#zhangqing">找张庆</a>
<a href="#">找张庆</a>
<a href="#">找张庆</a>
<a href="javascript:void(20)">找张庆1</a>
<a href="javascript:void(0)">找张庆2</a> </body>
</html>
内部跳转
锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
第一个根据 id 查找 第二个 回到顶部 第三个 刷新
2.image
src:连接的图片资源
alt:图片资源加载失败。显示的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{
color: blue;
}
a{
display: inline-block;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box">
<a href="javascript:void(0);">
<img src="https://img04.sogoucdn.com/app/a/100520093/9243fbcd523532c7-65a10dc900adf004-16cb2e34a14409c94f53ee8772786500.jpg" alt="奥斯卡讲道理" width="500" height="600">
</a>
</div>
<div>
<span>我最强</span>
</div>
</body>
</html>
a与img 设置图片链接
a{
display: inline-block;
width: 300px;
height: 300px;
}
这里是将超链接于图片重合不会卡位置
3.ul ol dl
ul为无序 这里并不是没有序号 而是一个语句 可以嵌套 li
ol 为有序 有自己的type类型
dl为自定义 dt dd
dt 是主要描述的 是特别加粗的
dd是用来描述dt的 可没有
4.table
border='1' style="border-collapse:collapse;" 将单元格的线和表格的单元合并1
table 由 tr td 组成 tr是上面的列 td 是列上的内容 table实现的的是一个竖列
table 可以设置单元格的大小 border 是显示那些单元格的线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="2" style="align-collapse: collapse;">
<tr> <td>我是</td>
<td>我是</td>
<td rowspan="2">我</td>
</tr>
<tr>
<td>拿着</td>
<td>拿着</td>
</tr>
</table>
</body>
</html>
将上下单元格合并
单元格可以合并成一块 横向(左右)为
<td colspan="2">日天</td> 需要将空缺的是改掉 后面接的是合并的块
单元格可以合并成一块 纵向(上下)为
<td colspan="2">日天</td>
在表格中 有优先级<thead> <tbody> <tfoot> 这三个优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="2" style="align-collapse: collapse;">
<tfoot>
<tr>
<td>21拿着</td>
<td>我拿着</td>
</tr>
</tfoot>
<thead>
<tr> <td>我是</td>
<td>我是</td>
<td rowspan="2">我</td>
</tr>
</thead> <tr>
<td>拿着</td>
<td>拿着</td>
</tr>
</table>
</body>
</html>
table 优先级
5.form
form
HTTP协议
action:提交的服务器网址
method:get(默认)| post(应用:登录注册、上传文件)
页面中的a img link 默认是get请求\
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="get" enctype="multipart/form-data"> 姓名<input value="哈哈">逗比<br>
昵称<input value="哈哈" readonly="">逗比<br>
名字<input type="text" value="name" ><br>
密码<input type="password" value="pwd" size="50"><br>
性别<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="male" >女<br>
爱好:<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</form> </form> </body>
</html>
input文本
checkbox:多选按钮,名字相同的按钮作为一组进行选择。checked:将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时,可以用这个属性。属性值也是checked,可以省略。value="内容":文本框里的默认内容(已经被填好了的)size="50":表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。readonly:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。
用了这个属性之后,在google浏览器中,光标点不进去;在IE浏览器中,光标可以点进去,但是文字不能编辑。disabled:文本框只读,不能编辑,光标点不进去。属性值可以不写。
6.select 下拉列表清单
<form>
<select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option selected="">研究生</option>
</select>
<br><br><br> <select size="3">
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option>研究生</option>
</select>
<br><br><br> <select multiple="">
<option>小学</option>
<option>初中</option>
<option selected="">高中</option>
<option selected="">大学</option>
<option>研究生</option>
</select>
<br><br><br> </form>
下拉列表
<option selected="">研究生</option> 为优先研究生
size 默认为1 为下拉视图 size="3 " 就按照滚动式图
html 后手的更多相关文章
- HDU 3980 (SG 环变成链 之前的先手变成后手)
题意 两个人在一个由 n 个玻璃珠组成的一个圆环上玩涂色游戏,游戏的规则是: 1.每人一轮,每轮选择一个长度为 m 的连续的.没有涂过色的玻璃珠串涂色 2.不能涂色的那个人输掉游戏 Aekdycoin ...
- UNITY 优化之带Animator的Go.SetActive耗时问题,在手机上,这个问题似乎并不存在,因为优化了后手机上运行帧率并未明显提升
UNITY 优化之带Animator的Go.SetActive耗时问题,在手机上,这个问题似乎并不存在,因为优化了后手机上运行帧率并未明显提升 经确认,这个问题在手机上依然存在,不过占的比例非常小.因 ...
- 利物浦VS曼城,罗指导的先手与工程师的后手
本想『标题党』一下的,『高速反击遭遇剧情反转,巴西人力挽狂澜绝处逢生!』这种好像看起来比较厉害的标题似乎在大战之后的第五天已显得不合适了. /不害臊 反正晚了,干脆写点能够引起讨论.并且在未 ...
- hdu5795 A Simple Nim 求nim求法,打表找sg值规律 给定n堆石子,每堆有若干石子,两个人轮流操作,每次操作可以选择任意一堆取走任意个石子(不可以为空) 或者选择一堆,把它分成三堆,每堆不为空。求先手必胜,还是后手必胜。
/** 题目:A Simple Nim 链接:http://acm.hdu.edu.cn/showproblem.php?pid=5795 题意:给定n堆石子,每堆有若干石子,两个人轮流操作,每次操作 ...
- 关于微信小程序更新内容后手机上不能及时显示的办法
这几天一直在做微信小程序的二次开发,每天都要发布程序,但是发布之后微信上查看小程序和以前的一模一样,丝毫没有改变,但是我再本地上却改变了,而且没有开的不校验合法域名那个.这是为啥呢????? 这是跟小 ...
- SCNU ACM 2016新生赛决赛 解题报告
新生初赛题目.解题思路.参考代码一览 A. 拒绝虐狗 Problem Description CZJ 去排队打饭的时候看到前面有几对情侣秀恩爱,作为单身狗的 CZJ 表示很难受. 现在给出一个字符串代 ...
- SCNU ACM 2016新生赛初赛 解题报告
新生初赛题目.解题思路.参考代码一览 1001. 无聊的日常 Problem Description 两位小朋友小A和小B无聊时玩了个游戏,在限定时间内说出一排数字,那边说出的数大就赢,你的工作是帮他 ...
- 【Mutual Training for Wannafly Union #1 】
A.Phillip and Trains CodeForces 586D 题意:过隧道,每次人可以先向前一格,然后向上或向下或不动,然后车都向左2格.问能否到达隧道终点. 题解:dp,一开始s所在列如 ...
- 北京培训记day4
智商题QAQ-- T1:求>=n的最小素数,n<=10^18 暴力枚举n-n+100,miller-rabin筛法 T2:给定一个01矩阵,每次选择一个1并将(x,y)到(1,1)颜色反转 ...
随机推荐
- Jmeter获取数据库查询结果某一字段的值
1.首先进行连接数据库 2.添加JDBC Request 3.添加BeanShell PostProcessor 4.注意点:如果获取的是INT数字类型的,结尾需要添加toString()
- 富文本编辑器Simditor
文档地址:https://simditor.tower.im/docs/doc-usage.html 父组件: options: { placeHolder: 'this is placeHolder ...
- 很多人都会做错的一道JVM题?【分享】
有关Java虚拟机类加载机制相关的文章一搜一大把,笔者这儿也不必再赘述一遍了.笔者这儿捞出一道code题要各位大佬来把玩把玩,假定你一眼就看出了端倪,那么祝贺你,你可以下山了: public cla ...
- VBS实现UTC时间和本地时间互转
本地时间转UTC时间 dim SWDT, datetime, utcTime Set SWDT = CreateObject("WbemScripting.SWbemDateTime&quo ...
- python数据分析教程大全
第一篇:Anaconda安装和使用 第二篇:Jupyter norebook使用 第三篇:pandas教程 第四篇:numpy教程 第五篇:Matplotlib教程 第六篇:实战项目 期待吗?(微笑脸 ...
- Codechef September Challenge 2019 Division 2
Preface 这确实应该是我打过的比较水的CC了(其实就打过两场) 但由于我太弱了打的都是Div2,所以会认为上一场更简单,其实上一场Div的数据结构是真的毒 好了废话不多说快速地讲一下 A Eas ...
- Paper | A novel deep learning-based method of improving coding efficiency from the decoder-end for HEVC
目录 精彩叙述 细节 发表在2017年DCC. 这篇文章立意很简单,方法也很简单,但是做得早.效果好.引用量也不错(40+). 指标:在HEVC的intra.LDP.LDB和RA模式下,BDBR平均可 ...
- 『卧槽』意外发现了 Hashtable 的 foreach 用法 BUG
这段时间,公司项目中 遇到一个问题,最后查出: 是 Hashtable 的用法导致的. private static void AutoCleanCache() { try { lock (m_Has ...
- Leetcode练习题 7. Reverse Integer
7. Reverse Integer 题目描述: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Inp ...
- 关于 C# 8.0 的 Switch Case When 的用法
直接贴代码了: static void Main(string[] args) { SwitchSample(); } private static void SwitchSample() { Swi ...