科技资讯

Document

HTML快速入门

1. 前端开发介绍

前端开发，主要开发的是网页

万维网联盟（ World Wide Web Consortium ），创建于1994年10月，主要工作是对 web 进行标准化。

该组织定义了网页的开发需要如下3门技术：简称前端三剑客。

  • HTML：定义网页的结构

  • CSS:：定义网页的表现，样式

  • JavaScript：定义网页的行为

前端框架。例如：vue，elementui等等

2. HTML概念

HTML(HyperText Markup Language)：超文本标记语言

超文本：超越文本的约束，比文本更强大

标记：就是标签（类xml）。

白话理解：由标签构成的语言，与XML语法类似；不同的是HTML中的标签都是预定义好的。

Html 存在服务器上，用户访问之后下载到本地浏览器运行，Html 标签由浏览器来解析。

2014年10月，万维网联盟(W3C)宣布，经过8年时间的艰苦努力，Html5 的规范终于制作完成。

Html4是之前比较主流的HTML版本；目前比较火的版本是Html5，功能更强大，效果更绚丽。

3. HTML快速入门

HTML页面的常见文件后缀是html或者htm，本质上是文本文件。但是可以通过各种标签，呈现超文本的效果。

使用文本编辑工具编辑即可，Idea等各种工具提供了更多更强大的功能。

步骤汇总

  1. 新建文本文件，后缀名改为 .html

  2. 编写 Html 结构标签，包括html、head、body、title等。

  3. 在<body>中定义编写标签

步骤细节

新建文本文件，并修改文件名为hello.html。注意文件的后缀是.html，如下图所示：

 

选择使用记事本打开文件，编写前端代码:

选中文件，鼠标右击选择notepad++

html有固定的基本结构：

<!-- html是根标签，有head和body两个子标签 -->
<html>
    <!-- head标签用来定义一些页面相关配置信息 -->
    <head>
        <!-- title标签用来定义网页标题，显示在标题栏 -->
        <title> </title>
    </head>
    <!-- body标签中内容会显示在页面上 -->
    <body>
        <h1>Hello HTML</h1>
    </body>
</html>

html是超文本标记语言，还能修饰超文本

通过<img>来引入图片，其中该标签的src属性，用来指定图片的地址，代码如下：

<!-- html是根标签，有head和body两个子标签 -->
<html>
    <!-- head标签用来定义一些页面相关配置信息 -->
	<head>
        <!-- title标签用来定义网页标题，显示在标题栏 -->
    	<title> </title>
    </head>
    <!-- body标签中内容会显示在页面上 -->
    <body>
        <!-- h1标签为一级标题，文字内容加粗变大 -->
        <h1>Hello HTML</h1>
        <!-- img标签用于引入图片，src值为图片路径 -->
        <img src='1.jpg'></img>
    </body>
</html>

总结

  • HTML 文件常以.htm或.html为扩展名

  • HTML 结构标签

 

  • 注释与XML中语法一致，使用<!-- -->

  • HTML 标签不区分大小写，建议小写。

    如上案例中的 img 写成 IMG 也是一样可以展示出对应的效果的。

  • HTML 标签属性值 单双引皆可

    如上案例中的src属性值使用双引号也是可以的。<img src="1.jpg"></img>

  • HTML 语法松散

    比如 h1 标签不加结束标签也是可以展示出效果的。但是建议严格按照要求去写

开发工具

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。

VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。

VS Code 提供了非常强大的插件库，大大提高了开发效率。

官网： Visual Studio Code - Code Editing. Redefined

基础文本

 演示代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 配置页面编码格式 -->
    <meta charset="UTF-8">

    <!-- 浏览器兼容性设置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 页面标题 -->
    <title>02-基础文本标签.html</title>
</head>
<body>
    <!-- h1~h6定义标题，h1最大，h6最小；没有h7，配置错误会识别为正文的格式（非标题） -->
    <h1>我是1级标题</h1>
    <h2>我是2级标题</h2>
    <h3>我是3级标题</h3>
    <h4>我是4级标题</h4>
    <h5>我是5级标题</h5>
    <h6>我是6级标题</h6>
    <h7>我是7级标题</h7>
    
    <!-- html页面中的换行，需要通过br标签实现，自闭合单标签 -->
    <br>
    <br>

    <!-- 
        font标签：定义字体的属性
            size：文字大小
            color：文字颜色
            face：文字字体。不能乱写，只能写系统中已经安装好的字体
        已过时，推荐使用CSS样式修改文字显示效果
    --> 
	<!-- 
    通过color属性可以为标签内容设置颜色。有多种配置方式
        1. 英文单词。eg：red、yellow等等。表示的颜色数量有限
        2. rgb(值1,值2,值3)：三原色表示法。每个数字取值范围是0~255
        3. #值1值2值3：rgb十六进制表示形式。每个数字的取值范围是00~FF
    -->
    <font size="15" color="red" face="华文隶书">疾风亦有归途，我命由我不由天</font>

    <br>
    <br>
    <!-- b标签，文字加粗 -->
    <b>疾风亦有归途</b>
    <br>
    <!-- b的语义化标签 strong -->
    <strong>疾风亦有归途</strong>
    <br>
    <!-- i -->
    <i>你看下我是不是歪了</i>

    <br>
    <!-- u 下滑线 -->
    <u>看我脚下有没有一条下划线</u>

    <!-- 
        center 定义文本居中
        已过时，推荐使用CSS样式实现居中效果
    -->
    <center>我是大佬，必须C位出道</center>


    <br>
    <!-- p标签，定义段落，有基本的段落效果 -->
    <p>
        虽然你这波很强 但是我问你 对面打野在干什么？
        虽然你这波很强 但是我问你 对面打野在干什么？
        虽然你这波很强 但是我问你 对面打野在干什么？
        虽然你这波很强 但是我问你 对面打野在干什么？
        虽然你这波很强 但是我问你 对面打野在干什么？
        虽然你这波很强 但是我问你 对面打野在干什么？
    </p>

    <!-- hr 水平分割线 -->
    <hr>
    虽然你这波很强 但是我问你 对面打野在干什么？
    虽然你这波很强 但是我问你 对面打野在干什么？
    虽然你这波很强 但是我问你 对面打野在干什么？

</body>
</html>

效果