<!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. Python默认版本修改

    Python默认版本修改 当电脑安装了多个版本的Python,而Shell中默认的Python不是你想要的,这个时候就需要对Python的默认版本进行修改. 在Windows中,可以通过修改环境变量的 ...

  2. 2.0 (1)安装MongoDB

    (官网:www.mongodb.com) ——————————(1)Mac安装MongoDB———————— 1)安装homebrew (官网地址,brew.sh) ruby -e "$(c ...

  3. Yocto开发笔记之《Tip-stdlib库函数strtod返回nan错误》(QQ交流群:519230208)

    2015.04-imx_v2015.04_3.14.38_6ul_ga+g5d63276 (Jan 04 2016 - 18:07:08) FSL Community BSP : https://co ...

  4. IIS7.0 Appcmd 命令详解和定时重启应用池及站点的设置

    IIS7.0 Appcmd 命令详解 废话不说!虽然有配置界面管理器!但是做安装包的时候命令创建是必不可少的!最近使用NSIS制作安装包仔细研究了一下Appcmd的命令,可谓是功能齐全. 上网查了些资 ...

  5. RobotFrameWork接口报文测试-----(一)简单demo的实现

    最近几个月的工作任务都是通过使用RF工具来搭建服务器端接口的自动化测试,使用python作为2次开发的语言,也是第一次去做这种项目,经验善浅,还是很有可能会走很多的弯路,为此,我希望自己能把每个阶段的 ...

  6. MAC SVN Phonegap

    1. Windows上用VisualSVN Server Manager创建好Repository. 2. 在MAC上,用Phonegap创建好项目,比如在Project1目录里的App目录. 3. ...

  7. iOS启动屏 ➕ 闪屏的方法

    转载自:http://www.starming.com/index.php?v=index&view=21 在- (BOOL)application:(UIApplication *)appl ...

  8. K/3 WISE V14.3官方原版云盘下载地址及培训PPT

    电梯直达 楼主    发表于 15 分钟前 | 只看该作者    查看 : 10|回复 : 0 金蝶K/3 WISE打造企业"智造力",为企业财务管理决策提供全方位信息,产.供.销 ...

  9. Angular记录(4)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  10. Python学习第四天

    一.数字 int 二.字符串 str #以下均为补充内容 #对于空字符串是假 #数字0是假 #数字和字符串可以相互转换 # a="123" # b=int(a) # a=123 # ...