01 【零基础入门】html学习笔记(2)

1,如何设计一个页面

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

2,发布到web

2.1,如何发布

找一家web托管公司购买域名和空间,在他们的服务器上托管你的页面,然后使用FTP将文件从你的计算机上传到他们的服务器上。下图是FTP应用示例。其它细节此处不详细展开说明了。
01 【零基础入门】html学习笔记(2)

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到目标文件的一个路径。

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

举例
01 【零基础入门】html学习笔记(2)

<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,版本

01 【零基础入门】html学习笔记(2)

相关推荐