本文共 2070 字，大约阅读时间需要 6 分钟。

今天是实训的第三天，是正式上课的第二天，今天学习到的知识是HTML里的表单标签和CSS样式表。

一、表单

表单是一个包含表单元素的区域，表单元素允许用户在表单（比如文本域、下拉列表、单选框、复选框等等）输入信息的元素。

form

    表单标签         <form>    定义供用户输入的表单         <input>    定义输入域         <textarea>    定义文本域 (一个多行的输入控件)         <label>    定义了 <input> 元素的标签，一般为输入标题         <fieldset>    定义了一组相关的表单元素，并使用外框包含起来         <legend>    定义了 <fieldset> 元素的标题         <select>    定义了下拉选项列表         <optgroup>    定义选项组         <option>    定义下拉列表中的选项         <button>    定义一个点击按钮         <datalist>New    指定一个预先定义的输入控件选项列表         <keygen>New    定义了表单的密钥对生成器字段         <output>New    定义一个计算结果

输入元素

        文本域  text         密码字段 password         复选框 checkboxes         单选按钮 radio buttons         提交按钮 submit

属性

         value：提交数据到服务器的值（后台程序PHP使用）         name：为控件命名，以备后台程序 ASP、PHP 使用         checked：当设置 checked="checked" 时，该选项被默认选中         selected：使此选项成为默认选项。         disabled：使此选项无法点击。         style="display:none"：使此选项不在旧版浏览器中显示。          hidden：使此选项不显示在下拉列表中。

二、CSS样式表

CSS

    选择器         标签选择器             HTML标签名(元素)作为选择器名称，如：div 、h1 、p …

        类选择器

            类(class)用于描述一组标签的样式，class 可以用在多个标签中

        ID选择器

            ID选择器用于为标有特定ID的HTML标签设置样式

        通配选择器

            利用 * 为指定范围内的所有标签设置样式 

        包含选择器

            HTML中为父元素(标签)下的子元素设置样式

        选择器分组

            一组元素设置相同样式，利用逗号分割多个选择器

    文本样式

        color：设置文本颜色         text-align：设置文本水平对齐方式         line-height：设置文本的行高     背景样式         background-color：设置背景颜色         background-image：设置背景图片         background-repeat：设置背景图片重复方式             repeat 表示背景图片重复（默认值）             no-repeat 表示背景图片不重复             repeat-x 表示背景图水平重复             repeat-y 表示背景图垂直重复         background-attachment：设置背景是否随页面滚动         background-position：设置背景图片位置             left top 左上             left center 左中             left bottom 左下             right top 右上             right center 右中             right bottom 右下             center top 中上             center center 中中部             center bottom 中下         背景样式简写    CSS超链接     状态         a:link - 正常状态，未访问过的超链接状态         a:visited - 已访问过状态，用户已访问过的超链接状态         a:hover - 鼠标放上状态，当用户鼠标放在超链接上时状态         a:active - 点击状态，超链接被点击的那一刻状态     样式         color：字体颜色         background-color：背景颜色         font-size:字体         text-decoration：链接文字下划线的有无         cursor:鼠标形状             default:默认光标             pointer:超链接的指针             wait:指示程序正在忙             help:指示可用的帮助             text:指示文本             crosshair:鼠标呈现十字状     CSS字体样式         字体类型：font-family         大小：font-size         风格：font-style         粗细：font-weight         设置字体属于属性：font

定位

    position:relative 相对定位     position:absolute 绝对定位     position:fixed 固定定位     position:static 默认值浮动     float:left 靠左浮动     float:right 靠右浮动     float:none 不浮动

三、HTML盒子模型

在HTML页面中，每一个元素都是一个规则的矩形，因此每一个元素都由一个盒子模型来表示，盒子模型由4个区域组成：

content box（内容区域）

padding box（内边距区域）

border（边框区域）

margin（外边距区域）

border边框结构：

padding内边距结构：

          内边距几个值的区别：

margin外边距结构：

       外边距几个值的区别：

CSS元素水平居中：

转载地址：https://blog.csdn.net/yyyyyang525/article/details/117482067 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！