前端学习 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 ...

随机推荐

sql数据库的备份还原问题
sql数据库的备份还原问题今天工作中犯了一个严重的错误,就是在sql中写了一个update语句,还没写条件呢,结果误按了F5,唉,太佩服自己啦...这个脑子怎么不管用了呢?? 唉不说了,我在网上翻来 ...
Servlet容器模型（四）ServletConfig、ServletContext
这两天刚刚回顾了一下servlet中的配置对象ServletConfig.上下文对象ServletContext.多线程相关的知识点,做了一下笔记,如下: 一.Servlet配置对象(ServletC ...
js广告轮询效果
var intervalTime = 5000; var showIndex = 0; var imageLength=0; $(window).load(function () { var heig ...
poj1483 It's not a Bug, It's a Feature!
It's not a Bug, It's a Feature! Time Limit: 5000MS Memory Limit: 30000K Total Submissions: 1231 ...
SPFILE 、PFILE 的全面解读
这里先阐述一下数据库的启动过程: 1. 启动实例/例程(nomount状态)时,读取参数文件(文本文件PFILE 或服务器参数文件SPFILE),分配SGA.启动后台进程.打开告警文件及后台 ...
《linux内核完全剖析》笔记03-进程创建
根据一下问题来看笔记进程占多大的线形地址空间进程实际分配多少物理内存创建进程的开销在哪里一. 从fork系统调用开始 kernel/sys_call.s第222行 _sys_fork: cal ...
codewars-random（2）
找出数组中的间谍思路一:遍历一遍数组,开始前将flag设置为0:将count设为0:每当出现一个奇数(注意负数)count加1,当count大于等于2时将flag至为1: 再遍历一遍数组,如果fla ...
ng1笔记
AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. ...
Notepad++中调试用心lua程序
一.配置: 1.打开Notepad++: 2. 按下F5,或者打开Run->Run… 3. 弹出Run的窗口 3. 这一步是最关键的,将下列语句拷贝粘贴至输入框中:cmd /k Python & ...
gulp 安装步骤
第一步:安装node 搭建node环境:进入官网 http://nodejs.org ,然后点击的绿色的 install 按钮,下载完成后直接运行程序. 第二步:使用命令行 (1)输入指令:node ...

前端学习 html

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

随机推荐

热门专题