前端与HTML笔记 | 青训营

想要变成代码小能手
77 阅读5分钟

一、前端

1.1 什么是前端

  1. 解决图形界面下的人机交互问题
  2. 跨终端：PC/移动浏览器、客户端/小程序、VR/AR等。
  3. Web技术栈

即：使用Web技术栈解决多端图形用户界面交互。

  • HTML负责页面、结构、内容。
  • CSS负责页面的样式，如位置、大小、颜色等。
  • JavaScript来定义网页的响应行为。

三者都是运行在浏览器里，浏览器可以通过http协议与服务器端进行通信，浏览器把前端代码通过http协议从服务器上拿到，再渲染成页面，也可以把用户的行为通过http协议提交到服务器端，并接受服务器返回的数据。

1.2 前端应该关注哪些方面

  • 美观
  • 功能：满足用户需求
  • 无障碍：如色盲症患者
  • 安全：如用户数据安全
  • 性能：流畅、速度快等
  • 兼容性：如电脑、手机各种设备
  • 体验：用户体验

1.3 开发环境

浏览器＋编辑器（VSCode，Vim，WebStorm）

二、HTML

2.1 HTML概述

HyperText：超文本。即图片、标题、链接、表格

Markup Language：标记语言，表示超文本格式。即用成对出现的标签来表示一个格式和内容。

例：

一个一级标题：<h1>文章标题</h1>

也可用在标签中设置一些属性：

例：

<img src = "photo.jpg" />
  • src为属性名，用于指定加载外部资源（如图片）的URL（统一资源定位符，定位和标识互联网上的资源）
  • photo.jpg为属性值。
  • 标签内无需嵌套其他内容，故可以省略</img>，简写为上述形式，作为自闭合标签。

示例：

<!doctype html >  //标记html版本，浏览器根据此决定渲染模式
< html >       //文档的根标签，所有其他标签都写在该标签内
    < head >   //会放页面的元数据，页面上需要的，但不需要呈现给用户的
        < meta charset = "UTF-8" > 
        < title >页面标题 </ title >
    </ head > 
    < body >   //呈现给用户的
        < h1 > 一级标题</ h1 > 
        < p >段落内容 </ p >
    </ body >
</ html >

image.png

浏览器将html代码解析成DOM树，每个结点为DOM结点：

image.png

2.2 HTML语法

2.2.1 基本语法

  • 标签和属性不区分大小写，推荐小写，自定义组件用大写
  • 空标签（标签本身里面不放其他内容）可以不闭合（即：不写结束标签或只在开始标签最后写个/），比如 img、input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值（如true）可以省略，例如required、readonly

2.2.2 标签

（1）标题

<h1>一级标题</h1>

有 h1~h6

（2）列表

  1. 有序列表

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

    展示效果：image.png

  2. 无序列表

    <h2>购物清单</h2>
<ul>                   //ul:unorder list
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

    展示效果：image.png

  3. 定义列表

    dt和dd为多对多的关系

    <h2>霸王别姬</h2>
<dl>                  //dl:definition list
  <dt>导演：</dt>      //dt:definition title
  <dd>陈凯歌</dd>      //dd:definition description
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

    展示效果：image.png

（3）链接

<a>官网</a> //anchor

href属性，超链接

<a href="https://www.bytedance.com/">
  字节跳动官网    
</a>             //替换原有页面，但字节跳动官网不允许嵌入到其他页面内
​
<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>             //打开新窗口
​

展示效果：

image.png

（4）多媒体

src：表示要加载的资源的URL

alt属性：图片加载不出来时的替代性文本

width：图片展示的宽度

controls：默认显示浏览器的默认播放控件

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

疑问：将<audio src="/assets/music.ogg" controls></audio>修改为<audio src="/assets/music.ogg" controls />之后，video控件没显示出来，但按道理来说不是可以这样简写吗，不太懂，呜呜太菜了。 image.png

（5）输入控件

placeholder：占位符，用户没有输入时显示的内容

<textarea>：输入多行文字，输入框可调整大小

<input placeholder="请输入用户名">
​
<input type="range">    //输入一个范围
​
<input type="number" min="1" max="10">   //输入一个数字，可指定最小和最大
​
<input type="date" min="2018-02-10">    //输入日期
​
<textarea>Hey</textarea>

展示效果：

image.png

（6）选项输入

  • 多选：<input type="checkbox" /> //checkbox复选框

    <p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

展示效果：

image.png

  • 单选：<input type="radio" name="sport" />

    互斥关系通过name属性达到，只能从name属性值相同的多个radio中选择一个。

    <p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

展示效果：

image.png

  • 下拉选择：<select>，下拉选项写在<option>里面。

    <p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

展示效果：

image.png

  • 自由输入，选项辅助

    用户可以自由输入，但可以有提示辅助用户输入。

    给input指定list属性，用list属性指定可以的选项。

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

    展示效果：

    image.png

（7）文本类标签

  • 快捷引用（长引用）：

    <blockquote>标签

    cite属性：表示引用的文字来源于哪。

    用于直接引用别人的一段话。

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

    展示效果：

    image.png

  • 短引用

    <cite>标签：引用作品的名字或章节。

    <q>标签：具体的引用的内容。

    <p>我最喜欢的一本书是<cite>小王子</cite>。</p>
​
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

    展示效果：

    image.png

  • 引用代码

    <pre><code>标签引用多行代码。

    <code>标签引用短代码。

    <p><code>const</code>声明创建一个只读的常量。</p>
​
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

    展示效果：

    image.png

  • 强调

    <strong>标签：表示含义上的“重要”、”紧急“。

    <em>标签：表示语气上的重读。

    <p>在投资之前，<strong>一定要做风险评估</strong>。</p>
​
<p>Cats <em>are</em> cute animals.</p>

    展示效果：

    image.png

（8）内容划分

<header>标签：页头，可以放logo、导航等。

<nav>标签：可以表示导航。

<main>标签：放页面的主体部分。一般来说一个页面只有一个main元素。

<article>标签：<main>中一些文章正文可以放在<article>中。页面中也可以没有<articcle>。

<aside>标签：与内容相关，但不直接属于该内容的内容。如广告，推荐。

<footer>标签：页尾，放一些参考链接、版权信息、备案信息等。

image.png

（9）标签原则

语义化：HTML中的元素、属性及属性值都有特定含义，开发者应遵循语义来编写HTML。

原则：传达内容，而不是样式。

谁在使用我们写的HTML：

  • 开发者：修改维护页面，提高代码可读性、可维护性。
  • 浏览器：浏览器读我们写的HTML展示页面，用什么标签非常重要。如lang标签。
  • 搜索引擎：会抓取HTML中的关键词，建立索引进行排序，依据就是我们的标签。对于搜索引擎优化非常重要。
  • 无障碍性：非正常情况下访问，按照规范写，可以服务很多人、很多场景，提升无障碍性。

可参考资料

MDN，W3C上的HTML5规范，阅读每个标签的属性和含义等。

avatar
文章
阅读
粉丝