前端学习——HTML（一）

最新推荐文章于 2020-04-11 18:14:45 发布

Wby_Nju

最新推荐文章于 2020-04-11 18:14:45 发布

阅读量569

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Wby_Nju/article/details/104086580

版权

前端专栏收录该内容

32 篇文章 4 订阅

订阅专栏

文章目录

HTML是什么
HTML标签和元素
HTML的属性
简单示例

参考文章：
https://www.yuque.com/fe9/basic/hw5ara

HTML是什么

HTML 是标记语言，通过一些特定符号（标签），使文章格式固定。如下图所示：

在这里插入图片描述
浏览器将HTML变成人眼看到的图像，这个过程就是页面渲染。

HTML标签和元素

名词	解释
HTML标签	类似于`<p> 、</p>`；标签是由尖括号`<>`包含关键词`p`组成的。
HTML元素	由标签+内容嵌套而成。比如`<p>我是一个段落</p>`
空元素	一般来说如果没有内容如：`<p></p>`这样写其实是没有任何意义的。但是空元素不一样，比如`<br>`标签，用来换行。

空元素与非空元素
在这里插入图片描述

名词	解释
块级元素	独占一行，将后面的元素挤到新的一行；p 元素总是独占一行显示，它是块级元素
行内元素	行内元素紧挨着显示，不会自动换行；i 和 span 元素则没有换行，是行内元素。

块级元素和行内元素，下方效果：

<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落，<i>我是段落里的斜体部分</i></p>

<span>我是一段文字</span>
<span>我是一段文字</span>
<span>我是一段文字</span>

HTML的属性

HTML标签是可以拥有属性的，如下所示，效果展示。

<img alt="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2664816/profile/profile-512.jpg?1544158617">

用属性可以增强HTML的表达效果。定义属性的方式是attr = xxx
属性 src 指定了图片的 url 地址，alt 属性定义了可替换文本，当浏览器无法载入图片时，浏览器将显示这个替换文本。

简单示例

各标签意义参考链接。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 示例</title>
        <link rel="stylesheet" type="text/css" href="xxx.css">
        <script src="xxx.js"></script>
    </head>
    <body>
        <h1>我是标题</h1>
        <p>我是段落</p>
    </body>
</html>

显示效果如下：
在这里插入图片描述

Wby_Nju

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——HTML（一）

文章目录HTML是什么HTML标签和元素HTML的属性简单示例参考文章：https://www.yuque.com/fe9/basic/hw5araHTML是什么HTML 是标记语言，通过一些特定符号（标签），使文章格式固定。如下图所示：浏览器将HTML变成人眼看到的图像，这个过程就是页面渲染。HTML标签和元素名词解释HTML标签类似于<p> 、...
复制链接

扫一扫