前端与HTML| 豆包MarsCode AI刷题什么是前端前端工程师就是使用web技术栈解决多端图形用户界面交互问题的

什么是前端

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

前端技术栈

css和 javascript都运行在浏览器。它是可以通过 http协议和服务器进行通信，他把前端代码通过http协议从服务器上把它渲染成我们看到的页面浏览器，也可以把用户填写的内容，或者用户的一些行为通过http协议，提交到服务器端。

hmlcss javascript网络协议，比如http协议构成了前端最基础的一个技术栈。

前端应该关注哪些方面

前端的边界

随着新的技术不断的发展，前端现在能做的东西也已经远远超出就页面这样的一个简单的范畴。比如说我们可以用nodejs去开发服务器端的一些应用,再比如说我们可以使用 electron或者rng react native去开发客户端的应用，我们也可以用web rtc进行p2p的这种在线的传输，实现一个多人的会议。我们也可以用 web gl去开发出来一些非常流畅的3d的游戏。使用webAssembly可以把c++或者其他的语言编写的一些代码编译成直接在浏览器里边可以运行的一些代码。

开发环境

HTML

HTML是什么

超文本包含多部分内容。

代码解析：

1.标记了使用的html版本，从而浏览器使用相应渲染模式

2，10.根标签。

3，6.head。会放一些页面的元数据就是说页面上需要的信息，但是又不需要直接呈现给用户的。比如说页面的标题是什么?然后页面用了什么样的编码。

7，10.body。body放的就是我们需要呈现给用户的真正内容比如说一段文字，或者一个标题或者图片，像这样的一个简单的html在浏览器里面打开效果:

DOM树

浏览器拿到html之后。它会把html代码，进行解析，解析出来一个dom树，它是一个树型结构，它包含文档的一个根结点：document，包含一个 html节点，html又有head body，然后head里边有meta title；body包含h1或者p这样的一些标签。

dom树就是把html的代码把它转化成一个对应的树形结构，每一个节点称之为dom节点，我们对于自己写的一些页面，可以通过点右键然后检查。去打开浏览器的调试工具，那在这里我们就能看到一些这样的一个树形的结构，以及展开的每一个节点，就是一个dom节点。

HTML语法

标签和属性就是不区分大小写，但我们一般推荐用小写因为大家可能现在用 react或者 view这种框架比较多，我们把那个自定义的一些组件，用大写。原生的一些html标签，用小写来表示。

空的标签比如说刚才看到的image或者 input或者 meta这些标签，这个标签本身里边是不会再放其他内容这种情况下，我们可以不写那个结束标签或者说只在开始标签最后写一个斜杠。

属性值推荐使用双引号去把它引起来那某一些属性。

如果某些属性值为true，我们可以把值给省略比如说一个输入框内容它是必填的，我们可以用一个required字段表示，required只需要在这个标签添加属性，不需要去写它的值。浏览器知道必填且值为true or false

1 标题h1~h6

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

标题有6种，从 h1到h6 6个级别的标题。h1表示1级标题以此类推。

2 列表

第一类表示有序列表。列表里每一项是有顺序的比如说我们表示电影票行排行的票房排行列表有顺序，所以我们用ol，order list标签表示一个有序列表里边的每个列表项用一个|i就是list item去表示。有序列表展示出来，默认会在前面加一个数字123表示它的一个排序。

第二类，无序列表。有一些列表前后顺序是没有太大关系的所以我们用un order的 list就是 ul这样的一个标签来表示，比如说一个购物清单我先买什么后买什么没有关系，展示效果是前面会有一个小的黑点

第三类，keyvalue。有一个属性名然后后面跟一些属性值这样的一个列表，比如说我们要描述一个电影我们可以用一些这个电影的某一些属性描述，比如导演，主演或者上映日。把这样的一些组合起来的一些信息，用一个l去标起来 dl呢表示定义列表呃叫 definition list dl，dt它表示一个这个描述列表里边的标题或者叫 definition的 title啊.dt比如说，导演放在dt里边，具体它的值我们可以放在一个d d表示，这个definition的 description就是它的具体的描述比如说，这个霸王别姬这个呃电影它的导演是陈凯歌，我们就把这个值放在 dd里。

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<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>

