HTML表单标签&CSS基本语法

最新推荐文章于 2023-08-28 01:30:45 发布

那么遥远

最新推荐文章于 2023-08-28 01:30:45 发布

阅读量475

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46022982/article/details/115915056

版权

HTML&CSS 笔记

1. 列表
   无序列表	ul li
   有序列表 ol li
   定义列表 dl dt dd


2. 表格
   表格基本结构
   表格的整体样式设置
   单元格内容对齐方式、单元格宽高
   单元格跨行跨列


3. 表单
	表单整体设置 form    action  method target
	表单控件： 文本输入框  密码输入框   单选按钮   复选框   提交按钮  重置按钮   普通按钮   文本域  下拉选项
	表单控件的属性：  name  value disabled

2 表单

2.1 表单总体设置

<form action="http://www.baidu.com/s" method="get" target="_blank"> 
    <!--表单控件 输入框-->
    <input type="text" name="wd">
    <!--提交按钮-->
    <button>搜索</button>
</form>

form 标签是表单最外层的包裹标签，表单中所有的一切都要包裹在 form 的里面， form 标签具有如下属性：

action		设置要提交的地址（后端处理程序的地址）
method		设置请求方式，值: get、post
target		目标地址在哪里打开，值：_self、_blank

2.2 表单控件

① 文本输入框

<input type="text">
<input type="text" maxlength="10"> <!--设置最大可以输入长度-->

② 密码输入框

<input type="password">
<input type="password" maxlength="10"> <!--设置最大可以输入长度-->>

③ 单选按钮

<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女   <!--默认被选中-->
<input type="radio" name="gender"> 其他

总结：

同一组的单选按钮，具有相同的 name 值，才有单选的效果。
设置 checked 属性可以实现默认选中，该属性无需给值。

④ 复选框

<input type="checkbox" checked> 干饭  <!--默认被选中-->
<input type="checkbox"> 抽烟
<input type="checkbox"> 喝酒
<input type="checkbox"> 烫头发
<input type="checkbox"> 敲代码

⑤ 提交按钮

<input type="submit" value="提交表单">
<button type="submit">提交表单</button>
<button>提交表单</button>

注意： button 标签的 type 属性默认值是 submit，所以不设置type属性的 button 标签就是提交按钮！

⑥ 重置按钮

<input type="reset" value="重置表单">
<button type="reset">重置按钮</button>

⑦ 普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

⑧ 文本域

<textarea rows="10" cols="80"></textarea>

相比于文本输入框，文本域适合输入多行文字（如自我介绍、论坛帖子、文章等）

⑨ 下拉选项

<select>
    <option value="0">文盲</option>
    <option value="1">小学</option>
    <option value="2">初中</option>
    <option value="3">高中</option>
    <option value="4">中专</option>
    <option value="5">大专</option>
    <option value="6">本科</option>
    <option value="7" selected>研究生</option>
</select>

默认会选中第一下拉选项，可以通过给 option 设置 selected 属性自定义默认选项。

2.3 表单控件的属性

① name 属性

1. 每个表单控件都应该设置 name 属性，name 属性设置的是表单控件数据的名字，后端会通过该名字获取数据。
2. 单选按钮需要通过设置相同的 name 属性值实现单选效果。
3. 下拉选项 name 属性需要设置给 select 标签。
4. 所有按钮类的表单控件不应该设置 name 属性。

② value 属性

1. 文本输入框、密码输入框设置 value 属性可以设置默认显示的文字
2. 使用 input标签实现按钮，通过 value 属性设置按钮中的文字
3. 单选按钮和复选框，value 属性的值是真正提交的数据，如果不设置value属性就没有数据。
4. textarea 没有value属性，要设置默认显示文字，可以设置在双标签内
5. option 设置value属性，作为真正提交的数据； 如果没有value属性，双标签中的文字作为提交的数据。

③ disabled 属性

