HTML入门笔记1

土豆炖牛肉
207 阅读5分钟

HTML是谁发明的

HTML 的全名是“超文本标记语言”（HyperText Markup Language），由蒂姆·伯纳斯-李（Tim Berners-Lee）发明，我们习惯称他为李爵士。

HTML 起手写什么

<!doctype>

这是网页的第一个标签，表示文档类型，告诉浏览器如何解析网页。

最新的文档类型是HTML5，下面是它的写法

<!doctype html>

<html>

<html>是顶层元素，一个网页只能有一个<html>标签。

通过指定该标签的lang属性，来表示网页内容的默认语言。

如果是中文内容，填写zh-CN或zh-Hans，如果是英文内容，填写en。

<html lang="zh-CN">

<head>

<head>标签表示网页的元内容，它不显示在网页上，告诉网页该如何渲染信息。

<meta>

<meta>是<head>的子元素，设置或说明网页的元数据。

网页一般会有如下两个<meta>标签

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello World</title>
</head>

第一个<meta>告诉网页采用utf-8的编码格式，第二个<meta>表示手机端自动缩放。

<title>

<title>标签表示网页的标题

<body>

<body>标签表示网页的主内容，页面显示的内容都要放在<body>内。

全局属性

id

id 选择器无法保证唯一性，不到迫不得已不要使用

class

class属性用来给元素进行分类，方便CSS和JS进行修改

元素同时有多个class，用空格间隔

<div class="a"></div>
<div class="a b c"></div>

title

title属性用来给元素附加说明，鼠标悬浮在上面会显示相关文本

tabindex

有一些用户可能没有鼠标或者只想用键盘浏览网页，浏览器默认提供tab键遍历元素焦点。

tabindex属性能够指定遍历的顺序

  • tabindex为-1时，元素不参与tab键的遍历
  • tabindex为0时，元素按照网页出现的位置的顺序遍历
  • tabindex为正整数时，元素根据数字的顺序参与遍历

style

style属性用来指定当前元素的CSS样式

<div style="color=red">我是🐱</div>

hidden

hidden属性会隐藏当前元素

contenteditable

contenteditable可以让当前元素可编辑

常用的表章节标签

HTML尽量多用语义标签，方便阅读和维护，也方便搜索引擎进行检索。

<header>

可以表示网页头部，也可以表示文章头部和区块头部

<footer>

表示网页或文章尾部

<main>

表示网站主要内容，一个页面只能有一个<main>

<article>

表示页面里一段完整的内容，通常表示一篇文章或一个帖子

<article>
  <h2>文章标题</h2>
  <p>文章内容</p>
</article>

<aside>

<aside>标签用来放置与网页或文章主要内容间接相关的部分。

网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；

<body>
  <main>主体内容</main>
  <aside>侧边栏</aside>
</body>

文章级别的<aside>，可以用来放置补充信息、评论或注释。

<p>第一段</p>
​
<aside>
  <p>参考网站<p>
</aside>

<section>

<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。

<article>
  <h1>文章标题</h1>
  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>
  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>
</article>

<nav>

<nav>标签用于放置页面或文档的导航信息。

<h1> ~ <h6>

HTML 提供了6个标签，用来表示文章的标题。

<h1>是最高级别的标题，<h2>是最高级别的标题，不可以越级。

<hgroup>

如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。

<hgroup>
    <h1>大熊猫</h1>
    <h2>
        喜欢的食物
    </h2>
    <h2>
        生活习惯
    </h2>
</hgroup>

常用的内容标签

<ol> + <li>

有序列表，用数字表示，会产生1、2、3的编号

<ol>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

<ul> + <li>

无序列表，在内部的列表项前面产生实心小圆点。

默认样式已经不再适用现在的前端页面，建议去掉

list-style: none;

大多数情况使用此列表

<ul>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ul>

<dl> + <dt> + <dd>

<dl>标签是一个块级元素，表示一组术语的列表（description list）。

术语名（description term）由<dt>标签定义，术语解释（description detail）由<dd>标签定义。<dl>常用来定义词汇表。

<dl>
  <dt>Cat</dt>
  <dd>猫</dd>
​
  <dt>Dog</dt>
  <dd>狗</dd>
</dl>

<hr>

渲染一根水平线，用来分隔两个不同的主题

<br>

用来换行

<a>

href 取值

网址
https://google.com
http://google.com
//google.com

建议写 //google.com，它会自动选择网站本身的协议

路径
/a/b/c // 绝对路径 
a/b/c // 相对路径

index.html 与 ./index.html 意思一致，都是指当前页面的index.html

伪协议
javascript;代码;
mailto:邮箱
tel:手机号

javascript:; 与 # 之间用前者，javascript:;不会跳转页面且点击后不会跳转至页面顶部

id

href=#xxx

鼠标点击后焦点移动至id为xxx的标签

邮件

mailto

用户点击后浏览器会打开本机默认的邮件程序，向指定的地址发送邮件

<a href="mailto:contact@example.com">联系我们</a>
电话

tel

如果是手机端，用户点击后会唤醒电话进行拨号

<em>

<em>表示强调，浏览器会斜体显示内容。

<strong>

<strong>表示包含的内容很重要，浏览器会加粗显示内容。

<pre>

完整显示空格和回车

<code>

等宽显示字体

<pre>和<code>适合组合使用，用于显示代码内容

<blockquote>, <cite>

<blockquote>是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。

<cite>标签表示引言出处或者作者，浏览器默认使用斜体显示这部分内容。

<blockquote cite="https://quote.example.com">
  <p>诚实是一种策略</p>
</blockquote>
<cite>富兰克林</cite>

cssreset.css

HTML标签默认样式非常难看，已经很难适应现在的需求，建议用以下代码去除HTML默认样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
    border-collapse: collapse; /*table边框合并*/
    border-spacing: 0; /*table边框边距为0*/
}

此文参考了阮一峰老师的WangDoc，强烈推荐

WangDoc.com

avatar
文章
阅读
粉丝