HTML入门笔记1

2019-08-26 本文已影响0人饥人谷_AaronXu

万维网 WWW & HTML 的发明

WWW 简述

WWW = URL + HTTP + HTML
WWW: World Wide Web，万维网
WWW 作为前缀是一个历史原因，现在进入网站，没有必要再加 WWW 作为前缀。

历史

发明者：李爵士（Tim Berners-Lee）
1. 奖项：
  - 2004年，被英女皇颁发大英帝国爵级司令勋章
  - 2017年，被颁发图灵奖
2. 成就：
  - 自己写了第一个浏览器
  - 自己写了第一个服务器
  - 用自己写的浏览器访问了自己写的服务器
  - 发明了 WWW，同时发明了 HTML、HTTP 和 URL
诞生时间：1990年诞生
发明原因

让每个人输入网址就能看到网页：上网冲浪
- 当时世界上没有网址，李爵士就发明了 URL
- 当时世界上没有网页，李爵士就发明了 HTML
- 为了让这个系统更完善，李爵士就发明了 HTTP

HTML 起手式

起手示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" 
          content="id=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>：文档类型，表示告诉浏览器开始写 HTML
<html lang="en">：根标签，可以更改语言比如 "lang=zh-CN"
<head>：一般写看不见的元素
- <meta charset="UTF-8">
  
  文件的字符编码，一般写在最前面，推荐统一写 UTF-8，因为UTF-8 支持所有语言，GBK只支持一些亚洲的语言，如果写的编码与当前文件不同就会出现乱码
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  禁用缩放，兼容手机
- <meta http-equiv="X-UA-Compatible" content="id=edge">
  
  告诉IE使用最新内核
- <title>Document</title>
  
  标题标签
<body>：正文
注意，一般 <head> 和 <body> 不缩进

常用表章节标签初解

初解

h1 到 h6，标题标签，表示内容框架，内容的层级
section，章节标签
article，表示文章
p，表示一个段落
header，头部标签
footer，脚部标签
main，主要内容
aside，旁支内容
div，块级元素，用来划分

示例

<body>
    <header>头部广告</header>
    <div>
        <main>
            <h1>文章标题</h1>
            
            <section>
                <h2>第一章</h2>
                <p>
                    一段话
                </p>
                <section>
                    <h3>1.1节</h3>
                    <p>
                        一段话
                    </p>
                    <h3>1.2节</h3>
                    <p>
                        一段话
                    </p>
                </section>
            </section>
        </main>
        <aside>
            参考资料 1 2 3
        </aside>
    </div>
    <footer>&copy; XXXX版权所有</footer>
</body>

全局属性初解

即所有标签都有的属性

class

给标签分类/标记
方便添加样式

举例

html代码
```
<div class="middle bordered"></div>
```

CSS代码

.middle{
    background: black;
    color: white;
}
.bordered{
    border: 10px solid red;
}

contenteditable

表示元素是否可以被用户编辑

举例 1

<--! 该div的内容可以被用户编辑 -->
<div class="middle bordered" contenteditable></div>

举例 2

<--! 一个有用的调试例子，让style标签显示出来，并且能被编辑 -->
<body>
    <style contenteditable>
        style{display: block; border: 1px solid red}
    </style>
</body>

hidden

可被用来隐藏一个页面元素，即有该属性的元素不会被显示

举例

<--! 该div的内容可以被用户编辑 -->
<div class="middle bordered" hidden></div>

id
- 通俗说法：全页面唯一用 id，不然用 class
- 实际情况：不到万不得已，我们不考虑用 id，因为 id 不报错，可以允许多个相同 id 的元素。
- 举例
  1. html 代码
```
<div id="xxx" hidden></div>
```
  2. CSS 代码
```
#xxx{border: 10px solid red;}
```
- JavaScript可以直接获取 id
  
  举例
