02 前端与HTML | 青训营

亨亨就是小张
98 阅读6分钟

一.什么是前端？

1.解决图形界面下的人机交互的问题，无论面对的设备时pc浏览器，移动浏览器，app小程序，甚至是一些VR设备，我们使用的技术栈都是html，css，JavaScript，http网络协议来解决人机交互的问题

2.前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师

3.前端的技术主要分为三层:最基础的是html（负责页面结构和内容），css（负责页面样式，比如颜色大小等信息），JavaScript（定义网页的行为），三者都是运行在浏览器里面的。浏览器是通过http网络协议和服务器进行通信。把前端的代码通过http协议通过服务器获取，之后渲染成可以看到的页面。浏览器也可以把用户填写的内容或者用户的行为通过http协议提交到服务器端。

4.html，css，JavaScript和网络协议构成了前端最基础的技术栈

二.前端应该关注哪些方面的问题？

1.前端要解决的根本问题是图形界面下的人机交互的问题。

2.最核心的是要关注产品的功能，比如能够解决什么问题，有没有满足用户某些方面的需求。

3.美观，无障碍（特殊人群），安全（用户数据的保密），性能（速度快，用户体验，动画流畅度），兼容性（是否在各种各样的设备上可以使用）

三.前端的边界？

1.可以使用nodejs开发服务器端的应用，使用electron开发客户端的应用，使用React Native实现在线产出（多人会议）...

2.前端在互联网行业发展是一个迅速的领域，技术不断更新，入门门槛较低

四.什么是html？

1.HyperText Markup Language

<img src = "photo.jpg"/> src是是属性名，photo.jpg是属性值

<!doctype html>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <hl>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

<!doctype html>标记了当前使用的html文件是什么样的html版本，最终浏览器会根据此决定哪一种渲染模式。如果没有<!doctype html>浏览器会以一种比较老旧的怪异模式渲染页面，造成页面暂时效果与实际不太相符。

<html>是文档的根标签,其他的标签都是写在html里面

<head>标签里面会放一些页面的原数据，也就是页面上需要的信息但不需要呈现给用户的，比如页面的标题是什么，页面用了什么样的编码...

<body>里面放的是需要呈现给用户的真正的内容，比如一段文字，一个标题或者一张图片

2.dom树

浏览器拿到html之后会把html代码进行解析，解析出dom树

mindmap
      ducument
          html
            head
              meta
              title
                "Page Title"
            body
              h1
                Heading
              p
                Page Content

dom树顾名思义是一个树形的结构，包含文档的根节点，也就是document里面包含一个html节点，html里面包含head，body，以此类推...dom树就是把html代码转换成树形的结构，里面的每一个节点成为dom节点。

3.html语法

1）标签和属性不区分大小写，推荐小写；

2）空标签可以不闭合，比如input，meta，image。标签本身不写其他内容的情况下，可以不写结束标签，或者在开始标签最后写/；

3）属性值推荐用双引号包裹；

4）某些属性值可以省略，比如required，readonly。比如一个输入框，输入框里面的内容必填，可以用require表示。require只需要在标签写一个属性不需要写值。

4.标题h1~h6

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

image.png

<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>

image.png

image.png

<ol>指有序列表，自动生成序号

<ul>指无序列表，展示效果为清单

<dl>表示定义列表；<dt>表示描述列表里的标题；<dd>表示具体的描述

5.链接

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

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

页面插入多媒体，图片，音频，视频

图片

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

<src>表示图片的地址

<alt>:在某些情况下，比如用户浏览器打开省流量模式，图片不能够加载，在这种情况下，图片展示不出来。这时候需要用降级的方式来表达图片所要传达的信息。对于图片来说，对img标签加一个alt标签，表示alternative text，即替代性文本。当图片加载失败或者不被加载时，会显示出来的文字。

<width>宽度表示图片要展示多宽

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

<video
  src="/assets/video.mp4"
  controls
 ></video>

输入

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

<input type="range">

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

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

<textarea>Hey</textarea>

输入选项

</label>
</p>

<p>
     <lable><input type="radio"  name="sport"  />
  ⚽</lable>
     <lable><input type="radio" name="sport"   />
  🏀</lable>
  </p>
  
<p>
  <select>
    <option>🥑</option>
    <option>🐖</option>
    <option>🥁</option>
  </select>
</p>

<input list="countrise" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>Unites States</option>
</datalist>

文本类标签

<blockquote cite="http://t.cn/RfjK00F">
  <p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生，长育出来的，所以没有这种民众，就没有天才。</p>
</blockquote>

最常见的引用标签是blockquote块级标签，他表示一个比较长的引用，也叫长引用，直接引用别人的一段话。跨级引用有一个cite属性，表示引用的文字来源于哪里。

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们说过<q>字符串是不可变量</q>。</p>

cite标签叫短引用(斜体)，一般用短短几个字表示引用了别人作品的名字或者章节

q表示具体引用的内容（双引号）

<p><code>const</cite>声明创建一个只读的常量。
</p>

<pre><code>
const add = (a,b) => a + b;
const multiply = (a , b) => a * b;
</code></pre>

code标签顾名思义表示代码，用code标签将代码引起来，外面包裹pre标签

<p>在投资之前，<strong>一定要做风险评估
</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

强调标签

strong标签更突出表示事情的严重性，紧急性；em更多是语气上的强调。

五.语义化是什么？

· HTML中的元素，属性及属性值都拥有某些含义

· 开发者应该遵循语义来编写HTML

· 有序列表用ol；无序列表用ul；

· lang属性表示内容所使用的语言

1）谁在使用我们写的HTML

· 开发者-修改、维护页面

· 浏览器-展示页面

· 搜索引擎-提取关键词、排序

· 屏幕阅读器-给盲人读页面内容

六.语义化的好处

· 代码可读性

· 可维护性

· 搜索引擎优化

· 提升无障碍性

传达内容而不是样式：<p style="font-size:32px">前端工程师的自我修养</p> ×

<h1>前端工程师的自我修养</h1> √

七.如何做到语义化

· 了解每个标签和属性的含义

· 思考什么标签最适合描述这个内容

· 不使用可视化工具生成代码

avatar
文章
阅读
粉丝