今天的内容主要是HTML标签的超链接 图片属性 列表的用法
一、超链接，锚点和下载。
（1）超链接
<a href="URL" targe="_blank">网站名</a> 可以直接点击中间的文字打开网址，target是点击超链接打开的网页的属性，_self是直接在当前页面打开， _blank是在新的空白标签页中打开。
（2）锚点
<a name="锚点"> 定义 一个锚点
<a href="#锚点">返回锚点</a> 点击返回锚点 如果没定义锚点 href的属性值为#，是返回网页顶部
（3）下载
<a href="文件路径">下载文件</a> 点击会开启文件下载 但是如果文本 网页 图片不会触发下载 这些文件浏览器会直接打开 需要另存为
二、图片标签属性
<img src="图片地址" alt="图片加载失败" title="这是图片" /> alt属性是在图片加载失败时显示的内容 title则是鼠标移到图片上时显示的内容
三、列表
（1）无序列表
<ul type="square" style="list-style:none"> type属性为列表前的符号 有实心方块（square）circle（空心圆）实心圆（disc）三种 还可以style="list-style:none"去掉符号
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
（2）无序列表
<ol type="a/A/1/I/i"> type属性为序号 a是abcd小写字母 A是ABCD大写字母 1是1234数字 I是罗马数字ⅠⅡⅢⅣ i是小写罗马数字i ii iii iv 还可以list-style:none 去掉列表序号
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
四、注释
<!--需要注释掉的内容--> VS的注释快捷键是Ctrl+k,Ctrl+c 其他编辑器大部分是Ctrl+/ 我把VS的快捷键换成了Ctrl+/ 但是和转到命令行有冲突 所以我把两个命令的快捷键互换了。
五、分隔符 <hr />
六、表格和图片的宽度/高度除了固定值 还可以写成百分比的形式 这样在缩放页面是宽度也会跟着变化以适应页面
七、课上练习
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>超链接</title> </head> <body> <!--超链接练习--> <a href="http://www.baidu.com">百度</a><br /> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><a name="top">锚点</a><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <a href="download/blank.rar">点击下载空白压缩文件</a><br /> <a href="img/tu.jpg" target="_blank">点击下载图片</a> <img src="img/tu.jpg" width="200" alt="图片加载失败" title="夜夜" /><!--图片大小可以用百分比写，会随着网页大小按比例缩放--> <!--超链接结束--> <!--无序列表--> <ul> <li type="disc">第一行</li> <li type="circle">第二行</li> <li type="square">第三行</li> </ul> <ul style="list-style:none"> <li> <a href="http://www.baidu.com">百度</a> </li> <li> <a href="http://www.zhihu.com" >知乎</a> </li> </ul> <!--无序列表结束--> <hr /> <!--分隔符--> <!--有序列表--> <ol type="1"> <li>第一行</li> <li>第二行</li> <li>第三行</li> </ol> <ol type="a"> <li>第一行</li> <li>第二行</li> <li>第三行</li> </ol> <ol type="I"> <li>第一行</li> <li>第二行</li> <li>第三行</li> <li>第四行</li> </ol> <!--有序列表结束--> <a href="#top">返回锚点</a><br /> <a href="#">返回顶部</a> <br /> <!--这行字是注释内容--> </body> </html>
效果图
