<!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. ES6 In Depth: Arrow functions

    Arrows <script language="javascript"> <!-- document.bgColor = "brown"; ...

  2. Centos7安装官方JDK

    一.下载jdk最新版本版本 链接地址:官方地址 二.上传jdk到centos下 三.检查当前linux系统上是否有jdk,linux命令:rpm -qa | grep java 查询结果: 卸载掉系统 ...

  3. Echarts地图悬浮框显示多组series数据以及修改地图大小

    1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...

  4. jsp查询修改

    也是只帖代码....不讲解. 1.search.jsp <%@ page language="java" import="java.util.*" pag ...

  5. PowerDesigner设置一对一关系

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

  6. 【C++】 网络编程 01

    趁着计算机网络这门课布置了课程设计,学习下网络编程. 系统:Ubuntu 14.01... 1. 关于Socket(套接字) 1.1 套接字是存在于运输层和应用层间的抽象层,通过它来区分不同应用程序进 ...

  7. MySQL之数据表的插入内容 空与非空（六）

    NULL与NOT NULL mysql> CREATE TABLE tb2( -> usename VARCHAR(20) NOT NULL, -> age TINYINT UNSI ...

  8. django设置并获取cookie/session，文件上传，ajax接收文件，post/get请求及跨域请求等的方法

    django设置并获取cookie/session,文件上传,ajax接收文件等的方法: views.py文件: from django.shortcuts import render,HttpRes ...

  9. python中的Process

    from multiprocessing import Process import time import os # # def acb(n): # print(n) # # # if __name ...

  10. mysql 无法链接, 输入密码失败

    今天,在外面上网,使用的是公网(好像不安全,我也不懂),然后连接数据库,出现下面错误,我明明输入正确的密码还是失败了. 然后我在网上查方式, 应该是没有设置开机启动,输入了: mysqld --con ...