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

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

阅读量：6998 次

发布时间：2019-06-27

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

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>

下拉列表：

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

label标签：

password

要使用<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，表格标记：


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