学前端的第7天

一.布局

1.div布局
div 元素是用于分组 HTML 元素的块级元素

<div id="container" style="width: 500px;">
<div id="header" style="background-color: #FFA500;">
<h1 style="margin-bottom: 0;">主要的网页标题</h1></div>

<div id="menu" style="background-color: #FFD700;height: 200px;width: 100px;float: left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color: #EEEEEE;height: 200px;width: 400px;float: left;">
内容在这里</div>

<div id="footer" style="background-color: #FFA500;clear: both;text-align:center">
版权 runoob.com</div>
</div>

5对div：5个块块（文字部分4个，最后整体1个）

二.浮动和清除

float和clear：浮动和清除
“菜单”和“内容在这里”这两个块排在了同一行
如果没有浮动，文字的4个块是一行一个。
------首先，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：

------可见，即使div1的宽度很小，页面一行中能放下div1和div2，div2也没有排在div1的后边，每一个div都独占一行。
------这些理论是标准流中的div
------如何在一行中显示多个div？——浮动
------浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。例如，上图div2浮动，它将脱离标准流，134仍在标准流中，所以3会自动向上移动，占据2的位置，134重新组成一个流。

------浮动是漂浮在标准流之上，因此2挡住了一部分3
------这里2采用的是“左浮动”(float:left)，浮起来靠左排列（左、右指页面边缘），如果对2采用右浮动

此时2靠页面右边缘排列，不再遮挡3，可以看见134组成的流
------如果2和3都左浮动

2和3都浮动，不再属于标准流，4会自动上移，14组成新的流；浮动在标准流之上，2挡住了4
------观察此时：23设置了浮动之后，3跟在2的后面，但是2在每个例子中都是浮动的，但是没有跟在1之后，为什么？

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。div的顺序是HTML代码中div的顺序决定的。 靠近页面边缘的一端是前，远离页面边缘的一端是后。

------234都设置左浮动：

先从div4开始分析，它发现上边的元素div3是浮动的，所以div4会跟随在div3之后；div3发现上边的元素div2也是浮动的，所以div3会跟随在div2之后；而div2发现上边的元素div1是标准流中的元素，因此div2的相对垂直位置不变，顶部仍然和div1元素的底部对齐。由于是左浮动，左边靠近页面边缘，所以左边是前，因此div2在最左边。
------234设置右浮动

右浮动，右边靠近页面边缘，所以右边是前，2在最右边
------24左浮动

div2、div4浮动，脱离了标准流，因此div3将会自动上移，与div1组成标准流。div2发现上一个元素div1是标准流中的元素，因此div2相对垂直位置不变，与div1底部对齐。div4发现上一个元素div3，是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。

元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
清除浮动：clear
4个取值：none（允许两边有浮动）,left（不允许左边有浮动对象）,right（不允许右边有浮动对象）,both（不允许有浮动对象）

清除浮动：这个规则只能影响使用清除的元素本身，不能影响其他元素

------例如页面中两个元素12都是左浮动，如何设置2排在1下边，就像1没有浮动，2左浮动一样？

要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

2.table呈现表格化数据，但表格不是布局工具

<table width="500" border="0">
<tr>
    <td colspan="2" style="background-color: #FFA500;">
    <h1>主要的网页标题</h1></td>
</tr>

<tr>
    <td style="background-color: #FFD700;width: 100px;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript<br></td>
    <td style="background-color: #eeeeee;height: 200px;width: 400px;">
    内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color: #FFA500;text-align: center;">
版权 runoob.com</td>
</tr>
</table>

由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（可以使用这些预先构建好的网站布局，并优化它们）。

三.表单

HTML 表单用于收集不同类型的用户输入。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
①表单使用表单标签 form 来设置:

<form>
input 元素
</form>

②输入元素
输入标签：input
输入类型：type属性，大多数输入类型如下：
<input> 标签用于在表单建立一个简单的输入框，属于自闭和标签。input 标记是放在表单<form></form>之间的，用来在表单中建立一个数据储存域。它的最主要的两个属性是：name属性和type属性。
name：作为可与服务器交互数据的HTML元素的服务器端的标示，可以在服务器端根据其Name取得元素提交的值（表单中的input标签必须设置name属性，否则在提交表单时，用户在其中输入的数据不会被发送给服务器）

