0 - 前端的基本概念

最新推荐文章于 2024-11-06 17:29:08 发布

涟绮

最新推荐文章于 2024-11-06 17:29:08 发布

阅读量70

点赞数

分类专栏： ByteDance青训营笔记-前端基础文章标签：前端 html

本文链接：https://blog.csdn.net/liuliu123456790/article/details/128992620

版权

ByteDance青训营笔记-前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端开发涉及HTML、CSS和JavaScript，用于构建网页和应用的GUI。HTML作为超文本标记语言，包括标题、列表、链接和多媒体元素。语义化HTML有助于提高代码可读性、可维护性和无障碍性，确保内容被正确理解和呈现。开发者应关注功能、美观、无障碍性和安全性，并遵循语义原则编写代码。

摘要由CSDN通过智能技术生成

0 - 前端的基本概念

前端的基本概念

什么是前端

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
Web技术栈

前端技术栈

JavaScript（行为）
CSS（样式）
HTML（内容）

前端应该关注的方面

功能
美观
无障碍
安全

开发环境

浏览器
- IE/Edge
- Chrome
- Firefox
- Safari
编辑器
- VSCode - Visual Studio Code
- Vim
- WebStorm

HTML 的基本概念

HTML 是什么

HyperText Markup Language - 超文本标记语言
- HyperText - 超文本 - 图片/标题/链接/表格
- Markup Language - 标记语言 - <h1>一级标题</h1>

HTML 的基本结构

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

<html></html> - 文档根标签
- <head></head> - 文档元数据
- <body></body> - 文档主体

HTML 的元素与属性

元素
```

<p>
    段落内容

</p>
```
一个元素由一个开始标签和一个结束标签组成，<p></p>组成了一个段落元素
属性
```
<img src="photo.jpg" />
```
一个属性由属性名src和属性值photo.jpg组成，即key="value"

img元素可以不使用额外内容，故仅插入/省略结束标签

HTML头的常用元素

标签	描述
`<title>`	文档标题
`<base>`	页面链接标签的默认链接地址
`<link>`	一个文档和外部资源之间的关系
`<style>`	HTML文档的样式文件
`<meta>`	HTML文档中的元数据
`<script>`	客户端的脚本文件

HTML 语法

HTML 标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>

HTML由6种标题，分别对应<h1> - <h6>，<h1>最大，<h6>最小

HTML 列表

1. 有序列表 - ordered list

<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>

2. 无序列表 - unordered list

<ul>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ul>

3. 描述列表 - description list

<dl>
    <dt>键</dt>
    <dd>值</dd>
    <dt>键</dt>
    <dd>值1</dd>
    <dd>值2</dd>
    <dd>值3</dd>
</dl>

在描述列表中，使用键值对的形式表示每组值的关系，多个键可以对应多个值

<dt>：键 - terms

<dd>：值 - describes

HTML 链接

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

href="···"：定义超链接地址

target="_blank"：在新页面中打开

HTML 多媒体

1. 图片 - img

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

src=""：图片源（本地路径或网络地址）

alt=""：替代性文本（Alternative Text），降级传达图片信息

width=""：图片宽度

2. 音频 - audio

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

src:""：音频源

controls：显示浏览器默认音频控件（进度条/暂停/音量等）

3. 视频 - video

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

src:""：视频源

controls：显示浏览器默认视频控件（进度条/暂停/音量等）

HTML 表单控件

1. `<input>` - 输入

<input placeholder="请输入用户名">
<input type="range" min="0" max="10" value="5">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">

placeholder=""：文本框占位符

type="range"：创建一个滑条

type="number"：限定文本框输入为数字

type="date"：设置文本框为日历

2. `<textarea>` - 多行文本框

<textarea>Hey</textarea>

<textarea>：多行文本输入框

3. `<checkbox>` - 复选框

<label><input type="checkbox" />apple</label>
<label><input type="checkbox" checked />banana</label>

<label>：为input元素定义标注，即当用户选择该标签时，自动将焦点转到和标签相关的表单控件上

<type="checkbox">：复选框

<chechboxed>：初始选中

4. `<radio>` - 单选框

<label><input type="radio" name="sports" />football</label>
<label><input type="radio" name="sports" />basketball</label>

type="radio"：单选框

name=""：name值相同的input元素只能选定一个

5. `<select>` - 下拉框

<select>
    <option>peer</option>
    <option>apple</option>
    <option>bananan</option>
    <option>orange</option>
</select>

<select>：下拉框

<option>：下拉框选项

6. `<datalist>` - 预定义列表

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

list=""：加载预定义列表

<input list="">：该文本框允许输入任意值，但是为预定义列表提供补全功能

<datalist>：预定义选项列表

id=""：与input元素的list属性相等，用于绑定<datalist>和<input>

HTML 文本控件

1. `<blockquote>` - 长引用

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

<blockquote>：长引用

<cite>：引用的来源

2. `<cite>` - 短引用

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

<cite>：一般用于作品名字或章节名

<q>：一般用于引用具体的内容

3. `<code>` - 代码块

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

<code>：定义一个代码块，长度不限

<pre>：定义一个预格式化文本，使用等宽字体

其余常用的还有：

<samp>：定义程序输出

<kbd>：定义键盘输入

<var>：定义变量

4. `<strong>` - 加粗

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

</strong>：粗体，一般强调事情重要，严重，紧急

5. `<em>` - 斜体

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

<em>：斜体，一般用于强调语气上的强调

HTML 页面内容划分

<header>：页面头，一般放LOGO、导航等

<main>：页面主体，一般页面内只有一个main元素

<article>：页面正文，例如博客页面的一篇文章

<aside>：与页面内容相关，但不直接属于页面内容的，例如广告、热点文章等

<footer>：页尾，一般放参考、版权、备案等