前端与html | 青训营笔记

cen姜
59 阅读3分钟

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

1. 什么是HTML？

HTML全程为超文本标记语言（Hyper Text Markup Language），文件扩展名为html或htm。Hyper Text包括图片、标题、链接、表格等。Markup Language，比如<h1>标题</h1>。

2.属性名与属性值

在HTML中，如<img src="1.jpg" /> src被称作属性名，1.jpg被称作属性值。

3.HTML的版本

HTML历史上有以下版本：

  1. HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
  2. HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
  3. HTML 3.2：1997年1月14日，W3C推荐标准。
  4. HTML 4.0：1997年12月18日，W3C推荐标准。
  5. HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
  6. HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

4.前端技术栈

image.png

  • 前端基础技术栈包括：HTML（骨架） CSS（样式） JavaScipt（行为）

  • 前端应该关注的方面：功能 美观 无障碍 安全 性能 兼容 体验

5.开发环境

开发环境：浏览器+编辑器

浏览器：

  • IE/Edge（不推荐）
  • Chrome（推荐）
  • Firefox
  • Safari

编辑器：

  • VSCODE
  • Vim
  • WebStorm
  • 等等

6.HTML实例

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

实现效果如下：

我的第一个标题

我的第一个段落。

  • <!DOCTYPE html>声明为 HTML5 文档
  • <html>元素是HTML页面的根元素
  • <head>元素包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为 utf-8。
  • <title>元素描述了文档的标题
  • <body>元素包含了可见的页面内容
  • <h1>元素定义一个大标题
  • <p>元素定义一个段落

其中，<head></head>中的为头部元素，<body></body>中的为可见的页面内容，只有<body></body>中的内容是可见的。

7.HTML元素举例

  • HTML标题

包括<h1>到<h6>

<h1>这是一个标题</h1> 
<h2>这是一个标题</h2> 
<h3>这是一个标题</h3>

实现效果如下：

这是一个标题

这是一个标题

这是一个标题

  • HTML段落

在段落中空格以及回车不起效，若需空格则需输入&nbsp;,若需回车则要<br/>或另外使用一个<p>。

<p>这是一个段落。</p> <p>这是另外一个段落。</p>

实现效果如下：

这是一个段落。

这是另外一个段落。

  • HTML链接
  1. <a> 标签的href属性，它指定链接的目标。
  2. <a> 标签的target属性，规定在何处打开目标 URL。仅在 href 属性存在时使用。
    • _blank：新窗口打开。
    • _parent：在父窗口中打开链接。
    • _self：默认，当前页面跳转。
    • _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
  3. <a> 标签的 rel 属性，用于指定当前文档与被链接文档的关系。
<a href="http://www.functravel.com/" target="_blank" rel="nofollow">这是一个百度链接</a>

实现效果如下：

这是一个百度链接

avatar
文章
阅读
粉丝