HTML 入门笔记 1
在学习HTML前了解其由来帮助更好的理解这门语言
历史
1990年左右,Tim Berners-Lee,一般称之为李爵士做了四件事:
- 自己编写了第一个浏览器;
- 自己编写了第一个服务器;
- 用自己写的浏览器访问自己写的服务器
- 发明了WWW,同时发明了HTML、HTTP、URL
发明这个东西是为了网上冲浪。
开始学习HTML的起手式
Emmet感叹号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta name="viewport"content="width =device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>可以添加你要的内容</body>
</html>
认识HTML中常用的标签
-
表示文章/书的层级
- 标题 h1~h6
- 章节 section
- 文章 article
- 段落 p
- 头部 header
- 脚步 footer
- 主要内容 main
- 旁支 aside
- 划分 div
<div>
<main>主要内容
<h1>标题一</h1>
<section>第一章
<h2>标题二</h2>
<p>段落</p>
<section>第二章
<h3>标题三</h3>
<p>段落</p>
</section>
</section>
</main>
<aside>附注:</aside>
</div>
<footer>©饥人谷版权所有</footer>
- 全局属性:所有标签都有的属性
- class;由于class存在局限性,因此在使用时会用"."来代替
- contenteditable: 可编写的,可以编辑的,加上属性后,文本可以变得能够编辑
- hidden :隐藏,内容隐藏
- id: 用来表示全局唯一的标签,但是全局唯一性没有保障,就算有两个重复的id,HTML也不会提示我写错
- style:包含文档的样式信息或者文档的部分内容.
- tabindex: 添加属性,使文本可以用tab键进行选中;
- title:显示文章全部内容
- 内容标签
- dl+dt+dd:dl描述列表、dt描述列表的属性、dd说名列表的内容。在HTML写入后,显现出来的样式如图
- ol+li、 ul+li这两个标签区别在于使内容有序和无序
- pre: 由于默认属性使得多个空格和换行都会转换成一个空格,则该标签是为了是文本保留原来的空格和换行
- hr:水平分割线
- br:就是用来换行的
- a:用来超链接的
- em :用来强调(语气的强调)
- strong:用来强调(自身的性质是强调的
- code:呈现出完整的内容
- q :引用的意思
- blockquote :换行用的引用
<pre>
<dl>
<dt>我的第一个html</dt><hr>
<dd>真的一点都不简单</dd>
</dl><ol>
<li>小名</li>
<li>小猴子</li>
<li>小小中国</li>
</ol><ul>
<li><em>我是中国人</em></li>
<li><strong>我是日本人</strong></li>
<li>我是人<a href="http://qq.com">QQ</a></li>
</ul></pre>
<q>饥人谷的教学内容
<blockquote>饥人谷的课件内容</blockquote></q>