【前端】HTML+CSS复习记录【3】

文章目录


前言

长时间未使用HTML编程,前端知识感觉忘得差不多了。通过梳理知识点,重新学习和巩固前段相关知识。

学习位置:W3CSchool:HTML + CSS 基础实战


一、from(表单)

复制代码
表单是一个包含表单元素的区域。使用表单标签 <form> 来设置
表单元素是允许用户在表单中输入内容,比如:文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。
input的placeholder​ 属性提供可描述输入字段预期值的提示信息。
form的action属性的值指定了表单提交到服务器的地址。
required​(必填项),只有当用户填写了该选项后,用户才能够提交表单
label没有任何样式效果,有触发对应表单控件功能。
checked 默认被选中。

注意:required属性在Safari浏览器中不起作用

html 复制代码
<form name="input" action="html_form_action.php" method="get">
    用户名: <input type="text" name="user">
    <input type="submit" value="提交">
</form>

<form><!--单选-->
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
</form>

<form><!--多选-->      
<input type="checkbox" name="vehicle" value="Bike">我有自行车<br>      
<input type="checkbox" name="vehicle" value="Car">我有小车
</form>

<form action="">
<fieldset><!--绘制表边框-->
<legend>Personal information:</legend><!--显示在边框上的字样-->
Name: <input type="text" size="30" required><br><!--必填-->
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

<form action="" method="get"><!--labled的用法(1)-->
性别:<br/>
<input name="sex" id="man" type="radio" value=""/>
<label for="man">男</label><!--input标签内id的值与label标签内for的值对应-->
<input name="sex" id="woman" type="radio" value=""/>
<label for="woman">女</label> 
</form> 

<form action="" method="get"><!--labled的用法(2)-->
性别:<br/><!--包裹input标签和内部文字-->
<label><input type="radio" name="sex" value="male" checked>Male</label>
<!--checked默认被选中-->
<label><input type="radio" name="sex" value="female">Female</label>
</form> 

二、style属性

复制代码
<style> 标签用于为 HTML 文档定义CSS样式信息

1、标签中直接定义(内联样式)

html 复制代码
    <div style="color: red;">HTML</div>

2、定义在head中

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta >
    <title></title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3、外部链接引用

html 复制代码
    <link rel="stylesheet" href="my.css"><!--href中引用路径-->
    <link href="https://fonts.loli.net/css?family=Lobster" rel="stylesheet" type="text/css"><!--引入外部字体-->

四、 class 选择器

CSS选择器用于选择你想要的元素的样式的模式。

https://www.w3cschool.cn/cssref/css-selectors.html)

此处仅展示常用的几个:


系列文章目录

【前端】HTML+CSS复习记录【1】
【前端】HTML+CSS复习记录【2】

【前端】HTML+CSS复习记录【3】(本章)

相关推荐
上单带刀不带妹1 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军22 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW37 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字43 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解2 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵2 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端