

 

 哈喽！大家好，我是【张时贰】，一位热爱学习的博主！

 

 【张时贰】的写作风格：喜欢用【言简意赅】的方式由【理论】到【实践】去讲解每一个知识点，而不喜欢用【晦涩难懂】的官方陈述

 

【张时贰】博客的主要是自己学习过程中的笔记与心得

 

 欢迎点赞  收藏 ⭐留言  如有错误敬请指正！

 

‍‍

感谢月薪百万的你支持我！

 2022.3.8 早八

文章目录

2.1.5 HTML表单标记2.1.6 超链接与图片标记 2.2 CSS

2.2.1 CSS 规则2.2.2 CSS选择器2.2.3 CSS书写位置

本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
JAVA WEB开发技术专栏 传送门
提示：目录顺序以当堂内容(教材)为准，所以并非“1、2、3”
本节主要内容：对上一篇标签的完善。CSS样式书写与使用规则

2.1.5 HTML表单标记

表单（

）是一个包含表单元素的区域

表单元素是允许用户在表单中输入内容,比如：文本域、下拉列表、单选框、复选框等。表单是用户和网页交互信息的重要手段

 form标签

用于创建供用户输入的 HTML 表单

元素包含一个或多个如下的表单元素：

<button> <select> <option> <optgroup> <fieldset> <label></p> </blockquote>  form属性 <table><thead><tr><th align="center">属性</th><th>值</th><th>描述</th></tr></thead><tbody><tr><td align="center">accept-charset</td><td>character_set</td><td>规定服务器可处理的表单数据字符集</td></tr><tr><td align="center">action</td><td>URL</td><td>规定当提交表单时向何处发送表单数据</td></tr><tr><td align="center">autocomplete *</td><td>on off</td><td>规定是否启用表单的自动完成功能。</td></tr><tr><td align="center">enctype</td><td>application/x-www-form-urlencoded multipart/form-data text/plain</td><td>规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况）</td></tr><tr><td align="center">method</td><td>get post</td><td>规定用于发送表单数据的 HTTP 方法</td></tr><tr><td align="center">name</td><td><em>text</em></td><td>规定表单的名称。</td></tr><tr><td align="center">novalidate</td><td>novalidate</td><td>如果使用该属性，则提交表单时不进行验证</td></tr><tr><td align="center">target</td><td>_blank _self _parent _top</td><td>规定在何处打开 action URL</td></tr></tbody></table>  botton属性 <table><thead><tr><th align="left">属性</th><th align="left">值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">autofocus</td><td align="left">autofocus</td><td align="left">规定当页面加载时按钮应当自动地获得焦点。</td></tr><tr><td align="left">disabled</td><td align="left">disabled</td><td align="left">规定应该禁用该按钮。</td></tr><tr><td align="left">form</td><td align="left">form_id</td><td align="left">规定按钮属于一个或多个表单。</td></tr><tr><td align="left">formaction</td><td align="left">URL</td><td align="left">规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=“submit” 配合使用。</td></tr><tr><td align="left">formenctype</td><td align="left">application/x-www-form-urlencoded multipart/form-data text/plain</td><td align="left">规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type=“submit” 配合使用。</td></tr><tr><td align="left">formmethod</td><td align="left">get post</td><td align="left">规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type=“submit” 配合使用。</td></tr><tr><td align="left">formnovalidate</td><td align="left">formnovalidate</td><td align="left">如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type=“submit” 配合使用。</td></tr><tr><td align="left">formtarget</td><td align="left">_blank _self _parent _top <em>framename</em></td><td align="left">规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=“submit” 配合使用。</td></tr><tr><td align="left">name</td><td align="left">name</td><td align="left">规定按钮的名称。</td></tr><tr><td align="left">type</td><td align="left">button reset submit</td><td align="left">规定按钮的类型。</td></tr><tr><td align="left">value</td><td align="left">text</td><td align="left">规定按钮的初始值。可由脚本进行修改。</td></tr></tbody></table>  select下拉菜单标记 <table><thead><tr><th>属性</th><th>值</th><th align="center">描述</th></tr></thead><tbody><tr><td>Autofocus</td><td>autofocus</td><td align="center">规定在页面加载时下拉列表自动获得焦点。</td></tr><tr><td>disabled</td><td>disabled</td><td align="center">当该属性为 true 时，会禁用下拉列表。</td></tr><tr><td>form</td><td>form_id</td><td align="center">定义 select 字段所属的一个或多个表单。</td></tr><tr><td>multiple</td><td>multiple</td><td align="center">当该属性为 true 时，可选择多个选项。</td></tr><tr><td>name</td><td>name</td><td align="center">定义下拉列表的名称。</td></tr><tr><td>required</td><td>required</td><td align="center">规定用户在提交表单前必须选择一个下拉列表中的选项。</td></tr><tr><td>size</td><td><em>number</em></td><td align="center">规定下拉列表中可见选项的数目。</td></tr></tbody></table>  textarea多行文本标记 <table><thead><tr><th>属性</th><th>值</th><th>描述</th></tr></thead><tbody><tr><td>autofocus *</td><td>autofocus</td><td>规定当页面加载时，文本区域自动获得焦点。</td></tr><tr><td>cols</td><td><em>number</em></td><td>规定文本区域内可见的列数。</td></tr><tr><td>disabled</td><td>disabled</td><td>规定禁用文本区域。</td></tr><tr><td>form *</td><td>form_id</td><td>定义文本区域所属的一个或多个表单。</td></tr><tr><td>maxlength *</td><td>number</td><td>规定文本区域允许的最大字符数。</td></tr><tr><td>name</td><td>text</td><td>规定文本区域的名称。</td></tr><tr><td>Placeholder *</td><td>text</td><td>规定一个简短的提示，描述文本区域期望的输入值。</td></tr><tr><td>readonly</td><td>readonly</td><td>规定文本区域为只读。</td></tr><tr><td>Required *</td><td>required</td><td>规定文本区域是必需的/必填的。</td></tr><tr><td>rows</td><td>number</td><td>规定文本区域内可见的行数。</td></tr><tr><td>Wrap *</td><td>hard soft</td><td>规定当提交表单时，文本区域中的文本应该怎样换行。</td></tr></tbody></table>  练习 <pre class='brush:php;toolbar:false'><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> form>div{margin: 1rem;} form>div>label{display: inline-block;width: 5rem;text-align: right;} </style> </head> <body> <form> <div> <label>简介：</label> <textarea name="introduction" cols="15" rows="">