超文本标记语言(HyperText Markup Language)

  • 标记语言是一套标记标签 (markup tag),而不是编程语言

HTML - 图1

  • <!DOCTYPE html> 声明为 HTML5 文档
  • 元素是 HTML 页面的根元素
  • 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8
  • </strong> 元素描述了文档的标题</li><li><strong><body></strong> 元素包含了可见的页面内容<blockquote> <p><strong><em>注意:</em></strong><em>对于中文网页需要使用 </em><strong><em><meta charset="utf-8"></em></strong><em> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 </em><strong><em><meta charset="gbk">。</em></strong></p> </blockquote> </li></ul> <p><a name="we78O"></a></p> <h1 id="b1nmiv"><a name="b1nmiv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>头部</h1><p>使用 <title> 标签定义HTML文档的标题<br />使用 <base> 定义页面中所有链接默认的链接目标地址。<br />使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。</p> <p>HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。<br /><strong>注释:</strong> 浏览器会自动地在标题的前后添加空行。<br />HTML 段落是通过标签 <p> 来定义的。<br /><strong>注意:</strong>浏览器会自动地在段落的前后添加空行。<br />如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <strong><br></strong> 标签<br />HTML 链接是通过标签 <a> 来定义的。<br />HTML 图像是通过标签 <img> 来定义的.<br /><hr> 标签在 HTML 页面中创建水平线。<br /><!-- 这是一个注释 --></p> <p><a name="eOHUh"></a></p> <h4 id="co1glk"><a name="co1glk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本格式化</h4><p>使用格式化标签</p> <blockquote> <p><strong>通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。</strong><br />然而,这些标签的含义是不同的:<br /><b> 与<i> 定义粗体或斜体文本。<br /><strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。</p> </blockquote> <p>大多数 HTML 元素被定义为<strong>块级元素</strong>或<strong>内联元素</strong>。<br />块级元素在浏览器显示时,通常会以新行来开始(和结束)。<br />内联元素在显示时通常不会以新行开始。</p> <p><a name="IhbgP"></a></p> <h1 id="eg752j"><a name="eg752j" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5</h1><blockquote> <p>HTML5的设计目的是为了在移动设备上支持多媒体。</p> </blockquote> <p><canvas> 标签只是图形容器,您必须使用脚本来绘制图形。</p> <p>SVG 定义为可缩放矢量图形(Scalable Vector Graphics)。</p> <p>不存在一项旨在网页上播放音频的标准,大多数音频是通过插件(比如 Flash)来播放的,HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。</p> <p>Video</p> <ul> <li>Flash(逐渐被淘汰)</li><li>Html5</li><li>youtube的托管服务</li></ul> <p>文件格式和播放器</p> <p>兼顾低级的用户</p> <p><a name="X9YpI"></a></p> <h4 id="36axfb"><a name="36axfb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>框架</h4><p>通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。</p> <blockquote> </blockquote> <p>该URL指向不同的网页。</p> <ul> <li>设置高度与宽度(以像素为单位,可设置按比例显示)</li><li>移除边框</li><li>显示目标链接页面 <a name="L8gDu"></a><h4 id="c5s96x"><a name="c5s96x" class="reference-link"></a><span class="header-link octicon octicon-link"></span>颜色</h4>RGB 十六进制 ``` 相对于使用 rgb(255,255,0),使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能,这里的 0.5 表示透明度,范围 0~1,0 表示全透明。</li></ul> <p>通常我们为了省略一个 0: div { background:rgba(255,0,0,.5); }</p> <pre><code> <a name="zgLWZ"></a> ### [表格](https://www.runoob.com/html/html-tables.html) 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)<br />边框属性<tableborder="1"><br />表格的表头使用 <th> 标签进行定义。<br />大多数浏览器会把表头显示为粗体居中的文本 <a name="d3WRw"></a> ### [列表](https://www.runoob.com/html/html-lists.html) <a name="dFWK7"></a> ### [区块](https://www.runoob.com/html/html-blocks.html) HTML 可以通过 <div> 和 <span>将元素组合起来。<br />HTML 元素被定义为**块级元素**或**内联元素**。<br />块级元素在浏览器显示时,通常会以新行来开始(和结束)。<br />内联元素在显示时通常不会以新行开始。 <a name="dNpZV"></a> ## HTML <div> 元素 HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。<br /><div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。<br />如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<br /><div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 Q:有没有办法让块级元素,前后不出现折行 <a name="kRdoG"></a> ## HTML <span> 元素 HTML <span> 元素是内联元素,可用作文本的容器<br /><span> 元素也没有特定的含义。<br />当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。 </code></pre><p><form> . input 元素 . </form> ```</p> <p>Video</p> <ul> <li>Flash(逐渐被放弃</li><li>Html5<video></li><li>youtube的托管服务</li></ul>