8月1日零基础自学HTML笔记第二篇。

一、文字处理基础

1. 语义化

文章结构化是让用户阅读文章更加清晰的手段。而语义化的标签就是用来使文章结构化的。标签的语义是一种约定俗成的概念，不许额外的注释即可让读者理解到文字背后传达的意思，如标题、段落、高亮、下划线等。

尽管css可以提供各种样式达到我们想呈现的页面效果，但是对于语义的态度，我们仍应当是敬畏的。

2. 常见语义化标签

段落和标题

<!--段落和标题对文章的结构化起到了决定性作用
这里的h1标题通常称为*顶级标题*，建议每篇文章只有一个-->

<!--段落-->
<p>
    this is a paragraph.
</p>

<!--标题-->
<!--这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3> 表示三级子标题（sub-subheadings），等等。-->
<h1>
    this is a head
</h1>

列表

<!--order有序列表-->
<ol>
	<li>睁眼</li>
    <li>打哈欠</li>
    <li>起床</li>
    <li>洗漱</li>
    <li>吃早饭</li>    
</ol>
<!--unorder无序列表-->
<ul>
	<li>北京</li>
    <li>上海</li>
    <li>四川</li>
    <li>安徽</li>
    <li>内蒙古</li>
</ul>
<!--嵌套列表-->
<ul>
	<li>北京</li>
    <li>上海</li>
    <li>四川</li>
    <li>安徽</li>
    <ul>
    	<li>合肥</li>
        <li>芜湖</li>
        <li>马鞍山</li>
    </ul>
    <li>内蒙古</li>
</ul>

重点强调

<em>这是斜体</em>
<strong>这是加粗</strong>
<i>斜体</i>
<b>粗体</b>
<u>下划线</u>

二、创建超链接

1. 超链接的概念

超链接是让我们的文档连接到其他文档（或其他形式的资源）的一种手段。我们可以以网址（URL）为指向在浏览器上导向到（或下载）其他的HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。

2. 超链接语法

<!--hrep属性用来指明URL地址-->
<!--title属性，用来注明鼠标悬停时的提示信息-->
<!--target属性，保证跳转页面显示在新建标签页-->
<a hrep="www.baidu.com" title="一个搜索引擎" target="_blank">Baidu</a>

<!--图片形式的链接内容-->
<a hrep="www.baidu.com" title="一个搜索引擎" >
	<img src="./xxx.jpg" alt="xxx">
</a>

3. 文档片段

超链接除了可以指向文档，还可以指向html文档中的某个元素。常常和列表结合用于目录导航。

<!--先给需要导航的元素一个id-->
<h1 id="myh1">
    this is a he
</h1>

<!--注意在#号后写入id名称-->
<a href="#myh1">
	跳转到标题h1
</a>

如果不在同一个文档下，需要在#前加入文档文件路径。

三、文档与网站架构

之前所记录的都是一些标签、图片等零碎的部分，接下来是网页的大体结构，称为块级元素（例如“标题栏”、“导航菜单”、“主内容列”）

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

<header>页眉
<nav>导航栏
<main>主内容：这里可细分为
,
,
等元素表示
<aside>侧边栏
<footer>页脚

示例（截取至github：https://github.com/roy-tian/learning-area/blob/master/html/introduction-to-html/document-and-website-structure/index.html）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>二次元俱乐部</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <header> <!-- 本站所有网页的统一主标题 -->
      <h1>聆听电子天籁之音</h1>
    </header>

    <nav> <!-- 本站统一的导航栏 -->
      <ul>
        <li><a href="#">主页</a></li>
        <!-- 共 n 个导航栏项目，省略…… -->
      </ul>

      <form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
        <input type="search" name="q" placeholder="要搜索的内容">
        <input type="submit" value="搜索">
      </form>
    </nav>

    <main> <!-- 网页主体内容 -->
      <article>
        <!-- 此处包含一个 article（一篇文章），内容略…… -->
      </article>

      <aside> <!-- 侧边栏在主内容右侧 -->
        <h2>相关链接</h2>
        <ul>
          <li><a href="#">这是一个超链接</a></li>
          <!-- 侧边栏有 n 个超链接，略略略…… -->
        </ul>
      </aside>
    </main>

    <footer> <!-- 本站所有网页的统一页脚 -->
      <p>© 2050 某某保留所有权利</p>
    </footer>
  </body>
</html>

接下来解读一下源码：

head 部分：这里设定了 UTF-8 的编码样式，标签页的标题“二次元俱乐部“，以及用于引用 css 文件样式的 link 标签
body 部分
- header 页眉部分：这里设置了一个 h1 标题，通常 h1 顶级标题只有一个，所以不必过多设置
- nav 导航栏部分：这里因为要做导航用途，因此以列表+ a 标签的形式设置了导航栏目录方便快速的对页面的内容进行线性查询，此外还做了一个 form 标签的搜索栏，并用两个 input 标签，一个设置输入块，另一个用 submit 的 type 属性设置为了一个提交按钮，用于确定搜索
- main 主内容：这里用了一个内容缺省的 article 标签
- aside 侧边栏：这里提供了一些跟主页面间接相关的一些链接通道，并且用了与导航栏类似的列表+ a 标签的形式
- footer 页脚：一个 p 标签注明版权信息

到这里页面的主体部分介绍就结束了

四、无语义元素

在某些情况下可能我们不知道用哪种现有语义、或者是需要用 css，js 自定义语义，那么这时就需要用一个暂不确定的元素来作为顶替，当然这里的标签不能和之前的语义化标签混淆，因此这里介绍两个无语义元素

1. span元素

span 元素是一个内联（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。例如

<p>
    曹操哈哈大笑<span[灯光开始变暗]</span>
</p>

这里的[灯光开始变暗]就属于是台本批注，这里的内容样式需要用 css 来确定，因此不是具体的某一种语义，用span来标注

2. div 元素

div 是一个块级无语义元素，应仅用于找不到合适的块级元素，或不想增加特定的意义时。

具体使用场景不做举例。

这里要注意，因为无语义，div 非常便利但是容易被过多使用，这导致了 html 文档的可读性变差，可维护性变差，因此要尽可能少用

html学习笔记（二）——语义化标签、超链接、网站架构、无语义元素