青训营X豆包MarsCode 技术训练营第二课｜豆包MarsCode AI 刷题前端与HTML 前端 1.什么是前端

前端与HTML

前端

1.什么是前端

使用web技术栈解决多端图形用户界面交互问题的工程师

2.前端技术栈

HTML（内容）
CSS（样式）
JS（行为）
通过网络协议提交到服务端

3.前端关注哪些方面

美观，功能，安全，性能，无障碍，兼容，用户体验

4.前端边界

nodejs electron ReactNative WebRTC WebGL WebASSEMBLY

5.开发环境

浏览器：IE Chrome Firefox... 编辑器:VSCode Vim WebStorm

HTML

什么是HTML

HyperText (超文本):图片，标题，链接，表格 <img src=""/> Markup （标记语言）：<h1>文章标题</h1>

//标记了当前HTML文件版本
<!doctype html>
//根标签
<html>
    //放页面源数据
    <head>
        <meta charset="UTF—8">
        <title>页面标签</title>
    </head>   
    //呈现内容
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
</html>

HTML语法

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

HTML标签

标题 h1~h6
列表
- 有序：<ol><li><li></ol>
- 无序：<ul><li><li></ul>
- <dl>列表<dt>标题<dd>内容</dd></dt></dl>
链接<a href="" traget="_blank">新窗口打开跳转页面</a>
图片<img src="" alt="图片无法显示出现的文字" width=""/>
音频<audio src="" controls></audio>
视频<video src="" controls></video>
表单

<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

文本框<textarea></textarea>
选项

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

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

下拉选择 <select><option></option></select>

引用:<blockquote cite="http:"></blockquote <cite></cite> <q>具体引用内容</q> <pre><code>代码</code></pre> <em>斜体</em> <strong>加粗</strong>
内容划分header nav--main article/aside--footer

语义化

HTML中的元素,属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
有序列表用ol；无序列表用ul
lang 属性表示内容所使用的语言

谁在使用我们写的HTML

开发者-修改维护页面
浏览器-展示页面
搜索引擎-提取关键词，排序
屏幕阅读器-给盲人读页面内容

语义化好处

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

如何语义化

了解每个标签和属性含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

青训营X豆包MarsCode 技术训练营第二课 ｜ 豆包MarsCode AI 刷题