《HTML入门笔记1》
HTML的全称是Hyper Text Markup Language,中文翻译为超文本标记语言，想要了解更多的信息，可以到维基百科。
HTML的发明者：李爵士
- 他自己写了第一个浏览器。
- 自己写了第一个服务器。
- 用自己的浏览器访问了自己写的服务器。
- 发明了WWW，同时发明了HTML、HTTP和URL。
HTML标签
一、应懂得英语（英语基础好的，可以大概看一下就好）
-
heading 标题
-
body 身份、正文
-
paragraph 段落
-
section 章、节
-
article 一篇文章
-
main 主要
-
aside 旁边的
-
anchor 锚、定点
-
strong 强壮、重要
-
emphasis 强调、重读
-
order 顺序、秩序
-
ordered 有顺序的
-
unordered 无顺序的
-
description 描述
-
term 术语
-
data 数据
-
quote 引用
-
block 块
-
inline 行内【计】内联
-
break 打断 二、需用到的学习工具
-
推荐一电子书《网道HTML》，学习HTML主要还不是靠书籍，书籍只会弥补欠缺的知识，主要还是靠练习，多联系，熟能生巧。
-
代码链接得到的方式：（1）JSBin（JS.Jirengu.com），不过此JS存在缺陷，只能写一个文件的HTML、CSS、JS。
-
（2）代码沙盒（codesandbox.io） 三、HTML起手式（Emmt感叹号）
四、章节标签和全局属性
1.表示文章/书的层级
- 标题:h1~h6
- 章节:section
- 文章:artricle
- 段落:p
- 头部:header
- 脚部:footer
- 主要内容:main
- 旁支内容:aside
- 划分:div 下面是应用上述元素写的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>顶部广告</header>
<div class="middle bordered" contenteditable>
<main>
<h1>文章标题</h1>
<section>
<h2>第一章</h2>
<p>这是一段话</p>
<section>
<h3>1.1节</h3>
<p>这是一段话</p>
<section>
<h4>1.2节</h4>
<p>这是一段话</p>
</main>
<aside>
参考资料1.2.3
</aside>
</div>
<footer>©饥人谷版权所有
</body>
</html>
2.全局属性
全局属性是所有元素都可以使用的属性。
- class属性是用来对网页元素进行分类
- contenteditable:HTML页面的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。 “true”或空字符串：内容可以编辑
“false”:不可以编辑
- hidden是一个布尔属性，表示当前的网页元素不再跟页面有关，因此浏览器不回渲染这个元素，所以就不会在网页中看到它。
注意；css的可见性设置，高于hidden属性。如果css设为该元素可见，hidden属性将无效。
- id属性是元素在网页内的唯一标识符。id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。
注意：因为id不报错，所以不到万不得已不要去用id；JS可以直接调用id.
-
style属性用来指定当前元素的css样式。
-
tabindex属性的值是一个整数，表示用户按下Tab键的时候，网页焦点转移的顺序。
不同的属性值有不同的含义：
- 负整数（-1）：不参与Tab键对网页元素的遍历；
- 0：参与Tab键的遍历，最后一个遍历；
- 正整数（1、2、3......）：网页按照从小到大的顺序，参与Tab键的遍历；如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。
<!DOCTYPE html>
<html>
<head>
<style>
.middle{
background:yellow;
color:green;
}
.bordered{
border:10px solid orange;
}
</style>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>顶部广告</header>
<div class="middle bordered" contenteditable>
<main>
<h1>文章标题</h1>
<section>
<h2>第一章</h2>
<p>这是一段话</p>
<section>
<h3>1.1节</h3>
<p>这是一段话</p>
<section>
<h4>1.2节</h4>
<p>这是一段话</p>
</main>
<aside>
参考资料1.2.3
</aside>
</div>
<footer>©饥人谷版权所有
</body>
</html>
五、默认样式和css reset
1、默认样式
-
为什么有默认样式 因为HTML被发明时，CSS还没出生。
-
查看默认样式 打开浏览器Elements->Styles-user agent stylesheet
-
清除默认样式 CSS reset默认样式太难看了
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
input,
button {
font-family: inherit;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
常见的内容标签
- ol+li 有顺序的列表
- ul+li 无顺序的列表
- dl+dt+dd 描述列表，dt为表述对象，dd为描述内容
- pre 标签用来保留空格，一般放其它标签里面
- code 会将英文代码等宽
- hr 分割线
- br 换行
- a 超链接
- em 表示强调语气很重要
- strong 表示强调内容本身很重要
- quote 行内引用
- blockquote 块内引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
pre {
font: inherit;
}
</style>
</head>
<body>
<div>
<main>
<h1>我每天的介绍</h1>
<hr>
<section>
<h2>
第一章：<br>工作内容
</h2>
<p>我每天要做的事情有</p >
<ul>
<li>吃饭</li>
<li>工作</li>
<li>学习</li>
<li>睡觉</li>
</ol>
<ol>
<li>吃饭</li>
<li>工作</li>
<li>学习</li>
<li>睡觉</li>
</ol>
我的工作是
<dl>
<dt>会计助理</dt>
<dd>枯燥</dd>
</dl>
我会写JavaScript，不信我给你写一段
<pre>
<code>
var a =1
console.log(a)
</code>
</pre>
<p>
访问网站< a href=" "
target="_blank">QQ</ a>
</p >
欧阳修说过<quote>三上：马上、枕上、厕上</quote>
<br>
欧阳修说过<blockquote>三上：马上、枕上、厕上</blockquote>
<section>
<h3>1.1节</h3>
<p>一段话</p >
</section>
<section>
<h3>1.2节</h3>
<p>一段话</p >
</section>
</section>
</main>
<asdie>
参考资料 1 2 3
</asdie>
</div>
<footer tabindex=3>© 个人所有</footer>
</body>
</html>
