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

<!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. 机房管理系统——vb与excel链接2

    因为我之前找的文档让我以为在创建表里面走了非常大的误区,所以当时我直接就在学生管理系统的目录里建了张表,执行时候直接打开这样表即可了. 可是这里面还是存在着非常大的误区. 后来我看了周坤的博客感觉他比 ...

  2. [RxJS] Creation operators: empty, never, throw

    This lesson introduces operators empty(), never(), and throw(), which despite being plain and void o ...

  3. [Redux] Writing a Todo List Reducer (Adding a Todo)

    Learn how to implement adding a todo in a todo list application reducer. let todo = (state = [], act ...

  4. Cocos2dx 多线程

    多-threaded负荷plist特征.获取知识的必要性: 1.多线程开启:pthread 2.怎样在线程中载入plist 一.多线程开启 当我们想在程序中开多线程中.第一想到的是cocos2d-x有 ...

  5. android开发步步为营之68:Facebook原生广告接入总结

    开发应用的目的是干嘛?一方面当然是提供优质服务给用户,还有一方面最重要的还是须要有盈利.不然谁还有动力花钱花时间去开发app? 我们的应用主攻海外市场,所以主要还是接入国外的广告提供商.本文就今天刚完 ...

  6. [转] splice系列系统调用

    关注splice系列系统调用(包括splice,tee和vmsplice)已经有一段时间了,开始的时候并未能领会splice的意义所在,致使得出了“splice系列系统调用不怎么实用”的错误结论.随着 ...

  7. Gamit解算脚本

    这是一个解算单天的shell脚本,对于初学者很有帮助. 首先就是需要在项目(四个字符)建立rinex brdc igs 还有以年纪日命名的目录,然后提前准备好station.info和lfile.文件 ...

  8. Java Criteria表关联查询（两个表未定义关联关系）

    Criteria criteria = this.getSession().createCriteria(Competition.class, "b"); DetachedCrit ...

  9. javascript !!的作用是把一个其他类型的变量转成的bool类型

    !!的作用是把一个其他类型的变量转成的bool类型

  10. DataGrid GridView 单页javascript 表头排序

    JS代码如下: <script> var curObj; var shell = 1; function sortTable(L) { var start=new Date() var i ...