0


初识前端标记语言HTML

1.HTML介绍

HTML,全称为超文本标记语言(Hyper Text Markup Language),是一种用于创建网页的标准标记语言。它由Web的发明者Tim Berners-Lee和同事Daniel W. Connolly于1990年创立,是标准通用化标记语言SGML的应用。HTML是一种基础技术,常与CSS、一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。

HTML文件通常以.html或.htm扩展名结尾,可以被Web浏览器读取并呈现为可视化网页。浏览器使用HTML标签和脚本来解析网页内容,但不会将它们显示在页面上。HTML元素是构建网页的基础,允许嵌入图像与对象,并且可以用于创建交互式表单。它被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。

值得注意的是,HTML不被视为一种编程语言,因为它不能创建动态功能。网页开发人员使用HTML代码来设计浏览器如何显示网页元素,例如文本、超链接和媒体文件。由于HTML被大量用于嵌入超链接,用户可以轻松地在相关页面和网站之间导航和插入链接。HTML也使组织和格式化文档成为可能,类似于Microsoft Word。

HTML5是HTML的最新版本,它在HTML4的基础上进行了改进,增加了一些新的功能和特性,如表单控件、音视频元素、画布(Canvas)等,并且支持CSS3的许多特性。HTML5的文档类型声明<!DOCTYPE html>必须放在文档的头部,以指定浏览器以HTML5标准解析网页。此外,HTML文档中的字符集设置也非常重要,因为它会影响网页的编码和解码过程。

2.走进HTML5

2.1 HTML编写工具VS Code安装过程

首先进入VS Code官方网页

Visual Studio Code - Code Editing. Redefined

我接下来将讲解Windows 64位系统的安装过程

Windows系统进入VS Code官方网页后点击 Download for Windows(下载Windows版),然后即可以下载最新版本的VS Code工具。

如果是其他系统点击Download for Windows右边的箭头下拉框,在里面选择对应的系统即可。

2.2 HTML5基本结构

<html>标签位于HTML5的最前面,用来标识HTML5的开始,</html>标签位于HTML5的最后面,用来标识HTML5文件的结束。 <head>标签可以包含一些辅助性标签。 <body>用于设置文件的背景颜色,文本颜色,超链接颜色,边距等,还有网页的内容。

<html>标签对 双标签
<head>标签对 双标签
<body>标题对 双标签

2.2.1 字号标签

字号:
**

~

双标签

字号最大,

字号最小**

2.2.2 换行标签

换行:
**

可以实现分段换行,在内容前加

,在内容后加

即可换行
手动换行
是一个单标签**

2.2.3 网页标题设置

网页标题:
** <title>与</title>中的标题就是网页的标题
写在<head>代码中**

2.2.4 文本加粗标签

加粗标签(双标签)

2.2.5 文本倾斜

倾斜标签(双标签)

**2.2.6 **添加注释

<! -- 在此处写注释 -- >

2.2.7 水平线标签


(单标签)

2.3 插件

插件可以完成一些辅助操作,常用的插件有:

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code是VS Code的中文化插件安装包

live Server是可以让他直接右键运行跳转到网页看效果的插件

2.4 特殊符号显示(字符实体)

空格:
字符实体  
大于号:
字符实体 >
小于号:
字符实体 <
引号:
字符实体 "
版权符号:
字符实体 ©

由于大于小于号会跟标签的大于小于号冲突,所以使用特殊符号显示才能显示大于小于号。

空格在页面上的一句话只能显示一个,如果要显示多个要么隔开,要么使用特殊字符**&nbsp**显示。

2.5 图像标签

width图像的宽度
 height图像的高度
 **<img stc="图像地址"/>**
 图像地址只能选中在文件中的图片
 alt   图像不能显示时替代显示的文本
 title 鼠标指针悬停时显示的文本
 常见的4种图像格式
 jpg、png、gif、bmp

2.6 超链接标签

2.6.1 超链接使用:

../可以返回上一层文件夹

**<a href="链接地址" target="目标窗口位置">文本或者图像</a>**
 href用于指定链接目标的URL地址
 target用于指定在哪个位置打开链接文档
 _self表示在自身窗口打开

 _blank表示在新窗口打开
 **<a href="#id名">链接文本</a>**

2.7 行内元素和块级元素

独占一行的为块级元素
宽度由自身内容决定,其他标签可以排列在后面,这些叫行内元素

2.8 HTML5优势

  1. 解决了跨浏览器问题
  2. 新增特性
  3. 化繁为简优势

3.列表

3.1 列表

3.1.1 无序列表

始于

    标签,每个列表项始于
  • 标签。

  • 之间相当于一个容器,因此可以嵌套其他标签。但是
    之间只能嵌套
  • 标签,列表项使用圆点来标记。

    3.1.2 有序列表

    始于

      标签,每个列表项依旧始于
    1. 标签。

      有序列表有顺序,列表项使用数字来标记。

      3.1.3 定义列表

      标签开始每个定义; 列表项以
      开始; 每个定义列表项的; 定义以
      开始;

      定义列表没有顺序,默认没有标记。
      定义列表常用于标题下有多个列表项的情况。

      3.2 列表语法

      3.2.1 无序列表

      • 列表项1
      • 列表项2
      • .....

      3.2.1 有序列表

      1. 列表项1
      2. 列表项2
      3. .....

      3.2.1 定义列表

      名词1
      名词1的解释-第一项
      ...
      名词2
      名词2的解释-第一项
      ...
标签: 前端 html

本文转载自: https://blog.csdn.net/a15766649633/article/details/136558948
版权归原作者 子逸爱编程 所有, 如有侵权,请联系我们删除。

“初识前端标记语言HTML”的评论:

还没有评论