Html基础

最近几天在学html，说说今天的收获。

一、sublime中的快捷键

啊，快捷键很多，当然也很实用，编写代码的效率大大提高，接下来我写写自己会用到的几个快捷键。

①html:xt+Tab 最最最常用的快捷键，作用：写出html结构代码

②Tab 作用：补全标签代码 比如要写一个超链接，敲出字母a后，按Tab键后就会自动生成剩余代码

③Ctrl+Shift+D 作用：快速复制粘贴上一行

④Ctrl+Shift+K 作用：快速删除一行

⑤Ctrl+F 作用：查找

⑥Ctrl+H 作用：查找+替换

⑦Ctrl+L 作用：快速选中一行

⑧Ctrl+/作用：注释

⑨F11 作用：全屏

二、标签

1.单标签(3种)

①注释标签：Ctrl+/                   emmm,我很纳闷为什么这算单标签呢？！。

②换行标签：<br/>

特点：只是单纯的换行而已，不会生成空白行。

③下划线标签：<hr/>

只想做一根普普通通的下划线而已，所以没啥特点。

2.双标签(4种)

①标题标签：<h1>...</h1>……<h6></h6>

特点：范围只能从1到6,字体都是黑体，字号一次减小，且在一个页面只能出现一次标题标签，与SEO(Search Engine Optimization)搜索引擎优化有关。

②段落标签：<p>...</p>

特点：会自动上下生成空白行。

③文本标签：<font size="" color="">...</font>

特点：可以设置文字的大小，颜色等。

④文本格式化标签(4种)

每种都有两种写法，但都推荐写第一种，因为更加地直观。

a.加粗：<strong>...</strong>或<b>...</b>

b.倾斜：<em>...</em>或<i>...</i>

c.下划线：<ins>...</ins>或<u>...</u>

d.删除线：<del>...</del>或<s>...</s>

三、图片标签

<img src=""  alt=""  title=""   width=""  height=""/>

这个没啥难度啦，只要掌握上面五个词啥意思就行。

src：图片来源，与路径有关。

alt：图片不能正常显示时显示的文字。

title：鼠标放图片上时显示的文字

width：图片宽度

height：图片高度

注：在设置图片大小时，只设置width height其一，则图片会等比例缩放；若同时设置，图片则会变形。

四、路径(2种)

1.相对路径

a.文件和图片在同一文件夹中，则直接写文件名。

b.图片在文件的下一级，则写成文件名/图片名

c.图片在文件的上一级，则写成../图片名

2.绝对路径

绝对路径就是完整的路径啦。

注：一般不怎么使用绝对路径！

五、超链接

<a href="文本格式化标签.html" title = "超链接" target = "_blank">文章</a>

掌握以上5个部分即可

①href：想要跳转的页面

②title：提示文本，鼠标放在链接上显示的文字

③target="_self"：默认值，关闭自身页面，打开新的页面

④target="_blank"：自身页面不关闭，重新打开新的页面

⑤注意在两个尖括号之间加入文字，作为链接的载体

六、锚链接

特点：设置快速回到首页的链接

掌握其写法即可

<p id="top">...</p>

<a href="#top">回到顶部</a>

over！

啊，累死了。。。

哼，以后不用标题了，贼麻烦╭(╯^╰)╮