HTML相关知识点
标签:
块元素：可以设置宽高，div,
行内元素:不可以设置宽高,span,image,
display:inline;//转换成行内元素
display:block;//转换成块元素
display：inline-block;//转换成行内块
display：none;//隐藏元素
行内块元素：
打开新的标签页：<a=href=”” target=”_blink”>
超链接跳转：本地跳转
链接跳转
阻止超链接跳转，在href里添加符号“#”。
特殊符号：
Css引入方式：1.行内：<div style=” XXXXXXXX”> </div>
优势：优先级最高
劣势：容易使代码混乱，结构不清晰，不建议使用
2.head内部引入<style>，就近原则
3.嵌入式：<link>，就近原则
就近原则：内部引入和嵌入式谁距离html近,谁的优先级高
分屏快捷键：Shift+Alt+需要屏幕的数字
页面：
选择器：类选择器 class：可以同时用多个类名，也可重名
TOP：1.布局：宽高：width,height
居中：auto
左浮动: float
父选择器nth-child(数字（孩子的数字）){}
表格：table标签：1.标题：<caption>
2.行：<tr>
3.列：<th>
单元格之间的缝隙 cellspacing
文本和边框之间的距离 cellpadding
文本居中：align=”center”
边框：border
表格背景色：bgcorlor
合并：行的合并：rowspan
列的合并：colspan
列表：有序列表：type=“ol”（前面有序号）
无序列表：type=”circle(默认空心圆)/square（默认实心圆）”：（前面无序号）
ul里面只可以写li，但是li里可以写任何内容
list-style:none;//去除默认黑点
list-style-image:url(图片路径);//图标代替默认黑点
list-style-position:inside;//把小黑点改变为内容区域
line-height:;//上下居中
hover：伪类选择器，鼠标经过显示里面的内容
表单：<form>
post:：传送的数据量大，安全性较高
get:传送的数据量小，安全性较低
fieldset：文本在框上面
legend:单行文本输入框
lable:密码输入框
属性：placeholder：提示输入信息
vlue=” ”:自动写入的内容
密码：for=“pwd”
下拉列表：
select：被选项
option
文本输入框：input
数字输入框：type=“number”
单选按钮：type=“radio” value=“***”
复选框：type=”checkbox
多行文本输入框：
<textarea>
按钮：普通按钮：type=”button”
提交按钮：type=”submit”
重置按钮：type=”reset”
表单中的类型——type：text（文本输入框）、password（密码输入框）、number（数字输入框）、radio（单选按钮）、checked（复选按钮）、
button（普通按钮）、submit（提交按钮）、reset（重置按钮）、
实例1：
表单效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<style>
/**{
margin:0;
padding:0;
}*/
tr{
height: 30px;
width:20px;
}
td{
height:10px;
}
.zhuce{
background-color: red;
color:#fff;
width:150px;
height:40px;
}
.denglu{
font-size: 10px;
}
</style>
<body>
<table align="center">
<caption><b>青春不常在，抓紧谈恋爱</b></caption>
<form method="get post">
<tr>
<div>
<td>性别</td>
<td><label><input type="radio" name="gender" value="male"><img src="data:images/man.jpg" alt="">男</label>
<label><input type="radio" name="gender" value="female"><img src="data:images/women.jpg" alt="">女</label></td>
</div>
</tr>
<br>
<tr>
<div>
<td>生日</td>
<!-- <label><input type="text" name="" value="" placeholder="请选择年"></label> -->
<td><select id="birthday">
<option value="year">请选择年</option>
<option value="year">1997</option>
<option value="year">1996</option>
</select>
<select id="birthday">
<option value="year">请选择月</option>
<option value="year">1997</option>
<option value="year">1996</option>
</select>
<select id="birthday">
<option value="year">请选择日</option>
<option value="year">1997</option>
<option value="year">1996</option>
</select>
</td>
</div>
</tr>
<tr>
<div> <td>所在地区</td>
<td><label><input type="text" name="" value="" placeholder=""></label></td>
</div>
</tr>
<br>
<tr>
<div>
<td>婚姻状况</td>
<td><label><input type="checkbox" name="">未婚</label>
<label><input type="checkbox" name="">离婚</label>
<label><input type="checkbox" name="">丧偶</label></td>
</div>
</tr>
<br>
<tr>
<div><td>学历</td>
<td><input type="text"></td>
</div>
</tr>
<br>
<tr>
<div><td>月薪</td>
<td><label for="number"><input type="number"></label></td>
</div>
</tr>
<br>
<tr>
<div><td>手机号</td>
<td><label for=""><input type="text"></label></td>
</div>
</tr>
<br>
<tr>
<div><td>昵称</td>
<td><label for=""><input type="text"></label></td>
</div>
</tr>
<br>
<tr>
<div><td>喜欢的类型</td>
<td><label><input type="checkbox" name="">妩媚</label>
<label><input type="checkbox" name="">柔美</label>
<label><input type="checkbox" name="">可爱</label>
<label><input type="checkbox" name="">小鲜肉</label>
<label><input type="checkbox" name="">型男</label>
<label><input type="checkbox" name="">气质</label></td>
</div>
</tr>
<tr>
<div><td>自我介绍</td>
<td><label><br><textarea cols="30" rows="10" style="overflow: :scroll"></textarea></label><br>
<input type="image" src="data:images/btn.png">
<!-- <input class="zhuce" type="submit" name="" value="免费注册"> --><br><br>
<label><input type="radio" >我同意注册条款和会员加入标准</label>
<br>
<br>
<a href="#" class="denglu">我是会员，立即登录</a>
</td>
</div>
</tr>
<tr>
<div></div>
</tr>
</form>
</table>
</body>
</html>
实例2：
表格效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
tr{
height: 50px;
}
th{
width: 100px;
}
</style>
</head>
<body>
<table border="1" align="center" cellspacing="0" cellpadding="10">
<caption><b>个人简历</b></caption>
<tr>
<th>姓名</th>
<th> </th>
<th>性别</th>
<th> </th>
<th>民族</th>
<th> </th>
<th rowspan="3">照片</th>
</tr>
<tr>
<th>出生年月</th>
<th> </th>
<th>政治面貌</th>
<th> </th>
<th>籍贯</th>
<th></th>
</tr>
<tr>
<th>毕业院校</th>
<th></th>
<th>专业</th>
<th></th>
<th>毕业时间</th>
<th></th>
</tr>
<tr>
<th>外语水平</th>
<th colspan="3"></th>
<th>计算机</th>
<th colspan="2"></th>
</tr>
<tr>
<th>电话 </th>
<th colspan="3"></th>
<th>Email</th>
<th colspan="2"></th>
</tr>
<tr >
<th >社会实践</th>
<th colspan="6"></th>
</tr>
<tr >
<th >获奖情况</th>
<th colspan="6"></th>
</tr>
<tr>
<th bgcolor="#ccc">兴趣爱好</th>
<th colspan="6" bgcolor="#ccc"></th>
<
</tr>
<tr>
<th rowspan="4">工作经历</th>
<th>时间</th>
<th>单位</th>
<th>经历</th>
<th colspan="3"></th>
</tr>
<tr>
<th>2016年3月</th>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
<tr>
<<th>2017年3月</th>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
<tr>
<th>2018年3月</th>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
<tr>
<th>项目经验</th>
<th colspan="6"></th>
</tr>
<tr>
<th>求职意向</th>
<th colspan="6"></th>
</tr>
<tr>
<th>自我评价</th>
<th colspan="6"></th>
</tr>
</table>
</body>
</html>
HTML相关知识点的更多相关文章
- UITableView相关知识点
//*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...
- Android开发涉及有点概念&相关知识点（待写）
前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...
- IOS开发涉及有点概念&相关知识点
前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...
- IOS之UI--小实例项目--添加商品和商品名（使用xib文件终结版） + xib相关知识点总结
添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...
- 学习记录013-NFS相关知识点
一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...
- TCP/IP 相关知识点与面试题集
第一部分:TCP/IP相关知识点 对TCP/IP的整体认 链路层知识点 IP层知识点 运输层知识点 应用层知识点 (这些知识点都可以参考:http://www.cnblogs.com/newwy/p/ ...
- Python开发一个csv比较功能相关知识点汇总及demo
Python 2.7 csv.reader(csvfile, dialect='excel', **fmtparams)的一个坑:csvfile被csv.reader生成的iterator,在遍历每二 ...
- Caffe学习系列（二）Caffe代码结构梳理，及相关知识点归纳
前言: 通过检索论文.书籍.博客,继续学习Caffe,千里之行始于足下,继续努力.将自己学到的一些东西记录下来,方便日后的整理. 正文: 1.代码结构梳理 在终端下运行如下命令,可以查看caffe代码 ...
- php正则相关知识点
关于正则,其实简单就是搜索和匹配.php,java,python等都是支持正则的,php正则兼容perl.好多同学觉得正则比较难,比较抽象,其实正则是非常简单的,主要是一个熟悉和反复练习的结果,还有一 ...
- MySQL自增列（AUTO_INCREMENT）相关知识点总结
MySQL的自增列(AUTO_INCREMENT)和其它数据库的自增列对比,有很多特性和不同点(甚至不同存储引擎.不同版本也有一些不同的特性),让人感觉有点稍微复杂.下面我们从一些测试开始,来认识 ...
随机推荐
- WinForm开发(1)——DataGridView控件(1)——C# DataGridView控件用法介绍
DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如需要动态为DataGridView控件添加新行, ...
- Snuke's Coloring 2-1
There is a rectangle in the xy-plane, with its lower left corner at (0,0) and its upper right corner ...
- ubuntu循环登录
ubuntu12.04管理员账户登录不了桌面,只能客人会话登录 登录管理员账户时,输入密码后,一直在登录界面循环 费了好大劲啊,一上午的时间,终于搞定了,哈哈哈 ctrl+alt+f1 ,切换到tty ...
- Cisco AP-AP重置操作
Resetting to Default Settings Using the MODE Button/spanFollow these steps to reset the access point ...
- 线程同步 - POSIX互斥锁
线程同步 - POSIX互斥锁 概括 本文讲解POSIX中互斥量的基本用法,从而能达到简单的线程同步.互斥量是一种特殊的变量,它有两种状态:锁定以及解锁.如果互斥量是锁定的,就有一个特定的线程持有或者 ...
- intellij idea设置(字体大小、背景)
1. 配置信息说明 Intellij Idea: 2017.2.5 2.具体设置 <1> 设置主题背景.字体大小 File---->Settings----->Appearan ...
- idea中scala项目补全变量、添加打印语句的小技巧
1. 自动补全变量: new Person.var ,然后按回车键:效果:代码变成: val person: Person = new Person 2.添加打印语句: person.name.pr ...
- 1. Elasticsearch startup on local
Download: https://www.elastic.co/downloads/elasticsearch 2. Setting: 1. [elasticsearch]\config\elast ...
- javascript 变量、常量 、 函数 声明
声明变量: 方式一: 使用 var 定义变量,可在定义的同时赋值 或 不赋值 . 方式二: 直接使用[变量名 = 值]的形式,这会定义一个全局变量,但在严格模式下会出现引用错误.[不建议使用] 方式三 ...
- 机器学习之SVM多分类
实验要求数据说明 :数据集data4train.mat是一个2*150的矩阵,代表了150个样本,每个样本具有两维特征,其类标在truelabel.mat文件中,trainning sample 图展 ...