常用官网及被忽略的html

平平无奇111
64 阅读4分钟

常见官网

MDN: developer.mozilla.org/ 查找html,css,js的API

浏览器

  • 域名——DNS服务器解析——ip地址——服务器（电脑（主机）存放html,css,js资源）
  • 浏览器的渲染引擎（浏览器内核）：负责解析网页语法，并渲染（显示）网页
    • Webkit -> Blink : Google Chrome, Edge
  • js引擎（V8）

HTML

超文本标记语言: 简称HTML,是一种用于创建网页的标记语言。HTML文件的拓展名是.htm.html

<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>

html基本知识:

  1. 没有结束标签（单标签）的元素:br、img、hr、meta、input 后面也不需要/
  2. <!DOCTYPE html>文档类型声明,用于声明文档类型,告诉浏览器当前页面是HTML5页面,让浏览器用HTML5的标准去解析识别内容.必须放在最前面,不能省略,否则出现兼容性问题.
  3. <html lang="zh-CN"> 根元素,lang属性作用:帮助语音合成工具确定要使用的发音;帮助翻译工具确定要使用的翻译规则;lang="en"表示这个HTML文档的语言是英文,lang="zh-CN"表示这个HTML文档的语言是中文.
  4. <head>规定文档相关的配置信息(也称之为元数据),包括文档的标题,引用的文档样式和脚本等.
    1. 什么是元数据(meta data),是描述数据的数据;
    2. 这里我们可以理解成对整个页面的配置,一般会至少包含如下设置.
      • 网页的标题: <title></title>
      • 网页的编码: <meta charset="UTF-8">
        • 可以用于设置网页的字符编码,让浏览器更精准地显示每一个文字,不设置或者设置错误会导致乱码;
        • 一般都使用utf-8编码,涵盖了世界上几乎所有的文字;
      • 网页的样式: <link ref="stylesheet" href="....css">
        • link元素用来引入css资源,也可以用来引入创建站点图标(比如favicon图标)<link ref='icon' href='../favicon.ico'>
        • <link rel="dns-prefetch" href="//....com"> 这个的作用是把域名用dns提前解析,资源访问速度显著提升,以达到 性能优化 的效果
  5. <img src="" alt="">是一个可替换元素.alt属性不是强制的,有两个作用:
    • 作用一: 当图片加载不成功(错误的地址或者图片资源不存在),那么会显示这段文本;
    • 作用二: 屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义;
    src图片的路径分为绝对路径(从根目录开始一直找资源的路径)和相对路径(相对于当前文件的一个路径-常用),路径分隔符是/,而不是\
  6. <a target="_blank">新窗口打开,
    _parent:在父窗口中打开URL,和iframe结合使用
    _top:在顶层窗口中打开URL,和iframe结合使用
    href 可通过相对路径链接到本地的网页
    • 可下载zip压缩包....zip
    • 可打开邮件程序....com
  7. <iframe src="" width="800" frameborder="0">可实现在一个HTML文档中嵌入其他HTML文档.
    • 如果一个网站不想被嵌入,可以在Response Headers里设置X-Frame-Options:sameorigin, 可以在ngnix中添加.
    • frameborder是否显示边框:0不显示1显示
  8. 字符实体: 是一段以连字号(&)开头,以分号(;)结尾的文本(字符串)
    • 空格 &nbsp &#160; (浏览器默认不显示html中的空格,若想显示,用空格字符实体).
    • 小于号 &lt &#60; (html中用字符实体代替小于号)
    • 大于号 &gt &#62. (html中用字符实体代替大于号)
  9. URL
    • Uniform Resource Locator 统一资源定位符,俗称网络地址,相当于网络中的门牌号.
    • 标准格式: [协议类型]://[用户信息]@[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]
    • 例: john.doe@www.example.com:123/forum/quest…
  10. URI
    • Uniform Resource Identifier 统一资源标识符,用于标识Web技术使用的逻辑或物理资源(如网页,文件,接口等).
    • URI在某一个规则下能把一个资源独一无二的识别出来.
    • URL也能识别一个资源,所以URL是URI的一个子集,但URI并不一定是URL
  11. 标签语义化的好处
    • 方便代码维护
    • 减少开发者之间的沟通成本
    • 能让语音合成工具正确识别网页元素的用途,以便作出正确的反应
    • 有利于SEO
    • ...
  12. SEO
    • 搜索引擎优化-是通过了解搜索引擎的运作规则来调整网站,以及提高网站在有关搜索引擎内排名的方式.
    • 了解搜索引擎的爬虫原理

VSCode html小技巧：

  • 敲html代码自动补齐 其他元素也一样
  • Ctrl+回车 光标直接到下一行
  • 输入div>ul>li生成三层元素
  • 输入！生成基本机构,之后一直按tab键,光标移到body内
  • Alt+Shift+向下箭头/向上箭头 可以快速复制这一行 向下/向上
  • 快速注释 Ctrl+/

中文时使用英文标点: 搜狗输入法右击找到更多设置-属性设置-常用-中文时使用英文标点,把它打开就可以了

avatar
文章
阅读
粉丝