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

随机推荐

MapXtrem + Asp.net 地图随窗体改变大小
在B/S框架下,MapXtreme都是基于图片的,也就是说在客户端显示的地图实际上都是一张图片. 地图控件 <cc1:MapControl ID="/> 在调试模式下,编译后的地 ...
ZOJ 3529 A Game Between Alice and Bob 博弈好题
A Game Between Alice and Bob Time Limit: 5 Seconds Memory Limit: 262144 KB Alice and Bob play t ...
D3D游戏降帧的动态创建D3D设备以及ShellCode HOOK玩法
欢迎转载,转载请注明出处:http://blog.csdn.net/gnorth/article/details/9327971 说白了,也就是HOOK掉Present,这种代码,其实百度上某些地方有 ...
KL25的AD采集操作
飞思卡尔的KL25单片机AD做的是很不错的,SAR型能做到16位.不过数据手册就写得不怎么样了,简直可以说是坑爹,很难看懂.有的描述让人难以理解,你指望在别的地方对不理解的地方会有其他角度的描述,结果 ...
内核操作系统Linux内核变迁杂谈——感知市场的力量
本篇文章个人在青岛游玩的时候突然想到的...今天就有想写几篇关于内核操作系统的博客,所以回家到以后就奋笔疾书的写出来发表了 Jack:什么是操作系统? 我:你买了一台笔记本,然后把整块硬盘彻底格式化, ...
Swift 3.0 字符串、数组、字典的使用
1.字符串 string func stringTest() -> Void { // 字符串 let str1 = "yiyi" let str2 = "2222 ...
SVN使用教程之-分支/标记合并 subeclipse
首先说下为什么我们需要用到分支-合并.比如项目demo下有两个小组,svn下有一个trunk版.由于客户需求突然变化,导致项目需要做较大改动,此时项目组决定由小组1继续完成原来正进行到一半的工作[某个 ...
C语言之变量与常量的介绍
一标示符标识符:可以理解为是变量名.名字常量表示法的常量名,但是不仅限于这两个命名规范: 1.起名要有意义,基本要做到一看名字就知道是用来干嘛的(要求你遵守,但不会报错,希望能够养成这样的好习惯 ...
Maven之pom.xml 配置详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
shell编程其实真的很简单（二）
上篇我们学会了如何使用及定义变量.按照尿性,一般接下来就该学基本数据类型的运算了. 没错,本篇就仍是这么俗套的来讲讲这无聊但又必学的基本数据类型的运算了. 基本数据类型运算操作符符号语义描述 ...

前端学习 html

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

随机推荐

热门专题