前端青训营day2 HTML ｜豆包MarsCode AI 刷题day 2 前端与HTML 1.前端设计应该关注哪些方

day 2 前端与HTML

服务器可以通过http 协议 传输给前端 浏览器
HTML css js （浏览器）也可以通过网络协议（http) 传到服务端

1.前端设计应该关注哪些方面

功能：能否满足业务需求
美观：页面的美观程度
无障碍：是否适用于所有客户群体
安全：是否存在安全漏洞
性能：页面的加载速度和响应速度，是否流畅
兼容：是否既可以在手机上运行，也可以在PC端运行
用户体验：很重要

2.前端的边界

前端的边界：指一些前端要实现的业务、一些前端实现的技术栈等。

一些前端开发的工具、框架：

node.js
electron
react native
web rtc
webgl
web assembly

3.开发环境

浏览器：常见的浏览器都行。
编辑器：比如vscode

4.html语法

标题h1-h6
列表
- 有序列表ol（显示出来的元素前面自带index）
- 无序列表ul
- 定义列表dl：dt和dd是多对多关系，就是可以一个dt对多个dd，也可以一个dd对多个dt

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ol>

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
    <dd>陈凯歌</dd>
  <dt>主演：</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
  <dt>上映日期：</dt>
    <dd>1993-01-01</dd>
</dl>

链接：<a href="链接url">链接的文字描述</a>
多媒体渲染
- 图片：<img src="图片路径" alt="如果图片加载失败，显示的文字描述" />
- 视频：<video src="视频路径" controls></video>
- 音频：<audio src="音频路径" controls></audio>
表单类控件
- 用户输入input

<input placeholder="请输入用户名" />没填东西的时候，显示的文字描述

<input type="text" /> 用户输入文字

<input type="range" /> 页面显示滑动条可以让用户选择范围

<input type="number" min="1" max="10" /> 页面显示数字输入框，也可以点击选择数字。并且最小值为1，最大值为10

<input type="date" min="2022-01-01" max="2022-12-31" /> 页面显示日期输入框，也可以点击选择日期。并且也有最小最大的区间日期。

label标签：为表单控件添加文字描述（选择题框）

例子1

注：

checkbox是多选框（checked表示默认选中李子）

radio是单选框

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

例子2

<p>
  <label><input type="radio" />🍎</label>
  <label><input type="radio" />🍏</label>
</p>

select标签：支持下拉选项

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

datalist标签：下拉列表

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

引用标签
- blockquote 标签：快捷引用

<blockquote cite="引用东西来源于哪个网址">

</blockquote>

cite标签：短引用。一般用于引用别人的标题或者章节名（展示出来是斜体的字）

<p>我最喜欢的一本书是<cite>小王子</cite></p>

q标签：引用。一般用于引用具体的内容(展示出来的引用内容会自动加双引号)

<p>我最喜欢的一句话是<q>我是一个好人</q></p>

code标签：关于代码的引用(特殊字体展现)

<code>
    print("hello world")
</code>

pre标签：引用多行代码时使用，会保留代码的格式(特殊字体展现)

<pre>
    <code>
        print("hello world")
    </code>
</pre>

强调标签
- strong标签: 内容强调，一段文字需要重点强调的部分（显示出是粗体的字）

<strong>一定要坚持学习</strong>

em标签：语气强调，一段口语需要重读的部分（显示出是斜体的字）

The <em>cat </em> is cute

表格标签
- table标签：表格
- tr标签：表格的行
- td标签：表格的列
- th标签：表格的列，一般用于表头
- caption标签：表格的标题
- tbody标签：表格的主体
- thead标签：表格的头部

5.内容划分

盒子模型

头部：head
正文：main
底部：footer(一般放版权信息等等)

6.html语义化

6.1.什么是语义化？

就是不要乱用标签，标签本身是什么意思，就让它发挥它本身的作用。
用一段话的方式去写html代码，要思考什么标签更合适去表达我要表达的内容。

语义化的好处：很多。（总结来讲，懂的都懂）

6.2.如何做到语义化？

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

7.谁在使用我们写的html代码

其他开发者，修改维护页面
浏览器，展示页面
搜索引擎，爬虫，爬取页面内容
屏幕阅读器，盲人用户

前端青训营day2 HTML ｜ 豆包MarsCode AI 刷题