前端与HTML | 青训营笔记

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

什么是前端？

创建web页面或app呈现给用户
产生交互
移动端开发
web技术栈

前端技术栈：HTML（骨架）、css（外观）、javas（动作）【三大语言基础】、网络协议【服务器端，后台】

前端关注的方向：美观、功能、安全、性能、无障碍

美观：采用更加优秀的HTML/css技巧构造出美观的网页
功能：功能实现要求采用JavaScript编写出优秀的交互体验功能
安全：互联网发展到现在，采用何种传输/通信协议能让访问互联网的用户个人隐私不被泄露，采用何种加密方法保障人们的数据访问安全是很重要的问题
性能：互联网发展迅速，不同的浏览器在渲染网页时性能方面千差万别，采用何种方法对其加载性能得到有效提高
无障碍：浏览器多种多样，如何在实际开发出保证不同浏览器的兼容问题得到有效解决

HTML

HTML是什么？

超文本标签语言（英文全称：HyperText Markup Language）是一种用于创建网页的标准标签语言。注意，HTML实际上并不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。简单来讲，他由一些大大小小的标签决定了网页的主要内容，例如文字、图片、超链接、列表等等

基本构造

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

注：在开始标签中可以添加一系列的属性，比如类名class，元素类型type，ID名id，图片还会有图片源src，替换文字alt等内容，这些内容在后面的css样式中具有举足轻重的作用

属性必须包含以下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个等于号。
一个属性值，由一对引号“ ”引起来。
元素类型

   下面我们来谈谈有关元素类型的东西，元素有很多种分类方法，但是经常根据其在文档流的表现形式分为块级元素（block）和内联元素（inline）

块级元素：

 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中，块级元素可以设置高度和宽度，因为其占据二维的空间。

内联元素

 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。内联元素不能指定高度，其为一维元素

常见元素

标题（h1，h2，h3......【数字越小表示标题越大】）

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>

段落（p，往往用来放大段的文字）

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>

图像（img）

<img src="/static/images/logo.png" width="258" height="39" />//图像的路径、宽度、高度以属性的形式展现

超链接（a，点击后转到另一个地方）

<a href="">这是一个链接</a>

表格（tr，td）

<table border="1">
<tr>
<td>(cainiaojc.com)基础教程之表格</td>
<td>(cainiaojc.com)基础教程之表格</td>
<td>(cainiaojc.com)基础教程之表格</td>
<td>(cainiaojc.com)基础教程之表格</td>
</tr>
</table>

总结：实际上HTML还有很多细节需要我们去讨论，这里只是列出了一些比较基本的部分供我们学习，随着web的不断发展近些年HTML5的流行为我们的前端行业带来了更多的新变化和发展趋势，这些都值得我们去探索