html简介

1 什么是HTML

超文本标记语言（hyper text markup language)
不是一种编程语言，而是一种标记语言（markup language)，而标记语言是一套标记标签（markup tag），因此，HTML使用标签来描述网页。
HTML文档也是网页，包含HTML标签和出文本

2 HTML标签

由尖角号包围,通常成对出现，第一个为开始标签（开放标签），后一个为结束标签（闭合标签）
HTML标签大小写不敏感

3. HTML文件的编辑

后缀：html或htm

4. HTML基础

  1. 标题
    通过

    到

    标签进行定义

搜索引擎使用标题为您的网页的结构和内容编制索引。

  1. 段落
    通过

    标签进行定义。

浏览器会自动地在段落的前后添加空行。（

是块级元素）
在一个段落内想进行换行，使用
标签
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

  1. 连接
    标签进行定义

    1. <a href="http://www.w3school.com.cn">This is a link</a>

  2. 图像

通过 HTML基础 - 图1标签进行定义
该标签是空标签，只包含属性，没哟闭合标签，
src属性：图像的url地址
alt属性：替换文本属性

  1. <img src="w3school.jpg" width="104" height="142" />

更多img实例

  1. <body background="/i/eg_background.jpg">
  2. //背景图片
  5. <html>
  6. <body>
  8. <h2>未设置对齐方式的图像：</h2>
  10. <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
  12. <h2>已设置对齐方式的图像：</h2>
  14. <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
  16. <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
  18. <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
  20. <p>请注意，bottom 对齐方式是默认的对齐方式。</p>
  22. </body>
  23. </html>
  24. //设置图片的排列
  27. <body>
  29. <p>
  30. <img src ="/i/eg_cute.gif" align ="left"> 
  31. 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
  32. </p>
  34. <p>
  35. <img src ="/i/eg_cute.gif" align ="right"> 
  36. 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
  37. </p>
  39. </body>
  40. </html>
  42. //图像浮动
  43. //调整尺寸大小
  44. //图像作为连接
  45. <p>
  46. 您也可以把图像作为链接来使用：
  47. <a href="/example/html/lastpage.html">
  48. <img border="0" src="/i/eg_buttonnext.gif" />
  49. </a>
  50. </p>
  1. HTML水平线


用于分割内容

5. HTML 元素

定义：指从从开始标签（start tag）到结束标签（end tag）的所有代码。
元素的内容：开始标签与结束标签之间的内容，内容可以为空，空元素在开始标签中进行自动关闭。
HTML元素可以嵌套

6. HTML标签属性

标签属性提供了有关HTML元素的更多信息，总以名称\值对的形式存在，在开始标签中规定

  1. <h1 align="center">This is heading 1</h1>
  2. // 一级标题居中显示
  4. <body backgroundcolor="yellow">
  5. <h2>请看: 改变了颜色的背景。</h2>
  6. </body>
  9. <html>
  10. <body>
  11. <h1 style="font-family:verdana">A heading</h1>
  12. <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
  13. </body>
  15. </html>
  18. <html>
  20. <body>
  21. <h1 style="text-align:center">This is a heading</h1>
  22. <p>The heading above is aligned to the center of this page.</p>
  23. </body>
  25. </html>

大部分HTML元素的属性：class、id、style、title

7. HTML注释

8. HTML格式化

  1. <html>
  3. <body>
  5. <b>This text is bold</b>
  7. <br />
  9. <strong>This text is strong</strong>
  11. <br />
  13. <big>This text is big</big>
  15. <br />
  17. <em>This text is emphasized</em>
  19. <br />
  21. <i>This text is italic</i>
  23. <br />
  25. <small>This text is small</small>
  27. <br />
  29. This text contains
  30. <sub>subscript</sub>
  32. <br />
  34. This text contains
  35. <sup>superscript</sup>
  37. </body>
  38. </html>

  1. ：控制空行和空格，定义预格式文本
  2. 定义计算机代码
    定义键盘码
    定义打字机diam
    定义计算机代码样本
    ：定义变量
    常用于显示计算机输出代码
  3. :用于显示地址
  4. ```html
  9. Written by Donald Duck.
     
  10. Visit us at:
  11. Example.com
  12. Box 564, Disneyland
  13. USA
  18. <abbr title="etcetera"><acronym title="World Wide Web"><br /><abbr>：定义缩写<br /><acronym>：定义首字母缩写<br /><address>：定义地址<br /><bdo>：定义文字方向<br /><blockquote>：定义长的引用<br /><q>：定义短的引用<br /><cite>：定义引用、引证<br /><dfn>：定义一个定义项目
  20. ```html
  21. <html>
  23. <body>
  25. <abbr title="etcetera">etc.</abbr>
  26. <br />
  27. <acronym title="World Wide Web">WWW</acronym>
  29. <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
  31. <p>仅对于 IE 5 中的 acronym 元素有效。</p>
  33. <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
  35. </body>
  36. </html>
  37. <body>
  39. <p>
  40. 如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
  41. </p>
  43. <bdo dir="rtl">
  44. Here is some Hebrew text
  45. </bdo>
  47. </body>
  48. </html>
  49. ————————————————————————————————————————————————————————————————————————
  51. <p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p>
  53. ————————————————————————————————————————————————————————
  55. <body>
  57. <p>浏览器通常会对 blockquote 元素进行缩进处理。</p>
  59. <blockquote cite="http://www.worldwildlife.org/who/index.html">
  60. 五十年来，WWF 一直致力于保护自然界的未来。
  61. WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。
  62. </blockquote>
  64. </body>
  65. </html>
  67. <body>
  69. 这是长的引用：
  70. <blockquote>
  71. 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
  72. </blockquote>
  74. 这是短的引用：
  75. <q>
  76. 这是短的引用。
  77. </q>
  79. <p>
  80. 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
  81. </p>
  83. </body>
  84. </html>
  86.  删除和插入效果
  87. <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
  90. 9. HTML颜色
    颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
    每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
  91. image.png
    颜色名：https://www.w3school.com.cn/html/html_colornames.asp
  93. 10.  CSS
    CSS的引用
      1. 外部样式表
    2. 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
      在head表头：
      <link rel="stylesheet" type="text/css" href="mystyle.css">
        1. 内嵌样式表
      2. 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过