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

什么是前端

总结：前端工程师使用Web技术栈解决多端图形人机交互问题。

前端技术栈

HTML定义了网页的结构，css定义元素样式，js定义交互。浏览器通过HTTP等网络协议和服务器端交互。

前端应该注意的方面

HTML定义

超文本(不是纯文本，包含图片、标题、链接、表格等)标记语言。

<p>段落</p>
属性值：属性名
<img src="photo.jpg"/>

当标签内不需要修饰什么内容时，可以不写结束标签，可以叫做单标签，不需要包裹任何的文本内容。

基本的页面结构

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

第一行用于声明- 文档声明用来告诉浏览器当前网页的版本，以使浏览器以正确的方式渲染页面，若不说明，则浏览器会以一种怪异模式渲染页面

HTML语法

标题h1-h6;段落p
列表
- 有序列表 ol (order list)
- 无序列表 ul (unorder list)
- 定义列表 dl (definition list)
  - dt (definition title)
  - dd (definition description)
  - 以上两项可多对多；键值对的形式。

<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>

多媒体
- 图片 img <img src="photo.jpg" alt="占位符"/>
- 语音 audio <audio arc="url" controls/>
- 视频 video <video src="url" contols/>

输入 input
- 文本框 text
- 范围 range
- 数字框 number
- 日期框 date
- 多行文本域 textarea
- 多选 checkbox
- 单选 radio
select
- 下拉列表 select + option
- 可选数据列表 input + datalist + option(datalist存放的是可选择的数据项，input本质还是一个输入框，所以除了选择，它也可以输入其他。)

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

前端与 HTML | 青训营笔记

什么是前端

前端技术栈

前端应该注意的方面

HTML定义

基本的页面结构

HTML语法

内容划分

语义化

谁在使用我们写的HTML

语义化的好处