id是唯一标识符，不允许有重复值（类似数据表的主键,pk），可以通过它的值来获得对应的html标签对象。name和id的功能是一样的，同样用来标识html标签，但唯一不同的是name允许有重复的值。value代表某个html标签的值。

一种简便理解方法：把name属性想作是一个人的姓名，同名的会有很多。id想作是一个人的身份证号码，name是控件的名称 ，value是控件的值， id是控件的身份标志。

三者的区别：name：控件名称；value：用户输入(或选择)的值；id用于网页脚本编号(javascript)这就是一个唯一的标识。决不能重复。

1.创建文本域，用户在文本域写入文本
一个文本字段的默认宽度是20个字符
文本域通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
    Frist Name: <input type="text" name="firstname"><br>
    Last Name: <input type="text" name=:lastname>
</form>

大的文本框：多行文本输入，用户可在文本域中写入文本，可写入字符的字数不受限制。

<textarea row="10" col="30">
文本框
</textarea>

默认情况下：输入框可以无限换行；输入框有自己的高度和宽度。
可以通过cols和设置宽度，通过rows设置高度。虽然设置了高度和宽度，但是依然可以无限的换行（往下输入）。
默认情况下输入框是可以手动拉伸，如下图：

2.密码字段：password
type=password，密码字段不会明文显示，而是以星号或圆点代替。

3.单选按钮：radio

<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

4.多选：checkbox

<form>
    <input type="checkbox" name="vehicle" value="bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="car">I have a car
</form>

5.提交按钮：submit
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理（method）。

<form  name="input" action="html_form_action.php" method="GET">
    Username:<input type="text" name="user">
    <input type="submit" value="Submit">
</form>

假如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

6.下拉列表
下拉列表框是一个可选列表。

<form action="">
<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

带有预选值的可选列表，列表一开始就选中了某一项
在<option>标签里加selected
<option value="fiat" selected>Fiat</option>
这样子列表一开始就选中了Fiat这一项

7.按钮：button

<form action="0">
    <input type="button" value="hello world!">
</form>

8.补充说明
①数据周围绘制一个带标题的框
fieldset标签：定义了一组相关的表单元素，并使用外框包含起来。
legend：定义了 <fieldset> 元素的标题

<form>
<fieldset>
<legend>标题</legend>
......
</fieldset>
</form>

②带有输入框和确认按钮的表单

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

先弄好文本框，再弄按钮

四.框架

在同一个浏览器窗口中显示不止一个页面。

图中已经有一个“html框架”的页面，但是圈起来的这个也还是一个新的页面
iframe语法：<iframe src="URL"></iframe>，URL指向不同网页。
height和width属性设置高度和宽度
<iframe src="https://www.csdn.net/" width="1000" height="1000"></iframe>
属性默认以像素为单位, 但是可以指定其按比例显示 (如：“80%”)。
去除边框：frameborder=“0”

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

因为a标签的target属性是名为iframe_a的iframe框架，所以在点击链接时页面会显示在iframe框架中。

五.颜色

颜色值：三位数表示法为RGB，转换为6位数表示为：#RRGGBB

六.脚本

1.script 标签
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

2.noscript 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容

七.字符实体

HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
比如html中不能使用<,>，会被认为是标签，要正确显示，使用字符实体（character entities）

&entity_name;
或
&#entity_number;

如需显示小于号，我们必须这样写：< 或 < 或 <
提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

HTML字符实体(菜鸟教程)

八.URL和HTML总结

URL：统一资源定位器(Uniform Resource Locators)

URL讲解(菜鸟教程！！！重要)

域名：Internet域名是Internet网络上的一个服务器或一个网络系统的名字，在全世界，域名都是唯一的。
------顶级以.com,.net,.org,.cn等等属于国际顶级域名，根据国际互联网域名体系，国际顶级域名分为两类：类别顶级域名(gTLD)和地理顶级域名(ccTLD)两种。类别顶级域名是以"COM"、“NET”、“ORG”、“BIZ”、"INFO"等结尾的域名，均由国外公司负责管理。地理顶级域名是以国家或地区代码为结尾的域名，如"CN"代表中国，"UK"代表英国。地理顶级域名一般由各个国家或地区负责管理。
------二级域名是以顶级域名为基础的地理域名，比如中国的二级域名有，.com.cn,.net.cn,.org.cn,.gd.cn等

HTML速查列表