从HTML链接到URL的讲解
HTML链接语法
想要在一个HTML文档里插入一个链接，只需要在用
<a href="url">链接文本 即可
这里的url是一个网页地址，全称 Uniform Resource Locators ，中文名叫统一资源定位器。
Web服务器通过 URL 从 Web 服务器请求页面，关于 URL 的语法规则如下：
scheme://host.domain:port/path/filename
说明：
- scheme-定位因特网服务的类型。最常见的类型是 http
- host-定义域主机（http 的默认主机是 www ）
- domain-定义因特网域名
- port-定义主机上的端口号 (http 的默认端口是 80)
- path-定义服务器上的路径（如果省略，则文档必须位于网页的根目录中）
- filename-定义文档/资源的名称
常见的 URL Scheme
| Scheme | 访问 | 用于 |
|---|---|---|
| http | 超文本传输协议 | 以http://开头的普通网页，不加密 |
| https | 安全超文本传输协议 | 安全网页，加密所有信息交换 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站 |
| file | 您计算机上的文件 |
HTML元素
<head>元素包含了所有的头部标签元素，他可以插入脚本(script),样式文件(CSS),以及各种meta信息。
可添加元素标签有：<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>
HTML<title>元素
<title>的功能：
- 定义了不同文档的标题
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，先是在收藏夹中的标题
- 先是在搜索引擎结果页面的标题
<base>标签
如果将<a>引导的链接改成<base>引导，那么该标签会变成HTML文档中所有的链接标签的默认链接。
<link>标签
<link>标签通常用于连接到样式表。
<style>元素
<style>元素可以用来直接添加样式来渲染你的HTML文档，也可以用于定义HTML文档的样式文件引用地址。
使用方法如下：<style type="text/css">
body{
background-color:yellow;
}
p{
color:blue
}
HTML中用CSS渲染HTML元素
调背景颜色
style="background-color:red;"
调字体，字体颜色，字体大小
style="font-family:arial;color:red;font-size:20px;"
文本对齐方式
style="text-align:"
内部样式表——针对某一个文件
<style type="text/css">
body{background-color:yellow;}
p{color:blue;}
</style>
外部样式表——可以通过更改一个文件夹改变整个站点的外观
HTML图像
有的时候我们需要一些精美的图像来装点我们的HTML页面
图片的插入
<img src="url” alt=“some_text" width="n" height="m">
插入动图和静图的语法是一样的。
img是用来定义图像的
src是源属性，他的值是图像的URL地址。
alt="some_text" width="" height="">的形式
注意：我们在以上代码中还使用了alt属性，alt属性是用来为图像定义一串可预备的可替换的文本。
替换文本属性的值是用户自己定义的。使用alt属性是为了在浏览器无法载入图像时，用替换文本告诉读者因为图像无法载入而缺失的信息。
图像的排列
在<img>里加align="",双引号内可以是bottom,middle或者top
图像的浮动
在<img>里加style="float:right"或style="float:left"
图像链接的设置
<a href="url">
<img...>
图像可以调整边框，在<img>里加 border="n",无边框时,n=0
创建图像映射
创建图像的映射就是创建带有可供点击区域的图像地图，其中的每个区域都是一个超级链接
<img src="url" width="" height="" alt="some_text" usemap="#somemap">
<map name="somemap">
<area shape="rect" coords="0,0,82,126" alt="one_text" href="url1">
<area shape="circle" coords="90,58,2" alt="two_text" href="url2">
<area shape="circle" coords="124,58,8" alt="three_text" href="url3">
</map>
上图中，shape定义了区域的形状，coords定义了超链接区域的坐标（像素为单位）
矩形：左上角定点坐标+右下角定点坐标
圆形：圆心坐标+半径
多边形：各定点坐标以此排列
最终的运行结果就是点击图像中的某一个区域，就相当于点击到一个超链接，页面会跳转到另一个页面。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
