前端三刺客----HTML

编写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>Documenttitle>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12

2. 各部分的意义
在这里插入图片描述

开发者工具

开发者工具是浏览器中非常重要的组件, 可以查看页面的基本结构, 一般按F12即可查看
在这里插入图片描述

HTML常见的标签

注释标签

通过完成注释
在这里插入图片描述

标题标签

标题标签一共有6个 h1-h6;
数字越小,字体越大.

段落标签p

将较长的文本放入body时, 他不会像我们预想的那样分段
在这里插入图片描述

所以我们需要p标签对内容进行分段
在这里插入图片描述

换行标签

在html中回车是在页面中无法换行的. 这时候就需要但标签来进行换行.

在这里插入图片描述

格式化标签

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标签包含了各种输入的控件, 单行文本框, 按钮, 单选框, 复选框.
属性:
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.