Html学习

htmledit_views">

HTML（超文本标记语言） | MDN

head标签

主要放title和meta，title就是网页显示的标题，meta可以添加一些属性，可以被百度搜索什么之类的。

html"><html><!--1.编码集设置utf-82.作者信息name属性 authorcontent属性 作者信息3.keywords属性name属性 keywordscontent属性 关键字。。。4.description属性name属性 descrpitioncontent属性 描述信息--><head><meta charset="utf-8"/><meta name="author" content="aaron"/><meta name="keywords" content="java学习,好啊后学习"/><meta name="description" content="学习,哈哈"/><title>aa</title></head><body></body>
</html>

标题和段落

html">    <h1>静夜思</h1><p>床前明月光 疑是地上霜</p><p>举头望明月 低头思故乡</p>

span标签

<span> HTML 元素是一个通用的行级容器，本身不具备特殊含义。它可被用于对元素进行编组，以便于添加样式（通过使用 class 或 id 属性），或共享属性值（例如 lang 属性）。该元素仅应在无其他合适语义元素时使用。<span> 与 <div> 元素非常相似，但是 <div> 是块级元素，而 <span> 是一个行级元素。

列表

无序

html">    <ul>豆浆油条豆汁焦圈</ul>

有序

html">    <ul><li>豆浆</li><li>油条</li><li>豆汁</li><li>焦圈</li></ul>

html">    <ol><li>沿这条路走到头</li><li>右转</li><li>直行穿过第一个十字路口</li><li>在第三个十字路口处左转</li><li>继续走 300 米，学校就在你的右手边</li></ol>

超链接

html">    <p>我创建了一个指向<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的链接。</p>

块级

html">    <a href="https://developer.mozilla.org/zh-CN/"><h1>MDN Web 文档</h1></a><p>自从 2005 年起，就开始记载包括 CSS、HTML、JavaScript 等网络技术。</p>

图片

html">    <a href="https://developer.mozilla.org/zh-CN/"><img src="mdn_logo.svg" alt="MDN Web 文档主页" /></a>

你可能要添加到你的链接的另一个属性是 title。这旨在包含关于链接的补充信息，例如页面包含什么样的信息或需要注意的事情。当鼠标指针悬停在链接上时，标题将作为提示信息出现。

html">    <p>我创建了一个指向<ahref="https://www.mozilla.org/zh-CN/"title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>的超链接。</p>

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名。

html">    <ahref="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"download="firefox-latest-64bit-installer.exe">下载最新的 Firefox 中文版 - Windows（64 位）</a>

文本格式进阶

描述列表

html">    <dl><dt>培根</dt><dd>整个世界的粘合剂。</dd><dt>鸡蛋</dt><dd>一块蛋糕的粘合剂。</dd><dt>咖啡</dt><dd>一种浅棕色的饮料。</dd><dd>可以在清晨带来活力。</dd></dl>

上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标，以确保它们的正确含义。 <sup> 和 <sub> 元素可以解决这样的问题。

html">    <p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p><p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

展示计算机代码

有大量的 HTML 元素可以来标记计算机代码：

<code> ：用于标记计算机通用代码。
<pre> ：用于保留空白字符（通常用于代码块）——如果文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在呈现的页面上看到它。但是，如果你将文本包含在 <pre></pre> 标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var> ：用于标记具体变量名。
<kbd> ：用于标记输入电脑的键盘（或其他类型）输入。
<samp> ：用于标记计算机程序的输出。

html">   <pre><code>const para = document.querySelector('p');para.onclick = function() {alert('噢，噢，噢，别点我了。');}</code></pre><p>请不要使用 <code>&lt;font&gt;</code> 、<code>&lt;center&gt;</code> 等表象元素。</p><p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p><p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p><pre>$ <kbd>ping mozilla.org</kbd><samp>PING mozilla.org (63.245.215.20): 56 data bytes64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

日期

html"><!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time
>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

网站布局

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

页眉

通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。

导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。

主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

页脚

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：