01 【零基础入门】html学习笔记（2）

1，如何设计一个页面

1） 先规划好web页面的结构，首先画出一个草图，然后创建一个略图，最后再写html
2） 规划页面时，先设计大的块元素，再用内联元素完善。
3） 设计一个页面时，要使用与内容含义最接近的元素，如果需要一个列表，就不要使用段落元素。

2，发布到web

2.1，如何发布

找一家web托管公司购买域名和空间，在他们的服务器上托管你的页面，然后使用FTP将文件从你的计算机上传到他们的服务器上。下图是FTP应用示例。其它细节此处不详细展开说明了。

2.2，相关概念：

1）域名：它是由一个权威机构控制，一次只能有一个人使用某个域名。与网站名区别开来
2）网站名：www.baidu.com是网站名，baidu.com是域名
3）URL：统一资源定位符，（Uniform resource locator），定位web上任意资源，包括html页面、音频、视频等。
例：http://www.baidu.com/index.html

• http：用来获取资源的协议；告诉浏览器用什么方法获取资源
• www.baidu.com：网站名； 告诉浏览器从互联网上的哪个计算机获取资源；
• index.html：从根文件夹到资源的绝对路径；告诉服务器要找哪个页面

4）默认页面：通常文件名为index.html或default.html

• 如果url为http://www.baidu.com/ 或http://www.baidu.com/images/
  ，web服务器接到这样的请求时，会查找这个目录中的默认文件，找到默认文件，将它返回给浏览器。
• 如果url为http://www.baidu.com，末尾没有/，服务器就会帮加上末尾的斜线，然后再返回该目录下的默认文件。
  

5）端口号：http://www.mydomain.com:8000/index.html，8000是端口号，通常web上的所有东西都会传送到一个默认端口80【80端口是为HTTP（HyperText Transport Protocol)即超文本传输协议开放的，此为上网冲浪使用次数最多的协议】，不过有时测试时web服务器会配置另外一个不同的端口接收请求，正常的web服务器几乎都在端口80接收请求。

6）相对路径 绝对路径

• 相对路径：href中一般写相对路径，表示从当前html到目标文件的一个路径。

  ..表示父文件夹。
  / 表示根目录
  ./ 表示当前目录
  ../ 表示上一层目录
  对于网页，只能使用/，不能使用（反斜线）

举例：


<img src=”../../photo/1.png”/>
因为 index.html 的上一级目录是 work,再上一级是 document

• 绝对路径：从根文件夹到达某个特定页面或文件的路径。/表示根。

  <a href=””></a> href 中如果写的是相对路径 ，则浏览器会根据这个相对路径和单击页面的html路径创建一个绝对路径，所以，所有web服务器看到的都是绝对路径。

2.3 表单

1，概念：包含输入域的web页面，允许用户输入信息。提交表单时，浏览器会将这些信息打包发送到web服务器。

2，form标签：
包含构成表单的所有元素；告诉浏览器把表单数据发送到哪里；以及用什么方法发送
<form action=" " method=""></form>

3，表单元素：

• 文本框：<input type="text" name=" " /> 自封闭标签
• 密码框：<input type="password" name=" "/>
• 单选按钮：<input type="radio" name=" " checked="checked" />
  同一组属性具有相同的name，才有单选互斥功能。checked="checked"默认被选择
• 复选框：<input type=”checkbox” name=" " />
• 按钮：
  <input type=” button” value=" " name=" "/>
<input type="submit" value=" " />
<input type="reset" value=" " />
<button></button>也是按钮，是html5中的标签
  
  如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。
• 多行文本输入框：<textarea col="20" rows="10" name="content"></textarea>
• 下拉列表：

<select name=”” multiple>
     <option value="bj">北京 <option>
     <option value="cs">长沙<option>
     <option value="sh">上海<option>
</select>

• 多选菜单：上一个元素增加一个属性multiple，把单选菜单变为多选菜单

<select name=”” multiple>
     <option value="bj">北京 <option>
     <option value="cs">长沙<option>
     <option value="sh">上海<option>
</select>

• label标签：

<label for="pwd">password</label>
<input type="password"  name="password"  id="pwd"/>

要使用<label >元素，要先为表单元素增加一个id属性。然后label标签的for属性=id属性，这样label和input就有绑定关系了。

3， 表单元素名：
每个表单元素都有一个name属性，提交表单时，浏览器会使用这些唯一的名字打包所有数据。

4， 表单的两个常见属性：
1） placehoder：为填写表单的人提供一个输入提示。
<input type=” text” name=” ” placehoder=”name”/>

2） required：可用于任何表单控件，表示这个域是必要的，如果不填，则无法提交表单。
<input type=” text” name=” ” placehoder=”name” required/>

2.4，表格

1，表格由行中的数据单元格组成，列隐含地定义在行中。
2，一般不用表格来提供表现，那是css的工作。
3，表格标记：

<table>
        <caption> the cities</caption>  //标题，浏览器一般会把标题显示在表格上方
        <tr>            //表示一行
            <th> </th >   //表示表头
            <th> </th>
            <th> </th>
        </tr>
        <tr>            //第二行
            <td></td>   //每行包含多个数据单元格，用<td>定义
            <td></td>
            <td></td>
        </tr>
</table>

4，单元格跨多行
<td rowspan=”2”></td> 跨2行；
<td colspan=”2”></td> 跨2列

5， 可以在表格中嵌套表格，将<table>元素及其所有内容放在一个数据单元格中。
6， 表格应用于表示表格数据，而不是建立页面布局。

2.5，版本