目录
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可以实现语义化标签的大部分功能。