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

随机推荐

c# winform 在一个窗体中使用另一个窗体中TextBox控件的值——解决办法
[前提]一个winform应用程序项目中,窗体B,需要使用窗体A 中一个TextBox控件的值,进行计算等操作. [解决方案] 1.在窗体A中定义:public static double a;// ...
Android学习-应用程序管理
在前段时间,公司要求做一个Android系统的应用程序管理,要实现卸载程序.清除数据.停止正在运行的服务这几大模块,现在将代码粗略总结如下: 主要运用到的类有 PackageManager Activ ...
oc之里氏替换原则
1. 里氏替换原则. LSP 子类对象可以替换父类对象的位置,并且程序的功能不受影响. 为什么? 1). 指针是1个父类类型,但是我们确给了指针1个子类对象的地址. 这样做当然是可以的,因为你要1个父 ...
Python自动化开发-变量、数据类型和运算
一.变量变量定义:Variables are used to store infomation to referrenced and manipulated in a computer progra ...
Microsoft Edge与Google Chrome那些不同的举止
以下针对14393版本Edge与Chrome 54 html dom/select的如果options里没有符合的值时edge会选择第一个,chrome(54)会置空选项 html dom/input ...
java基础练习 9
import java.util.Scanner; public class Ninth { /*取一个整数a从右端开始的4-7位.*/ public static void main(String[ ...
Linux下网卡BCM4313的安装
我遇到的问题:打开网络管理->wifi 显示固件缺失通过: 1 lspci | grep Wireless 显示: 1 08:00.0 Network controller: Broadcom ...
关于react-native遇到Can't find variable: TouchableHighlight
当你遇到这样的问题时,是由于你没有import中添加TouchableHighlight import { AppRegistry, StyleSheet, Text, View, PixelRati ...
readelf -s 命令‘symbol’名字显示不全
GCC编译出来的object(目标文件)getPon.o,在链接时(ld)报了一个错误说找不到一个函数(undefined reference to identifier devCtl_getEthe ...
js 增加 onclick 事件
obj.onclick = function(){check(this)} function check(obj){ alert(obj)l }

前端学习 html

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

随机推荐

热门专题