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

<!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. 【NX二次开发】Block UI 标签/位图

    属性说明: 常规         类型 描述     BlockID     String 控件ID     Enable     Logical 是否可操作     Group     Logica ...

  2. 与安卓联调，调用安卓那边的方法，获取到安卓传过来的数据，再携带这些数据发送axios请求，获取到用户的信息

    第一步:js调用Android方法:接收Android传递过来的数据,并做处理 //参数一:调用java中的方法   submitFromWeb是方法名,必须和Android中注册时候的方法名称保持一 ...

  3. 学习响应式编程 Reactor (2) - 初识 reactor

    Reactor Reactor 是用于 Java 的异步非阻塞响应式编程框架,同时具备背压控制的能力.它与 Java 8 函数式 Api 直接集成,比如 分为CompletableFuture.Str ...

  4. 深入理解JVM，7种垃圾收集器，看完我跪了

    如果说收集算法是内存回收的方法论,那么垃圾收集器就是内存回收的具体实现.Java虚拟机规范中对垃圾收集器应该如何实现并没有任何规定,因此不同的厂商.版本的虚拟机所提供的垃圾收集器都可能会有很大差别,并 ...

  5. text-decoration属性作用和方法

    text-decoration-line(注释文本添加一条装饰线):none(文本中没有线条). underline(文本的下方显示一条线). overline(文本的上方将显示一条线). line- ...

  6. Drools规则引擎实践直白总结

    目录 1. 创建Drools环境(引入Drools相关依赖包.现在都流行spring boot,故最简单有效的依赖才是最好的,kie-spring内部自行依赖了drools相关核心的依赖包) 2. 了 ...

  7. 如何在国产龙芯架构平台上运行c/c++、java、nodejs等编程语言

    高能预警:本文内容过于硬核,涉及编译器原理.cpu指令集.机器码.编程语言原理.跨平台原理等计算机专业基础知识,建议具有c.c++.java.nodejs等多种编程语言开发能力,且实战经验丰富的资深开 ...

  8. 17、ansible配置管理

    17.1.前言: 1.说明: ansible是自动化运维工具,基于Python开发,实现了批量系统配置.批量程序部署.批量运行命令等功能. ansible是基于模块工作的,本身没有批量部署的能力,真正 ...

  9. 97、配置yum源仓库服务器

    (服务端(双(外,内)网卡)--客户端(内网)) YUM主要用于自动安装.升级rpm软件包,它能自动查找并解决rpm包之间的依赖关系.要成功的使用YUM工具安装更新软件或系统, 就需要有一个包含各种r ...

  10. Typecho 安装教程 -- Linux

    1.下载宝塔面板 1 使用 SSH 连接工具,如堡塔SSH终端连接到您的 Linux 服务器后,挂载磁盘,根据系统执行相应命令开始安装(大约2分钟完成面板安装): 2 Centos安装脚本 yum i ...