下拉列表，文本域，复选框

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>MyGod</title>

</head>

<body>

   <form action="http://baidu.com" method="get">

          <input type="checkbox" id="a">

          <label for="a">sss</label>

          <label><input type="radio" value="2">男</label><br>

          <select name="xllb">

                <optgroup label="一">

                    <option> 1 </option>

                    <option> 2 </option>

                    <option> 3 </option>

                </optgroup>

          </select>

          <textarea rows="5" cols="10" placeholder="请输入文本"></textarea>

          <input type="submit" formaction="http://www.baidu.net">

   </form>

</body>

</html>

重写form的一些属性

<form action="http://baidu.com" method="get">

          <input type="submit" formaction="http://www.sina.com">

   </form>

output元素和进度条

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>MyGod</title>

</head>

<body>

   <form action="http://baidu.com" id="myform" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">

   <input type="number" id="num1">+

   <input type="number" id="num2">=

   <output id="num" for="num1 num2"></output><br>

   <!-- <progress value="30" max="100"><br> -->

   <meter max="100" min="0" value="30" high="80" low="20"></meter> <br>

   <meter max="100" min="0" value="10" high="80" low="20"></meter> <br>

   <meter max="100" min="0" value="90" high="80" low="20" optimum="60"></meter> <br>

   </form>

</body>

</html>

边框fieldset

<fieldset>

            <legend>用户注册</legend>

            账号: <input type="text">

            密码: <input type="password">

        </fieldset>

canvas画直线

<canvas id="mycanvas" width="500" height="300"></canvas>

    <script type="text/javascript">

        var canvas=document.getElementById('mycanvas');

        var context=canvas.getContext('2d');

        context.moveTo(0,0);

        context.lineTo(100,100);

        context.stroke();

    </script>

css样式

@charset='utf-8';

p{color: red}

h1{color: blue}

div{background: red; color: green}

调用css外部样式

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>MyGod</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <h1>Welcome</h1>

    <p>To My World</p>

    <div>How are you?</div>

</body>

</html>

样式的优先顺序：

设计者设计的样式>浏览器用户自定义的样式>浏览器自设的样式

内联样式>内部样式>外部样式

样式选择器

@charset='utf-8';

/**{color: blue} /*通用选择器*/

#a{background-color: green}/*id选择器*/

.b{background-color: cyan}/*类选择器*/

h1.b{background-color: black}

input[value][id]{background-color: orange}

input[id="but"][value]{background-color: yellow}

html基础知识总结2的更多相关文章

  1. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

  2. RabbitMQ基础知识

    RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...

  3. Java基础知识（壹）

    写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...

  4. selenium自动化基础知识

    什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...

  5. [SQL] SQL 基础知识梳理（一）- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理（二） - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理（三） - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理（四） - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理（五） - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

  10. APP测试入门篇之APP基础知识(001)

    前言        最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...

随机推荐

  1. C#量转换为汉字表达

    /* 创造者:菜刀打好博客  * 创建日期: 2014年09一个月04号码  * 特征:Money类型转换  *  */ namespace Net.String.ConsoleApplication ...

  2. boost 相等与等价的区别

  3. 使用一个小图片tile平铺到ImageView中或Activity背景

    方法两种: 首先必须在res/drawable目录下包含一个background.jpg 方法1:在res/drawable中创建一个xml文件(background_repeat.xml) 内容为 ...

  4. CentOS 7 安装教程

    参考资料: http://www.cnblogs.com/bobbylinux/articles/centos7.html

  5. 2015 UESTC Winter Training #8【The 2011 Rocky Mountain Regional Contest】

    2015 UESTC Winter Training #8 The 2011 Rocky Mountain Regional Contest Regionals 2011 >> North ...

  6. css基础回顾-定位：position

    w3school 对position定义和说明是: 定义和用法: position 属性规定元素的定位类型. 说明: 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生 ...

  7. css之z-index深度解析

    (几个重点概念解析) 一.层叠上下文 层叠上下文:如果一个元素拥有层叠上下文.那么就代表这个元素在页面的z轴上是有定位的. 什么元素拥有 层叠上下文:a.根元素.b.z-index值为数值的元素.c. ...

  8. 【sql】经典SQL语句大全

    原文链接:http://www.cnblogs.com/yubinfeng/archive/2010/11/02/1867386.html —————————————————————————————— ...

  9. Windows免密码远程桌面

    1.WinKey + R,在对话框中输入“gpedit.msc”,点“确定”:   2.展开:计算机配置--Windows设置--安全设置--本地策略--安全选项,找到“帐户:使用空白密码的本地账户只 ...

  10. php 通过ip获取地理位置

    <?php header('Content-Type:text/html;Charset=utf-8'); function GetIp(){ $realip = ''; $unknown = ...