开发环境
网络异常，图片无法展示
|
编辑器vscode下载地址：code.visualstudio.com/
vscode插件的推荐：
- open in browser
- Chinese
- Auto Rename Tag
第一个html程序
从h1到h6一共有六个标题，字体大小逐级递减，p是段落标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> ..... <h6>六级标题</h6> <p>段落</p> </body> </html> 复制代码
按下键盘中的Alt+b就可以在浏览器上运行html代码，相当于一个解析的dom树
网络异常，图片无法展示
|
html的语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐使用双引号包裹
- 某些属性值可以省略，比如required、readonly
html基础
<a href="https://www.bytedance.com/">字节跳动官网</a> <br> <a href="https://juejin.cn/">稀土掘金官网</a> <a href=""></a> <input type="text"> <p>这个<br>段落<br>演示了分行的效果</p> 复制代码
- 链接：
<a href=""></a>，链接的地址在 href 属性中指定 - 换行：
<br> - 表单类的输入：
<input type="text"> - 插入图片：
<img src="" alt="">
遵循语义化
- HTML中的元素、属性及属性值都拥有某些含义
- 有序用ol，无序用ul
- lang属性表示内容所使用的语言
H5新增
<canvas>：标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
<canvas id="myCanvas" width="200" height="200" style="border:1px solid red;"> </canvas> 复制代码
绘画一个红色的正方形
网络异常，图片无法展示
|
总结
html的上手很简单，也是前端的入门，现在新增了一些h5的新元素可以去官网看看。
