前端与HTML|青训营笔记

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

前端

1. 什么是前端？

• 解决GUI人机交互问题
• 跨终端
• web技术栈

2. 前端技术栈

• JS（行为动作）
• CSS（样式）
• HTML（内容）
• 前端通过HTTP网络协议与服务器端链接

HTML

1. HTML：HyperText Markup Language（超文本编辑语言）

2. HTML基本语法

• 标签和属性不区分大小写
• 空标签可以不闭合，比如：input，meta
• 属性值用双引号包裹
• 有序列表ol;无序列表ul
• dl，dt：解释列表
• 表示链接，blank表示将打开新页面，不写blank将替换原页面
• datalist标签：下拉选择框，且兼具搜索功能

3. 输入

- <input placeholder="">输入用户名
- <input type = "range">现实一个滑动条
- <input type = "number" min = "1" max = "10">
- <input type = "data">显示日期
- <textarea>文本框
- <input type = "checkbox">勾选框,可以多选
- <input type = "radio">勾选框，只能单选
- <select>
<option> </option>
</select>下拉选择框
<cite>表示引用
<pre></pre>标签中可以保留空格，换行等特殊字符

4. 内容划分标签

• header main article aside footer

5. 表格类标签与实践

				<!--align对齐方式-->
	
				<tr align="center">
					<td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
	
				<tr>
					<td>d</td>
					<td>e</td>
					<td>f</td>
				</tr>
	
				<tr>
					<td>x</td>
					<td>y</td>
					<td align="center">z</td>
				</tr>
	
			</table>

6. 表格注意事项

• 注意:W3C的TTTP协议规定的，必须以这种形式提交给服务器
• 重点强调:表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。

7. HTML的作用

• 开发者:维护，修改页面
• 浏览器：展示页面
• 搜索引擎：提取关键字，排序

8. 基本素养：传达内容，而不是传达样式

9. 总结与注意：

• 复习了HTML中一些基本标签的使用，例如基本标题的标签，表单制作的标签，同时还学习了一些新的标签的含义与使用场景，解决了一些模糊的细节概念问题，受益匪浅。
• 需要注意的地方：
  • 有序列表与无序列表
  • 表单中的行与列
  • 输入中勾选框的单选框与多选框