欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

学习笔记之HTML

程序员文章站 2022-07-11 12:14:46
...

1.1 HTML 基础

1.1.1 HTML 的定义

HTML（Hyper Text Markup Language）是一种超文本标记语言，用来给内容赋予结构和意义。

1.1.2 HTML基础术语

元素：元素是定义页面内对象结构和内容的指示符，通常是指开始标签到结束标签内的所有代码。

  • 行内元素：<em>、 <a>、 <b>、 <span>、 <strong>
  • 块级元素：<p>、 <h1>、 <h2> …… <div> 、<ul>、 <ol>、 <li>、 <dl>、 <dt>、 <dd>
  • 空元素：<br>、 <meta>、 <hr>、 <img>、 <input>、 <link>

标签：元素通常由标签成对组成。开始标签标记了元素的开始，例如:<p>，闭合标签标记了一个元素的结束，标签内以一个斜杠开始，例如：</p>

<p> ……</p>

属性：属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式在开始标签中出现，例如：<a href="http://hicc.me/"> cc log </a>

HTML基础术语例子：cc log

1.2 HTML页面基本结构

1.2.1 文档类型声明

在HTML文件的开头需进行文档类型声明（doctype），以告诉浏览器页面使用的哪个版本的HTML 。

<!DOCTYPE html>

1.2.2 文档基本结构

HTML文档基本结构一般包含以下声明和标签：doctype、html、head、body
例如：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>  HELLO,WORLD!</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>
        <h1>hello,world!</h1>
        <p>This is a website.</p>
    </body>
</html>

1.3 视口

一般而言，对于响应式站点，应设置适口如下：

<meta name="viewport" content="width=device-width,initial-scale=1">

1.4 结构性元素

主要包括：<header>、<nav>、<section>、<aside>、<footer>

1.4.1 <header>

在<header>元素中，应包含介绍性和导航性的辅助内容，如：logo、搜索功能和主导航栏。
对应的WAI-ARIA属性是banner.

<header role="banner">……</header>

1.4.2 <nav>

页面主导航包含在<nav>元素中，通常在<header>中会有一个<nav>元素。
对应的WAI-ARIA属性是navigation。

<nav role="navigation"> ……</nav>

1.4.3 <footer>

可以用作页面页脚，也可以在其他地方设置脚标，对内容区块（而不是）相对应的WAI-ARIA属性是contentinfo。

<footer role="contentinfo"> ……</footer>

1.4.4 <article>

<article>元素师网页上一块独立的内容，一个页面可以有多个<article>元素。但没有对应的WAI-ARIA 属性。

<article>……</article>

1.4.5 <aside>

<aside>元素用于次要的内容，可以是与网站或整个页面相关的（友情链接等），或者是嵌套在<article>元素中，与文章相关（术语表等）。
相对应的WAI-ARIA 属性是complementary。

<aside role="complementary">……</aside>

<body>
    <header role="banner">
        <nav role="navigation">……</nav>
    </header>
    <article>……</article>
    <aside role="complementary">……</article>
    <footer role="contentinfo">……</footer>
</body>

1.4.6 IE 支持

为了让网站能在老版的IE中正确显示，需要使用polyfill或利刃shive脚本。我们所要做的就是下载这个文件，然后在<head>元素中链接他，如：

<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![endif]>-->

下载地址

1.5 创建一个页面

1.5.1 示例

以下示例为一个不包含任何css样式的页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello,World!</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <!--[if it IE 9]>
            <script src="files/html5shiv.js"></script>
        <![end if]-->
    </head>
    <body>
        <header role="banner">
            <h1>Learning html</h1>
            <nav role="navigation">
                 <ul>
                     <li><a href="……">Home</li>
                     <li><a href="……">About</li>
                     <li><a href="……">Contact</li>
                     <li><a href="……">Links</li>
                 </ul>
            </nav>   
        </header>   
        <article>
            <h2>html的定义</h2>  
            <p>HTML（Hyper Text Markup Language）是一种超文本标记语言，用来给内容赋予结构和意义。</p>
        </article>  
        <aside role="complementary">
            <h2>Related links</h2>
            <ul>
                <li><a href="http://hicc.me/">cc log</a></li>
                <li><a href="http://hipo.cash">hipo</a></li>
            </ul>
        </aside>
        <footer role="contentinfo">
                <p>©2016 html forever</p>
        </footer>
    </body>
</html>

1.5.2 注释

<!--这是一个html注释-->
<!--这是另一个html注释，
分成多行-->

 <!--[if it IE 9]>
            <script src="files/html5shiv.js"></script>
        <![end if]-->

以上示例为条件注释，只能被IE浏览器识别（其他浏览器只会将其当作普通注释并忽略），可以用来给予IE特别的指示。

上一篇： 前端学习之HTML

下一篇： HTML学习笔记（一）之html基础

推荐阅读