HTML学习笔记（实体+meta标签+块、行内元素+语义化标签+布局标签）

最新推荐文章于 2022-06-15 11:56:36 发布

ED_Sunny小王

最新推荐文章于 2022-06-15 11:56:36 发布

阅读量152

点赞数

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

本文链接：https://blog.csdn.net/weixin_45041745/article/details/119953773

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文汇总了前端基础知识，包括HTML的结构、元数据、实体、语义化标签及布局标签。重点介绍了HTML5的基本框架，meta标签的charset属性防止乱码，以及块元素与行内元素的区别。此外，还提及了语义化标签如h1~h6、p、em、strong等在网页内容组织中的作用。

摘要由CSDN通过智能技术生成

由于学校并没有开设前端的相关课程，所以对于前端这一部分都是这里看一点，哪里看一点，这里算是做一个小小的汇总吧（因为本身想走的是后端开发，所以目前汇总一些基础的，后面遇到了再慢慢补充吧）。

文章目录

1.前导知识
2.HTML中的实体
3.meta标签详解
4.块元素与行内元素
5.语义化标签(h1~h6,hgroup,p,em,strong,blockquote,q,br,hr,sup,sub)
6. 布局标签（结构化语义标签）

1.前导知识

W3C 【万维网联盟】规定，网页组成如下：
1. HTML:网页的结构
2. CSS:网页的样式
3. JS（JavaScript）:网页的行为

网页是存在版本的：如html4、html5。
文档声明：用于告知浏览器当前网页的版本。
在html文件第一行写<!DOCTYPE html>，表明为html5版本的网页。

html5网页的基本框架：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> <!--meta标签无</meta>为自结束标签 -->
        <title></title><!--网页标题-->
    </head>
    <body>
    ...
    </body>
</html>

head是网页的头部，其中的内容不会在网页中出现，主要用来帮助浏览器或搜索引擎来解析网页；
meta标签用来设置网页的元数据，其中charset设置网页的字符集，注意：并不是设置当前页面的字符编码方式。而是告诉浏览器需要采用哪一种字符集打开当前页面，用于浏览器识别。【当前页面的字符编码，根据页面编写时编译器所用的字符集决定】。
body标签表示网页的主体，网页中的所有内容都应该写在body里面。

查看HTML等语法的帮助文档：访问https://www.w3school.com.cn/

2.HTML中的实体

在html中用实体(转义字符) 来表示一些特殊符号。
如：
 ：空格
>：>
<"：<
©: ©（版权符号）
具体参见：https://www.w3school.com.cn/tags/html_ref_entities.html

3.meta标签详解

meta标签用来设置网页的元数据，用于浏览器识别解析，具体属性如下：

charset：告知浏览器用什么字符集识别该网页，避免乱码问题。
http-equiv模拟一个 HTTP 响应头,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容，可选属性值content-type|default-style|refresh（见下图）：
补充：<meta http-equiv="refresh" content="3;url=https://www.baidu.com/">
表示在3秒后页面重定向到url指定的对应网站
name指定数据的名称。
content指定数据的内容。
name和content可以看作是键值对，其中有几个特殊的name-content

keywords表示网站的关键字，可以同时指定多个关键字，关键字间用,隔开
如：

<meta name="keywords" content="网上购物,网上商城,在线购物网购">

description表示对网站的描述

 <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

4.块元素与行内元素

块元素：在页面中独占一行的元素,对网页进行布局设置。
行内元素：在页面中不会独占一行的元素，主要用于包裹文字。
一般情况下可以在块元素中放行内元素，而不会在行内元素中放块元素。

5.语义化标签(h1~h6,hgroup,p,em,strong,blockquote,q,br,hr,sup,sub)

标题标签(块元素)
h1~h6 六级标题，重要性依次递减

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

hgroup标签：用于为标签分组，可以见一组相关的标题同时放入到其中

  <hgroup>
  	<h1>登高</h1>
    <h2>其一</h2>
  </hgroup>

p标签：表示页面中的一个段落（块元素）
注意：p标签中不能放任何块元素
em标签：表示语气的一个加重（行内元素）
strong标签：表示强调（行内元素）

<p>嘿<em>heiheihei</em>嘿吼<strong>hohoho</strong>吼</p>

嘿heiheihei嘿吼hohoho吼

7. blockquote：长引用；q：短引用

<blockquote>长引用</blockquote>
 <q>短引用</q>

长引用

短引用

br：换行

<br>

hr：横线

<hr>

sup：上标 sub：下标

m<sup>2</sup>
x<sub>1</sub>

m²
x₁

6. 布局标签（结构化语义标签）

<header></header>,表示网页的头部
<main></main>,表示网页的主体部分（一个网页中只会有一个main）
<footer></footer>,表示网页的底部
<nav></nav>,表示网页中的导航
<aside></aside>,表示和网页主体相关的其他内容，常用于表示侧边栏
<article></article>,表示一篇独立的文章
<section></section>,表示一个独立的区块，当上面的标签都不能使用时使用section

上面7个都是语义化标签，也都是块元素，若没有添加css样式，其表现都是一样的，是HTML5中为了便于区分网页中的各个部分新增的标签，用得比较少，用得最多的还是div标签。

<div></div>,块元素，无语义，就是用来表示一个区块，是现今主要使用的布局标签；
<span></span>,无语义，用来组合网页中的行内元素。

ED_Sunny小王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML学习笔记（实体+meta标签+块、行内元素+语义化标签+布局标签）

由于学校并没有开设前端的相关课程，所以对于前端这一部分都是这里看一点，哪里看一点，这里算是做一个小小的汇总吧（因为本身想走的是后端开发，所以目前汇总一些基础的，后面遇到了再慢慢补充吧）1.前导知识W3C 【万维网联盟】规定，网页组成如下：1. HTML:网页的结构2. CSS:网页的样式3. JS（JavaScript）:网页的行为网页是存在版本的：如html4、html5文档声明：用于告知浏览器当前网页的版本在html文件第一行写<!DOCTYPE html>，表明为html5
复制链接

扫一扫