目录
0 前言
从这篇开始我们开启前端知识的了解，在前端中我们会用到HTML、CSS、JavaScript。其中HTML是用来描述页面的结构，CSS是用来描述页面的样式（大小颜色背景等），JS就是用来描述页面的动态交互。HTML是标签化的语言,通过浏览器来运行的，只要用浏览器打开对应的html文件就能执行。
1 HTML介绍
<html>
<head>
</head>
<body>
hello world
</body>
</html>1.1 特点
- html是由一些标签构成的
- 每一个标签都有开始标签和结束标签 <html> </html> 也有部分标签只有开始标签，没有结束标签
- 标签之间可以嵌套，就构成了树形结构，html是head和body的父标签，head和body是html的子标签，html的标签（tag），也可以称为元素（element）
1.2 软件编辑运行
- 专业版idea，社区版的idea只能支持html，不支持css
- VSCode，这是一个编辑器，占用内存较小，可以在上面安装额外插件实现更多功能
- 编写html可以使用VSCode，运行html使用浏览器运行即可，改变后一定需要手动保存并在浏览器刷新
- 通过输入！就可以生成html初始模板
- <!DOCTYPE html>：声明文件格式
- <html lang="en"> </html>：html标签是可以在开始标签中写属性（键值对）的，使用空格来分割键值对，使用=来分割键和值（=两侧不能有空格）。这里的lang= 表示languag，en= 表示english，就是声明语言的种类
- meta标签用来设置字符集、符号相关
- <title>Document</title>：html标题
2 HTML常用标签
2.1 注释标签
- <!-- 这是注释 -->
- ctrl+/ 快捷键
2.2 标题标签
这里的标签是独占一行的，叫做块级元素
2.3 段落标签p
段落之间会换行并且有明显的段落间距
lorem生成随机字符串
2.4 换行标签
在html中手动换行是不会生效的，必须用br换行才能生效
2.5 格式化标签
- 加粗 strong/b
- 倾斜 em/i
- 删除线 del/s
- 下划线 ins/u
- 以上标签是不独占一行的标签，叫做行内元素。
2.6 图片标签
图片标签必须带有src属性，这个属性用来指定图片的路径（可以是绝对路径和相对路径）
alt用于当图片无法打开，显示图片是什么，例如下面的hahaha，图片地址是错误的，打开就是我们常常见到的那种加载不出来裂了的小图标，但是旁边就会显示hahaha
2.7 a标签 超链接
2.8 表格标签
- table：表示整个表格
- tr：表示表格的一行
- td：表示一个单元格
- th：表示表头单元格，会居中加粗
- thead：表格的头部区域，范围比th大
- tbody：表格的主体区域
- 其中居中是用css实现的
2.9 列表标签
- 有序列表：ol（orderlist）
- 无序列表：ul（unorderlist）
- 列表项：li（listiteam）
2.10 表单标签
- form标签：进行前后端交互，构造一个HTTP请求
- input标签：有很多形态，表示不同的元素效果
input还有按钮形态：
2.11 下拉菜单
select下拉菜单，里面的每个选项都是option标签
2.12 多行文本框
textarea多行文本框，input里面只能写一行
3 总结
以上标签都是常用标签，也都叫做语义化标签，每个标签都有特定的功能和用途，还有两个特殊的标签叫做无语义标签，分别是div（块级元素）和span（行内元素），这两个标签搭配css和js可以实现语义化标签的大部分功能。
1575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
