Unit02：表单、CSS

amazingweiwei 2020-10-08

340

一、表单

1. 表单元素

用来声明数据提交的范围,只有在此元素内的数据可以提交给服务器.

action：声明数据提交的目标
method：
enctype：

<form action="https://www.yuque.com"/>

2. 表单控件

用来让用书输入数据

input元素(9个),用type属性区分

文本框：

value：设置默认值
maxlength：设置最大长度
readonly：设置只读

<P>
    账号：<intpu type="text" value="YuQue" maxlength="10" readonly/>
</P>

密码框：属性值同文本框

<P>
    密码：<input type="password"/>
</P>

单选框

name：组名，同一组radio互斥
checked：设置默认选中
value：?

<p>
    性别：
  <input type="radio" name="sex" checked/>
  <input type="radio" name="sex"/>
</p>

多选框

checked：设置默认选中
name：?
value：?

<P>
    兴趣：
  <input type="checkbox" checked/>音乐
  <input type="checkbox"/>看书
</P>

文件框

<p>
    头像：<input type="file"/>
</P>

隐藏框

<p>
    <input type="hidden"/>
</P>

按钮

submit：提交表单中的数据
reset：将表单中的数据重置为初始值
button：没有任何功能，须通过js定义功能

<P>
    <input type="submit" value="注册"/>
  <input type="reset" value="重置"/>
  <input type="button" value="审核通过"/>
</P>

其他元素(3个)

label(标签)

lable：用来管理表单中的文本，可以将文本与控件绑定在一起，从而增加了控件的受力面积.
id：元素的唯一标识，相当于元素的身份证号.任何元素都可以有id，程序员有义务保障元素的id不重复.

<P>
    <input type="checkbox" id="c1"/>
  <lable for="c1">我已阅读并自愿遵守此协议</lable>
</P>

selected(下拉选)

selected：设置默认选中
value：？

<P>
    城市:
  <select>
    <option>请选择</option>
    <!-- 默认选中北京 -->
    <option selected>北京</option>
    <option>上海</option>
    <option>广州</option>
  </select>
</P>

textarea(文本域)

cols：列数
rows：行数

<p>
    简介：
  <!-- 30列 5行的文本域 -->
  <textarea cols="30" rows="5"></textarea>
</p>

二、CSS（Cascading Style Sheets）

1. CSS定义：

CSS：层叠样式表，又叫级联样式表，简称样式表
用于HTML文档中元素的样式定义
实现了将内容与表现分离
提高代码的可重用性和可维护性

2. CSS的基础语法

选择器：决定哪些元素使用这些规则
声明：由一个或多个属性/值对组成，用于设置元素的外观表现

3. CSS样式表

内联样式

定义：在元素 style属性内直接写样式，此样式无法复用

内部样式

定义：在head元素里面的style标签里写样式,次样式可以被当前页面上众多元素复用.

外部样式

定义：单独在CSS文件中写的样式，哪个网页引用该文件，这网页就能复用这些样式

codeDemo:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<!-- 2.内部样式：在head元素里面的style标签里写样式,此样式可以被当前页面上众多元素复用. -->
<style>
    h2 {
        color: blue;
    }
</style>
<!-- 3.外部样式：在单独的CSS文件中写的样式，哪个网页引用该文件，这个网页就能复用这些样式. -->
<link rel="stylesheet" href="myStyleSheet.css"/>
</head>
<body>
  <!-- 1.内联样式：在元素style属性内直接写样式，此样式无法复用. -->
    <h1 sytele="color:red;">CSS内联样式</h1>
    <h2>CSS有三种用法</h2>
    <p>1.内联样式</p>
    <p>2.内部样式</p>
    <p>3.外部样式</p>
</body>
</html>

css文件

@charset "UTF-8";
p {
    color: green;
}

4. CSS样式表特征

继承性

父元素的样式可以被子元素所继承(颜色、字体)

层叠性

给一个元素设置不同的声明,其效果会叠加.

优先级

给同一个元素设置相同的声明，效果以后这为准,也叫就近原则.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    /* 1.继承性：父元素的样式可以被子元素所继承.(颜色、字体) */
    body {
        font-family:"微软雅黑", "文泉驿正黑", "黑体";
    }
    /* 2.层叠性：给一个元素设置不同的声明，其效果会叠加. */
    h1 {
        color: red;
    }
    /* ... */
    h1 {
        font-size: 50px;
    }
    /* 3.优先级：给同一个元素设置相同的声明,效果以后者为准,也叫就近原则. */
    h2 {
        color: green;
    }
    /* ... */
    h2 {
        color: yellow;
    }
    
</style>
</head>
<body>
    <h1>李雷和韩梅梅</h1>
    <h2>LucyAndLily</h2>
</body>
</html>

5. CSS 选择器

元素选择器

HTML文档中的元素就是选择器，比如：<p>, <h1>等

类选择器

选择class等于某值的所有原色.
class 是程序员根据逻辑自己给元素增加的分类

<Style>
  .girl {
    color: pink;
  }
</style>

id选择器

选择 id 等于某值的唯一的元素

<style>
  #p4 {
    color: yellow;
  }
</style>

选择器组

写出一组选择器，选中每个选择器所对应的目标的并集

<style>
  .girl, #p4 {
    font-weight: bold;
  }
</style>

派生选择器

选择某元素的子孙
#p5 b {
color: red;
}
选择某元素的儿子
#p5>b {
font-size: 30px;
}

伪类选择器：根据元素的状态选择元素

link：选择未访问过的超链接
a:link {
color: green;
}
visited：选择已访问过的超链接
a:visited {
color: red;
}
active：选择激活态的(正在点击的)按钮
#i1:active {
background-color: blue;
}
focus：选择有焦点(光标)的文本框/密码框/文本域
#i2:focus {
background-color: green;
}
hover：选择鼠标悬停态(触碰)的图片
img: hover {
width: 250px;
height: 250px;
}

