初识前端标记语言HTML

这篇具有很好参考价值的文章主要介绍了初识前端标记语言HTML。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.HTML介绍

2.走进HTML5

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

2.2 HTML5基本结构

2.2.1 字号标签

2.2.2 换行标签

2.2.3 网页标题设置

2.2.4 文本加粗标签

2.2.5 文本倾斜

2.2.6 添加注释

2.2.7 水平线标签

2.3 插件

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

2.5 图像标签

2.6 超链接标签

2.6.1 超链接使用:

2.7 行内元素和块级元素

2.8 HTML5优势

3.列表

3.1 列表

3.1.1 无序列表

3.1.2 有序列表

3.1.3 定义列表

3.2 列表语法

3.2.1 无序列表

3.2.1 有序列表

3.2.1 定义列表


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 字号标签

字号:
    <h1>~<h6>  双标签
    <h1>字号最大,<h6>字号最小

2.2.2 换行标签

换行:
    <p>可以实现分段换行,在内容前加<p>,在内容后加</p>即可换行
    手动换行<br>   是一个单标签

2.2.3 网页标题设置

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

2.2.4 文本加粗标签

<strong>加粗标签(双标签)

2.2.5 文本倾斜

<em>倾斜标签(双标签)

2.2.6 添加注释

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

2.2.7 水平线标签

<hr>  (单标签)

2.3 插件

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

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

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

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

空格:
    字符实体 &nbsp;
大于号:
    字符实体 &gt;
小于号:
    字符实体 &lt;
引号:
    字符实体 &quot;
版权符号:
    字符实体 &copy;

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

空格在页面上的一句话只能显示一个,如果要显示多个要么隔开,要么使用特殊字符&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表示在新窗口打开

   <!--其中href="#ID名"用于指定链接目标的ID名称,再使用相应的ID名称标注-->
    <a href="#id名">链接文本</a>

2.7 行内元素和块级元素

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

2.8 HTML5优势

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

3.列表

3.1 列表

3.1.1 无序列表

始于<ul>标签,每个列表项始于<li>标签。

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

3.1.2 有序列表

始于<ol>标签,每个列表项依旧始于<li>标签。

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

3.1.3 定义列表

<dl>标签开始每个定义;
列表项以<dt>开始;
每个定义列表项的;
定义以<dd>开始;

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

3.2 列表语法

3.2.1 无序列表

<ul>
<li>列表项1</li>
<li>列表项2</li>
.....
</ul>

3.2.1 有序列表

<ol>
<li>列表项1</li>
<li>列表项2</li>
.....
</ol>

3.2.1 定义列表

<dl>
   <dt>名词1</dt>
   <dd>名词1的解释-第一项</dd>
   ...
   <dt>名词2</dt>
   <dd>名词2的解释-第一项</dd>
   ...
</dl>文章来源地址https://www.toymoban.com/news/detail-839887.html

到了这里,关于初识前端标记语言HTML的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(39)
  • 【HTML】-- 01 初识HTML

    Hyper Text Markup Language:超文本标记语言 1.1 W3C标准 W3C World Wide Web Consortium(万维网联盟) 成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构 http://www.w3.org/ http://www.chinaw3c.org/ W3C标准包括: 结构 化标准语言(HTML、XML) 表现 标准语言(CSS) 行为 标准(DOM、ECMAScr

    2024年01月18日
    浏览(75)
  • 1、初识HTML

    前端就是写一些基本的页面,HTML即超文本标记语言:Hyper Text Markup Language,超文本包括,文字、图片、音频、视频、动画等,HTML5,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立,提供了许多新的网页功能,如使用网页

    2024年02月14日
    浏览(28)
  • JAVA第一课——初识HTML

    1.1 html的定义 html是超文本标记语言,是一个基于HTTP(超文本传输协议)协议的网页语言 1.2 html的版本 HTML 4.01 以及具备完善的网页编辑 HTML 5.0 移动端网页编辑 XHTML 语法严格 1.3 浏览器 保障兼容性:在各个浏览器上正常运行 1 网景Mosaic浏览器和微软IE 2 火狐Firefox/ 谷歌chrome/ edge等等

    2024年02月10日
    浏览(29)
  • HTML的span标签的作用是什么?答:对文本内容进行精细的样式化和标记。

    当谈到HTML中的 span 标签时,它是一个非常基本且灵活的内联元素。它通常用于在文本中应用样式、添加额外的语义或将特定部分标记为一个单独的区域。 span 标签本身并不会给其中的内容带来任何视觉上的变化,但它可以与CSS一起使用,从而允许您对其内容进行样式化。 以

    2024年02月10日
    浏览(27)
  • 【前端HTML】HTML基础

    HTML,HyperText Markup Language,超文本标记语言。 标签是HTML的基本组成单位。 标签分为: 双标签 和 单标签 . 标签名不区分大小写,但是推荐小写 双标签: 标签名标签体/标签名 单标签: 标签名 用于给标签提供 附加属性 。 可以写在 起始标签 或 单标签 中。 标签名 属性名=“属

    2024年01月24日
    浏览(31)
  • 【web前端基础之HTML】——HTML基本知识

    hn 元素用于HTML文件的标题输出,一行只显示一个(块元素),具有换行输出和加粗的效果。n的值是1~6,代表6个级别标题,1字号最大,随数字增大字号减小。 案例:demo1.html⬇️ 效果图⬇️ br 是个单标签,没有 结束标记,主要功能是让文字换行输出。 案例:demo2.html⬇️ 效

    2023年04月19日
    浏览(39)
  • 前端基础(HTML)——html介绍 & 常用标签 & 几个案例

    html是啥,常见的标签,几个例子 Hyper Text Markup Language (超 文本 标记语言) 简写:HTML,HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片

    2024年02月07日
    浏览(32)
  • 【前端】-初始前端以及html的学习

    💖作者:小树苗渴望变成参天大树🎈 🎉作者宣言:认真写好每一篇博客💤 🎊作者gitee:gitee✨ 💞作者专栏:C语言,数据结构初阶,Linux,C++ 动态规划算法🎄 如 果 你 喜 欢 作 者 的 文 章 ,就 给 作 者 点 点 关 注 吧! 今天博主来介绍关于前端相关的知识,博主之前将的都是

    2024年03月12日
    浏览(32)
  • 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    他们这样形容我 是暴雨浇不灭的火                                                       —— 24.4.18 学习目标         理解                 HTML的概念                 HTML的分类                 HTML的关系                 HTML的语义化         应用

    2024年04月23日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包