前端与HTML ｜ 青训营笔记

Sonui
85 阅读4分钟

前端与HTML ｜ 青训营笔记

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

前端是什么

工程师通过使用Web技术栈编写图形界面, 解决用户在移动端、PC端等不同平台下的交互问题, 用户的体验基本上取决于前端

前端简介

基础

基础技术栈:

  • HTML: 页面结构
  • CSS: 页面样式
  • JavaScript: 页面交互

浏览器通过HTTP协议发送请求到服务器，服务器接收请求，并返回响应，浏览器接收响应，并显示页面

前端应当关注到的内容

  • 安全性: 需要保证用户数据的安全性

  • 性能: 用户加载速度体验如何，动画是否流畅

  • 兼容性: 是否支持不同的浏览器

  • 美观: 是否界面符合大众审美

  • 体验: 用户体验是否良好, 示能与意符是否完善, 可进一步学习设计心理学

  • 功能: 最重要的是功能是否完善, 如果功能不完善, 则用户体验不好

新技术栈

现在更新迭代出了Nodejs, WebGL, wasm, Vue, React等等新的技术, 前端开发更加的多样性和方便

开发环境

浏览器

编辑器

HTML

<img src="photo.jpg" />

src: 属性名

photo.jpg: 属性值

示例

<!-- <!DOCTYPE html>用于告诉浏览器以什么标准进行解析 -->
<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

DOM树:

document
└── html
    ├── head
    │   ├── title #page title
    │   └── meta
    └── body
        ├── h1 #heading
        └── p #page content

语法

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

常用标签

标题标签

<!-- 一级标题 从h1到h6逐级变小 -->
<h1>字体排印学</h1>
<!-- 二级标题 -->
<h2>历史</h2>

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

<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868年的《金刚经》是现存最古老的印刷品之一，使用的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

列表标签

<h2>世界电影票房排行榜</h2>

<!-- 有序列表 -->
<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>

<!-- 无序列表 -->
<h2>购物清单</h2>
<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>

链接

<a href="https://www.baidu.com">百度</a>

<!-- 新标签页打开 -->
<a href="https://www.baidu.com" target="_blank">百度</a>

媒体标签

<!-- controls属性将影响浏览器是否展示默认的控制界面 -->
<audio
    src="/assets/audio.mp3"
    controls
></audio>

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

输入相关标签

<!-- 不同的type值会显示不同的组件 -->

<!-- placeholder会显示一个提示背景 -->
<input placeholder="请输入用户名">
<!-- 一个滑块条 -->
<input type="range">
<!-- 数值输入框 最小1最大10 -->
<input type="number" min="1" max="10">
<!-- 日期选择 -->
<input type="date" min="2018-02-10">
<!-- 多行文本输入 -->
<textarea>Hey</textarea>

<p>
    <!-- 多选 -->
    <label>
        <input type="checkbox">🍎</label>
    <label>
        <input type="checkbox">🍏</label>
</p>

<p>
    <!-- 单选 -->
    <label>
        <input type="radio" name="sport">⚽</label>
    <label>
        <input type="radio" name="sport">🏀</label>
</p>

<p>
    <!-- 下拉框 -->
    <select>
        <option>🍕</option>
        <option>🍔</option>
    </select>
</p>

<!-- 可输入也可选 -->
<input list="browsers">
<datalist id="browsers">
    <option value="red apple">🍎</option>
    <option value="green apple">🍏</option>
</datalist>

文字相关标签

<!-- blockquote标签定义一个摘自另一个源的块引用 -->
<blockquote cite="http://t.cn/RfjKOOF">
    <p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的，所以没有这种民众，就没有天才。</p>
</blockquote>

<!-- cite标签来定义作品的标题 -->
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<!-- q标签为引用前面说过的 -->
<p>在<cite>第一章</cite>,我们讲过<q>字将串是不可变量</q>。</p>

<!-- code标签表示代码 -->
<p><code>const</code>声明创建一个只读的常量。</p>

<!-- 多端代码放于pre中 可以保留空格换行 -->
<pre><code>
const add = (a， b) => a + b;
const multiply = (a， b)=>a * b;
</code></pre>

<!-- strong标签表示非常严重的重点强调 -->
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<!-- em标签表示需要突出表示的内容 -->
<p>Cats <em>are</em> cute animals.</p>

内容划分

content_design.png

  • header: 页头 logo
  • nav: 导航栏
  • main: 内容区域 一般只有一个
  • footer: 页脚 参考链接 版权信息 关于信息
  • aside: 侧边栏 相关的但不属于内容的信息 例如广告、热点信息
  • article: 内容区域 正文一个个文章等

语义化

HTML中元素、属性及属性值的命名都是语义化的，遵循规范有着以下好处

  • 使我们的代码更加易读
  • 浏览器易于解析
  • 方便搜索引擎提取关键词
  • 便于无障碍阅读设备 例如给盲人读页面内容

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

例如

  • 有序列表用ol; 无序列表用ul; 表格用table; 表单用form; 超链接用a; 图片用img;
  • 使用lang属性标记内容所使用的语言

样例

<!-- 错误的，应该使用h1来传递内容，而不是样式 -->
<p style="font-size: 32px">前端工程师的自我修养</p>

<!-- 正确 -->
<h1>前端工程师的自我修养</h1>

可以通过阅读mdn或者w3c上的看每一个标签和属性的含义，适合用在什么地方，避免使用可视化工具来生成代码

avatar
文章
阅读
粉丝