学习路线参考b站up朱安邦学习网站及视频

 

　　环境 vs code +AnyDesk（安装teamviewer未遂，这个远程的也蛮好用）

 

　　以下是一些零零散散的笔记

 

　　0.1 vs code汉化

 

　　安装 Configure Language 插件

 

　　0.2 vs code直接运行chrome

 

　　配置 launch.json文件

 

　　1.1 HTML 指的是超文本标记语言： HyperText Markup Language

 

　　1.2 常用标签

 

　　1.3 网页结构

 

　　1.4 注释方法

 

　　1.5 图片

 

　　在这里被菜鸟教程误导了一小下。

 

　　src后面的相对路径无需前加 /，图片只要和html文件在一个文件夹下即可。

 

　　关于插入图片，输入img后直接Tab可以自动生成。

 

　　2.1 所有标签都需要闭合

 

　　2.2 HTML对大小写不敏感，但标签最好采用小写，保证兼容性

 

　　2.3 <br> <br/>标签定义换行

 

　　Markdown支持html语法，会对相应的标签进行解析（博客中html标签在预览中不显示问题的解决）

 

　　3.1 在某些个别的情况下，例如属性值本身就含有双引号，则必须使用单引号，例如：name=‘John “ShotGun” Nelson’

 

　　3.2 HTML标签列表

 

　　HTML标签列表（功能排序）

 

　　HTML标签列表（字典序）

 

　　进度

 

　　Day2_2020 0610

 

　　timeplace10:00-13:00（3h）procurement office 216:30-17:00（0.5h）procurement office 2

 

　　为自己的疏于学习而感到羞愧的一天

 

　　HTML属性参考手册

 

　　4.1 我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

 

　　当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。

 

　　5.1 文本格式类的标签速查

 

　　6.1 超链接中

 

　　6.2 使用图片链接

 

　　6.3 当前页面链接到指定位置

 

　　Day3_2020 0611

 

　　timeplace12:30-14:00（1.5h）pacific coffee16:00-17:00（1h）pacific coffee

 

　　12:00 – 希望不是为自己的疏于学习而感到羞愧的一天

 

　　18:00 – 羞愧了

 

　　7.1

 

　　<link> 标签定义了文档与外部资源之间的关系。

 

　　<link> 标签通常用于链接到样式表

 

　　7.2 <meta> 标签提供了元数据，元数据不显示在页面上，但会被浏览器解析。 通常用于指定网页的描述、关键词、文件的最后修改时间，作者和其他元数据。一般放置于head区域。

 

　　7.3 HTML中head元素

 

　　7.4 html样式相关

 

　　Day4_2020 0612

 

　　timeplace11:20-13:50（2.5h）pacific coffee（超大杯冰拿铁有点爽）15:40-16:40（1h）pacific coffee

 

　　8.1 设置图像映射

 

　　使用 <area>标签，定义可点击区域。shape 属性设置形状，coords属性定义位置的值。（详细内容）

 

　　9.1 关于表格的所有记录如下（注释显示不清晰，手动把 < ! 替换成了 - - ）

 

　　10.1 大多数 HTML 元素被定义为块级元素或内联元素。

 

　　<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。浏览器会在其前后显示折行。如果与 CSS 一同使用，可用于对大的内容块设置样式属性。（块级元素在浏览器显示时，通常会以新行来开始和结束）

 

　　<span> 元素是内联元素，可用作文本的容器， <span> 元素也没有特定的含义。当与 CSS 一同使用时，可用于为部分文本设置样式属性。（内联元素在显示时通常不会以新行开始。）

 

　　Day5_2020 0613

 

　　timeplace10:00-11:00（1h）my kitchen12:40-13:40 （1h）my living room

 

　　11.1 不建议使用table进行布局，主要使用div标签进行布局。

 

　　即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据，表格不是布局工具。

 

　　属性clear属于css属性

 

　　Day6_2020 0614

 

　　timeplace11:40-12:00（1h）my living room

 

　　Day7_2020 0615

 

　　timeplace11:30-13:30（2h）pacific coffee15:30-17:30（2h）pacific coffee

 

　　17.1 XHTML 是以 XML 格式编写的 HTML，指的是可扩展超文本标记语言，今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

 

　　更多XHTML相关内容

 

　　Day8_2020 0626

 

　　timeplace15:15- 16:15（1h）my living room20:45-21:15（0.5h）my living room

 

　　canvas（画布）中可绘制路径，盒、圆、字符、文本、渐变以及添加图像。

 

　　SVG 指可伸缩矢量图形 （Scalable Vector Graphics）。

 

　　（1）SVG 用于定义用于网络的基于矢量的图形，而Canvas 通过 JavaScript 来绘制 2D 图形。

 

　　（2）SVG 使用 XML 格式定义图形，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。

 

　　（3）在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。而Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

 

　　SVG 的教程及实例包括一些形状的绘制、滤镜的添加、形状或文字的移动、变化等等

 

　　本人的chrome不支持该标签……

 

　　感觉可以用于拖框的验证码，主要内容在js部分，暂放。

 

　　这个输入类型比较常用

 

　　Day9_2020 0627

 

　　timeplace14:00- 15:00（1h）my living room00:20-01:20（1h）my living room

 

　　<datalist> 元素可用设置于下拉菜单的预设选项

 

　　图片提交按钮，文本自动检测、预填充文本…

 

　　两种存储方式，学完js来看。

 

　　HTML部分暂时结束

 

　　总结下：写了333行代码，大约学了20h，断断续续十天完成，每天学习效率太低，希望css阶段换了新电脑能够加把劲？