表单、单选、下拉框、文本域、多选框、提交、重置、按钮

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
昵称:<input type="text" name="haha" id="hehe" placeholder="请输入用户名" autofocus="autofocus"><br>
<br>
密码:<input type="password"><br><br>
性别:<input type="radio" name="xb" id="nan" checked="checked"/><label for="nan">男</label>
<input type="radio" name="xb" id="nv"><label for="nv">女</label>
<input type="radio" name="xb" id="baomi"><label for="baomi">保密</label><br><br>
地址:
<select name="">
<option>武汉市</option>
<option>荆门市</option>
<option>荆州市</option>
<option>孝感市</option>
<option>黄石市</option>
</select>
<select name="">
<optgroup label="北京">
<option>横店</option>
<option>昌平</option>
<option>朝阳</option>
</optgroup>
<optgroup label="深圳">
<option>罗湖区</option>
<option selected="selected">福田区</option>
<option>宝山区</option>
</optgroup>
</select><br><br>
<!-- textarea文本域不能设置rows、cols属性,因为浏览器解析的结果不一样,如果想让所有浏览器都一样,必须设置width、height才可以-->
介绍:
<textarea name="" id="" cols="30" rows="10" placeholder="请输入文字"></textarea><br><br>
你的爱好是:
<input type="checkbox" checked="checked" id="ceshi"><label for="ceshi">测试</label>
<input type="checkbox" id="chifan"><label for="chifan">吃饭</label>
<input type="checkbox" id="shuijiao"><label for="shuijiao">睡觉</label><br><br>
<input type="submit" value="提交">
<!--重置是把所有内容恢复到刷新状态-->
<input type="reset" value="重置">
<input type="button" value="按钮">
<button>按钮</button> </form>
</body>
</html>

效果

体验CSS

1、css基本语法

  书写位置:head标签内部

  环境:<style type = "text/css" ><style>

  书写css属性:控制的对象{css键值对}

  css键值对语法 k:v;

2、css常用文字控制属性

  字体:font-family

  字号:font-size

  颜色:color

  内容水平对齐方式:text-align: left|center|right

  首行缩进:text-indent

例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color: red; font-size: 30px; font-family: '微软雅黑';}
</style>
</head>
<body>
<p>你好</p>
</body>
</html>

第四篇 -- CSS基础的更多相关文章

  1. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  2. spring cloud系列教程第四篇-Eureka基础知识

    通过前三篇文章学习,我们搭建好了两个微服务工程.即:order80和payment8001这两个服务.有了这两个基础的框架之后,我们将要开始往里面添加东西了.还记得分布式架构的几个维度吗?我们要通过一 ...

  3. 第四章 CSS基础

    1.CSS是cascading style sheets 层叠样式表.样式定义如何显示html元素,通常存储在样式表中,将样式添加到html中,是为了解决内容与表现分离的问题. 2.外部样式表可以极大 ...

  4. 【Python之路】第四篇--Python基础之函数

    三元运算 三元运算(三目运算),是对简单的条件语句的缩写 # 书写格式 result = 值1 if 条件 else 值2 # 如果条件成立,那么将 “值1” 赋值给result变量,否则,将“值2” ...

  5. 第四篇 CSS

    在标签上设置style属性: background-color:#2459a2: height:48px: ... 编写CSS样式: 如何注释:/* 或 */ 一. 在标签的属性中编写 <!DO ...

  6. python之路第四篇(基础篇)

    一.冒泡算法实现: 方法一: li = [13,33,12,80,66,1] print li for m in range(4): num1 = li[m] num2 = li[m+1] if nu ...

  7. 第四篇.python的基础

    目录 第四篇.python基础01 1. 变量 2. 常量 3. python变量内存管理 4. 变量的三个特征 5. 花式赋值 6. 注释 7. 数据类型基础 8. 数字类型 9. 字符串类型 10 ...

  8. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  9. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

随机推荐

  1. 如何下载安装Python

     github博客传送门 csdn博客传送门 如何下载安装python 第一步: 在python的官网下载python版本,需要下载对应版本(在计算机-属性中查看自己是32位操作系统还是64位操作系统 ...

  2. 搭建简单模型训练MNIST数据集

    # -*- coding = utf-8 -*- # @Time : 2021/3/16 # @Author : pistachio # @File : test1.py # @Software : ...

  3. Pytest学习笔记3-fixture

    前言 个人认为,fixture是pytest最精髓的地方,也是学习pytest必会的知识点. fixture用途 用于执行测试前后的初始化操作,比如打开浏览器.准备测试数据.清除之前的测试数据等等 用 ...

  4. 初学springboot

    现在总是与数据库和前端打交道,让我觉得好厌烦,还是喜欢敲代码.最近问了几个朋友,都说潮流要学springCloud,然后学springCloud又要先学springboot,所以这段时间我会慢慢把sp ...

  5. EEPROM工作原理透彻详解

    原文链接点击这里 EEPROM(Electrically Erasable Programmable read only memory)即电可擦可编程只读存储器,是一种掉电后数据不丢失(不挥发)存储芯 ...

  6. 『动善时』JMeter基础 — 50、使用JMeter测试WebService接口

    目录 1.什么是WebService 2.WebService和SOAP的关系 3.什么是WSDL 4.测试WebService接口前的准备 (1)如何判断是WebService接口 (2)如何获取W ...

  7. 测试开发:推荐一款阿里最新 Python 自动化开源工具!

    大家好,我是麦小米,是狂师老师全栈测开训练营中的一名学员. 如果之前做过iOS自动化的同学相信都知道,一直以来,iOS自动化的实现&执行都必须依赖 Mac 系统,其主要原因是因为需要通过 xc ...

  8. C++实现二分法详解

    二分法是在一个排好序的序列(数组,链表等)中,不断收缩区间来进行目标值查找的一种算法,下面我们就来探究二分法使用的一些细节,以及常用的场景: 寻找一个数: 寻找左侧边界: 寻找右侧边界. 一.二分法的 ...

  9. BGV方案

    BGV方案 SIMD技术 中国剩余定理 在<孙子算经>中有这样一个问题:"今有物不知其数,三三数之剩二(除以3余2),五五数之剩三(除以5余3),七七数之剩二(除以7余2),问物 ...

  10. hdu 1754 I Hate It 线段树 单点更新 区间最值

    线段树功能:update:单点更新 query:区间最值 #include <bits/stdc++.h> #define lson l, m, rt<<1 #define r ...