HTML入门笔记1

Superman_周
287 阅读4分钟

1.HTML简介

HTML的英文全称是 Hyper Text Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言。

2.HTML起手应该写什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

代码简要说明

  • <!DOCTYPE html>DOCTYPE意思就是文档类型，表示此文档类型是html
  • <html lang="en">向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english 你的页面如果是中文页面，可将其改为 <html lang="zh-CN"> zh即表示中文
  • <meta charset="UTF-8">utf-8”是一种字符编码。charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。常见的字符编码有：gb2312、gbk、unicode、utf-8。UTF-8则基本包含全世界所有国家需要用到的字符，一般使用"UTF-8"编码就可以了
  • <title>Document</title>title元素可定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称

3.常用的章节标签

  • h1~h6标签： h1 - h6标签可定义标题。h1定义最大的标题。h6定义最小的标题 用法实例：
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
  • section标签： 标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其它部分。 用法实例：
<section>
  <h1>标题1</h1>
  <p>内容内容</p>
</section>
  • article标签： article标签中的内容是独立的、完整的、摘自外部的内容。它可以是博客文章、新闻文章、论坛帖子、网友评论等独立的内容。标签中的内容通常有它自己的标题，甚至有时候还有自己的脚注。它可以嵌套使用，但是一般需要外部内容和内部内容有关系。比如：一篇博客文章，它的评论就可以使用嵌套的形式，将评论内容嵌套在整体内容中。 用法实例：
<article>
    <header>
        <h1>article</h1>
        <p>发表日期：2021-04-07</p>
        <p>article作为英文单词有文章的意思</p>
    </header>
    <footer>
        <p>一篇博客</p>
    </footer>
</article>
  • main标签： 用来规定规定文档的主要内容。 用法示例：
<main>
  <h1>main标签</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
  </article>
</main>
  • aside标签： 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。 用法示例：
<p>我和我的家人今年夏天参观了埃普科特中心</p>
<aside>
<h4>埃普科特中心</h4>
埃普科特中心是佛罗里达迪斯尼乐园的主题公园
</aside>

4.常用的内容标签

  • a标签： 标签定义超链接，用于从一张页面链接到另一张页面。元素最重要的属性是 href 属性，它指示链接的目标。
<a href="https://juejin.cn/">W3School</a>
  • strong标签： strong 标签和em标签一样，用于强调文本，但它强调的程度更强一些。
  • code标签： code标签是一个短语标签，用来定义计算机代码文本
  • pre标签： pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

5.全局属性有哪些

全局属性是可与所有 HTML 元素一起使用的属性。

属性描述
class规定元素的一个或多个类名（引用样式表中的类）
contenteditable规定元素内容是否可编辑
contextmenu规定元素的上下文菜单。上下文菜单在用户点击元素时显示
dir规定元素中内容的文本方向
draggable规定元素是否可拖动
dropzone规定在拖动被拖动数据时是否进行复制、移动或链接
id规定元素的唯一 id
lang规定元素内容的语言
spellcheck规定是否对元素进行拼写和语法检查
style规定元素的行内 CSS 样式
tabindex规定元素的 tab 键次序
title规定有关元素的额外信息
translate规定是否应该翻译元素内容
avatar
文章
阅读
粉丝