```
// 效果与上述CSS代码一样，注意 id 必须指向唯一
xxx.style.border = '1px solid red'
```
- 忌讳：id 不能设置成和全局元素的属性（需要记忆）一样，新手慎用 id
style
- 样式属性，优先级高于 CSS
- 可以通过 JS 设置
- JS设置优先级高于 style属性，高于 CSS
tabindex
- 指定元素是否/在何处参与顺序键盘导航（一般用 Tab 按键）
- 值
  - 负值（往往是 -1）：表示元素无法通过键盘导航访问到
  - tabindex="0"：往往表示最后一个被聚焦
  - 正值：越大越后被聚焦，相同则根据元素在当前DOM中的先后顺序决定
- 举例
```
<--! 最后被聚焦 -->
<div tabindex="200">1</div>
    
<--! 不参与导航 -->
<div tabindex="-1">2</div>

<--! 最先被聚焦 -->
<div tabindex="1">3</div>

<--! 最后被聚焦 -->    
<div tabindex="0">4</div>

<--! 被聚焦顺序：3 1 4 -->
```

title

表示咨询信息文本，和它术语的属性相关，显示完整的内容，可与省略号一起使用。

举例

html 代码，title 属性显示完整的内容

<header class="xxx" title="顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告">顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告</header>

CSS 代码，显示不完的内容省略号效果

.xxx{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

常用内容标签初解

ol + li
- ol：ordered list，有顺序的列表
- li：list item，列表中的一项
- ol 里面含有处 li 之外的子元素
- 举例
```
<ol>  
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
</ol>
```
ul + li
- ul：unordered list，没有顺序的列表
- 其余同 ol + li
dl + dt + dd
- dl：description list，描述性定义性列表
- dt：descritption term，被描述的对象术语，只能作为 dl 元素的子元素出现，通常后面跟着 dd 元素
- dd：用来指明 dl 元素中一个术语的描述，该元素只能作为描述列表元素的子元素出现，而且必须跟着一个 dt 元素
- 举例
```
<dl>
    <dt>术语1</dt>
    <dd>术语1的描述</dd>
    <dt>术语2</dt>
    <dd>术语2的描述</dd>
</dl>
```
pre
- 在 HTML 中，多个空格回车或者tab，都只会缩进成一个空格
- pre 的作用就是能保留多出来的空格
- 表示一种预定义格式的文本，按照原文件中的编排，文本中的空白符都会显示出来
- 举例
```
<pre>
这里         的   空白符  不    会被缩进为一个
</pre>
```
code
- 呈现一段计算机代码，默认是以浏览器的的默认等宽字体显示
- 举例
```
<pre>
<code>
var a = 1
console.log(a)
</code>
</pre>
```
hr
- horizontal rule，表示水平分割线，段落级元素之间的主体转换
- 举例
```
<p>
    段落内容1
</p>

<hr>

<p>
    段落内容2
</p>
```

br
- break
- 在文本中生成一个回车（换行符号）
a
- anchor，锚元素
- 创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接
- 重要属性举例：
  1. href 属性：超链接指向的 URL 或其片段
  2. target 属性：指定何处显示链接的资源内容
- 举例
```
请点击

<a href="http://www.baidu.com" target="_blank">
    这里
</a>
```
em
- emphasis
- 标记用户需要着重阅读的内容
- 与 strong 的区别：
  - em：语气的强调
  - strong：本身内容的强调
- 举例
```
<p>
    我们<em>期中考试</em>重点是<strong>JavaScript</strong>
</p>
```

q

quote
表示一个短的行内（内联）引用的文本
不要用换行符
长文本（块级）引用，blockquote

举例

<p>
    XX说<q>我是一个内联的短引用文本</q>
    <br>
    XX又说
    <br>
    <blockquote>
        我是一个块级的 
        <br>
        长引用文本
    </blockquote>
</p>

HTML入门笔记1

万维网 WWW & HTML 的发明

WWW 简述

历史

HTML 起手式

起手示例

常用表章节标签初解

初解

示例

全局属性初解

常用内容标签初解

猜你喜欢

热点阅读