html入门笔记1
<h2 style="color: black; text-align: left; margin-bottom: 10px;">HTML是谁发明的？</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML，全<span style="color: black;">叫作</span>：HyperText Markup Language，中文意思是，超文本标记语言。由李爵士（蒂姆-伯纳斯-李）发明。<span style="color: black;">仔细</span>内容<span style="color: black;">能够</span>查阅维基百科。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">HTML - 维基百科，自由的百科全书 (wikipedia.org)</span><span style="color: black;"><span style="color: black;"></span>zh.wikipedia.org/wiki/HTML</span></span></a></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">HTML起手式怎么写？</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Emmet 感叹号</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE html></span>
<span style="color: black;"><</span><span style="color: black;">html</span> <span style="color: black;">lang</span><span style="color: black;">=</span><span style="color: black;">"zh-CN"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">http-equiv</span><span style="color: black;">=</span><span style="color: black;">"X-UA-Compatible"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"IE=edge"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"viewport"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"width=device-width, initial-scale=1.0"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">title</span><span style="color: black;">></span>Document<span style="color: black;"></</span><span style="color: black;">title</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这些代码是什么意思呢？</p><!DOCTYPE html>：文本类型。<html lang="zh-CN">：html标签，lang="zh-CN"意思是告诉浏览器，这是一个中文页面。<head></head>：规定文档<span style="color: black;">关联</span>的配置信息，<span style="color: black;">包含</span>标题、文档样式、脚本等等。<metacharset="UTF-8">：文件的字母编号。<metahttp-equiv="X-UA-Compatible"content="IE=edge">：为了告诉IE，<span style="color: black;">运用</span>最新内核。<meta name="viewport"content="width=device-width, initial-scale=1.0">：禁用缩放，为了兼容手机。<title>Document</title>：页面标题。<h2 style="color: black; text-align: left; margin-bottom: 10px;">常用的表章节的标签有<span style="color: black;">那些</span>？</h2>header：顶部内容main：<span style="color: black;">重点</span>内容section：章节h1~h6：标题p：段落aside：旁支内容footer：尾部内容<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">怎样</span><span style="color: black;">运用</span>以上标签呢？</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"> <span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">header</span><span style="color: black;">></span>我是顶部内容<span style="color: black;"></</span><span style="color: black;">header</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">main</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h1</span><span style="color: black;">></span>HTML章节标签的应用<span style="color: black;"></</span><span style="color: black;">h1</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">section</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h2</span><span style="color: black;">></span><span style="color: black;">第1</span>章：我是h2<span style="color: black;"></</span><span style="color: black;">h2</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span><span style="color: black;">这儿</span>用了一个p标签<span style="color: black;">表率</span>一个段落，用于描述内容。<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">section</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">section</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h2</span><span style="color: black;">></span>第二章：我<span style="color: black;">亦</span>是h2<span style="color: black;"></</span><span style="color: black;">h2</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">section</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h3</span><span style="color: black;">></span><span style="color: black;">第1</span>节：我是h3<span style="color: black;"></</span><span style="color: black;">h3</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span><span style="color: black;">这儿</span>再次<span style="color: black;">运用</span>p标签，描述内容。<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">section</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">aside</span><span style="color: black;">></span>我是aside，写<span style="color: black;">有些</span>旁支内容<span style="color: black;"></</span><span style="color: black;">aside</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">section</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">main</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">footer</span><span style="color: black;">></span><span style="color: black;">&copy;</span> <span style="color: black;">这儿</span>用footer描述版权说明<span style="color: black;"></</span><span style="color: black;">footer</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">它们在页面上是怎么<span style="color: black;">表示</span>的呢？</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-b672a9af80db0c72127f55d3cb0d9ea4_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">全局属性由<span style="color: black;">那些</span>呢？</h2>class：给你的标签分了一个类，<span style="color: black;">或</span>多个类。contenteditable：让任何一个元素<span style="color: black;">能够</span>被编辑。hidden：让一个标签功能及内容<span style="color: black;">隐匿</span>。id：全页面<span style="color: black;">独一</span>性标记，<span style="color: black;">然则</span>它有<span style="color: black;">非常多</span>bug，不到万不得已，不<span style="color: black;">意见</span><span style="color: black;">运用</span>。style：给标签添加样式。tabindex：响应键盘tab的<span style="color: black;">次序</span>。title：完整的<span style="color: black;">表示</span>内容的。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">示例：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><head>
<style>
.middle{
bac<span style="color: black;">公斤</span>round: black;
color: white;
}
.bordered{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="middle bordered" style="border:1px solid red" tabindex=1>
<h1 tabindex=1 title="<span style="color: black;">倘若</span>内容很长，<span style="color: black;">能够</span>在<span style="color: black;">这儿</span>输入完整内容。">效果展示</h1>
<p tabindex=2 hidden>
加了hidden这句话就会<span style="color: black;">隐匿</span>
</p>
</div>
</body></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">常用的内容标签有<span style="color: black;">那些</span>呢？</h2>ol+li：有<span style="color: black;">次序</span>的列表ul+li：<span style="color: black;">没</span><span style="color: black;">次序</span>的列表dl+dt+dd：dl为描述列表，dt为被描述的对象，dd为描述内容pre：<span style="color: black;">保存</span>文本的空格、回车、tab等内容。hr：水平线分割br：换行a：可定义超链接em：语气的强调strong：本质的强调code：用于输入代码内容。quote：内联引用内容blockquote：块级的引用<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">示例：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"> <span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">ol</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span>有序列表1<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span>有序列表2<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">ol</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">ul</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span><span style="color: black;">没</span>序列表1<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span><span style="color: black;">没</span>序列表2<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">ul</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">dl</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">dl</span><span style="color: black;">></span>
描述对象
<span style="color: black;"><</span><span style="color: black;">dd</span><span style="color: black;">></span>描述内容<span style="color: black;"></</span><span style="color: black;">dd</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">dl</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">dl</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">pre</span><span style="color: black;">></span>
<span style="color: black;">这儿</span>有 空格
<span style="color: black;">亦</span><span style="color: black;">能够</span>回车
<span style="color: black;"></</span><span style="color: black;">pre</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">hr</span> <span style="color: black;">/></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span>下面是一个a标签的超链接<span style="color: black;"><</span><span style="color: black;">br</span> <span style="color: black;">/><</span><span style="color: black;">a</span> <span style="color: black;">href</span><span style="color: black;">=</span><span style="color: black;">"http://baidu.com"</span><span style="color: black;">></span>百度一下<span style="color: black;"></</span><span style="color: black;">a</span><span style="color: black;">></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">quote</span><span style="color: black;">></span>三上：马上、枕上、厕上<span style="color: black;"></</span><span style="color: black;">quote</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">blockquote</span><span style="color: black;">></span>换行引用<span style="color: black;"></</span><span style="color: black;">blockquote</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">em</span><span style="color: black;">></span>前端<span style="color: black;"></</span><span style="color: black;">em</span><span style="color: black;">></span>的学习很<span style="color: black;">要紧</span>，<span style="color: black;">必定</span>要<span style="color: black;">持续</span>的复习<span style="color: black;">才可</span><span style="color: black;"><</span><span style="color: black;">strong</span><span style="color: black;">></span>更好的面对工作<span style="color: black;"></</span><span style="color: black;">strong</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">展示：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-2ab1ba1cea71b22c7846e07cc35e3d01_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">自此，<span style="color: black;">便是</span><span style="color: black;">所有</span>内容了！明天继续加油鸭！</p>
外链发布论坛学习网络优化SEO。 回顾历史，我们感慨万千；放眼未来，我们信心百倍。
页:
[1]