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

随机推荐

学会Func
学会Func 前言首先你要会最基本的委托的使用,如果不会,看起来可能会有难度.. 不过第一个例子将帮你复习一下委托delegate 接下来通过几个例子就会学会怎么灵活使用Func了委托回顾(d ...
mongDB
MongoDB[第一篇]MongodDB初识 NoSQL介绍一.NoSQL简介 NoSQL,全称是”Not Only Sql”,指的是非关系型的数据库. 非关系型数据库主要有这些特点:非关系型的 ...
poj 3181 Dollar Dayz（求组成方案的背包+大数）
可能nyist看见加的背包专题我老去凑热闹,觉得太便宜我了.他们新加的搜索专题居然有密码. 都是兄弟院校嘛!何必那么小气. 回到正题,跟我写的上一篇关于求组成方案的背包思路基本一样,无非就是一个二维费 ...
CSS3高级
一.学习目标二.box-sizing属性语法:box-sizing: content-box|border-box|inherit box-sizing属性的用法: box-sizing属性可以为 ...
快速上手微信小程序-快递100
2007 年 1 月 9 日,乔布斯在旧金山莫斯科尼会展中心发布了首款 iPhone,而在十年后的 1 月 9 日,微信小程序正式上线.张小龙以这样的形式,向乔布斯致敬. 小程序在哪里? 小程序功能模 ...
quagga源码分析--大内总管zebra
zebra,中文翻译是斑马,于是我打开了宋冬野的<斑马,斑马>作为BGM来完成这个篇章,嘿嘿,小资一把! zebra姑且戏称它是quagga项目的大内总管. 因为它负责管理其他所有协议进程 ...
009-程序集路径Web窗体
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...
Web VLC 设置 tcp 协议播放
前言 web 端播放rtsp 流,一般都是采用vlc插件,默认是用 UDP 协议播放,这就会存在丢包的可能性,导致界面会变花,要想不花,需要使用更可靠的TCP协议.关于这两种协议的区别,大家可以自行查 ...
Spark集群搭建步骤
问题: 参考:Spark快速入门指南 – Spark安装与基础使用
[UWP小白日记-14]正则表达式
匹配2位浮点数: ^(([1-9]+[0-9]*\.{1}[0-9]{1,2})|([0]\.{1}[1-9]+[0-9]{1,2})|([0]\.\d{1,2})|([1-9][0-9]{1,2} ...

前端学习 html

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

随机推荐

热门专题