前端学习 html
Html 前端学习
<!DOCTYPE html>
< lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<>
<!--a标签-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#tt">看第二章</a> #识别ID
<!--<div style="height: 2000px;background-color: red;">第一章</div>-->
<!--<div id="tt" style="height: 2000px;background-color: green">第二章</div>-->
<h1>id,style,name所有的标签都可以定义的属性</h1>
<h1>a,target href</h1> <!--select标签-->
<select >
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">天津</option> </select>
<select size="2">
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
<select size="2" multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
<select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select> <!--inpur标签-->
<h1>input标签</h1>
<input type="checkbox" />
<input type="checkbox" />
<h4>radio</h4>
<p> 男：<input name="gender" type="radio" /></p>
<p> 女：<input name="gender" type="radio" /></p> <input type="text" />
<input type="password" />
<input type="button" value="btu" />
<input type="submit" value="sub" />
<h2>Form</h2>
<form action="http://127.0.0.1:8000/django_form/">
<div>
主机名:<input name="host" type="text" />
</div>
<div>
端口:<input name="port" type="text" />
</div>
<div>
类型:<input name="types" type="text" />
</div>
<div>
用户 <input name="user" type="text" />
</div>
<input type="button" value="提交" />
<input type="submit" value="提交" />
</form>
<!--textarea标签-->
<textarea>iii</textarea>
<input type="text" value="123"/> <div>
<label for="cb1">婚否</label>
<input id="cb1"type="checkbox"/>
</div> <ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>222</li>
</ul>
<ol>
<li>www</li>
<li>wwwooo</li>
</ol> <table border="1">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
</tr>
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
</tr>
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
</tr>
</tbody>
</table>
</body>
</html>
解释
1 块级标签，内联标签
div p h
span,a,lable,input,form.img
2 各种符号
3 标签
input系列
select
textarea
form
div
span
必须会
a
img
table
H,ul,li,ol,dl,p,br,hr
4 属性
公共属性：id,name（一般只提交数据）,style，class
input,text,password
<input type='text' value="123"/>
input:button,submit
<input type='submit' value=''/>
input:checkbox
<input type="checkbox" checkd="checkd"/> 自动选中
input:radio
<input name='gender' type="radio"/>
<input name='gender' type="radio"/>
name有自己的属性 排斥
checkd="checkd"
name='gender'
input:file
<form enctype='multipart/form-data' method='POST'>
</form>
form
<form action=''>
要提交的所有标签
</form>
* action,提交到某一个地址
textarea
如果想提交后台的话 要定义name属性
=================================================
select
<select>
<option value='9' selected='selected'>ff</option>
</select>
* option,value,提交数据时,value
* selected='selected'
table:
table,
thead,tbody
tr:行
td:列
合并单元格,
tr:
th
html简单的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 48px;background-color: pink;">头部</div>
<div style="background-color: #ddd;">
<div style="width: 20%;height: 500px; float: left;background-color: aqua" >左边</div>
<div style="width: 80%;height: 500px; float: left">
<h1>form表单提交</h1>
<form action="http://127.0.0.1:8000/django_form/" enctype="multipart/form-data" method="POST">
<p>
<input type="text" name="host" />
<input type="password" name="pwd">
</p>
<div style="background-color: rosybrown;color: white;">
<h6>爱好</h6>
篮球:<input name="favor" type="checkbox" value="1"/>
足球:<input name="favor" type="checkbox" value="2"/>
排球:<input name="favor" type="checkbox" value="3"/>
</div>
<h6>性别</h6>
男：<input name="gender" type="radio" value="1"/>
女：<input name="gender" type="radio" value="0"/> <div>
<h6>城市</h6>
<select name="city">
<option value="888">上海</option>
<option value="sb888" selected="selected">北京</option>
</select>
</div> <div>
<textarea name="mono"></textarea>
</div>
<div>
<h4>文件</h4>
<input type="file" name="file_name"/>
</div>
<input type="submit" value="提交" /> </form> </div>
</div>
</body>
</html>
前端学习 html的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 前端学习 第七弹： Javascript实现图片的延迟加载
前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img src="" x-src="/acsascas ...
- 前端学习 第六弹： javascript中的函数与闭包
前端学习 第六弹: javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) { ...
- 前端学习 第五弹： CSS （一）
前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...
- 前端学习 第四弹： HTML（一）
前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...
- 前端学习 第三弹： JavaScript语言的特性与发展
前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...
随机推荐
- Complexity Behind Closure
这篇文章同时发布在github上 这篇文章是我对ooc编译器里一个小bug调试时作的手记.虽然相信大多数人对编译器(并且是一门小众语言的编译器)并不感兴趣,但这篇文章可以给C用户们提供一些Object ...
- HDFS中文件的压缩与解压
HDFS中文件的压缩与解压 文件的压缩有两大好处:1.可以减少存储文件所需要的磁盘空间:2.可以加速数据在网络和磁盘上的传输.尤其是在处理大数据时,这两大好处是相当重要的. 下面是一个使用gzip工具 ...
- Thrift RPC实战(二) Thrift 网络服务模型
限于篇幅关系,在观察源码的时候,只列举了部分源代码 TServer类层次体系 TSimpleServer/TThreadPoolServer是阻塞服务模型 TNonblockingServer/THs ...
- Lucene简介(理论篇)
Lucene 是一个软件程序的库或者说是一个工具套件,而不是一个完全的具有搜索特性的应用程序.它关注于自己的文本检索和搜索功能,提供API来完成商业中所涉及到的搜索功能.在搜索功能中,Lucene的功 ...
- [置顶] ROS探索总结（十一）——机器视觉
机器视觉在计算机时代已经越来越流行,摄像头价格越来越低廉,部分集成深度传感器的混合型传感器也逐渐在研究领域普及,例如微软推出的Kinect,而且与之配套的软件功能十分强大,为开发带来了极大的便利.RO ...
- VS2013提示error C4996: 'strcat': This function or variable may be unsafe. Consider using strcat_s instead.
在project属性内加上最后一句_CRT_SECURE_NO_WARNINGS即可
- jquery ajax请求成功，数据返回成功，seccess不执行的问题
1.状态码返回200--表明服务器正常响应了客户端的请求: 2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据. ...
- Dubbo源码学习--注册中心分析
相关文章: Dubbo源码学习--服务是如何发布的 Dubbo源码学习--服务是如何引用的 注册中心 关于注册中心,Dubbo提供了多个实现方式,有比较成熟的使用zookeeper 和 redis 的 ...
- pch文件的作用和配置
pch文件说白了就是一个头文件,只不过这个头文件的类在全局都可以使用,所以说非常的方便,并不用在每个类里面都写一些重复类的头文件,只要将用到的类的头文件放到pch文件里面就行了,当然了还有就是宏定义, ...
- Java垃圾回收机制的工作原理
Java垃圾回收机制的工作原理 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 获取更多内容,请关注小编个人微信公众平台: 一.Java中引入垃圾回收机制的作用 ...