前端学习 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 各种符号

    &nbsp;

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 ...

随机推荐

大数据应用日志采集之Scribe 安装配置指南
大数据应用日志采集之Scribe 安装配置指南大数据应用日志采集之Scribe 安装配置指南 1.概述 Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它 ...
Sublime Text快捷键：
Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有打开文件 Ctrl+Shift+V ...
solrcloud集群部署
Zookeeper安装 Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进行介绍. 注意防火墙和selinux,关闭后进行如下配置,由于是Java写 ...
GestureDetector学习之左右滑动，上下滑动屏幕切换页面
要实现滑屏等触发事件,视情况而定: 如果实现的触屏或者手势效果较多,则使用第一种方法,实现OnGestureListener 接口(参考OnGestureListener): 如果只是实现较少的效果, ...
通过Jasmine和Guard自动测试JavaScript
原文标题:Autotesting JavaScript with Jasmine and Guard 原文地址:http://edspencer.net/2013/06/15/autotesting- ...
sort()方法理解
转作者:SMTNinja来源:知乎下面这个排序函数展示了任何基于比较的排序算法 (comparison-based sorting algorithm) 都有的一段代码: 从大到小排序(一列东西, ...
JavaScript的事件机制
JavaScript的事件机制摘要事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详 ...
结构-行为-样式-Jquery实现延迟加载特效（数据缓冲特效）
最近在做一个地产项目的过程中,原来用的延迟加载的插件在IE下会使浏览器突然缩小,这个让客户很不满意,于是就考虑到兼容性的问题决定自己写一个插件.思路:定义一个代码块,手动加载到页面,然后手动删除. ...
C语言之break和continue
一 break 和 continue 的介绍 break: 1).跳出当前所在的switch语句(tips:可查看前面 switch 部分) 2).跳出当前所在的循环 continue: 结束本次 ...
Access一些常用的SQL语句
您可以将 Microsoft Office Access 2013 用作创建.修改数据库以及处理数据的工具,还可将 Office Access 2013 用作服务器数据库管理系统(如 Microsof ...

前端学习 html

前端学习 html的更多相关文章

随机推荐

热门专题