codeDemo:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    /* 2.类选择器：选择class等于某值的所有元素.class是程序员根据逻辑自己给元素增加的分类. */
    .girl {
        color: pink;
    }
    /* 3.id选择器：选择id等于某值的唯一的元素. */
    #p4 {
        color: yellow;
    }
    /* 4.选择器组:写出一组选择器，选中每个选择器所对应的目标的并集. */
    .gril,#p4 {
        font-weight: bold;
    }
    /* 5.派生选择器 */
    /* 5.1选择某元素的子孙 */
    #p5 b {
        color: red;
    }
    /* 5.2选择某元素的儿子 */
    
    #p5>b {
        font-size: 30px;
    }
    
    /* 6.伪类选择器：根据元素的状态选择元素 */
    /* 6.1选择未访问过的超链接 */
    a:link {
        color: green;
    }
    /* 6.2选择已访问过的超链接 */
    a:visited {
        color: red;
    }
    /* 6.3选择激活太(正在点)的按钮 */
    #i1:active {
        background-color: blue;
    }
    /* 6.4选择有焦点的文本框/密码框/文本域 */
    
    #i2:focus {
        background-color: green
    }
    /* 6.5选择鼠标悬停太(触碰)的图片 */
    
    img:hover {
        width: 250px;
        height: 250px;
    }
</style>
</head>
<body>
    <p class="girl"></p>
    <p>韩梅梅</p>
    <p class="girl">lucy</p>
    <p id="p4">Tom</p>
    <p id="p5">
        北京市<u>海淀区<b>肖家河西区</b>农大南路</u>10号<b>回迁楼小区</b>16号楼
    </p>
    <p>
        <a href="http://www.baidu.com">百度</a>
        <a href="www.csdn.com">CSDN</a>
        <a href="https://www.yuque.com">YuQue</a>
    </p>
    <p>
        <input type="button" value="按钮" id="i1"/>
    </p>
    <p>
        选择有焦点的文本框<input type="text" id="i2"/>
    </p>
    </P>
        <img src="../images/01.jpg" />
    </p>
</body>
</html>

BOX模型

border 边框

四个边设置相同的边框
p {
border: 1px dashed red;
}
单个边设置边框(left/right/top/bottom)
h1 {
border-left: 10px solid blue;
}
overflow: auto 内容溢出
块元素一般宽度默认是100%，高度会自适应,内容越多，它越高.当给他固定的高度时,可能会导致内容溢出.
p {
width: 300px;
height: 60px;
/* 溢出时的处理 */
overflow: auto;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    /*1.四个边框设置相同的边框*/
    p {
        border: 1px dashed red;
    }
    /*2.单个边设置边框*/
    h1 {
        border-left: 10px solid blue;
    }
    /*3.块元素一般宽度默认是100%，高度会自适应,内容越多,它越高.当给他固定的高度时,可能会导致内容溢出 */
    p {
        width: 300px;
        height: 60px;
        /*溢出时的处理*/
        overflow: auto;
    }
</style>
</head>
<body>
    <h1>采桑子·重阳</h1>
    <p>
        人生易老天难老,岁岁重阳.
        今又重阳,战地黄花分外香.
        一年一度秋风劲,不似春光.
        胜似春光,寥廓江天万里霜.
    </p>
</body>
</html>

框模型设置

四个边设置相同的边距

<style>
  #d1 {
    padding: 20px;
    margin: 30px;
  }
</sytle>

四个边设置不同的边距(顺时针上右下左)

<style>
  #d2 {
    padding: 10px 20px 30px 40px;
    margin: 40px 30px 20px 10px;
  }
</style>

单个边设置边距 (left/right/top/bottom)

<style>
  #d3 {
    padding-left: 20px;
    margin-bottom: 40px;
  }
</style>

对边设置相同的边距(顺讯：上下、左右)

<style>
  #d4 {
    padding: 20px 40px;
    margin: 30px 10px;
  }
</style>

对边设置边距的特例

在设置外边距时，若左右外边距值为auto，则该元素水平居中.

<style>
  #d5 {
    margin: 20px auto;
  }
</style>

codeDemo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    div {
        border: 1px solid red;
        width: 100px;
        height: 100px;
    }
    /* 1.四个边设置相同的边框 */
    #d1 {
        padding: 20px;
        margin: 30px;
    }
    /* 2.四个边设置不同的边距(顺时针：上右下左) */
    #d2 {
        padding: 10px 20px 30px 40px;
        margin: 40px 30px 20px 10px;
    }
    /* 3.单个边设置边距 */
    #d3 {
        padding-left: 20px;
        margin-bottom: 40px;
    }
    /* 4.对边设置相同的边距  顺序：上下 左右*/
    #d4 {
        padding: 20px 40px;
        margin: 30px 10px;
    }
    /* 5.对边设置边距的特例
        在设置外边距时，若左右外边距值为auto，则该元素水平居中 */
    #d5 {
        margin: 20px auto;
    }
</style>
</head>
<body>
    <div id="d0">d0</div>
    <div id="d1">d1</div>
    <div id="d2">d2</div>
    <div id="d3">d3</div>
    <div id="d4">d4</div>
    <div id="d5">d5</div>
</body>
</html>

数据库

文章转载自amazingweiwei，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

Unit02：表单、CSS

一、表单

1. 表单元素

2. 表单控件

input元素(9个),用type属性区分

其他元素(3个)

二、CSS（Cascading Style Sheets）

1. CSS定义：

2. CSS的基础语法

3. CSS样式表

4. CSS样式表特征

5. CSS 选择器

BOX模型

框模型设置

评论