目录- 1.工具
- 2.html简介
- 3.编程实战
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。
代码语言：javascript复制<!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中元素分为两类，块级元素和内联元素。不难发现，标签<p></p>与<h1></h1>等都会自动换行，它们都是块级元素。
下面试试内联元素的效果。
代码语言：javascript复制<!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链接到指定网址。
代码语言：javascript复制<a href="https://blog.nowcoder.net/banjiu">banjiu</a>不过上面的写法会使新的网址在当前页面打开，如果想通过一个新的页面打开可以设置属性target。
代码语言：javascript复制<a href="https://blog.nowcoder.net/banjiu" target="_blank">banjiu</a>列表
代码语言：javascript复制 <!-- 无序 -->
<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>表格。
代码语言：javascript复制<!-- 表格 -->
<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>表单。
代码语言：javascript复制<!-- 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>看下效果。
图片。
代码语言：javascript复制<!-- alt：图片找不到时显示内容 -->
<img src="img/test" alt="image can not be found">引用。
代码语言：javascript复制<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>
