这是我参加青训营的第一天
一、什么是前端
用于解决人图形界面下的人机交互问题 使用Web技术栈解决多端用户图形交互二、前端技术栈
HTML(结构和内容)、CSS(样式)、JavaScript(行为),通过网络协议,与服务器端产生联系
三、前端需要注意哪些
四、开发环境
五、什么是HTML
六、HTML的基本骨架
<html>
<head>
<meta charset="utf-8"/>
<title>这是我的第一个网页</title>
</head>
<body>
<h1>标题1 </h1>
</body>
</html>
七、一些新手值得记得的知识点
自定义列表
<html>
<head>
<meta charset="utf-8" />
<title>定义列表</title>
</head>
<body>
<dl>
<dt>导演</dt>
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
</dl>
</body>
</html>
2、各种链接（包括视频和声音，图片）
其中还可以加width,height,alt,title去补充。
3、输入（表单）
代码格式示例
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post"><!--安全性设置-->
账号：<input type="text" size="15" maxlength="10" /><br />
密码：<input type="password" size="15" maxlength="10" />
</form>
</body>
</html>
另外单选框和复选框示例
单选框必须设置name属性，一个name相当与一个组，一个组里的只能一个被选中，checked顾名思义就是默认被选中。
复选框:
你喜欢的水果：<br/>
<input type="checkbox" name="fruit" value="苹果" checked/>苹果
<input type="checkbox" name="fruit" value="香蕉" />香蕉
<input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
</form>
文件上传
<input type="file"/>
</form>
下拉列表：
<option>HTML</option>
<option>CSS</option>
<option>jQuery</option>
<option>JavaScript</option>
<option>Vue.js</option>
<option>HTML5</option>
<option>CSS3</option>
</select>
设置multiple才会会先多行显示，不设置一次只显示一行，也可以通过size直接设置一次显示几行。
同样在标签里如果设置了selected就是默认被选。
另外锚点链接和按钮有点多，放绿叶网的链接让大家自己去看
锚点链接：锚点链接 - HTML | 绿叶学习网 (lvyestudy.com)
按钮链接: 按钮 - HTML | 绿叶学习网 (lvyestudy.com)
块内元素和行内元素：
（1）块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
（2）块元素内部可以容纳其他块元素和行内元素。
（1）行内元素可以与其他行内元素位于同一行。
（2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素。
另外块内元素也可以通过css设置成与行内元素一样的特性。
html语义化
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格5</td>
<td>标准单元格6</td>
</tr>
</tfoot>
</table>
这里引进了thead和tbody,tfoot等标签，不加其实效果一样，但这是为了其他开发者好理解，利于团队协作。
提到表格就有两个属性不得不说，那就是rowspan和colspan，顾名思义就是表格中一格数据占几行或者几列。
<td colspan = "跨越的列数"></td>
嵌入页面（iframe)
、一些特殊符号：
一些常用的标签：
<html>
<head>
<metacharset="utf-8"/>
<title>1</title>
</head>
<body>
<p><strong>(a+b)<sup>2</sup></strong>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
<p><em>H<sub>2</sub>So<sub>4</sub></em>+2NaOH=Na<sub>2</sub>So<sub>4</sub>+2H<sub>2</sub>o</p>
</body>
</html>
