前端与 HTML | 青训营笔记

努力学习的卿卿
108 阅读4分钟

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

一、前端

1.什么是前端？

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈
总结：前端就是使用Web技术栈解决多端图形用户页面交互问题的技术。

2.前端技术栈

  • HTML(内容)
  • CSS(样式)
  • JavaScript(行为)

1.png

3.前端应该关注哪些方面？

网页的开发功能、是否有满足用户某些方面的需求；做出来的界面是否美观；做出来的网站是否对所有人都可以用到、是否无障碍；做出来的产品是否能保证所有用户数据的安全，是否存在漏洞；网站做出来是否足够快，是否流畅、用户体验是否足够好等性能；做出来的网页是否能在任何一个设备都能使用，兼容性好不好；还有用户体验也是非常重要。

4.前端的边界？

2.png

5.开发环境

24a8c9f6065a4343b40e6c4615c13ab1_tplv-k3u1fbpfcp-watermark.png

二、HTML

1.HTML是什么？

HTML的全称是HyperText Markup Language

  • HyperText是超文本包括图片、标题、链接和表格
  • Markup Language是使用一个开始标签和一个结束标签来表示一个内容或格式

2.DOM树

d799b65922314e35ae0064e02675acde_tplv-k3u1fbpfcp-watermark.png

3.HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如 required、readonly

3.1标题h1~h6

<h1>表示一级标题，<h2>表示二级标题，以此类推,<h6>表示最小标题,<p>表示文本。

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨，砖块上面不均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>……</p>
  • 展示效果：

27a78f18656d4a988cb4f71e7976351e_tplv-k3u1fbpfcp-watermark.png

3.2列表

<ol>表示有序列表，<ul>表示无序列表，<dl>表示定义列表。

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<ul>
  <li>草莓</li>
  <li>🍎</li>
  <li>🍉</li>
</ul>

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>
  • 展示效果：

c32da060522d4a6cb62640ed352de0cc_tplv-k3u1fbpfcp-watermark.png

3.3链接

href表示规定的链接。 target="_blank"表示跳出当前页面，打开新的页面；target="_self"表示跳转页面跳转到当前页面。

<a href="https://www.bytedance.com/">
字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
字节跳动官网
</a>
  • 展示效果：

616cb34df0fe419c87e817561a85a95c_tplv-k3u1fbpfcp-watermark.png

3.4图片、音频或视频链接

alt表示替代文本。

<img 
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg" 
alt="Metal movable type" 
width="400"
/>

<audio src="/assets/music.ogg"
controls
></audio>

<video
src="/assets/video.mp4"
controls
></video>
  • 展示效果：

1e91b8a8a3ed402f8f6f737b430ce6f9_tplv-k3u1fbpfcp-watermark.png

3.5输入

input表示输入标签，placeholder表示占位符，range表示滚动条，number表示数字，date表示日期，textarea表示文本域。

<input placeholder="请输入用户名">

<input type="range">

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

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

<textarea>Hey</textarea>
  • 展示效果：

2b1733b2d30346329f29dffd9e2dd600_tplv-k3u1fbpfcp-watermark.png

3.6多选、单选和下拉选择

radio表示单选框，datalist表示补全输入，label表示标签的名称，select表示下拉框，option表示选项框。

<p>
<label><input type="checkbox" />苹果</abel>
<label><input type="checkbox" checked />雪梨</label>
</p>

<p>
<label><input type="radio" name="sport" />A</label>
<label><input type="radio" name="sport" />B</label>
</p>

<p>
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
</p>

<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
  • 展示效果：

cb64c1360ced49318f7bc0368106e084_tplv-k3u1fbpfcp-watermark.png

4.内容划分

e1e08a046a0249da8b2acc9cd4e1d42e_tplv-k3u1fbpfcp-watermark.png

5.语义化是什么？

  • HTML中的元素、属性、及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

6.谁在使用我们写的HTML？

  • 开发者--修改、维护页面
  • 浏览器--展示页面
  • 搜索引擎--提取关键词、排序
  • 屏幕阅读器--给盲人读页面内容

7.语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

8.如何做到语义化？

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

9.写在最后

HTML主要任务是传达内容，向用户传达信息，而不是传达样式。因为页面中的元素和最终展示出来的效果是无关的，页面最终的效果应该由CSS决定。所以HTML最重要是学习语义化的相关知识，并且在编程的过程中，实践不同的语义化规范。语义化的好坏也是判断一个页面好坏的标准。

avatar
文章
阅读
粉丝