<!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. Gerrit的安装和使用说明

    Gerrit安装和使用说明 搞了几天,资料也查了不少,终于磨出来了.有什么不对的地方,大家及时提出来...,开始吧 系统 Centos6.5 x64 内存 2G 硬盘 20G 数据库 Mysql5.1 ...

  2. GBK 字符集

    什么是 GBK ? 中文名 汉字编码字符集 外文名 Chinese Internal Code Specification 全    称 <汉字内码扩展规范> GBK编码,是对GB2312 ...

  3. ASP.NET Web API 2 使用 DelegatingHandler（委托处理程序）实现签名认证

    Ø  前言 在前一篇ASP.NET Web API 2 使用 AuthorizationFilter(授权过滤器)实现 Basic 认证文章中实现了采用 Basic 认证的方式,但是这种方式存在安全隐 ...

  4. IEEE LaTeX模板使用BibTeX

    IEEE LaTeX 模板使用 BibTeX 在Google Scholar获得的文献引用格式一般是BibTex的,而IEEE Transactions的模板默认用的是BibItem.目前没有什么自动 ...

  5. jdbc 日期处理问题

    1.从结果集中取得日期部分 resultSet.getDate();  --2013-01-07 2.从结果集中取得时间部分 resultSet.getTime()   --22:08:09 3.从结 ...

  6. pyqt5模块介绍

    python各种库介绍  https://wiki.python.org/moin/GuiProgramming PyQt5.QtWidgets     包含控件 PyQt5.QtGui      图 ...

  7. bean的装配方式（注入方式，构造注入，setter属性注入）

    bean的装配方式有两种,构造注入和setter属性注入. public class User { private String username; private String password; ...

  8. ARM核心板_迅为4418核心板_高稳定超轻薄_研发超灵感

    ARM核心板_迅为4418核心板_三星四核S5P4418处理器 4418核心板正面: 4418核心板反面:4418核心板尺寸图:详情了解:https://item.taobao.com/item.ht ...

  9. VS 中NuGet 尝试还原程序包时出错"*"已拥有为"**"定义的依赖项

    之前从Git检出项目以后,项目编译不能通过,发现是缺少依赖的外部插件,于是通过NuGet去获取项目依赖的插件,如何通过NuGet恢复使用的插件请使用NuGet还原项目插件. 但是就是在使用NuGet还 ...

  10. Maven配置 和创建一个Maven项目

    Maven的好处: maven的两大核心: **依赖管理:对jar包管理过程 **项目构建:项目在编码完成后,对项目进行编译.测试.打包.部署等一系列的操作都通过命令来实现 maven项目的生命周期( ...