html页面分成三个部分_HTML入门笔记1

最新推荐文章于 2022-11-18 20:17:20 发布

weixin_39524834

最新推荐文章于 2022-11-18 20:17:20 发布

阅读量3.5k

点赞数 1

文章标签： html页面分成三个部分

本文链接：https://blog.csdn.net/weixin_39524834/article/details/112079130

版权

HTML概述：HTML 的全名是“超文本标记语言”（HyperText Markup Language），它是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。

1.HTML之父

李爵士(Tim Berners-Lee)

李爵士发明了WWW、HTML、HTTP和URL。
李爵士是万维网的开创者，他写了世界上第一个网页浏览器(WorldWideWeb)和第一个网页服务器(httpd)，同时也创建了世界上第一个网站“http://info.cern.ch/”，该网站于1991年8月6日运行，它解释了万维网是什么，并教会我们该如何使用网页浏览器和如何建立一个网页服务器。

2.HTML起手式

快捷键：感叹号 ! + Tab键

<!DOCTYPE html>                   //文档类型为HTML
<html lang="zh-CN">              //网页语言为简体中文
  <head>
    <meta charset="UTF-8" />    //字符编码为UTF-8
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />//禁止缩放，兼容手机
    <title>我的网页</title>     //网页标题
  </head>
 <body>
    Hello World!               //网页内容
  </body>
</html>

3.章节标签

表示文章/书的层级

标题 h1~h6：h1~h6标题级数依次递减，h1级别为最高
章节 section：<section>章节元素表示一个包含在HTML文档中的独立部分，一般来说会有包含一个标题。与<article>比较而言，<section>更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇<article>分成若干部分并分别置于不同的<section>中，也可以把一个区段<section>分成若干部分并分别置于不同的<article>中，取决于上下文。
段落 p：<p>元素表示文本的一个段落，也被称为HTML段落元素，该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。此外，<p> 是块级元素（块级元素中可以包含块级元素和行内元素，总是从新的一行开始，高度、宽度都是可控的，宽度在没有设置时，默认为100%）。
article 文章：<article>文章元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
header 头部：<header>头部元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称等等。
footer 脚部：定义了页脚，通常包含版权或法律声明，有时还包含一些链接。在部分的情况下，页脚可能包含切片内容的发布日期，许可证信息等<article>，<section>，<aside>，和<nav>可以有自己的<footer>。尽管有其名称，但页脚不一定位于页面或节的末尾。（&copy；版权声明符号）
main 主要内容：存放每个页面独有的内容。每个页面上只能用一次<main>，且直接位于<body>中。最好不要把它嵌套进其它元素。
aside 旁支内容：包含一些间接信息（术语条目、作者简介、相关链接，等等）。
div 划分：<div>元素(或HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

代码示例

 <body>
    <header>顶部内容</header>
    <div>
      <main>
        <h1>HTML入门学习</h1>
        <section>
          <h2>第一章</h2>
          <p>
            应该如何学习HTML，首先要了解章节标签和内容标签，然后要熟记并反复练习。
          </p>
          <section>
            <h3>第一节</h3>
            <p>
              HTML中的章节标签有“标题h1~h6,章节section，段落p，文章article，头部header，脚部footer,
              主要内容main，旁支内容aside以及划分div"。
            </p>
          </section>
        </section>
      </main>
      <aside>补充知识点：李爵士被称为互联网之父</aside>
    </div>
    <footer>&copy;版权声明</footer>
  </body>

效果对照

4.全局属性

所有标签都有的属性

class ：以空格分隔的元素的类名列表

class“=”效果展示

class多属性匹配

contenteditable：可以让所有元素可编辑。<div class="middle bordered" contenteditable>

用户可通过自己在页面编辑改变文档风格

hidden：隐藏，比display：block优先级高

id: 全局唯一属性，谨慎使用，不会报错

style：html 的属性，不是 css 的样式，也可以通过 js 设置，js 会覆盖 html 的 style（js 优先级最高，js>html>css）。

tabindex：控制Tab键访问的顺序。（0 是最后访问，-1 是不允许访问，优先级1>2>.....）

<div class = "middle bordered" tabindex=1>

title: 包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。可用于溢出省略。

鼠标移动到顶部内容时会出现title中的内容

5.常用的内容标签

清除样式(写在开头的head之间)

<style>
   *{margin: 0;padding:0;box-sizing:border-box;}
   *::after, *::before{box-sizing:border-box;}
   h1,h2,h3,h4,h5,h6{font-weight:normal;}
   a{color:inherit;text-decoration:none;}
   ul,ol{list-style:none;}
   table{border-collapse:collapse; border-spacing:0; }
 </style>

ol+li: 有序列表，ol不能含有除li外的任何子元素

ul+li: 无序列表
dl+dt+dd: dl是描述的列表，dt是描述的对象，dd是描述的内容。

pre：显示文本中的空白符

code: 包裹的字体等宽，可以与pre搭配写代码

hr: 分割线

br: 换行

a: 超链接 target="_blank" 用于打开新窗口（常用于国内）

em: 强调，默认样式为斜体（语气）

strong: 重要，默认样式为加粗（本身内容）

quote: 内联引用

blockquote: 块级引用

weixin_39524834

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html页面分成三个部分_HTML入门笔记1

HTML概述：HTML 的全名是“超文本标记语言”（HyperText Markup Language），它是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。1.HTML之父李爵士(Tim Berners-Lee)李爵士发明了WWW、HTML、HTTP和URL。李爵士是万维网的开创者，他写了世界上第一个网页浏览器(WorldWideWe...
复制链接

扫一扫