1.工具
浏览器:google chrome,edge,firefox,需要准备多个浏览器
编辑器:vscode/sublimetext
codepen.io网站可以在线编写代码呈现效果。
插件:emmet，自动补全代码，提高前端编程的效率。在VSCode中开启:vscode不支持emmet快捷输入了，该如何开启？ (newsn.net)，参考学习教程Emmet-HTML/CSS代码自动补全语法 (z01.com)。
2.html简介
超文本标记语言，不是编程语言。一个html的element结构如下。
通常，一个html页面组成如下图。表明解释文档的类型是html，这里需要标注的原因之一是早期的解释文档类型可能不是html。
访问学习 HTML ：指南与教程 - 学习 Web 开发 | MDN (mozilla.org)可以学习到很多html的知识。
3.编程实战
从官网下载vscode。
开启了commet后，输入!然后按enter键就可以生成最基础的html的页面，可以根据第一小节推荐的教程学习到更多的commet使用技巧。下面编写一个最基础的html。
<!DOCTYPE html> <html> <head> <title>hello,html</title> </head> <body> <!-- headings --> <h1>hello 1</h1> <h2>hello 2</h2> <h3>hello 3</h3> <h4>hello 4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quam enim at eveniet dolorum! Mollitia nostrum dolores aliquam sed cumque?</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, enim!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloribus necessitatibus, quam harum aliquid, unde nam nemo accusantium eligendi dolorum praesentium accusamus? Consequatur, quas reprehenderit laboriosam omnis quo aliquam consequuntur.</p> </body> </html>
效果如下。
html中元素分为两类，块级元素和内联元素。不难发现，标签
与
下面试试内联元素的效果。
<!DOCTYPE html> <html> <head> <title>hello,html</title> </head> <body> <!-- headings --> <h1>hello 1</h1> <h2>hello 2</h2> <h3>hello 3</h3> <h4>hello 4</h4> <p>Lorem ipsum dolor sit amet, <strong> adipisicing elit</strong>. Rerum quam enim at eveniet dolorum! Mollitia nostrum dolores aliquam sed cumque?</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, enim!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Sint</em> doloribus necessitatibus, quam harum aliquid, unde nam nemo accusantium eligendi dolorum praesentium accusamus? Consequatur, quas reprehenderit laboriosam omnis quo aliquam consequuntur.</p> </body> </html>
效果如下。
下面将banjiu链接到指定网址。
<a href="https://blog.nowcoder.net/banjiu">banjiu</a> • 1
不过上面的写法会使新的网址在当前页面打开，如果想通过一个新的页面打开可以设置属性target。
<a href="https://blog.nowcoder.net/banjiu" target="_blank">banjiu</a>
列表
<!-- 无序 --> <ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> </ul> <!-- 有序 --> <ol> <li>list item1</li> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> </ol>
表格
<!-- 表格 --> <table> <!-- 表头 --> <thead> <!--tr:table row --> <tr> <th>name</th> <th>age</th> <th>sex</th> </tr> </thead> <!-- 表格主体 --> <tbody> <tr> <th>wz</th> <th>16</th> <th>male</th> </tr> <tr> <th>we</th> <th>4</th> <th>female</th> </tr> </tbody> </table>
表单
<!-- break line换行--> <br> <!-- 水平线 --> <hr> <br> <!-- 表单，提交表单后将交给form.js来处理逻辑 --> <form action="form.js" method="post"> <!-- division,块级区域 --> <div> <label>Fist Name</label> <input type="text" name="first name" placeholder="please enter your firstname"> </div> <div> <label>last Name</label> <input type="text" name="first name" placeholder="please enter your lastname"> </div> <div> <label>email</label> <input type="text" name="email" placeholder="please enter your email"> </div> <!-- 按钮 --> <input type="submit" name="submit" value="submit"> </form>
看下效果。
图片。
<!-- alt：图片找不到时显示内容 --> <img src="img/test" alt="image can not be found">
引用。
<blockquote> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad repellendus eius perspiciatis cum, veritatis omnis eligendi ab eum repellat rem maxime aliquid eos excepturi quod error suscipit. Error, totam optio! </blockquote>
