初识前端标记语言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>

  • 28
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值