HTML(二)

最新推荐文章于 2022-03-16 13:43:45 发布

张张的宝藏

最新推荐文章于 2022-03-16 13:43:45 发布

阅读量82

点赞数 3

本文链接：https://blog.csdn.net/m0_56426996/article/details/117480868

版权

一、表单

HTML 表单用于搜集不同类型的用户输入。

（一）表单属性

1.Action属性

定义提交表单时要执行的操作。当action属性被省略时，将action设置为当前页面。

2.Target属性

规定提交表单后在何处显示相应。默认值为_self，代表在当前窗口打开。

_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

3、Method属性

method 属性指定提交表单数据时要使用的 HTTP 方法。表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。提交表单数据时，默认的 HTTP 方法是 GET。

4、Autocomplete属性

autocomplete 属性规定表单是否应打开自动完成功能。

5、Novalidate属性

novalidate 属性是一个布尔属性。如果已设置，它规定提交时不应验证表单数据。

（二）表单元素

1、input元素

<input> 元素根据不同的 type 属性，可以变化为多种形态。

text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

<form>
    <p>学校:</p>
    <input type="text" name="学校">
    <p>学院</p>
    <input type="text" name="学院">
    </form>

(1)text类型<input type="text"> 定义供文本输入的单行输入字段。

(2)password类型<input type="password"> 定义密码字段。

(3)submit类型<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

(4)radio类型<input type="radio"> 定义单选按钮。

(5)checkbox类型<input type="checkbox"> 定义复选框。（复选框允许用户在有限数量的选项中选择零个或多个选项。）

(6)button类型<input type="button> 定义按钮。

2、select元素

<select> 元素定义下拉列表：

3、option元素

元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

4、textarea元素

定义多行输入字段（文本域）。

5、button元素

定义可点击的按钮。

二、CSS

（一）css选择器

1、CSS元素选择器

元素选择器根据元素名称来选择 HTML 元素。

<style>
        p {
          text-align: center;
          color: blueviolet;
        } 
        </style>

<body>
    <p>张张1</p>
    <p id="para1">张张2</p>
    <p>张张3</p>

2、CSS id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素，要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

 <style>
        #para1 {
         text-align: center;
         color: blue;
        </style>

 <p id="para1">张张1</p>
      <p>张张2</p>

3、CSS类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

 <style>
        .center {
          text-align: center;
          color: rgb(192, 39, 146);
        }
        </style>



body>
    <h1 class="center">张张在中间</h1>
    <p class="center">居中的张张</p> 
    
</body>

4、CSS通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
  text-align: center;
  color: blue;
}

5、CSS分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}


<h1>张张</h1>
<h2>张张2</h2>
<p>张张3</p>