书格前端

HTML学习入门

HTML学习入门

HTML学习入门

目录

基本概念

HTML(Hypertext Markup Language，超文本标记语言)，是用来创建网页和网络应用的标准标记语言，可用来定义和描述网页的内容和结构。和CSS、JavaScript一起组成互联网的基础技术。

“HyperText”，超文本，指的是网页中的链接，可以跳转到网站内容或其他网站的页面。

HTML由许多标签元素组成，标签元素也是页面的基本构成单元。

标签的语法格式如下：

<body></body>

起始标签由方括号包围，里边是标签名；结束标签同样由方括号包围，不过元素名前面多了反斜杠。要注意的是，部分标签不需要闭合，html5下标签允许不闭合。

最佳实践1： 对元素标签进行闭合

最佳实践2: 书写语义化页面结构，指的是页面的html内容标签元素的使用符合语义化，每个元素用在恰当的位置，不为某个效果使用原非此用途的标签元素

最佳实践3: 使用小写字母书写标签元素。尽管在HTML中标签的大小写不敏感，支持大小写混合，建议统一使用小写，方便维护和阅读。

学习方法

零基础的话，跟随MDN的HTML入门文章，一步步学习，搭建你的第一个网站。

这个过程中，你需要了解Web开发常用的工具，包括编辑器、浏览器、Web Server、版本控制系统等等。

入门之后，可以在网上搜索面试题或者demo实现一些常用的功能。

阅读和理解HTML4、HTML5规范的语法、标签、语义

常用标签

基本：标题和段落

<h1>, <h2>, <h3>, <h4>, <h5>, <h6 和 <p>

列表

无序列表:

<ul>
<li></li>
<li></li>
</ul>

有序列表:

<ol>
<li></li>
<li></li>
</ol>

嵌套列表：

<ul>
<li></li>
<li>
  <ul>
    <li></li>
    <li></li>
  </ul>
</li>
</ul>

强调和重要性

强调：<em> 重要：<strong> 斜体：<i> 加粗：b 下划线：<u>

超链接

<a href="https://developer.mozilla.org">MDN</a>

表格

<table>
<thead>
<th>
标题
</th>
</thead>
<tbody>
<td>
内容
</td>
</tbody>
</table>

图片

<img src="images/dinosaur.jpg" alt="dinosaur">

调试和查错

浏览器的开发者工具

以Chrome为例，在页面中右键查看元素，打开开发者工具的元素标签页。选择你要查看的标签元素即可查看。

HTML校验工具

通过W3C的HTML校验工具进行代码校验，网站会生成一个报告。

参考网站