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

<!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. 【剑指offer】和为定值的连续正数序列

    .可是他并不满足于此,他在想到底有多少种连续的正数序列的和为100(至少包含两个数).没多久,他就得到还有一组连续正数和为100的序列:18,19,20,21,22.如今把问题交给你,你能不能也非常快 ...

  2. ORACLE函数之单行数字函数

     1.           ABS(X) 返回X的绝对值 SQL>SELECT ABS(-1) A,ABS(1) B,ABS(0) C FROM DUAL; A          B     ...

  3. How to configure Gzip for JBoss?---refer

    Question: I think to try to speed up my Web App by reducing the size of transferred data. For exampl ...

  4. Java基础知识强化26：Object类之hashCode()方法、getClass()方法

    1. Object类的hashCode()方法,如下: public  int  hashCode():返回该对象的哈希码值,这个值和地址值有关,但是不是实际地址值(哈希码值是根据实际地址值转化过来的 ...

  5. Unix系统解压tar包时出现@LongLink错误

    Unix系统上使用tar命令解压tar包后,多了一个@LongLink的文件,并且原来的tar包解压后不完整.网上查了下,原因是AIX系统上tar命令自身的一个缺陷.解决办法:把该tar包上传到lin ...

  6. Js实现简单的联动，无数据库版本

    <html> <head> <title></title> <script language="javascript" typ ...

  7. asp.net微信开发第三篇----自定义会话管理

    和微信用户的沟通少不了,总觉得看起来微信官网后台管理中的会话回复消息有点呆板,所以我这里就自定义了一个会话管理功能,最终效果图如下: 因为我试使用富文本文件CKEDITOR来进行编写,你看到稳中可能会 ...

  8. WPF 打开文件 打开路径对话框

    WPF调用WinForm中的 OpenFileDialog 和 FolderBrowserDialog 来实现响应的功能 对应的引用程序集: using System.Windows.Forms; O ...

  9. 用MS自带的VS构建joint语句

    在其中一个表上,右键,选择"New Query",弹出"Add Table"对话框,将待joint的两个表Add,并选择相应字段,则会自动构建joint语句,其 ...

  10. ubuntu 下源码安装Postgreql pgAdmin3

    一.安装 PostgreSQL 1.安装相关依赖,在终端下执行: sudo apt-get install zlib1g-dev    sudo apt-get install libreadline ...