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

What is 前端

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
Web 技术栈

What is 前端技术栈

HTML
CSS
JAVAScript 通过协议与服务器进行交互

What is HTML

HTML (HypeText Markup Language) —— 图片、标题、链接、表格
<img src='/photo.jpg' />
src —— 属性名 photo.jpg —— 属性值

HTML 语法

  <head>

       <title>

            标题

       </title>

  </head>

  <body>

       正文

  </body>

小结：

<html>…</html>标识网页文件的开始与结束，所有的Html元素，都要放在这对标记中。

<head>…</head>标识网页文件的头部信息，如标题、搜索引擎关键字等

<title>…</title>标识网页文件的标题

<body>…</body>标识网页文件的主体部分

HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题实例：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 的 style 属性

style 属性的作用：

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

HTML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色：

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

HTML 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式：

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

HTML 样式实例 - 字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a>标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="url">Link text</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

<a href="http://www.baidu.com/"></a>

前端与HTML | 青训营笔记