[ 前端与 HTML | 青训营笔记]

84 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

什么是前端?(前端工作的定义)

1.解决人机交互
2.跨终端
3.web技术栈

前端技术栈

image.png

前端要关注哪几个方面?

美观 安全 功能 兼容 体验 性能 无障碍

HTML

什么是HTML?

HyperText Markup Language

Hypertext:也就是超文本,包括了图片,标题,链接,表格。

MarkLauguage:<h1>文章标题<h1/>

image.png

DOM树

image.png

HTML语法

1.标签和属性不区分大小写,但推荐小写
2.空标签可以不闭合例如input,meta
3.属性值用双引号包括
4.某些属性值可以省去,比如requird,randonly

标题

image.png

效果:

字体排印学

历史

活字的雏形或可追溯至公元前两千年前后美 索不达米亚文明的乌鲁克和拉尔萨,砖块上面不 均匀的印花被视作有可能是活字思想雏形。

印刷体源流

中国在唐代就已经出现雕版印刷术,公元868 年的《金刚经》是现存最古老的印刷品之一,使用 的技术即是木雕版印刷。

应用

...

** PS:在使用标题的时候,我们可以用<ol>表示有序的标题,用<ul>表示无序的标题,用<dl>以及<dt>表示多对多的标题关系!

链接

image.png

输入


<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

效果:

image.png

HTML的语义化

1.HTML中的元素属性属性值都拥有某些含义
2.开发者要遵循语义来编写HTML

总结

是青训营第一节课,对我这个小白来说收获满满,知道了HTML的相关知识还有一些基本语法,对后续的学习有很大的帮助,要继续坚持,养成写笔记的习惯!