3 链接

互联网之所以称为互联网就是因为它是互联,互联网可以通过链接去点到别的页面那链接，用一个a标签表示，a最早其实起源于anker，a最重要的属性就是href的 hyper reference，就是超链接的引用地址，href赋值为跳转到的一个地址。这个字节跳动官网点了之后，呃就这个字节跳动官网不允许我们iframe，嵌到其他页面里面。我们也可以生成一个新窗口。target等于 blank就表示，我这个链接点了之后就不是替换原有的页面，而新窗口打开。

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>

<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"
  controls
></audio>

<video
  src="/assets/video.mp4"
  controls
></video>

页面中除了用刚才提到那那些元素之外，我们也可以插入一些多媒体的一些元素比如说图片音频视频。

对图片的话就是用img这个标签，src表示解这个图片的一个地址，alt是什么：img或者 audio video，这些属于多媒体，有一些情况下，比如说有一些用户的浏览器开了省流量的模式就默认不加载图片了，在这种情况下，图片就展示不出来，这个时候，我们可以用一些降级的方式去传达这个图片所要表达的一些信息。可以给这个image标签加一个alt，这个属性表示 alternative text就是替代性的一个文本就当这张图片比如说加载失败了，或者说，由于某些原因不被加载的时候会显示出来这个文字。然后位置宽度就表示，这个图片要展示多宽。

然后接下来二个是audio，audio用一个简单的 audio标签啊，里边可以写 src表示，这个视频音频的这个url诶然后加一个 controls，这个属性表示，这个音频是需要呃默认显示，这浏览器默认的这个播放空间的，就是这样的一个一个播放按钮然后。加上进度条时间的这样的一个播放空间。

video标签，video加src属性、controls属性

4 输入

控件：通过操作提供信息。

表单类的这些控件就是用来让用户去提供一些输入信息。

最简单的二个就是input这个标签，一个文本输入框在 input里边有一个 place holder的一个属性表示一个占位符就是用户没有输入的时候，默认显示，什么那当我们去输入一些值的时候啊这个playstoser就就被替换掉了这是 input那除了输入简单的一些文本之外，那input呢，也可以去输入一些其他的一些值比如说我们让用户去输入一个范围啊可以写一个input。

map等于 range的有有这个type等于range之后它渐变上会显示个这样的滑动滑动块，用户可以选择一个值，比如说，让用户去输入一些数字的时候，我们可以加一个input等于 number，让用户去输入一个数字可以指定它的最小值或者最大值，这里边指定最小值是一最大是十，我们如果输一个其他的一个值就是它是不合法的一个值，我们也可以去通过上下这样的一个箭头去增加或者减小，可以让它减到一的时候就点不动。

也可以去输入日期相关的一些值比如说我们给input加一个type等于 date这个就表示一个日期的一个选择对日期选择会弹出来一个日期选择框，那这个日期选择框里面，我们可以去通过上下键或者什么去切换日期或者切换年月，这个使用起来非常方便，也当然也可以大家自己去输入。

有一些场景下，是需要用户去输入比较长的一些文字的那这种多行的文字，我们可以用一个text area，这样的标签表示一个多行的很多内容的这样的一个区域，默认它也是可以调整大小。输入了之后用户提交这个数据该怎么处理，会在css相关的课程里面去讲到。

可以让用户在已有的选项里边去选择一或者多个值比如说有一些选项希望用户可以选多个，我们可以用一个input type等于 check box来表示，那如果我们限制用户只能选从众多的这个选项里面去选一个，那我们可以写那个input type等于 radio。其实是通过name，这个属性去来达到的多个radio之间。如果 name相同，那其实用户选的时候就只能从 name相同的这些radio里面选，自动互斥。

下拉选择。

输入框辅助提示。

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

<input type="range">

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

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

<textarea>Hey</textarea>
#CSS
input, textarea {
  display: block;
  margin: 1em;
  width: 16em;
  font-size: inherit
}

🍎 🍏

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

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

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

5 引用

快捷引用短引用 q短的引用内容 code

<blockquote cite="http://t.cn/RfjKO0F">
<p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

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

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

前端与HTML| 豆包MarsCode AI刷题