# 前言
本文默认你已经有过一点 html 基础，了解本文提到的名词等。
一些常用标签可以去菜鸟教程之类的直接搜，哪个标签忘了就搜哪个标签。
# 头部
<head> | |
<meta charset="UTF-8"> | |
<title>浏览器上标题</title> | |
<link rel="icon" href="../static/images/旅行.svg" type="image/x-icon" /> | |
</head> |
想要改变打开页面的图标，使用 link 标签，指定图标路径即可。找图标文件可以去字节跳动的 IconPark。
# 常用标签
# 表单
Q：提交的表单如何传到后端
A：和
javascript有关，所以先不要急
先写一个简易的表单代码：
<form> | |
<label> | |
账号： | |
<input type="text" placeholder="Username..."> <!--placehoder 是未输入时框内的提示语句 --> | |
</label> | |
<br> | |
<label> | |
密码： | |
<input type="password" placeholder="Password..."> | |
</label> | |
<br> | |
<a href="https://www.baidu.com">忘记密码</a> | |
<br> | |
<input type="submit" value="登陆"> | |
</form> |
想要丰富一下表单的东西，还有其他标签：
<!-- 多行文本输入 --> | |
<label> | |
<textarea placeholder="文本内容..." cols="10" rows="10"></textarea> | |
</label> | |
<!-- 勾选框 --> | |
<label> | |
<input type="checkbox"> | |
我同意本网站的隐私政策 | |
</label> | |
<!-- 单选框：需要用 name 分组，同组内只能选选一个 --> | |
<label> | |
<input type="radio" name="role"> | |
学生 | |
</label> | |
<label> | |
<input type="radio" name="role"> | |
教师 | |
</label> |
# div 标签与布局
你可以将整个 html 页面看作一个盒子， div 标签将盒子分块，分得的块又可以看作一个盒子，我们就又可以在这个小盒子里面再划分。通过将整个页面划分为特定的盒子，我们可以实现想要的布局。在以前，布局是一件很麻烦的事，后来 css 出现了 flex 布局，直接成为主流的布局方式，felx 的牛逼之处在于可以控制下一个盒子的位置。
这里推荐康文昌老师对 html 和 css 布局的视频讲解：
- html 基础
- css flex 布局
推荐文章：https://juejin.cn/post/6844904116141948936
遇到了再用，不会再去搜。
