HTML基础 | 青训营笔记

immortal177
60 阅读2分钟

这是我参与【第四届青训营】笔记创作活动的第1天，以下笔记为上课课程以及查资料整理而来，记录一下。

背景

HTML要解决的问题：图形界面下的人机交互问题。前端解决PC、移动浏览器、app、小程序、VR等多端下的交互问题。

最基础的技术栈：HTML+CSS+Javascript CSS解决样式，Javascript解决用户响应问题，代码在浏览器运行，通过HTTP协议提交到服务器。

好的产品要求

  • 有没有满足用户的需求
  • 界面是否美观
  • 色盲、障碍人士等是否能使用
  • 安全性：用户数据，漏洞等
  • 性能：网站加载速度
  • 兼容性：能否在不同浏览器加载

HTML（超文本标记语言——HyperText Markup Language）定义了网页内容的含义和结构。使用标记（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。 HTML 标记包含一些特殊“元素”如 <header>、<body>、<section>等等。

webRTC：多人会议等应用

webGL：3d效果

DOM树

DOM是文档对象化模型（Document Object Model）的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。

image.png

借助DOM Tree，我们能直接而且简易的操作HTML页面上的每个标记内容。

<!DOCTYPE HTML> 
<html> 
    <head> 
    <title>About elk</title> 
    </head> 
    <body> 
    The truth about elk.
    </body> 
</html>
复制代码

DOM 将 HTML 表示为标签的树形结构image.png每个树的节点都是一个对象。标签被称为 元素节点（或者仅仅是元素），并形成了树状结构：<html> 在根节点，<head> 和 <body> 是其子项，等。

HTML语法

  • 标签和属性不区分大小写
  • 空标签可以不闭合，比如 input
  • 属性值使用双引号
  • 某些属性值可以省略

输入

HTML <input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。 其属性src可以指定不同的值：

  • button：按钮，上面显示value属性的值，默认为空。
  • number：用于输入数字的控件。
  • text：默认值。单行的文本区域，输入中的换行会被自动去除。
  • range：用于输入不需要精确的数字。是一个范围，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。
avatar
文章
阅读
粉丝