前端|青训营笔记

Arieslyg
88 阅读2分钟

前端与HTML|青训营笔记

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

本堂课的知识要点：

  • 前端介绍
  • html基础架构
  • html 语法
  • 语义化

前端介绍

前端解决的是GUI人机交互问题，前端工程师可以说是用web技术栈解决多端图形用户界面交互问题的工程师。
前端技术栈：html css JavaScript和HTTP协议，websocket等构成了前端最基础的技术栈。
前端关注的方面是：产品功能，美观，无障碍，安全，性能，兼容性。
开发环境：edge，chrome，Firefox浏览器，vscode，webstorm编辑器。

html基础架构

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <h1>一级标题</h1>
  <p>段落内容</p>
</body>
</html>

html是文档的根标签，其他所有标签都写在html标签里面。
html标签里面包含一个head标签和一个body标签。
head标签里面可放置meta标签、title标签、script标签等。
展示页面内容的标签都写在body标签里面。\

浏览器将html文件解析生成dom树，渲染到页面中。image.png

html语法

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

标题h1~h6image.png

列表：有序列表ol、无序列表ul、定义列表dl。

    <!-- 有序列表 -->
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    
    <!-- 无序列表 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <!-- 定义列表 -->
<h1>美人鱼</h1>
<dl>
    <dt>导演</dt>
    <dd>周星驰</dd>
    <dt>主演</dt>
    <dd>邓超</dd>
</dl>

链接a标签，href属性值为url地址，target属性定义窗口行为。

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

img图片标签，src值为图片地址，alt属性显示替代文本。

<img src="https://p6-passport.byteacctimg.com/img/user-avatar/65de24b0cf1dc66b16a95b4e6985a553~300x300.image" alt="图片未显示"/>

audio音频标签，有src属性，controls属性。
src值为音频地址，controls为true会显示控制音频的控件。

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

video视频标签，与音频类似。
表单类标签：input，单行输入，type属性值可以为rang，number，date，checkbox，radio等。
radio多选一，name属性值则设置为相同。

<input type="checkbox"/><br>
<input type="date"/><br>
<input type="range"/><br>
<input type="radio"/><br>
<input type="password"/><br>

image.png textarea，多行输入标签。
选择标签：

    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

可输入进行自动搜索的选择标签：

<input list="contries">
<datalist id="contries">
<option>China</option>
<option>America</option>
<option>England</option>
</datalist>

语义化

含义： html中的元素、属性和属性值都拥有某些含义。
如：ol表示有序列表，ul表示无序列表。 语义化好处：

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

如何做到语义化：

  • 了解每个标签和属性的含义。
  • 思考什么标签最适合描述这个内容。
  • 不使用可视化工具生成代码。
avatar
文章
阅读
粉丝