【前端】【HTML笔记】之基础知识梳理（一）—— 基本语法与标签

Oct.S

已于 2023-01-20 15:43:44 修改

阅读量196

点赞数

分类专栏：笔记文章标签： html5 html 前端

于 2022-11-16 20:48:07 首次发布

本文链接：https://blog.csdn.net/HY_Sophie/article/details/127874245

版权

笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、基本语法与标签

1.1 页面基本结构：

<!DOCTYPE html> 文档声明：让浏览器使用标准

HTML注释

<!-- 文档声明 -->
<!DOCTYPE html>
<!-- html基本结构 -->
<html>
    <head>
        <!-- 告知浏览器此页面属于的字符编码格式，下一步浏览器做好“翻译”工作 -->
        <meta charset="utf-8">
        <!-- 页面标题 -->
        <title></title>
    </head>
    <body>
    </body>
</html>

附：关于HTML标准

HTML 标准由 W3C 指定由 W3C（世界万维网联盟）指定，最新标准是 HTML5 。

1.2 格式排版标签


标签名	语义和功能	属性	单标签还是双标签
html	页面根元素		双
head	页面头部		双
body	页面主体		双
meta	设置页面元信息	charset: 用于设置字符集编码	单
title	页面标题栏标题		双
h1 - h6	标题		双
p	段落		双
br	换行		单
hr	分割线		单
pre	原样格式显示		双
div	没有语义		双

1.3 文本标签

标签名	语义和功能	属性	单标签还是双标签
em	强调，默认表现为斜体字		双
strong	强调，默认表现为粗体字		双
del	被删除的内容		双
ins	新增加的内容		双
sup	上标文字		双
sub	下标文字		双
span	没有语义		双

1.4 图片标签

标签名

语义和功能

属性

单标签还是双标签

img

在网页中显示图片

src：设置图片文件的地址

alt：设置图片的代替文字

width：设置图片宽度

height：设置图片高度

单

1.5 常用的字符实体

        空格 ---&nbsp;---&amp;nbsp;<br>
        小于号 < ---&lt;---&amp;lt;<br>
        大于号 > ---&gt;---&amp;gt;<br>
        符号 & ---&amp;---&amp;amp;<br>
        符号 ￥ ---&yen;---&amp;yen;<br>
        符号 © ---&copy;---&amp;copy;<br>
        符号 × ---&times;---&amp;times;<br>
        符号 ÷ ---&divide;---&amp;divide;<br>

HTML 字符实体 | 菜鸟教程

1.6 meta标签

<!-- 字符集编码 -->
<meta charset="utf-8">

<!-- 页面关键字 -->
<meta name="keywords" content="8-12个以英文,隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 让IE使用最新的渲染引擎 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 视口宽度与设备宽度一致 用于移动端页面设计 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML <meta> 标签 | 菜鸟教程