<!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. 解决 git push Failed to connect to 127.0.0.1 port 8-87: 拒绝连接

    今天在本地使用nsq 测试的时候总是提示端口被占用 通过查看环境变量确实存在该代理 如何解决 使用netstat 命令查看端口被占用情况 根据经常ID号查看是哪一个进程正在被占用 如何还是不行,则在[ ...

  2. 安装 ArcGISAPI31forSilverlight an i/o error occured while installing a file错误解决

    安装ArcGISAPI31forSilverlight出现“an i/o error occured while installing a file……”主要是这个文件可能已经损坏了,如此,你在用到该 ...

  3. JS获得元素相对位置坐标getBoundingClientRect()

    getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 1.语法:这个方法没有参数. rectObject = ...

  4. 去掉MyEclipse 中烦人的黄线和感叹号!

    Window>>Preferences>>General>>Editors>>Text Editors>>Annotations 选中右边的 ...

  5. 31.【微服务架构】SpringCloud之Feign(五)

    Feign简介 Feign 是一个声明web服务客户端,这便得编写web服务客户端更容易,使用Feign 创建一个接口并对它进行注解,它具有可插拔的注解支持包括Feign注解与JAX-RS注解,Fei ...

  6. Linux之Ubuntu下DSL拨号上网

    可视化桌面配置方法 1.编辑连接 2.选择 增加 3.选择 DSL 4.选择 新建连接[cmcc@gx属于移动校园用户的ISP指定后缀] 6.OK 当然,还有其他拨号上网的办法: [Linux/Ubu ...

  7. 关于“ubuntu18.04下网易云无法启动”的问题解决方案

    1. 最简单的解决方案(参考文章:亢奋猫): 更正:在更改启动文件netease-cloud-music.desktop时应为:将第11行处的“Exec=netease-cloud-music %U” ...

  8. 第27月第12天 webrtc ios openssl boost

    1. source 'https://github.com/CocoaPods/Specs.git' target 'YOUR_APPLICATION_TARGET_NAME_HERE' do pla ...

  9. windows基本命令大全

    1.DOS常用命令详解 dir 列文件名 deltree 删除目录树 cls 清屏 cd 改变当前目录. copy 拷贝文件 diskcopy 复制磁盘 del 删除文件 format 格式化磁盘. ...

  10. [国家集训队] Crash 的文明世界

    不错的树形$ DP$的题 可为什么我自带大常数啊$ cry$ 链接:here 题意:给定一棵$ n$个节点的树,边权为$ 1$,对于每个点$ x$求$ \sum\limits_{i=1}^n dist ...