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

文章目录

前言
一、from（表单）
二、style属性
- 1、标签中直接定义（内联样式）
- 2、定义在head中
- 3、外部链接引用
四、 class 选择器
系列文章目录

前言

长时间未使用HTML编程，前端知识感觉忘得差不多了。通过梳理知识点，重新学习和巩固前段相关知识。
学习位置：W3CSchool：HTML + CSS 基础实战

一、from（表单）

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

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

<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、标签中直接定义（内联样式）

    <div style="color: red;">HTML</div>

2、定义在head中

<!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、外部链接引用

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