HTML基本知识点

sco狸

于 2021-11-16 18:49:00 发布

阅读量966

点赞数

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

本文链接：https://blog.csdn.net/weixin_61628116/article/details/121362436

版权

一、HTML文档组成

1、开头文档声明<！DOCTYPE="html">。文档声明不属于HTML标签。

2、<html><html/>在最外面，放文档所有内容。<html>标签的lang属性，表面这个网页使用的语言，是英文（EN），中文（zh-CN）或者其它语言。有利于浏览器的搜索。<html lang='En'></html>或者<html lang='zh-CN'></html>

3、<head><head/>是所有头部元素的容器，档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等，head标签必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。

注:head里面包含的常见标签

<title> （<title>元素在头部中是必需的）<style>、<base>、<link>、<meta>、<script>、<noscript>。

1、<title>文档标题，head元素必需组成部分，方便文档SEO优化，浏览器解析。

2、<style>标签必需有type属性，该属性用于规定样式表的MIME类型，该属性有一个唯一属性是"text/css"。即type指定<style>里面存放的内容为标准的css。

3、<base>标签:<base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。

在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部。

注释：如果使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。

4、<link>标签的用法和作用：
<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。
<link rel="stylesheet" type="text/css" href="theme.css>
注:可以不用放在head标签里面。
5、<mate>标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
定义文档字符编码
<meta charset="UTF-8">
默认字符编码"UTF-8"
定义文档关键字
<meta name="keywords" content="关键字内容">
定义文档描述
<meta name="description" content="文档描述内容">
定义文档作者
<meta name="author" content="作者名字">
定义页面自动刷新一次的时间
<meta http-equiv="refresh" content="刷新时间">
打开网页后自动跳转
<meat http-equiv="refresh" content="刷新时间"  url="跳转链接">
设置页面缓存时间
<meta http-equiv="expires" content="Sunday 20 October 2019 01:00 GMT" >
设置页面不缓存
<meta http-equiv="pragma" content="no-cache" />
禁止搜索引擎检索
<meta name="robots" content="none" />
保证网页可以在移动端正常显示，正常编辑，不会缩放。移动端页面必须需要的代码。
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1;user-scalable=no;">

4、<body><body/>放网页内容主体，即各种HTML标签、文本、图片、及其它网络资源。

注意:

1、HTML5标签对于早期版本浏览器，或者不支持HTML5的浏览器中，需要添加一个CSS样式，因为未知元素默认为行内显示（display:inline），对于HTML5结构元素来说，我们需要让它们默认为块状显示。
 article, section, nav, aside, main, header,  footer {display: block;}
2、一些浏览器不允许样式化不支持的元素。这种情形出现在IE8及以前的浏览器中，因此还需要使用下面的JavaScript脚本进行兼容。
<script>

  document.createElement("article");

  document.createElement("section");

  document.createElement("nav"    );

  document.createElement("aside"  );

  document.createElement("main"   );

  document.createElement("header" );

  document.createElement("footer" );
</script>
3、如果浏览器禁用了脚本，则不会显示，可能会出问题。因为这些元素定义整个页面的结构。为了预防这种情况，可以加上<noscript>标签进行提示。
<noscript>

  <h1>警告</h1>

    <p>因为你的浏览器不支持HTML5，一些元素是模拟使用JavaScript。不幸的是，您的浏览器已禁用脚

本。请启用它以显示此页。
   </p>
</noscript>

二、结构标签（结构标签主要用于文档分节和分段，大多数都为块状元素，没有默认样式，没有margin和padding。）

1、<div>为块元素。没有实际的语义，主要用于文档中的分区和分节。

2、<span>为行内元素。没有实际的语义，主要用来包裹小的图标和文字。

3、<header>为块元素。<header> 元素主要作为介绍内容或者导航链接栏的容器;也可以定义文档或者文档的一部分区域的页眉。

4、<nav>为块元素。<nav>元素主要作用导航栏容器。

5、<main>为块元素。<main>元素作为文档内容的主体。

注意：在一个文档中，<main> 元素是唯一的，所以不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

6、<article> 为块元素。主要用于表示文章，用来标识页面中一块完整的、独立的、可以被转发的内容。例如，报纸文章、论坛帖子、用户评论、博客条目等。

7、<section>为块元素。主要用于标识文档中的节，在页面上多对内容进行分区。例如，章节、页眉、页脚或文档中的其他部分。

注意：在HTML5中，article可以是一种特殊功能的section元素，它比section元素更强调独立性。具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果想将一块内容分成几段的时候，应该使用section元素。

1、不要将section元素当作设置样式的结构容器，对于此类操作应该使用div元素实现。

2、如果article、aside或nav元素更符合语义使用条件，不要首选使用section元素。

3、不要为没有标题的内容区块使用section元素

8、<aside>为块元素。主要作为主体内容的附属信息部分，侧边栏导航、友情链接等。

9、<ul>为块元素。主要用作新闻列表和产品展示列表、导航的容器。有默认的样式list-style。默认margin和padding。通常配合<li>使用。

最低0.47元/天解锁文章

sco狸

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基本知识点

html篇一、HTML文档组成开头文档声明<！DOCTYPE="html">。文档声明不属于HTML标签。 <html><html/>在最外面，放文档所有内容。<html>标签的lang属性，表面这个网页使用的语言，是英文（EN），中文（zh-CN）或者其它语言。有利于浏览器的搜索。<html lang='En'></html>或者<html lang='zh-CN'></html> <he..
复制链接

扫一扫