<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>html</title>

</head>

<body>

<!-- 表格table -->

<table border="1" cellpadding="0" cellspacing="0">

    <tbody>

        <tr>

            <th>name</th>

            <th>address</th>

        </tr>

        <tr>

            <td>jack</td>

            <td>shenzhen</td>

        </tr>

        <tr>

            <td>tom</td>

            <td>hangzhou</td>

        </tr>

        <tr>

            <td>lily</td>

            <td>chengdu</td>

        </tr>

    </tbody>

</table>

<br>

<!-- form表单 -->

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

    名字:<input type="text" name="username">

    密码:<input type="password" name="password">

    <br>

    爱好：

    <input type="checkbox" name="sports" value="zuqiu">足球

    <input type="checkbox" name="sports" value="basketball">篮球

    <input type="checkbox" name="sports" value="pingpang">乒乓球

    <br>

    性别：<input type="radio" name="gender" value="male">篮球

    <input type="radio" name="gender" value="female">篮球

    <br>

    你在哪

    <select>

        <option value="beijing">北京</option>

        <option value="shanghai">上海</option>

        <option value="shenzhen">深圳</option>

        <option value="guangzhou">广州</option>

        <option value="hangzhou">杭州</option>

        <option value="chengdu">成都</option>

    </select>

    <input type="submit" value="提交">

</form>

<!-- 标题标签 -->

<h1>标题标题标题标题标题标题标题</h1>

<h2>标题标题标题标题标题标题标题</h2>

<h3>标题标题标题标题标题标题标题</h3>

<h4>标题标题标题标题标题标题标题</h4>

<h5>标题标题标题标题标题标题标题</h5>

<h6>标题标题标题标题标题标题标题</h6>

换行br<br>标签

hr横线标签<hr>

<div>

    div

    <span>span</span>

</div>

<!-- 标签列表 -->

<ul>

    <li>段落1</li>

    <li>段落2</li>

    <li>段落3</li>

</ul>

</body>

</html>

css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css test</title>

    <style type="text/css">

        /* 标签选择器*/

        div{

            width: 200px;

            height: 150px;

            background: gray;

            margin-top: 20px;

        }

        .font-white{

            /*类选择器小数点开头*/

            color: white;

        }

        #box2{

            /* id选择器 # 开头

            id只能选择一个元素 */

            font-size:20px;

        }

        [name="password"]{

            /*属性选择器*/

            border: 1px solid blue;

        }

        [chinasoft="css_study"]{

            /*自定义属性选择器*/

            border: 1px solid yellow;

        }

    </style>

</head>

<body>

    <input type="text" class="input" name="username" chinasoft="css_study">

    <input type="text" name="password" class="input">

    <div class="font-white">一个没有样式的盒子</div>

    <div class="font-white" id="box2">一个没有样式的盒子</div>

    <div>一个没有样式的盒子</div>

</body>

</html>

html常用标签表单和表格等及css的简单入门的更多相关文章

  1. 自定义常用input表单元素三：纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  2. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  3. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  4. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

  5. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

  6. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  7. 自定义常用input表单元素二：纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  8. 制作Html标签以及表单、表格内容

    制作Html一般用DW(......),Html全称为(Hyper Text Markup Language   超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...

  9. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

随机推荐

  1. ACM-ICPC 2018 南京赛区网络预赛 B The writing on the wall(思维)

    https://nanti.jisuanke.com/t/30991 题意 一个n*m的方格矩阵,有的格子被涂成了黑色,问该矩阵中有多少个子矩阵,子矩阵不包含黑色格子. 分析 参考https://bl ...

  2. HDU 1064(求平均数 **)

    题意是求 12 个浮点数的平均数,这题不用读题,看到运行时间为 200 ms 再看下样例就能猜出题目的要求了,代码如下: #include <bits/stdc++.h> using na ...

  3. in和hasOwnProperty的区别

    两者都代表查看某个属性是不是对象自己的,返回布尔值 in判断的是对象的所有属性,包括对象实例及其原型的属性 hasOwnProperty则是判断对象实例的是否具有某个属性

  4. tomcat部署应用时设置context path为空的上下文路径问题

    在server.xml中添加<Context>元素,配置如下: <Context docBase="app" path="" reloadab ...

  5. 利用C#访问注册表获取软件的安装路径

    文章地址:https://blog.csdn.net/yl2isoft/article/details/17332139

  6. PowerDesigner设置一对一关系

    (1)修改Cardinalities 为One-one (2)设置Dominant role A->B(假设表A,表B),保存 (3)到Joins页,设置Parent为None,设置Parent ...

  7. Spring Data 起步

    [Maven 坐标]G A V ……………………………………………………………………………………………………………………………………………… [JDBC] Connection 连接数据库 State ...

  8. 唯一约束（UNIQUE_KEY）

    唯一约束可以保证记录的唯一性 唯一约束的字段可以为空值(NULL) 每张数据表可以存在多个唯一约束(主键只有一个) mysql> CREATE TABLE tb7( -> id SMALL ...

  9. C++ 中容器

    容器为模板类 顺序容器 vector deque (双端队列) list  (双向链表) forward_list(单向链表) array (固定大小数组) string ( 与vector 相似)保 ...

  10. Oracle 数据库监听配置和服务

    -- 补充说明 如果要远程连接192.168.10.44上的oracle,那么192.168.10.44服务器必须启动TNSListener.(配置文件 listener.ora) PLSQL Dev ...