文章目录
编写HTML的预知
开发工具的选择
- 选择IDEA
IDEA的社区版支持HTML代码, 但是不支持CSS,和JS
IDEA的专业版支持 HEML, CSS, 和 JS(但是要money) - 选择vscode
vscode对前端非常支持, 可以说是现在前端开发工具的主流之一
代码的必要格式及其意义
- 必要格式
! + Tab键 可以快速生成此格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. 各部分的意义
开发者工具
开发者工具是浏览器中非常重要的组件, 可以查看页面的基本结构, 一般按F12即可查看
HTML常见的标签
注释标签
通过<!---->
完成注释
标题标签
- 标题标签一共有6个 h1-h6;
- 数字越小,字体越大.
段落标签p
将较长的文本放入body时, 他不会像我们预想的那样分段
所以我们需要p标签对内容进行分段
换行标签
在html中回车是在页面中无法换行的. 这时候就需要但标签<br/>
来进行换行.
格式化标签
1. 加粗: strong 标签 和 b 标签
2. 倾斜: em 标签 和 i 标签
3. 删除线: del 标签 和 s 标签
4. 下划线: ins 标签 和 u 标签
特殊字符
有些特殊字符在html文件中无法表示, 像多个空格就会变成一个空格显示, 这就需要转义字符
空格:
小于号: <
大于号: >
按位与: &
图片标签
图片标签为 img单标签, 其有很多属性, 其中src为最重要的属性, 表示了图片的所在的位置.
src可以是相对路径, 也可以是绝对路径
alt属性: 当图片无法正确显示时, 会显示alt中的内容
title属性: 提示文本 当鼠标放在图片上时, 会显示.
width和height设置宽高
其单位时px, 是像素的意思
超链接
页面跳转超链接
通过a标签 可以实现页面的跳转
下载文件超链接
若href对应的链接是一个文件, 那么在点击时就会触发下载操作
表格标签
表格标签是一组标签的配合:
1. table 标签: 表示整个表格
2. tr: 表示表格的一行
3. td: 表示一个单元格
4. th: 表示表头单元格. 会居中加粗
5. thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
6. tbody: 表格得到主体区域.
7. table 包含 tr , tr 包含 td 或者 th.
列表标签
无序列表(unorderlist) ul li
有序列表(orderlist) ol li
自定义列表 dl dt
表单标签
form标签
表单是让用户输入信息的重要途径.
通过 form,借助这个 form 用户可以输入一些信息,并把这些信息提交到服务器上面
input标签
input标签包含了各种输入的控件, 单行文本框, 按钮, 单选框, 复选框.
属性:
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.
文本框
type 为 text
密码框
type 为 password
单选框
type 为 radio
我们发现单选框可以同时选择, 所以可以设置相同的name属性 来达到排斥效果
默认选择可以用checked来设置
这样默认性别就是女了
复选框
复选框可以一次选多个选项, 通过 checkbox 类型的 type 搭配 label 标签来实现
按钮
通过button实现按钮功能, value就是按钮里显示的文字
通过onclick可以实现点击的提示
下拉菜单
通过select来实现下来菜单
selected可以实现默认选中
多行编辑框
textarea 标签可以实现多行编辑框
这样就可以实现 30 * 10的文本框
无语义标签 div & span
无语义标签没有明确的角色定位, 但是可以代替上面绝大多数标签
div标签 默认是独占一行,span标签 默认是一个行内元素