• HTML基础


    html:5 + tab
    ctrl + /: 快速注释/取消注释
    ctrl+shift+d: 光标定位在要复制的那行代码, 快速复制
    ctrl + { or } 缩进
    div*3 + tab 快速生成多个div标签
    span{text$}*3 + tab emmt语法

    html文件的后缀:
    html文档的后缀可以是 .html .htm
    在早期dos8位机的时代, 电脑只能识别3个字母的后缀名文件, 所以当时html的文件后缀是.htm
    现在所有的电脑都支持多字符的文件名后缀, 所以现在大家都使用.html后缀名了。 当然 .htm = .html都是一样的效果

    HTML 头部标签

    <!DOCTYPE> 标记位于文档的最前面, 用于向浏览器说明当前文档使用哪种标准 HTML OR XHTML 标准规范, 主要用于浏览器解析文档标签的依据 必须在开头处使用<!DOCTYPE>标记为所有的html or xhtml版本和类型, 只有这样浏览器才能将该网页作为有效的XHTML文档, 并按指定的文档类型进行解析。
    <!DOCTYPE> 标记和浏览器兼容性有关, 删除此标签, 就是把展示html页面的权利交给浏览器。
    这是ie6, 7, 8, firefox chrome 有多种浏览器 页面就有可能多种显示效果 这是不被允许的

    <!DOCTYPE html> <!-- 文档的声明, 当前文档是一个html文档, 遵循的标准是html5的标准 -->

    html5文档标准(现在主流 其他的4t, 4s都已经不在用了):
    sublime 快捷键:html:5 + tab键 如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>

    </body>
    </html>

    之前两年也有在用 XHML
    XHTML 严格标准:
    sublime 快捷键:html:xs + tab键 如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    </head>
    <body>

    </body>
    </html>

    XHTML 过度标准:
    sublime 快捷键:html:xt + tab键 如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    </head>
    <body>

    </body>
    </html>

    下面是更早的标准:
    html4 文档标准 (严格的标准):
    sublime 快捷键: html:4s + tab
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    </head>
    <body>

    </body>
    </html>

    html4t 文档标准(宽松的标准):
    sublime 快捷键: html:4t + tab
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    </head>
    <body>

    </body>
    </html>

    现在主流的,新的网站都是使用html5的标准, 所以以后开发都是html5的标准 html:5 + tab
    文档声明标签一定要有, 不能省略, 后面学习了css之后, 文档的声明标签会严重影响页面的展示效果

      <html> </html> 标签
      <html lang="en">

    • lang属性 一般可以用来搜索引擎的优化, 可以通过这个属性判断当前页面的语言是英文还是中文,增加搜索的权重  另外也有利于网页翻译功能  盲人阅读借助第三方工具也会利用到这个属性

    <head> 标签 

      <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
      </head>
    head 标签用于嵌套 给浏览器使用的一些配置和设置
      1. meta 标签 设置文档的编码格式 可以通过这个标签告诉浏览器我的编码格式 这样浏览器就是使用正确的编码来解析文档, 防止出现乱码。
      2. title标签 设置文档标题, 这样也有利于搜索引擎的优化权重
      3. lnik 标签的第一种用法: 设置dns预解析 可以有效的提高后续访问网站的效率 也是网站优化的一个点
        <link rel="dns-prefetch" href="http://ming.127.net">
      link标签的第二种用法 引入网站icon图标
        <link rel="shortcut icon" href="http://www.126.com/favicon.ico" />

      link标签的第三种用法:引入css 

        </link ref="stylesheet" href="css/bg.css" >

    <img src="" alt="" title="" >标签
      <img src="图片的地址" alt="" title="">
        src:图片的地址
        alt: 如果图片无法显示 就显示此处的alt属性的文本使
        title: 图片的标题, 鼠标一上去 图片显示tip 提示文本内容 对网站seo有很大的影响

    (1)、与HTML在同一文件夹,描述:<img src=“logo.gif”>
    (2)、在HTML下一级文件夹,描述:<img src=“img/img01/logo.gif”>
    (3)、在HTML上一级文件夹,描述:<img src=“../logo.gif>

    段落标签
    <p> 段落内容</p>
    p标签之间不会相互共用一行, 会独占一行或多行空间, 是块级标签。

    水平线标签
    <hr> 标签是单标签, 不需要闭合标签

    HTML文档空格合并
    在html文档中, 文字之间的空格或者换行会合并一个空格或换行。

    br标签
    <br> 单标签, 强制段落进行换行, 不受空格和换行合并的影响。

    空格 &nbsp;
    增加一个空格, 不受空格和换行合并的影响

    超链接标签:
    <a href="" target="" #> </a>
    href属性: 指向跳转的地址
    target属性: _blank, _self (default)
    锚点链接: 通过创建锚点链接, 用户可以快速定位到目标内容
    创建锚点链接分两步“
    1. 使用<a href="#id名">链接名称</a>
    2. 使用相应的id名称标注跳转目标的位置
    超链接标签可以嵌套文本, 图片 表格, 标题几乎什么标签都可以进行包囊

    内联框架:
    iframe标签, 元素创建包含另外一个文档的内联框架(即行内框架)
    <iframe src ="demo_iframe.html" width="200" height="200"> </iframe>

    列表标签:
    1. 有序列表 unorder list: ul和li标签之间最好不要嵌套其他标签, 但li标签之间可以
      ul>li
    2. 无序列表 order list
      ol>li
    3. 自定义列表 design list
      dl>dt+dd

    4. 列表的嵌套
      ul>li>ul>li

    4. <table> </tatble> 表格标签 
    <table>
      <thead>
        <tr>
          <th>CaseID</th><th>CaseSummary</th><th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <!-- rowspan属性:一个单元格暂用多行显示 --!>
          <!-- colspan属性:一行中的单元格占用多列显示 --!>
          <td></td><td></td><td></td><td></td><td></td>
        </tr>
      </tbody>
    </table>

    节标签
    <div> </div> - 块级标签

    span标签 - 行级标签 可以和其他标签共占一行

    块级标签:p, div, ul, ol, dl, li, dt, h1-h6
    行级标签:span stong, em, 文本相关的标签

  • 相关阅读:
    小程序实现无限瀑布流
    Vue H5 项目模板
    Taro使用mobx做国际化小程序
    一次国际化记录以及平铺JSON数据
    Promise(interesting)
    返回状态码
    CSS属性兼容写法
    在DOM加载之前insertScript
    关于吸烟
    前端优化措施
  • 原文地址:https://www.cnblogs.com/zi-yao/p/6416501.html
Copyright © 2020-2023  润新知