前端与HTML|青训营笔记

用户9571669256229
76 阅读2分钟
这是我参与「第四届青训营 」笔记创作活动的的第1天

1.初识前端

1.1.1前端的定义

  • 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。前端是网页给访问网站的人看的内容和页面。是为了网页或者网页应用，使用HTML，CSS以及JS代码，用户能够看到并且和这些页面进行交流。

1.1.2前端的核心技术

  • HTML、CSS、JavaScript

1.1.3前端主要解决的问题

  • 解决*GUI(图形用户界面)*的人机交互问题所做的事情
  • 解决跨终端问题

1.2. 前端技术栈

屏幕截图 2022-07-26 221355.png

1.3. 前端应关注哪些方面？

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

1.4.前端边界

image.png

2.走进前端之HTML

2.1什么是HTML

**Hyper Text Markup Language,即超文本标记语言，一种用来描述网页的语言（非编程语言，是一种标记语言 ）。 **

2.2 用vscode创建一个HTML骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.3常用HTML标签

  • <h>外部链接</h>
  • <a href="n" target=""></a>

image.png

  • <table>
<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
  • <input> 复制代码用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件
<input type="" id="" name=""  maxlength="" size="">
  • <img>：图像嵌入元素
<img class=""src=""alt="">
  • <select> 表示一个提供选项菜单的控件
<select name="" id="">
    <option value="">内容</option> 
</select>
  • <p> HTML 段落元素，表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。
<p>这是第一个段落。这是第一个段落。</p>
<p>这是第二个段落。这是第二个段落。</p>

3.语义化

3.1语义化的含义

用合理HTML标记以及其特有的属性去格式化文档内容。 通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。

3.2语义化的好处

  • 语义化的HTML文档有助于提升你的网站对访客的易用性
  • 对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。

参考资料

  • MDN
  • 字节跳动青训营HTML的PPT
avatar
文章
阅读
粉丝