这是我参与「第五届青训营」笔记创作活动的第1天，今天的笔记内容为前端与html。

学习内容

前端技术的相关概念
html语句的规范
html语句标签的使用

一、前端概念

全称"Web前端开发，简称“前端"，又称作“客户端开发" .可以这样简单的概括，只要是浏览器或移动设备上能直接被人看到的界面，都可以是前端开发者的工作负责范围。而配合前端工作的开发人员被称作“后端”也称作“服务器端" .
在互联网诞生初期(称作Web 1.0)网站主要内容都是静态，以图片和文字主，用户使用网站的行为也以浏览为主，“前端"词还并不存在。但随着HTML5与CSS3 规范的确立，和随之-系列的技术诞生，网页上能做的事情开始越来越多，其业务面也越来越广，其重要性越来越大，“前端开发” 这职位应运而生。

二、html的定义

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

三、html标签的使用

常用的HTML标签:p标签、h1~h6标签、div标签、ol/ul>li标签、input标签、img等。

HTML 标题（Heading）是通过h1-h2标签来定义的。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
 
</body>
</html>

HTML 段落是通过标签 p 来定义的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
 
</body>
</html>

HTML 链接是通过标签 a 来定义的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<a href="https://blog.csdn.net/zong596568821xp">这是一个链接使用了 href 属性</a>
 
</body>
</html>

HTML 图像是通过标签img来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<img src="zongxp.jpg" width="640" height="640" />
 
</body>
</html>

表格由table标签来定义。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用th标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

[前端与 HTML | 青训营笔记]

学习内容

一、前端概念

二、html的定义

三、html标签的使用