初识HTML及基本常用标签
HTML : (超文本标记语言)，（英语：HyperText Markup Language，简称：HTML），1990年左右由Tim Berners-Lee,李爵士发明,它是一种用于创建网页的标记语言，类似的有markdown。
超文本 ：是一种可以显示在电脑显示器或电子设备上的文本，现时超文本普遍以电子文档的方式存在，其中的文字包含有可以链接到其他字段或者文档的超链接，允许从当前阅读位置直接切换到超链接所指向的文字。像图片，视频音频，这样的资源也可以在网页上面展示。
因此，HTML简单来说就是用来在网页展示一系列各种各样信息的基本语言，HTML是网页的骨架，后来诞生的CSS与JavaScript语言一起配合HTML形成了现代的既美观又功能强大的网页。
1.HTML的标签概述
<!DOCTYPE html> <!-- 文档类型 告诉浏览器以HTML5的方式解析此文档 -->-
<tag attr=value>内容</tag> <!-- 双标签 -->- 这里注意属性值可以加双引号单引号甚至在没有特殊符号的情况下(比如空格)可以不加
<tag attr>内容</tag> <!-- 有的属性是布尔类属性，写了就代表有效，反之则无效 比如 checked 属性 --><tag attr=value> <!-- 单标签 -->
HTML标签不区分大小写，不过一般都小写
2.HTML起手式
<!DOCTYPE html> <!-- 声明文档类型 --><html lang="en"> <!-- 网页的语言 可以设置为 zh-CH 中国中文 --><meta charset="UTF-8"> <!-- 网页的字符编码 UTF-8包含了全人类的语言 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--定义文档视口,防止网页缩放--><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--使用IE最新内核--><title>标题</title> <!-- 这里写网页的标题 -->-
html基本骨架
<!DOCTYPE html> <html lang="en"> <head> <!-- 这里的内容是给浏览器看的 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 网页上所有看得见的元素都放这里 --> </body> </html>
2.章节标签
用来表示文章的层级
- 标题 h1 ~ h6
- 章节 section
- 文章 article
- 段落 p
- 头部 header
- 脚部 footer
- 主要内容 main
- 旁边分支 aside
- 划分 div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>这是顶部的广告</header>
<div>
<main>
<h1>文章的标题</h1>
<section>
<h2>第一章内容</h2>
<p>今天学习了HTML基本骨架以及一些常用标签的使用</p>
</section>
<section>
<h2>第二章内容</h2>
<p>今天学习了HTML基本骨架以及一些常用标签的使用</p>
</section>
<section>
<h2>第三章内容</h2>
<p>今天学习了HTML基本骨架以及一些常用标签的使用</p>
<section>
<h2>1.1</h2>
<p>今天学习了HTML基本骨架以及一些常用标签的使用</p>
</section>
</section>
</main>
<aside>
参考了谁的资料
</aside>
</div>
<footer>页脚的内容 © 小欧版权所有</footer>
</body>
</html>
3.表示内容的标签
-
ol + li 有序列表 序号默认是 1 2 3 4...... , ol 属性: type 指定序号的形式 五个属性值： 1 a A(常用) i I
<ol type="A" start="3"> <!-- 有序列表 序号类型 大写字母 从第三个C开始 --> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> <li>喝水</li> </ol>
-
ul + li 无序列表
<ul> <!-- 无序列表 --> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> <li>喝水</li> </ul>
-
dl + dt + dd 描述列表
<dl> <dt>小欧</dt> <!-- 被描述术语 --> <dd>长得帅</dd> <!-- 描述项 --> <dd>唱歌好听</dd> <dd>有钱</dd> <dd>代码写得好</dd> </dl>
-
pre 包裹内容的空格回车与tab可以保留在页面上
<pre> 这是一堆空格 tab 回车 </pre>
hr 水平分隔线
br 换行标签
-
a 超链接 访问网址
<a href="http://www.baidu.com" target="_blank">百度一下</a>
em 主观强调内容,有斜体
strong 重要内容
-
code 写代码,这里的代码字母等宽
<code>console.log("hello world!")</code>
quote 内联 引用
blockquote 块级引用
4.全局属性
所有标签都有的属性
-
class 给元素分类,多用于设置一类相同的样式,可以有多个
<div class="name1 name2"></div>
id 给元素起名字,多用于js的配合使用
contenteditable 可以使元素被编辑
hidden 让元素消失,优先级大于display none
style 元素的样式
tabindex 控制tab键切换元素的顺序 特殊值0代表最后一个被选中 -1 表示不会被切换
title 元素的标题 鼠标悬浮可见
5.HTML中常用的几个字符实体
< 相当于 <
> 相当于 >
相当于一个英文空格
© © 版权符号
6.浏览器默认样式
默认样式就是我们没有写CSS的情况下浏览器会与自己的样式 ,当然样式很丑所以我们需要重构它
* { /* 这里参考别人的 没有固定写法,可以自由设置 */
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;
}
