推荐参考资料
- MDN:打开必应（bing.com），搜索：MDN xxx。即可获取各种标签的用法。类似于查字典。
- 网道HTML教程：wangdao.com/html/
- 在线工具JSBIN
- js.jirengu.com
- 这是饥人谷使用开源项目搭建的用于分享代码的网站
- 当实现一个效果想分享给其他人线上预览时，可以用这个网站
- 在里面写完代码之后把浏览器地址栏里的网站复制给别人即可
- 在线工具代码沙盒：codesandbox.io
初识HTML
VScode
在VScode中新建文件（夹）
- 方法一：在桌面上新建文件夹并拖进VScode，在新建的文件夹右边点击“新建文件”
- 方法二：
- 在VScode最上面一栏点“终端”——>“新建终端”
注：新建终端是需要选择shell，否则可能会报错。 选择shell——>选择默认shell——>选git bash——>关闭重启VScode即可
- 写命令
cd ~/desktop
mkdir project
cd project
touch index.html
那么我么便在桌面上新建了文件夹和文件
- 在VScode最上面一栏点击“文件”——>“打开文件夹”
点开文件index.html来编辑他
- 输入
!后按Tab就会生成一个HTML基本模板。
-
符合语法标准的网页，应该满足上面的基本结构。
-
不管多么复杂的网页，都是从上面这个基本结构衍生出来的。
-
注意，HTML 代码的缩进和换行，对于浏览器不产生作用。所以，上面的代码完全可以写成一行，渲染结果不变。上面这样分行写，只是为了提高可读性。
- 我们可以在body中写上
<h1>hello world</h1>
把我们写好的网页生成预览
- 方法一：从桌面上找到那个文件点开即可
- 方法二(推荐)
(1)点击VScode侧边栏Extensions,安装插件“live Server”
(2)在文件的编辑页面中点击右键选择“open with live server”
- 方法二的优点：这个方法把网页在服务器中打开，和正常的网站是一样的。他还可以一边编辑一边自动刷新网页，我们可以马上看到最新的预览。
