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

青训营课程笔记

什么是前端

对于网站来说，通常是指网站的前台部分，包括网站的表现层和结构层（通俗点就是用户可以看到的部分）。总结一下，浏览器、APP、应用程序的界面展现和用户交互就是前端。前端的技术栈主要有HTML(掌控内容)、CSS(掌控样式)、JavaSCtipt(掌控行为及其功能)。

前端解决的基本问题

解决人GUI交互问题
跨终端例如(PC/移动浏览器)、客户端小程序、VR/AR等

此外前端要求应该要美观、功能齐全、无障碍使用、性能好、安全、兼容性好。

什么是HTML

HTML 被称为超文本标记语言，英文全称Hyper Text Markup Language，标准通用标记语言下的一个应用，不是一种编程语言。
Hyper Text：（超文本）图片、标题、链接、表格
Markup Language：（标记语言）开始标签、结束标签 :< h1>文章标题< /h1>

认识常见的标签

1.换行标签<br>

2.加粗字体<strong>

3.斜体<em></em>斜体和加粗标签可以嵌套使用

4.给文本加删除线标签<del>删除线</del>

5.给文本增添下划线标签<ins></ins>

6.<textarea>文本域，当输入内容较多时可以采用文本域；文本框的大小可以调节。（可以用cols=“每行字数” row=“行数来限制文本框的内容大小”）

7<label></label>标签用于绑定一个元素，当点击<label>标签内的文本时，浏览器会自动的将焦点光标转到或者选择对应的表单元素上，用来增加用户体验。使用语法 <label for="1">one</label> <input type="radio" name=" " id="1''>

8.<placeholder>标签是用户的文本框为输入内容时，默认显示的灰色文字，作为提示。

a标签

anchor ——> 锚标签的功能语法!

javascript<a href="https://www.baidu.com" target="blank">点我去首页</a> target = “_blank”意思是在新标签中打开这个地址；去掉后则链接所打开的页面会在当前显示。

表单标签

<form> m元素定义 HTML 表单 <input> 元素是最重要的表单元素。

input元素有很多形态，根据不同的 type 属性。 type可以加的属性；

input type = “text”这个是输入框的意思;
input type = “password”这个是密码框的意思，默认是暗文（可以加value，可更改输入框中的内容）;
input type = “submit”是提交的组件，也就是登录
input type = “submit” value = “login”这样就改变了提交框的值;
input type = “radio”是单选框;
input type = “checkbox”是复选框;
input type = "reset"是重置按钮；
input type = "image"定义图像形式提交按钮
input type = "hidden''定义隐藏输入字段
input type = "file"定义输入字段和“浏览”按钮供上传文件。

表格标签

表格由 <table> 标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格(由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：<table border="1">添加border属性即可

cellpadding=" "表示表格内元素与表格框间的距离。 cellspacing=" ''表示表格框之间的间距。

合并单元格

1.跨行合并； rowspan="合并单元格的的个数" 2.跨列合并； colspan=''合并单元格的个数'' 目标单元格；跨行：则以上面的单元格为目标单元格跨列；则以左边的单元格为目标单元格

合并完删除多用单元格代码即可。

HTML语义化

HTML中的元素、属性及属性值都有特定含义，这些含义及语义。
开发者应该遵循语义来编写HTNL，根据内容的结构，选择合适的标签，便于开发者阅读和机器的阅读，从而写出更加优雅的代码，为浏览器的爬虫和机器更好的解析。

前端与 HTML | 青训营笔记