unique007

导航

01 关于HTML基础-构建Web，这些你都知道吗？（很全）

以下均是参考MDN web docs，总结出来的比较重要的知识点，与君共勉。不妥之处，还望大家及时提出！

什么是HTML？

是一种告诉浏览器如何组织页面的标记语言。它由一系列元素组成。

HTML元素

1. 开始标签 eg: <p>
2. 结束标签 eg: </p>
3. 内容 标签中间写的即内容。
4. 元素 以上三者相结合就是一个完整的元素。

着重强调 - 加粗[strong]，斜体[em]，下划线[ins]

<p>追寻<strong>梦想</strong>的<em>脚本</em>不<ins>停歇</ins></p>

追寻梦想的脚本不停歇

块级元素和内联元素

块级元素：通常用于展示页面上结构化的内容，eg：段落、列表、导航菜单、页脚等。一般会独占一行，其后的内容会挤到下一行显示。
内联元素：通常出现在块级元素中并环绕文档内容的一小部分，不会导致换行。

eg: <em>首先</em><em>其次</em><em>最后</em>
首先其次最后

空元素

也可以理解为单标签，eg:<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" height="80"/>

注意：width/height属性一般只改一个，即可等比例缩放。

属性

<p class="edit-p"></p> 其中class即使p元素的属性，格式：一空格二等于号三引号，其中引号是单引号/双引号都可，看个人习惯。
当然，也有一些无值属性，下面的disabled属性使得input框变成灰色，禁止用户输入。

eg:<input type="text" disabled/>

eg:<input type="text" />

超链接-强大的a标签

<p>数理不分家 诺贝尔官方公布<a href="https://www.baidu.com/" title="爱因斯坦简介">爱因斯坦</a>数学成绩单：真学霸无疑</p>

数理不分家 诺贝尔官方公布爱因斯坦数学成绩单：真学霸无疑

统一资源定位符（URL）是一个定义了在网络上的位置的一个文本字符串。使用路径查找文件。 file.html与当前文件是同一目录。 返回上一级目录用 ../ 表示。

注意：
1.链接要尽可能短，尽可能使用相对链接。
2.链接到非HTML资源，要留下清晰的指示。

<p><a href="http://www.example.com/large-report.pdf">下载销售报告（PDF,10MB）</a></p>

下载销售报告（PDF,10MB）

3.下载链接时使用download属性
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64位）
</a>


下载最新的 Firefox 中文版 - Windows（64位）

4.电子邮件链接

<a href="mailto:nowhere@mozilla.org">向nowhere发邮件</a>
其中，邮件地址是可选的，若你忘了也没关系，用户可以发送给他们选择的地址邮件。
下面是一个包含cc(抄送),bcc,主题和主体的实例：

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

注：使用 ?分隔主URL与参数值，以及使用 &来分隔 mailto:中的各个参数。这是标准URL查询标记方法。

绝对URL和相对URL

projects是根目录
绝对URL：http://www.example.com/projects/index.html其中，http://www.example.com是web服务器站点的域名。
相对URL：pdfs/projext.pdf其中，pdfs是projects的子目录，projext.pdf是pdfs的子目录。（对应的绝对URL是http://www.example.com/projects/pdfs/project-brief.pdf）

HTML文档

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>我的第一个Blog</title>
      </head>
      <body>
            <p>我们的未来都不是梦，终究会实现！We can do it.</p>
      </body>
</html>

其中，是文档声明。

html元素是根元素，包裹着整个完整的页面。

head元素是一个容器，内容不在页面显示。

meta元素中的charset一般写'UTF-8'就可，它囊括了人类大部分的文字。

title元素设置页面标题。

body元素包含了你访问页面时所有显示在页面上的内容。

HTML中的空白

（看下面代码，实质是只相差一个空格，那些空格不起作用，HTML会将连续出现的空白字符当做一个空格符处理。）

<p>一直在路上，故有无限的可能。</p>
<p>一直在路上，       
              故有无限的可能</p>

一直在路上，故有无限的可能。

一直在路上， 故有无限的可能

HTML中的特殊字符

原义字符 等价字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp; 
<p>左家垅<p>的夏天</p>
<p>左家垅&lt;p&gt;的夏天</p>

左家垅

的夏天

左家垅 < p > 的夏天

HTML注释

<!-- <p>用户看不见，但很有用！</p> -->

head标签中有什么？

页面加载完成时，head标签里的内容不会在页面显示，但它的作用是保存页面的一些元数据。
<meta charset="UTF-8">
如果你将charset设置为GBK（中国大陆国标字符集），则页面将会出现乱码。