1. 每个表单控件都可以设置 disabled 属性，设置了disabled属性之后，该表单控件不可用
2. disabled 属性不需要设置值，有该属性就生效
3. select 设置disabled 属性整个下拉选项不可用，option 设置disabled属性，只有该选项不可选

2.4 label 标签的使用

1. 使用label标签可以把表单控件和文字进行关联
2. 语义的意义：让搜索引擎识别表单控件的文字描述
3. 功能的意义：帮助表单控件更便捷获取焦点（通过点击文字让表单控件获取焦点）


<!--
 通过设置 label 标签 for 属性的值与表单控件 id 属性的值一致，进行关联
 适合的表单控件类型： 文本输入框、密码输入框、文本域、下拉选项
-->
<label for="usernameInput">用户名：</label>
<input type="text" id="usernameInput">


<!--
 通过用 label 标签把表单控件和文字都包裹在里面，进行关联
 适合的表单控件类型：单选按钮、复选框
-->
<label>
    <input type="radio" name="gender">男
</label>
<label>
    <input type="radio" name="gender">女
</label>
<label>
    <input type="radio" name="gender">其他
</label>

2.5 表单标签总结

标签名	语义和功能	属性	单标签和双标签
form	表单	action：设置要提交的地址。 method：设置请求方式，值：get、post。 target：新页面的打开方式值：`_self`、`_blank`。	双标签
input	各种类型的表单控件	type：设置不同类型的表单控件。 maxlength ：设置输入框最大输入长度。 value：设置表单控件的值。 name ：设置表单控件的名字。 checked：默认选中复选框或单选按钮。 disabled：设置该表单控件不可用。	单标签
button	按钮	type：按钮的类型，值: submit（默认）、reset、button。 disabled：设置该表单控件不可用。	双标签
textarea	文本域	name ：设置表单控件的名字。 rows：设置默认显示的行数（高）。 cols：设置默认显示的列数（宽）。 disabled：设置该表单控件不可用。	双标签
select	下拉选项框	name ：设置表单控件的名字。 disabled：设置该表单控件不可用。	双标签
option	下拉选项	value：设置表单控件的值。 selected：设置默认选中。 disabled：设置该表单控件不可用。	双标签
label	关联表单控件和描述文字	for：需要指定与之关联的表单控件的ID值。	双标签

input 标签的 type 属性的值： text、password、radio、checkbox、submit、reset、button

3 框架标签

标签名	功能和语义	属性	单标签还是双标签
iframe	设置内联框架。把其他文件（网页）显示引入当前页面	src：要引入文件的地址。 width：设置宽度。 height：设置高度。 frameborder：设置是否有边框，0表示没有，1 表示有。 name：该框架的名字。	双标签

4 HTML 字符实体

空格		&nbsp;
<		 &lt;
>        &gt;
&		 &amp;
¥        &yen;
©        &copy;
×        &times;
÷        &divide;

5 全局属性

lang 		设置标签里面文字的语言，值：cn、en、fr 等,通产设置给 html 标签。
id			设置标签的ID名，每个标签的ID值应该是唯一的。
class		设置标签的类型，用于CSS样式设置
style		用于设置CSS样式
title		设置鼠标悬停在标签上的提示文字，一般img和a用得比较多

6 meta 元信息

<!--字符集编码-->
<meta charset="utf-8">

<!--网页关键字-->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!--网页描述信息-->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!--页面10s后刷新-->
<meta http-equiv="refresh" content="10">
		
<!--页面 10s 之后跳转到 http://www.atguigu.com -->
<meta http-equiv="refresh" content="10,url=http://www.atguigu.com">

7 VSCode 的使用

7.1 VSCode 相关配置

1. 调整默认字体大小：   	左下角小齿轮 -> 选择“设置” -> 常用设置 -> Edit:Font Size

2. 调整目录结构层级距离：	  左下角小齿轮 -> 选择"设置" -> 工作台 -> 外观 -> Tree:Indent

