HTML基础知识 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第1天

HTML是什么？

- 定义

HyperText Markup Language

HyperText：图片，标题，链接，表格

Markup Language：<h1>文章标题</h1>

- 代码示例

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

HTML 语法

- 语法要义

1.区分大小写，推荐小写

2.空标签可以不闭合，如input,meta

3.属性值推荐双引号包裹

4.某些属性值可以省略，如required,readonly

- 语法示例

1.有序列表

定义

含有序号1，2，3的列表
代码

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
   <li>复仇者联盟</li>
</ol>

运行结果演示

世界电影票房排行榜

阿凡达
泰坦尼克号
复仇者联盟

2.无序列表

定义

不含序号的列表，以项目符号分隔
代码

<h2>购物清单</h2>
<ul>
  <li>a</li>
  <li>b</li>
   <li>c</li>
</ul>

运行结果演示

购物清单

3.key-value形式列表

定义以属性名、属性值对出现的列表，表示属性的名和值
代码

<dt>导演：</dt>
 <dd>陈凯歌</dd>
<dt>主演：</dt>
 <dd>张国荣</dd>
 <dd>张丰毅</dd>
 <dd>巩俐</dd>
<dt>上映日期：</dt>
 <dd>1993-01-01</dd>

运行结果演示

导演：

陈凯歌

主演：

张国荣

张丰毅

巩俐

上映日期：

1993-01-01

4.链接

定义
代码

 <!--原有窗口开的链接-->
 <a href = "https://www.bytedance.com/">
 字节跳动官网
 </a>
 
 <!--新的窗口开的链接-->
  <a href = "https://www.bytedance.com/"
  target = "_blank">
 字节跳动官网
 </a>

运行结果演示

字节跳动官网

5.图片

代码

<img src = "http://pic1.win4000.com/wallpaper/2018-04-09/5acb53f32c1a6.jpg"
 alt="Metal movable type"
  width="400"
  />

运行结果演示

Metal movable type

6.播放进度条

代码

<audio
    src="/assets/music.ogg"
    controls
></audio>

7.视频

代码

<audio
    src="/assets/vedio.mp4"
    controls
></audio>

8.输入

代码

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey<textarea>

代码运行演示

Hey

9.文本标签

定义 <blockquote>表示快捷引用：引用的这段文字来源于哪里

<cite>短引用，表示引用章节

<q>短引用，表示引用的具体内容

<code>引用，表示代码

<strong>强调，字体加粗，表示非常重要、紧急

<em>强调，表示语气上重读的词，含义上的重要紧急

代码

<blockquote cite="http://t.cn.Rfjk00F">
  <p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、发育出来的，所以没有这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子。</cite></p>
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读常量。</p>
<p>在投资之前，一定要做<strong>风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

运行结果演示

天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、发育出来的，所以没有这种民众，就没有天才。

我最喜欢的一本书是小王子。

在第一章，我们讲过字符串是不可变量。

const声明创建一个只读常量。

在投资之前，一定要做风险评估。

Cats are cute animals.

内容划分

示例

标签具体作用 <head>标题

<nav>导航

<main>页面主体，重点内容

<aside>广告、热点推荐

<article>一篇文章或链接，或博客列表输出博客内容

<footer>页面尾部，参考链接、版权、备案信息

语义化是什么？

语义化：为什么需要标签？做标签的意义？

HTML中的元素、属性、属性值拥有某种含义
开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言

谁在使用我们写的HTML？

开发者——修改、维护页面
浏览器——展示页面
搜索引擎——提取关键字、排序
屏幕阅读器——给盲人读页面内容

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化？

了解标签和属性含义
思考最合适内容的标签
不适用可视化工具生成代码

# HTML基础知识 | 青训营笔记