一名前端开发のHTML入门

·  阅读 666

前端开发,入门简单,有一台可以运行多款浏览器的电脑,能联网查询资料即可。深入的部分,需要更多的理论知识、肯钻研的精神。 前端开发,需要入门了解的屈指可数,主要就是如下几个大方面:

背景知识

软件安装

文本编辑器

  • vscode(推荐使用,功能强大)
  • Sublime Text
  • NodePad++

浏览器

Firefox, Chrome, Opera, Safari, Internet Explorer and Microsoft Edge

版本控制

Git GitHub

构建工具

Web standards

Web standards,主要定义浏览器端,功能接口标准的,标准的具体实现,由不同的浏览器厂商完成。

当下使用的web技术

主流浏览器

Firefox, Chrome, Opera, Safari, Internet Explorer and Microsoft Edge

协议

协议,主要用于通信。前后端不是独立的,彼此通过协议,互换信息,web系统才能运行正常

  • http
  • https
  • socket

HTML, CSS, and JavaScript

开发工具

  • 各浏览的DevTool,便于调试
  • Linters插件
  • Minify工具
  • CDN等
  • 测试工具
  • js库和前端框架(站点构建的更快、更高效)

服务端语言

Python, NodeJS, Deno, Go, Rust

面临的挑战

浏览器兼容

Web standards,各实现厂商不同,支持力度不同,浏览器兼容问题自然存在

响应式设计

厂商的不同,展示场景的不同,意味着不能全篇一律敲定,需要动态变化展示内容

性能

天下站点,只有快,才能留住用户

易用性

站点的访问人群不同,要具备普适性, 都能轻松使用。

国际化

国际语言众多,需要尽可能的多支持

安全性

用户隐私数据保护

HTML

html基础概念

html元素

当然,也有例外,不是这种格式的

# Empty elements, or (void elements.) 
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
复制代码

html元素嵌套

<p>My cat is <strong>very</strong> grumpy.</p>
复制代码

块元素和行内元素

块元素,独占一行;行内元素,按先后顺序,排列 这些与css的display不同,不影响元素能包含哪些元素,能被哪些元素包含

元素属性

其中,也存在一种特殊的属性:Boolean attributes

<input type="text" disabled>
# 等效于
<input type="text" disabled="disabled">
复制代码

另外,也会存在一些特殊的写法。推荐都是key="value"形式

<a href=https://www.mozilla.org/>favorite website</a>
复制代码

html文档结构

不管多少连续的空白,浏览器都会解析会一个空格

<!DOCTYPE html> # 定义解析格式
<html> # 文档的root 
  <head> #定义源数据地方 
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body> # 文档的可见内容部分
    <p>This is my page</p>
  </body>
</html>
复制代码

元数据等请移步参考

html特殊字符

<, >,",' and &, 这是html自身使用的,如果用户需要展示,那么需要转义

(不好展示,&添加了 空格,其实是没有的)

特殊字符转义字符
<& lt;
& gt;
"& quot;
'& apos;
&& amp;

html注释

<!-- 
 <p>I am!</p> 
-->
复制代码

html 多媒体

image

  • 普通的图片

alt描述图片

# 推荐添加alt,而不是text子元素节点添加
<img src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
         it has a large head with long sharp teeth">
复制代码

caption添加标题

 <figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">
 <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
复制代码
  • 响应式图片

根据展示设备尺寸的不同,加载不同的图片

<img srcset="elva-fairy-480w.jpg 480w,
            elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
           800px"
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy">
复制代码

设备尺寸相同,但是分辨率不同

<img srcset="elva-fairy-320w.jpg,
            elva-fairy-480w.jpg 1.5x,
            elva-fairy-640w.jpg 2x"
    src="elva-fairy-640w.jpg"
    alt="Elva dressed as a fairy">
复制代码

利用picture,不同设选择加载不同的图片

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
复制代码

picture+svg

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
复制代码

audio

单一url 浏览器厂商,针对音频的支持格式不是不同的,譬如: MP3, MP4 and WebM

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
复制代码

浏览器适配问题

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
复制代码

video

单一url 浏览器厂商,针对视频的支持格式不是不同的

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
复制代码

浏览器适配问题

<video controls width="400" height="400"
       autoplay loop muted preload="auto" 
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
复制代码

svg

image引用svg

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87"
    width="100" />
复制代码

html引用svg

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>
复制代码

iframe等中引用svg

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
复制代码

canvas

canvas与svg不同,canvas基于像素,svg基于矢量图

#html
<canvas id="my-canvas" width="600" height="400"></canvas>
复制代码

嵌入元素

iframe, embed and object

iframe

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> 
    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
       Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>
复制代码

html table

样式指定

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>
复制代码

更好的样式指定

col 一次指定即可

<table>
  <colgroup>
    <col> # 定义在colgroup中,与th个数对应
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>
复制代码

全部设置

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>
复制代码

更多推荐

你需要的暗黑模式CSS前端进阶

Angular8 HttpClient 30分钟深入了解下

参考

web-develop

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改