html 后手
2024-10-19 01:37:17
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 " 就按照滚动式图
最新文章
- Block知识点总结
- iso 培训笔记
- (转)为什么用ls和du显示出来的文件大小有差别？
- 拓展：使用终端创建、编译、链接OC…
- Linux SELinux命令
- 278. First Bad Version
- Gridview全选
- [tensorflow in a nutshell] tensorflow简明教程 （第一部分）
- Android中的音频处理------SoundPool,MediaRecorder,MediaPlayer以及RingStone总结
- JAVA关键词synchronized的作用
- 微信cookie内容
- OC之类与对象
- c3p0、dbcp、tomcat jdbc pool 连接池配置简介及常用数据库的driverClass和驱动包
- Fiddler基础使用二之捕获手机应用https请求
- 【深度学习】吴恩达网易公开课练习(class1 week4)
- python爬取网易云音乐歌曲评论信息
- C++常见的概念
- Java基础 --Unix与Mac系统 文件路径分隔符（一）
- Git - 回滚与撤销
- Android 设备管理API概览（Device Administration API）