前端学习 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 ...
随机推荐
- django model Foreign key usage 关系型数据库 ORM
django 的模型 from django.db import models""" A model pair to map car and its manufactur ...
- 在 Cordova/Phonegap for Android 中包含中文文件名的页面
在 Cordova/Phonegap for Android 中包含中文文件名的页面 本贴首发于: http://xuekaiyuan.com/forum.php?mod=viewthread& ...
- MyEclipse导入Maven项目pom文件第一行报错，运行Tomcat报Log4j错误--解决方法
问题描述: 前一段时间电脑第一次导入Maven项目,又是pom文件错,改好后又是运行Tomcat报Log4j错误,一直倒腾了近一个月程序才成功跑起来,太不容易. 也上网查了很长时间,没一个方法能解决我 ...
- Python第一天——入门Python(4)字典的常用操作
# dic={[1,2,3]:'123'} #可变类型不能当做字典的key,value可以使用任意类型 # dic={(2,3,4):'123'} # print (dic[(2,3,4)]) #元组 ...
- 手机端H5 header定义样式
<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" ...
- Normalize.css 样式作用，及使用方法
Normalize.css 是? Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一. Normalize.css 能干什么? 保留有用的默认值,不 ...
- git 本地给远程仓库创建分支 三步法
命令如下: 1:本地创建分支dev Peg@PEG-PC /D/home/myself/Symfony (master) $ git branch dev 2:下面是把本地分支提交到远程仓库 Peg@ ...
- docker安装使用
介绍 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会 ...
- Error creating bean with name 'contentCategoryController': Injection of autowired dependencies failed;
在springmvc.spring.mybatis搭建的工程中出现了一大串错误 查了代码后发现,原来是在ContentCategoryServiceImpl中忘了写一句话@Service(),以至于因 ...
- python学习——DAY1
日期:20170113 一.个人体会: 零基础学python,是艰辛的,需要付出和坚持. 关于流程图.我最开始画的是从上到下,再从左到右,画了很多重复的内容,单线程的流程图,看起来很容易理解,但是自己 ...