web入门2 | 青训营笔记

思忖
102 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

先让我们用三个问题来了解一下前端工程师：

Question 1：什么是前端？

  1. 解决图形界面下的人机交互问题（GUI）
  2. 跨终端：① PC/移动浏览器 ② APP/小程序 ③ VR/AR等
  3. Web技术栈

概括说来：前端工程师就是使用Web技术栈，解决多端图形用户界面交互问题的工程师。

Question 2：前端技术栈分为哪些部分？

  1. HTML：页面、结构、内容
  2. CSS：设计页面样式
  3. JavaScript：定义网页的行为

上述三个部分均运行在浏览器里，浏览器可以通过http网络协议和服务器进行通信。

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

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

HTML相关知识

HTML：HyperText Markup Language （超文本、标记语言）

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

第1行：标记了当前这个html用什么版本去渲染

第2、11行：根标签

第3、6行：放一些页面的原数据，也就是页面需要的，但不需要呈现给用户的信息

第7-10行：呈现给用户的内容

具体呈现效果：

image.png

HTML语法

语法规则：

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

h1~h6

列表

有序列表：

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
  1. a
  2. b
  3. c
无序列表： 
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
  • a
  • b
  • c
自定义列表： 
<dl>
    <dt>导演</dt>
    <dd>xxx</dd>
    <dt>演员</dt>
    <dd>Axx</dd>
    <dd>Bxx</dd>
    <dd>Cxx</dd>
    <dt>上映时间</dt>
    <dd>xxxx年xx月xx日</dd>
</dl>
导演
xxx
演员
Axx
Bxx
Cxx
上映时间
xxxx年xx月xx日
链接

替换当前原有的页面：

<a href="超链接的地址">
超链接的名字
</a>

新窗口打开：

<a href="超链接的地址"
target-"_blank">
</a>
多媒体

图片：

<img src="…" alt="…" width="400"/>

音频：

<audio src="…" controls
></audio>

视频：

<video src=”…” controls></video>
输入
<input placeholder="请输入用户名：">
Placeholder表示一个占位符，意为当用户没有输入时显示的内容
<input type="range">
表示让用户选择一个范围，页面上会出现一个滑动条
<input type="number" min="1" max="10">让用户输入一个数字
<input type="date" min="2018-02-10">
<textarea>Hey</textarea> 让用户输入较长的多行文字
选择
<input type="checkbox" />让用户选择多个值


<input type="radio" name="sport" />让用户在sport中选择一个值


<select>
  <option>…</option>
  <option>…</option>
</select>
让用户进行下拉选择


<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>…</option>
</datalist>
让用户自由输入，同时会提供一些提示便于快捷输入
表示文本性内容
  1. 引用： 快捷引用（长引用）
<blockquote cite=”http:…”>
  <p>
  …
  </p>
</blockquote>

短引用（作品名字或章节）

<p>…<cite>引用文字</cite>。</p>

短引用

<q>…</q>
  1. 代码
<code> … </code>
  1. 加粗
<strong> … </strong>
  1. 重读
<em> … </em>

内容划分

image.png header：页头

nav：导航

main：页面的主体部分，一般来说一个页面里只有一个main标签

aside：和该页面相关，但并不是直接属于这个页面的内容

article：文章正文

footer：参考链接、版权等备案信息

我们为什么要为HTML制定各类拥有特殊含义的元素、属性以及属性值呢？

要想回答这个问题，首先我们需要关注的是：谁在使用我们写的HTML？

  • 开发者——修改、维护页面

  • 浏览器——展示页面

  • 搜索引擎——提取关键词、排序

  • 屏幕阅读器——为盲人读取页面内容

    不难看出，一个更加规范化、体系化的HTML语言，更有利于我们进行阅读，更容易通俗明了的表达出我们想要传达的信息。HTML中的元素、属性及属性值都拥有某些特殊含义，不如在日常的学习中，多关注这些含义与元素之间的对应关系吧！

avatar
文章
阅读
粉丝