HTML的基本结构
-
使用sublime的快捷键生成HTML的模版文件格式.
-
生成HTMl5.0的文件格式
! + tab
<!-- 这个是注释符号测试. --> <!-- 在sublime下输入!再按一下tab键即可快速生成. --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
-
生成HTML1.0的文件格式
html:xt +tab
<!-- html:xt,再按一下tab键即可快速实现文件的格式生成. --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 </title> </head> <body> </body> </html>
-
说明
-
HTML一般是使用成对的
<*></*>
来描述的,但是有极少数的例外是不需要的。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这个是网页标题</title> </head> <body> 这个是网页的主体部分,用来描述网页的内容的。 </body> <!-- 这个是网页的结束,成对的出现,与开始部分是想对应的. --> </html>
-
若需要使用快捷键生成,则需要安装对应的插件.
推荐安装的插件如下:
- Emmet
目前,Emmet 已经可以通过 Package Control 安装了。如果你的 Sublime Text 3 还没有安装 Package Control,请参照以下方法安装。
-
为
Sublime Text 3
安装Package Control
组件:按 `Ctrl + `` 打开控制台,粘贴以下代码到底部命令行并回车如下:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
之后在左下角看到提示,也就是没有
=
来回小幅度滑动,此时退出sublime,注意退出方式是file->exit ,在 Perferences->Package Settings 中看到Package Control
,则表示安装成功,或者在 Perferences->Package Settings 中看到 Package Control,则表示安装成功. -
使用 Package Control 安装 Emmet 插件:
在 Package Control 中选择 Install package 或者按 Ctrl+Shift+P,打开命令板输入 pci 然后选择 Install Package,也就是单击即可安装,(若是没有找到说明已经完成安装),同时左小角有一个小的
=
小幅度滑动. -
安装emmet的插件
-
搜索输入 emmet,先安装emmet,再找到 Emmet Css Snippets,点击就可以自动完成安装。若是已经安装则无法找到,但是可以在已安装插件处找到…
插件安装部分完成,若是不成功,理由只有一个就是你的数据无法找到,可以通过vpn实现自己的安装,没有vpn使用代理连接墙外服务器的几乎失败。
-
购买外国的VPS安装VPN代理
-
推荐服务器提供商-搬瓦工,使用优惠劵后,年费约198人民币。单核-500MB内存-1Gb/s-10GB SSD硬盘+500GB/mon。比较便宜,应该是最便宜的了,但是完全可以实现一个人的正常使用,看看720p视频之类的还是完全无压力的。
-
方法自己找,但是可以借鉴此人的:https://juejin.im/post/5b14c5115188257d37761a5a
HTML标签
- 段落标签
<p> (空格,三个空格略等于一个中文汉字占据宽度,此法的空格是不精确的,用css样式可以精确定义.)<br />
<!-- 这个是换行符号. -->
<br />
这个是段落标签,带样式,带样式的意思是不仅仅是显示文档信息还有段落的格式问题,如段落缩进,行间距等。</p>
-
块标签
<div>
标签 块元素,表示一块内容,没有具体的语义-无样式。<span>
标签 行内元素,表示一行中的一小段内容,没有具体的语义-无样式。
-
插入-图片链接
<img src="images/logo.png" alt="百度logo">
- 插入-网址超链接
<a href="这是一个新的网址.html">点我去新网址!</a>
- 点图片超链接到网页地址
<a href="http://www.baidu.cn" title="去到百度的网站" target="_blank"><img src="images/logo.png" alt="百度logo">
- 列表标签
<!-- 快速生成有序列表,会标有1,2,3...如下: -->
<!-- ol>li*3 + tab -->
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<!-- 快速生成无序列表,没有标号,只有小黑点,如下: -->
<!-- ul>(li>a{标题})*3 -->
<ul>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
</ul>
HTML-表格
1、<table>
标签:声明一个表格,它的常用属性如下:
- border属性 定义表格的边框,设置值是数值.
- cellpadding属性 定义单元格内容与边框的距离,设置值是数值.
- cellspacing属性 定义单元格与单元格之间的距离,设置值是数值.
- align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有:
left
|center
|right
。
2、<tr>
标签:定义表格中的一行.
3、<td>
和<th>
标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格,它们的常用属性如下:
- align 设置单元格中内容的水平对齐方式,设置值有:
left
|center
|right
. - valign 设置单元格中内容的垂直对齐方式
top
|middle
|bottom
. - colspan 设置单元格水平合并,设置值是合并的列数值.
- rowspan 设置单元格垂直合并,设置值是合并的行数值.
点击:代码展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<h1>表格</h1>
<!-- cellspacing设置为0,则表格线合并. --><