以下为学习笔记,用来备忘、交流
工具:Sublime Text 3
渲染:谷歌浏览器
AutoFileName工具的安装
安装过程参见添加Emmet插件
参考我上面安装Emmet插件的过程,基本一样。
图片的显示
基本代码如下:
<img src="images/01.png" alt="笔记">
需要注意的是:"images/01.png"双引号内是图片的相对路径和图片名,其中“images”是文件夹,这个文件夹和XX.html文件在同一个文件夹内(同一目录),迁移的时候将这个文件夹复制走就可以了。当前目录下有时用“ ./ ” 表示,另外上级目录用“ …/ ” 表示。alt="笔记"可以在图片加载失败时显示文字描述。
链接
文字链接
<a href=""title="这是?">百度</a>
href=“”的双引号里放入连接到的网址,必须加http://,不加会报错。title=“”的双引号里放的是鼠标悬停在文字链接上时(未点击时)的显示内容。< a>百度< /a> 其中百度就是显示出来的文字。如下图
上面的代码是跳转到百度网站,以前的页面不显示了,被替换掉了,如果想要新开一个页面显示跳转到的网站可以添加target属性,默认是target="_self"可以改成
<a href=""title="这是?"target="_blank">百度</a>
图片链接
简单说就是将上文文字链接代码中的 “百度”换成图片的img标签
<a href=""title="这是?"><img src="images/01.png" alt="笔记"></a>
用a标签将img标签包住就可以了
另外,如果做了链接,也要显示出链接的样式,但还不知道链接的地址可以这样
<a href="#"title="这是?">百度</a>
可以先用一个#放在写链接的位置,#也表示显示最顶端。
页面内链接
<a href="#di_1_BuFen">第一部分</a><a href="#di_2_BuFen">第二部分</a><br><br><br><h1 id="di_1_BuFen">1级标题第一部分</h1><br><br><br><h1 id="di_2_BuFen">1级标题第二部分</h1>
原理是将每个标题添加了一个ID属性,链接的a标签的href=后的双引号里先写一个#在加目的地的ID,显示出来是这样的
列表
有序列表
可使用emmet快捷键 ol>li*4 再按Tab键
<ol><li>我我我</li><li>好好好</li><li>饿饿饿</li><li>呀呀呀</li></ol>
显示如下:
无序列表
<ul><li>我我我</li><li>好好好</li><li>饿饿饿</li><li>呀呀呀</li></ul>
加超链接的快捷键 ul>(li>a)4 再按Tab键
<ul><li><a href="">百</a></li><li><a href="">度</a></li><li><a href="">地</a></li><li><a href="">图</a></li></ul>
自定义列表
快捷键dl>(dt+dd)*3 再按Tab按键
<dl><dt>1</dt><dd>就是1</dd><dt>2</dt><dd>就是2</dd><dt>3</dt><dd>就是3</dd></dl>