3. 避免目录层级紧凑显示：   左下角小齿轮 -> 选择"设置" -> 功能 -> 资源管理器 -> Compact Folders 去掉前面的勾

4. 设置自动保存： 左下角小齿轮  -> 选择“设置” -> 常用设置 -> Files:Auto Save

5. 修改编辑器的颜色主题：  左下角小齿轮 -> 选择“颜色主题”

6. 修改文件图标主题：		左下角小齿轮 -> 选择"文件图标主题"

7.2 推荐的扩展

1. Chinese (Simplified) Language Pack for Visual Studio Code 中文扩展

2. Live Serve

3. chinese lorem

7.3 快捷操作介绍

1 HTML模板代码一键生成
  ! 按tab键
 

2. HTML 标签快捷书写方式
  标签名 按tab键


3. 注释快速书写方式
  ctrl + /
  
4. 同时缩进多行代码
   向右缩进：选中 按tab
   向左缩进：选中 按shift+tab

5. 复制当前行到下一行
   ctrl+c
   ctrl+v

6.  快速生成文字 lorem
    lorem 			按tab
    lorem + 数字    按tab

8 CSS 的基本语法

8.1 HTML 和 CSS 的关系

CSS 样式作用在 HTML 元素上

8.2 HTML 元素树

根据 HTML 元素的书写位置，描述元素与元素之间的关系：

父元素
祖先元素
子元素
后代元素
兄弟元素

8.3 在 HTML 中使用 CSS

① 行内式

给 HTML 元素设置 style 属性，把 CSS 代码写在 style 属性的值里面。

<p style="color:red;width:200px;"></p>

② 内联式

把 CSS 代码写 style 标签中，style 标签建议放在 head 中。

<style>
    p {
        width: 200px;
        height: 300px;
    }
</style>

③ 外链式

把 CSS 代码写在独立 CSS 文件中，再在 html 文件中使用 link 关联 css 文件。

<link rel="stylesheet" href="css文件的地址">

8.4 CSS 基本语法结构

① 内嵌式和外链式的语法结构

选择器 {
    CSS属性: 值;
    CSS属性: 值;
    CSS属性: 值;
    CSS属性: 值;
}

/*紧凑写法*/
选择器 {CSS属性: 值; CSS属性: 值; CSS属性: 值; CSS属性: 值;}

选择器： 用于选择到要设置样式的元素。

声明块： 选择器后面的大括号，称之为一个声明块。声明块由一条一条的声明组成。

声明： 一条声明就是一个样式；声明必须用分号结尾；声明由CSS属性和该属性的值组成。

② 行内式的语法结构

<标签名 style="CSS属性:值; CSS属性:值; CSS属性:值; "></标签名>

③ HTML 属性和 CSS 属性

<!-- 使用 HTML 元素的属性设置宽高 -->
<img src="小乐入狱图.jpg" alt="小乐入狱" width="400" height="300">

<hr>

<!-- 使用 CSS 设置img元素宽高 -->
<img src="小乐入狱图.jpg" alt="小乐入狱" style="width: 400px; height: 300px;">

8.5 CSS 的层叠性

使用不用选择器，使用不同设置方式（内嵌、行内、外链）对某个元素所设置的样式，最终都会作用在元素上，这种特性就是 CSS 的层叠性。

8.6 CSS 注释

/* 这就是 CSS 的注释 */

/*
CSS 多行注释
CSS 多行注释
CSS 多行注释
CSS 多行注释
*/

总结

总结：
1. 表单标签总结，label标签
2. 框架标签 iframe
3. HTML 字符实体  : &nbsp; &lt; &gt; &amp;  &yen;  &copy;  &times;  &divide;
4. HTML 全局属性： lang title  id  class style
5, meta 元信息   字符集编码、设置关键字、设置网页描述信息、刷新或跳转
6. vscode 的使用
7. CSS 基础
   CSS 在HTML中使用的三种方式
   CSS 的基本语法结构
   CSS 的层叠性
   CSS 的注释