一、什么是前端

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

前端技术栈

包括HTML、css、js

最基础的为html，负责页面、结构、内容，页面中可以使用css来设置页面的样式，用js来定义网页的行为，三者都运行在浏览器中，浏览器通过HTTP网络协议和服务器进行通信

二、前端应该关注哪些方面

功能：解决什么问题，是否满足用户需求
美观：
无障碍：对于所有人都适用
安全：数据安全
性能：速度足够快，足够流畅
兼容：在各种设备上正常使用
体验：

三、前端的边界、及开发环境

-1298306318__02b0fdf5780256b5014a574c2dfb5e58-1917546834_IMG_20230727_101436_0_wifi_0.jpg

-33882164__e34aa5aa9284af488dd608a6889c30a3-1119624690_IMG_20230727_101502_0_wifi_0.jpg

四、HTML

4.1 HTML 是什么

HyperText(图片、标题、链接、表格）Markup Language(尖括号存放）

HTML标签是由尖括号（“<”和“>”）包围的关键词

<img scr = "photo.jpg" />
其中src为属性名，“ ”内部的为属性值，img标签里不需要再嵌套其他内容so可以省略/img 这样一个结束标签，直接在末尾加一个斜杠就可以

完整的代码示例：

<!doctype html>   # doctype标记了当前在使用的html文件是什么样的HTML版本
<html>            #文档根标签   html中所有标签全都写在里面
  <head>          #放页面源数据  不给用户看
    <meta charset="UTF-8 ">  
    <title>页面标题</title>  
  </head>  
  <body>          #真正给用户呈现的内容
    <h1>一级标题</h1>  
    <p>段落内容</p>  
  </body>  
</html>

4.2 HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合或在结尾写一个/，例 input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如 required、readonly

4.3 标题h1~h6

一级到六级标题

4.4 列表

范例：

<h2>世界申影票房排行榜</h2>
<ol>        #ol有序列表 会呈现出1 2 3
  <li>阿凡达</li>  
  <li>泰坦尼克号</li>
  <li>夏仇者朕盟</li>
</ol>  
  
<h2>购物清单</h2>
<ul>      #无序列表  
  <li>x</li>
  <li>y</li>
  <li>z</li>
</ul>  
  
<h2>霸王別姫</h2>
<dl>      #定义列表
  <dt>导演: </dt>      #dt表示标题
  <dd>陈凯歌</dd>      #dd表示具体的描述  一个dt可对应多个dd 
  <dt>主演: </dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期: </dt>
  <dd>1993-01-01</dd>

4.5 链接

用一个a标签表示

<a href="https ://ww. bytedance. com/">    #地址href
  字节跳动官网    
</a>  
  
<a href="https ://www. bytedance，com/"
target=" blank">    #链接点之后不是替换之前的界面，而是一个新窗口打开
  字节跳动官网  
</a>

4.6 图片、音频、视频

<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"   #url
  controls  #浏览器默认的播放控件
></audio>  
  
<video  
  src="/assets/video. mp4"
  controls  
></video>

4.7 输入表单控件

<input placeholder="请输入用户名">  #占位符  
<input type=" range">    #输入范围
<input type="number" min="1" max="10">   #输入数字
<input type="date" min="2018-02-10">    #输入日期 
<textarea>Hey</textarea>     #多行输入

4.8在已有选项里选择

<p>  
  <label><input type=" radio" name="sport" />a</label>  
  <label><input type=" radio" name="sport" />b</label>  
</p> 

<p> 
  <select>    #下拉选项
    <option>d</option>
    <option>&</option>
    <option>g</option>
  </select>  
</p>

<input list="countries" />  #在什么范围内给提示
<datalist id=" countries">  
  <option>Greece</option>  
  <option>United Kingdom</option>
  <option>United States </option>
</datalist>

4.9 文本类标签

blockquote块级引用、cite短引用、q引用（具体内容）、code代码引用 pre多行、strong 含义上重要严重、em重在语气上重读

4.10 内容划分

头部信息 header 导航栏nav

一个页面只有一个main标签 article放文章

asine跟内容相关但不直接属于页面的内容

footer 页面尾部标签

4.11 语义化是什么

HTML 中的元素、属性、属性值都拥有某些含义
开发者应遵循语义来编写HTML

4.11.1 语义化的好处：

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

4.11.2 如何做到语义化

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

ps：HTML是传达内容，而不是样式

4.12 HTML 属性

HTML属性包含了元素的额外信息，它总是出现在HTML开始标签中，并且，通常以名/值对的形式出现（空属性除外，它可以只有属性没有值）。属性的名称和值是大小写无关的，推荐使用小写。

4.12.1 HTML属性的值的四种表现形式：

空值：只有属性名称，隐含的意思是属性的值为布尔类型。在HTML5中，一切化繁为简，对于布尔型的属性，可以不提供属性的值。如果一定要提供一个值，值就是属性名本身。如： <input type="submit" disabled="disabled"> 就可以直接写成： <input type="submit" disabled>
无引号值：如果属性的值中不包含任何空格字符、单引号、双引号、等号、大于号、小于号，也不为空，就可以省略属性值两边的引号。例： <input type=submit value=submit>
单引号值：如果属性的值中不包含任何单引号，也不为空，就可以把属性值放在单引号中。例： <input type='submit' value='submit'>
双引号值：如果属性的值中不包含任何双引号，也不为空，就可以把属性值放在双引号中。例： <input type="submit" value="submit">

PS：

大多数的HTML元素都拥有多个属性，多个属性中，如果省略某个属性，则该属性使用默认值。在定义多个属性时，各属性之间没有先后次序，但属性的名/值对之间必须用空格分开。
有的属性可以接受任何值，而有的属性则只能接受预定义的值（也称作枚举值），即必须从一个标准列表中选择一个值。如，link 元素的 href 属性就可以接受任意值，而 media 属性却只能设置为 all、screen、print 等预定义值中的一个。
HTML的属性中，有些属性只能用于特定元素，而有些属性可以用于任何元素。可用于任何元素的属性被称作全局属性。
HTML4中，提供了 6 个全局属性，它们分别是 class、id、style、title、accesskey、tabIndex、dir，到了HTML5，又新增了 contenteditable、hidden、lang、spellcheck、translate、data-* 这6 个全局属性

前端与HTML | 青训营