HTML简介

HTML（Hyper Text Markup Language，超文本标记语言）是由李爵士发明的，他还写了第一个浏览器与服务器，发明了WWW, URL , HTTP

  1. <!DOCTYPE html> <!--表示文档类型为html-->
  2. <html lang="zh-CN">  <!-- "lang"表示语言，"en"为英语， "zh-CN"为中国大陆中文 -->
  3. <head>
  4.     <meta charset="UTF-8"> <!--文字的编码类型-->
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!--禁用缩放，兼容手机-->
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--使用最新的IE内核-->
  7.     <title>html</title> <!--页面的标题-->
  8. </head>
  9. <body>
  11. </body>
  12. </html>

HTML章节标签

  • 标题 h1~h6： 块级元素
  • 段落 p： 块级元素
  • 盒子 div：块级元素
  • span： 行级元素
  • 头部 header：代表页面的顶部，可以放广告
  • 脚部 footer：代表网页的页脚，包含作者、版权等信息
  • 主要内容 main：页面的主要内容
  • 章节 section
  • 旁支内容 aside：与正文无关的内容，如参考资料等

HTML全局属性

  • class
  • id：具有唯一性，但是如果出现多个相同的id不会被检测
  • contenteditable ：可在页面中编写html文档内容
  • hidden: 隐藏标签
  • style ：行内css样式
  • tabindex：按tab键选定的次序，>0按顺序选中，=0最后选中，-1永远不选中
  • title：文字溢出隐藏时，鼠标放在元素上显示的完整内容

HTML内容标签

  • 有序列表 ol + li (ordered list)：块级元素
  1. <ol type="A" start="5">  <!-- type: 1, A, a, I, i -->
  2.     <li> E </li>
  3.     <li> F </li>
  4.     <li> G </li>
  5. </ol>
  • 无序列表 ul + li (unordered list)：块级元素
  1. <ul type="square">  <!-- type: square, disc, circle -->
  2.     <li> a </li>
  3.     <li> a </li>
  4.     <li> a </li>
  5. </ul>
  • dl + dt + dd ( description list, term, data)
  • hr: 分割线
  1. <hr style="background-color:#ddd;height:1px;border:none"/> <!--需要设置height与border才有颜色-->
  • br (break)： 换行
  • a (anchor锚点): 行级元素
  • em (emphasis)： 斜体，行级元素
  • strong： 加粗，行级元素
  • pre (preview): pre标签内的内容保留空格、回车、tag等
  • code：code标签内的是等宽的，用来标记代码
  1. <!--使用pre标签来保留code标签内的格式-->
  2. <pre>
  3.   <code>
  4.     print('你好猪猪')
  5.     ptint('猪猪你好')
  6.   </code>
  7. </pre>
  • q (quote): 引用， 行级元素
  • blockquote： 换行引用，块级元素

HTML标签默认样式

标签自带的样式，通过Chrome开发者工具查看（styles -> user agent stylesheet）
css重置默认样式：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. *::after, *::before {
  7.     box-sizing: border-box;
  8. }
  9. h1, h2, h3, h4, h5, h6 {
  10.     font-weight: normal;
  11. }
  12. a {
  13.     color: inherit;
  14.     text-decoration: none;
  15. }
  16. ul, ol {
  17.     list-style: none;
  18. }
  19. table {
  20.     border-collapse: collapse;
  21.     border-spacing: 0;
  22. }

文字溢出处理

  1. div{
  2.     white-space: nowrap; /* 不换行 */
  3.     overflow: hidden;  /* 溢出隐藏 */
  4.     text-overflow: ellipsis;  /* 省略处用...代替 */