《HTML入门笔记1》
HTML的发明者
蒂莫西·约翰·伯纳斯-李爵士(Sir Timothy John Berners-Lee)
个人成就
- 提出万维网的设想
- 建立世界上第一个网站
- 提出万维网标准
HTML 起手式
<!DOCTYPE html>
<!--文档类型-->
<html lang="zh-CN">
<!--html标签，lang最开始为"en"代表英语，设置为"zh-CN"代表中文简体-->
<head>
<meta charset="UTF-8">
<!--文件字符编码-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--禁用缩放，兼容手机-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--告诉IE使用最新内核-->
<title>高天赐的HTML入门笔记</title>
<!--标题-->
</head>
<body>
<!--可在此处添加各种内容-->
</body>
</html>
典型的语义结构的网页
<body>
<header>页眉</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容</p>
</article>
</main>
<footer>页尾</footer>
</body>
常用的表示章节的标签有
<!--表示标题-->
<h1> 标题1 <\h1>
<h2> 标题2 <\h2>
<h3> 标题3 <\h3>
<h4> 标题4 <\h4>
<h5> 标题5 <\h5>
......
=================================
<!--表示章节-->
<section> 章节 <\section>
=================================
<!--表示文章-->
<article> 文章 <\article>
=================================
<!--表示顶部内容-->
<header> 广告招租 <\header>
=================================
<!--表示主要内容-->
<main> 主要内容 <\main>
=================================
<!--表示旁支内容，如标注框-->
<aside> 旁支内容 <\aside>
=================================
<!--用于区域划分-->
<div> 区域划分 <\div>
=================================
<!--用于表示页尾-->
<footer> 表示网页、文章或章节的尾部 <\footer>
常见的全局属性包括
- class : 用来对网页元素进行分类
<!--用于给p标签添加类别-->
<p class="lala"><p>
<!--也可同时添加多个class类别-->
<p class="lala haha baba lulu"><p>
- contenteditable ：表示元素是否可被用户编辑
<p contenteditable="true">用户点击p标签内容区域，可修改该区域内容</p>
- id ：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的
<p id="lala">定义一个唯一的id</p>
- style ：用于应用css样式
<p style="color: blue;">lala</p>
- tabindex ：指示元素是否可以获取输入焦点（可聚焦）
<p tabindex="0"> "0"代表切换的顺序为最后 </p>
<p tabindex="-1"> "-1"代表不能用于切换</p>
<p tabindex="1"> 正数代表从小到大切换</p>
- title ：用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。
<div title="天气预报">
<p>今天气温26度，下小雨，风力1级</p>
</div>
常用内容标签
文本标签
- div : 表示一个区块
<div class="main">
<div class="article">
<div class="title">
<h1>文章标题</h1>
</div>
</div>
</div>
- p : 代表文章的一个段落
<p>hello world</p>
- span : 表示一个行内标签
<p>这是一句<span>重要</span>的句子</p>
- br : 让网页产生一个换行效果
hello<br>world
<!--
代码效果为：
hello
world
-->
- hr : 用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线
<p>第一个主题</p>
<hr>
<p>第二个主题</p>
<!--
代码效果类似于：
第一个主题
_______________________________________________________________________________________________________________________________________________________________________
第二个主题
-->
- pre : 用于表示保留原来的格式
<pre>hello
world</pre>
<!--
代码效果为：
hello
world
-->
- strong : 表示它包含的内容具有很强的重要性，需要引起注意
<p>高天赐<strong>很帅</strong></p>
- b : 表示它包含的内容需要引起注意，浏览器会加粗显示
<p>高天赐<b>很帅</b></p>
- em : 表示语气强调，浏览器会以斜体显示它包含的内容
<p>期末考试重点为<em>整本书</em>快去复习吧！</p>
- i : 浏览器会以斜体显示
<p><i>i是 Italic 的缩写</i></p>
- blockquote , cite , q : 用于表示引用
<q>短的行内引用<\q>
<cite>表示引用出处或作者<\cite>
<blockquote>块级引用<\blockquote>
<!--
<q>与<blockquote>的区别：
<q>是一个行内标签，不产生换行
<blockquote>是一个块级标签，可产生换行
-->
- code : 表示标签内容是计算机代码，浏览器默认会以等宽字体显示
<pre>
<code>
let a = 1;
console.log(a);
</code>
</pre>
列表标签
- ol : 代表一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号
<ol>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
代码效果
1. 列表项 A
2. 列表项 B
1. 列表项 B1
2. 列表项 B2
3. 列表项 B3
3. 列表项 C
- ul ： 代表一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号
<ul>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ul>
- li : 表示列表项，用在 ol 或 ul 容器之中
<ol>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
- dl,dt,dd 代码公式为
<dl>
<dt>苹果</dt>
<dd>是一种很好吃的水果</dd>
</dl>
显示效果
苹果
是一种很好吃的水果
