Download presentation
Presentation is loading. Please wait.
1
网站设计 前端 选择器(复习)，表单
2
1. 设置“内容，内容”字体为红色，样式应该这样写： ____ { ______ } <div> <h1>标题</h1> <p>内容，内容</p> </div>
3
2. 对“—— 作者”引用 “font-size:13px;color:#535353”，样式应 该这样写： ____ { font-size:13px;color:# } <div> <h1>标题</h1> <p>我觉得这些内容很值得学习，这里有一个<a>参考地址</a></p> <p ______>—— 作者</p> </div>
4
3. 让所有超链接，在鼠标指在上面时变为红色，默认黑色，样式应 该这样写： /. 默认
3. 让所有超链接，在鼠标指在上面时变为红色，默认黑色，样式应 该这样写： /*默认*/ ____ { font-size:13px;color:#000 } /*鼠标在上方时*/ ____ { font-size:13px;color:red } <h1>标题</h1> <p>我觉得这些内容很值得学习，这里有一个<a hred=“ hred=“ <p> 作者</p>
5
element （元素，标签） 对已存的标签，并选择设置所有 element元素的样式 例子二： 例子一： CSS: CSS:
p { font-size:15px;color:#000 } HTML: < P >内容</P> 此时页面所有P元素都被添加了“font-size:15px;color:#000”声明 例子二： CSS: div { background-color:yellow } HTML: < div > < P >内容</P> </div> < div ></div> 此时有二个背景为黄色的div，其中包含p标签，另一个内没有内容
6
.class （元素，标签） 新建一个样式空间，选择并设置 class=“intro” 的元素的样式。 如果让该标签使用此样式，你必须在标签中添加class=“名称”。 CSS: .p { font-size:15px;color:#000 } HTML: < P CLASS=“P” >内容</P> < P >内容</P> CSS: .p_font { font-size:15px;color:#000 } HTML: < P CLASS=“p_font” >内容</P> < P >内容</P>
7
application/x-www-form-urlencoded
表单 HTML 表单用于搜集不同类型的用户输入。 在新建一个表单时，首先创建一对form标签，之下再包含文本框，单选，复选等等内容。 <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> </form> 属性 描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。 action 规定向何处提交表单的地址（URL）（提交页面）。 autocomplete 规定浏览器应该自动完成表单（默认：开启）。 enctype 规定被提交数据的编码（默认：url-encoded）。 method 规定在提交表单时所用的 HTTP 方法（默认：GET）。 name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标（默认：_self）。 application/x-www-form-urlencoded 在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值
8
<input> 在表单中最为基础收集器，可以通过type属性声明input标签文本框、 单选、复选、提交按钮 表单类型 描述
Text Password 密码 Checkbox 复选 Radio单选 Button按钮 Number 输入数值区域 Date时间 Color 取色器 更多参考： 定义常规文本输入。 radio 定义单选按钮输入（选择多个选择之一） submit 定义提交按钮（提交表单） 例子： <input type=“text”> <input type=“Password”>
9
<fieldset> <fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。 <form action="action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </fieldset> </form>
10
<textarea> 文本域，与文本框相比，更多、大。
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
11
<select> 元素定义下拉列表 <select name="cars"> </select>
<option>Volvo</option> <option>Saab</option> <option>Fiat</option> <option>Audi</option> </select> 默认选择： 给select下拉列表定义一个 selected，使得初始化。 例子： <option selected >Saab</option> 此刻，下拉列表初始化时显示的是“Saab”，不在是“Volvo”
12
引用一个外部CSS方法 如果想要引入外部的CSS表，就需要在表头（ head 标签）内插入。
<html xmlns=" <head> </head> <link rel="stylesheet" type="text/css" href=“style.css" /> 声明：来自外来的样式表 类型 地址
13
实践 请创建一个CSS文件(style.css)，并且引用到页面(index.html)上，样 式设置在CSS文件中。 ·并且用div+html布局设计一个页面放入表单 ·默认男 ·名称默认内容：输入名称 ·背景颜色如演示图，文本框高宽默认，文本框背景白，边框 #535353，文本域高150px，默认内容：备注信息。
14
注册信息 填写 名称： 性别： 男 女 密码： 邮箱： 备注： 提交 网站页尾
Similar presentations
