前端与HTML

这是我参与「第四届青训营」笔记创作活动的第1天

1.1、什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。

1.2、什么是HTML5

HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。

1.3、本文重要说明

由于HTML5只是在HTML的基础上进行了新增或者废弃一些标签或者特性，本文默认均为HTML5语法，被废弃的部分就不再提起，HTML一般用于描述网页的结构，所以一些样式和脚本方面的标签和属性以及关于JavaScript部分的特性也不再提及，重点在于梳理常用标签体系。

1.4、浏览器的版本

现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等，通过对这些主流web浏览器的发展策略调查，发现它们都支持HTML5上采取了措施。

第二章 HTML5语法

2.1、基本结构

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
 </head>
 <body>
      <h1>0</h1>
      <p></p>
 
 </body>
 </html>

2.2、语法规范

HTML中不区分大小写，但是我们一般都使用小写 HTML中的注释不能嵌套 HTML标签必须结构完整，要么成对出现，要么自结束标签 HTML标签可以嵌套，但是不能交叉嵌套 HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)

2.3、标签规范

单标签：

<标签名 [属性名=属性值,...]>

成对标签：

<标签名 [属性名=属性值,...]></标签名>

第三章 HTML5标签

3.1、标题标签

 <h1>这是一级标题</h1>
 <h2>这是二级标题</h2>
 <h3>这是三级标题</h3>
 <h4>这是四级标题</h4>
 <h5>这是五级标题</h5>
 <h6>这是六级标题</h6>

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

3.2、段落标签

 <p>这是一个段落</p>

这是一个段落

3.3、链接标签

使用示例：

 <a href="https://www.juejin.com">掘金！</a>

掘金

PS:我们可以这样写

 <a href="https://www.juejin.com" target="_blank">掘金！</a>

这样链接会在新标签页打开。

常见属性：

属性值描述 href URL 规定链接的目标 URL。

3.4、图像标签

 <img src="https://www.juejin.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="掘金LOGO">

上面的是网络图片，也可以添加本地图片（网图下载到本地）

导到html下，（可以改个简单的名字,pic.jpg),用的时候

 <img src="img/pic.jpg" alt="掘金LOGO">

如果加载不出来就是"掘金LOGO"文字

3.5、表格标签

 <table border="1px" cellpadding="0px" cellspacing="0px">
     <tr>
         <th>表头一</th>
         <th>表头二</th>
         <th>表头三</th>
         <th>表头四</th>
     </tr>
     <tr>
         <td>单元格一</td>
         <td>单元格二</td>
         <td>单元格三</td>
         <td>单元格四</td>
     </tr>
 </table>

表头一	表头二	表头三	表头四
单元格一	单元格二	单元格三	单元格四

3.6、列表标签,无序列表（序号标签）

 <ul>
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
 </ul>

列表项
列表项
列表项
列表项

有序列表：

 <ol>
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
 </ol>

PS:

1.新建html后，输完头文件，下一行直接输入“！”+Enter，可以给出全框架。

标签可以用Alt+Shift+方向向下键，进行快速补齐。

3.注释写法。

4.进行一段文字的测试：输入lorem和数字长度，再Enter。

5.先保存，再打开网页。

6.注释：ctrl+/

ctrl+k+c

取消注释：ctrl+k+u

前端与HTML | 青训营笔记