注：Chrome浏览器会自动修正错误的编码，你或许看不到。

在HTML中应用CSS和JavaScript，分别使用<link>和<script>元素.

<link>经常位于文档的头部，有2个属性，rel="stylesheet"表示这是文档的样式表，href包含了样式表文件的路径。
<link rel="stylesheet" href="my-css-file.css">
<script>放在文档的尾部就可（body之前），这样可确保加载脚本前已解析了HTML内容。
<script src="my-js-file.js"></script>

HTML文字处理

六个标题元素标签如下，其中h1最好使用一次，这是顶级标题，每页不要超过3个标题：

<h1>淋雨一直走</h1>
<h2>张韶涵</h2>
<h3>有梦就别怕痛</h3>
<h4>淋雨一直走</h4>
<h5>是道阳光就该暖和</h5>
<h6>人都应该有梦</h6>

淋雨一直走

张韶涵

有梦就别怕痛

淋雨一直走

是道阳光就该暖和
人都应该有梦

列表

无序列表

<ul>
   <li>鸡蛋</li>
   <li>牛奶</li>
   <li>狗不理</li>
</ul>
  • 鸡蛋
  • 牛奶
  • 狗不理

有序列表，可以嵌套

<ol>
   <li>面条</li>
   <li>米饭</li>
      <ul>
         <li>辣白菜</li>
         <li>红烧肉</li>
      </ul>
   <li>鱼粉</li>
</ol>
  1. 面条
  2. 米饭
    • 辣白菜
    • 红烧肉
  3. 鱼粉

高阶文字排版

描述列表

<dl>
   <dt>内心独白</dt>
      <dd>戏剧中，某个角色对自己的内心活动......</dd>
   <dt>语言独白</dt>
      <dd>戏剧中，某个角色把自己的想法.....</dd>
   <dt>旁白</dt>
      <dd>戏剧中，为渲染幽默或戏剧性效果而进行的.......</dd>
</dl>
内心独白
戏剧中，某个角色对自己的内心活动......
语言独白
戏剧中，某个角色把自己的想法.....
旁白
戏剧中，为渲染幽默或戏剧性效果而进行的.......

其中，描述列表使用 dl 标签 ，每一项用 dt 闭合，每个描述用 dd 闭合。浏览器的默认样式会在描述列表的描述部分和描述术语之间产生缩进。一个术语 dt 可以同时有多个描述 dd。

引用

块引用 用 <blockquote>元素包裹，并在 cite属性里用URL来指向引用的资源。
行内引用 用 <q>元素包裹，并在 cite属性里用URL来指向引用的资源。

缩略语 <abbr>

<p>我们使用 <abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr>来组织网页文档。</p>

我们使用 HTML来组织网页文档。

当光标移到HTML上时会出现提示。

上标<sup>和下标<sub>

<p>咖啡因的化学方程式是C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>. 方程式X<sup>2</sup>=4</p>

咖啡因的化学方程式是C8H10N4O2. 方程式X2=4

标记时间和日期

<time datetime="2020-10-10">2020年10月10日</time>

HTML布局元素细节

  • <main>存放每个页面独有的内容，每个页面只能用一次，且直接位于 <body>中，最好不要把它嵌套进其他元素。
  • <article>包围的内容即一篇文章。
  • <section>与<article>类似，但<section>更适用与组织页面按其功能分块。
  • <aside>包含一些间接信息（术语条目、作者简介、相关链接等等）。
  • <header>若是body元素的子元素，则是网站的全局页眉；若是article/section的子元素，则是这些部分特有的页眉。
  • <nav>主导航。
  • <fotter>页脚。

无语义元素

<p>少年自由少年狂<span class="editor-note">[编辑批注：此刻舞台灯光应变亮]</span></p>
这里，‘编辑批注’仅对舞台剧导演提供额外指引；没有具体语义。

<div>块级无语义元素，eg:一个电子商务网站页面上有一个一直显示的购物车组件，不能用aside/section，因为它既和主内容没多大关联，也不是页面上主内容的一部分，这种情况下要用div。注意：在没有更好的语义方案时才选择它，尽可能少用，否则维护成本太高。

换行和水平分割线

<br>可在段落中换行。
<hr>在文档中生成一条水平分割线。

实战：规划一个简单的网站(下一篇博客见！)

posted on 2020-10-10 15:06  unique007  阅读(111)  评论(1)    收藏  举报