前端学习 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 ...
随机推荐
- GetWindowRect和GetClientRect的区别详解
一:关于坐标 MFC中绘图时经常涉及到坐标计算,GetWindowRect和GetClientRect这两个函数,是获取逻辑坐标系中窗口或控件(其实也是窗口)大小和坐标的常用函数了,有什么不一样的? ...
- Go - Revel框架介绍
Go - Revel框架介绍 https://github.com/robfig/revel http://robfig.github.io/revel/ web框架:revel 数据库:mongod ...
- Apache遇到的问题：APR not found
#./configure --prefix……检查编辑环境时出现: checking for APR... no configure: error: APR not found . Please r ...
- Java-继承的应用
class array { private int[] temp; private int foot; public array(int len) //为temp数组规定大小,并开辟空间,申 ...
- 巧用百度Site App新组件为企业官网打造移动站
一年前我曾经详细介绍过百度Site App,时隔一年的发展,Site App再一次发生了翻天覆地的变化:自定义程度更高.新增电话地图组件.增加流量统计.增加广告管家.生成APP客户端等功能,百度Sit ...
- X86 IO端口和MMIO
X86 IO端口和MMIO I/O作为CPU和外设交流的一个渠道,主要分为两种,一种是Port I/O,一种是MMIO(Memory mapping I/O).前者就是我们常说的I/O端口,它实际上的 ...
- 结构-行为-样式-Css Div 居中的一个最佳实践
最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class=" ...
- 获取Exception的详细信息
转自:http://blog.csdn.net/long95wang/article/details/8089489 方法一: public static String getExceptionAll ...
- 求a和b的最大公约数
题目:求a和b的最大公约数 分析:首先我们要知道最大公约数是什么,就是指两个或多个整数共有约数中最大的一个.好了,知道了最大公约数是什么,就可以求解它了,那么就相当于比较俩个数的约数,取其相等的最大的 ...
- Spring总结 0.概述
由于之前学了好多知识,感觉挺乱的.趁放假,想对这些知识复习归纳下.所以就有了这些随笔啦.随笔中可能会出现错误哈,万一有人看了并且发现了留言哈.勿喷,谢谢哈~先对Spring进行简要概括,以下内容有些摘 ...