1. 什么是 HTML
HTML(Hyper Text Markup Language),超文本标记语言
超文本:比文本要强大,通过链接和交互方式来组织和呈现信息的文本形式,不仅有文本,还可能包含图片、音频、或者自己已经审阅过的学者所加的评注、补充或脚注等
标记语言:由标签构成的语言
HTML 的标签都是提前定义好的,使用不同的标签,表示不同的内容,如以下代码:
上面代码中的 <h1><h2><h3> 就是标签
1.1 认识 HTML 标签
HTML 代码是由 “标签” 构成的,特点如下:
- 标签名(body)放到 < > 中
- 大部分标签成对出现,<h1> 为开始标签,</h1> 为结束标签
- 少数标签只有开始标签,称为 “单标签”
- 开始标签和结束标签之间,写的是标签的内容
- 开始标签中可能会带有 “属性” (如:id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码),如下代码
<h3 id="myId">我是三级标题</h3>
1.2 HTML 文件基本结构
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>
- html 标签是整个 html 文件的根标签(最顶层标签)
- head 标签中写页面的属性
- body 标签中写的是页面上显示的内容
- title 标签中写的是页面的标题
1.3 标签层次结构
- 父子关系
- 兄弟关系
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>
其中:
- head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
- title 是 head 的子标签,head 是 title 的父标签
- head 和 body 之间是兄弟关系
tip:
可以使用浏览器的开发者工具查看页面的结构
F12 或 鼠标右键检查,开启开发者工具,切换到 Elements 标签,就可看到页面结构细节
标签之间的结构关系,构成了一个 DOM 树,DOM 是 Document Object Mode(文档对象模型)的缩写
1.4 HTML 快速入门
开发工具:Visual Studio Code
在 VS Code 中创建文件 xxx.html,直接输入 ! ,按 Enter 或 tab 键,此时能自动生成代码的主体框架,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
在 <body></body> 标签中,任意书写文字,按 Ctrl + s 保存文件,通过浏览器访问即可,如:
1.5 HTML 常见标签
1.5.1 标题标签 h1-h6
从 h1 到 h6,数字越大,字体越小
1.5.2 段落标签:p
在 HTML 中,段落、换行符、空格都会失效,如果需要分成段落,需要使用专门的标签
p 标签表示一个段落
tip:
- p 标签描述的段落,前面没有缩进
- 自动根据浏览器宽度来决定排版
- html 内容首尾处的换行、空格均无效
- 在 html 中文字之间输入的多个空格只相当于一个空格
- html 中直接输入换行不会真的换行,而是相当于一个空格
1.5.3 换行标签:br
换行通过 <br/> 标签实现,br 是 break 的缩写,表示换行
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有很大的空隙
<br/> 是规范写法,不建议写成 <br>,虽然浏览器有很好的 “鲁棒性”,但这里没有问题,不代表后面也没问题
1.5.4 图片标签:img
img 标签必须带有 src 属性,表示图片的路径
<img src="rose.jpg">
此时要把 rose.jpg 这个图片放到和 html 中的同级目录中
img 标签的其他属性:
width / height:控制宽度高度,高度和宽度一般改一个就行,另一个会等比例缩放,否则就会图片失衡
border:边框,参数是宽度的像素,但是一般会使用 CSS 来设定
tip:
- 属性可以有多个,不能写到标签之前
- 属性之间用空格分割,可以是多个空格,也可以是换行
- 属性之间不分先后顺序
- 属性使用 “键值对” 的格式来表示
关于目录结构:
对于一个复杂的网站,页面资源很多,这种情况可以使用目录把这些文件整理好
1. 相对路径:以 html 所在位置为基准,找到图片的位置
- 同级路径:直接写文件名即可(或者 ./)
- 下一级路径:image/1.jpg
- 上一级路径:../image/1.jpg
2. 绝对路径:一个完整的磁盘路径,或者网络路径
- 磁盘路径 D:/rosr.jpg(最好使用 /,不要使用 \)
- 网络路径 https://cn.bing.com/images/search?view=detailV2&ccid=wtpfIxZv&id=0EB129930EAA55858F09715E195BAEA0462DF70E&thid=OIP.wtpfIxZvYE3XmBVy7hovYgHaEn&mediaurl=https://img-blog.csdnimg.cn/4dfc7057ff0f406187a2c7def724b99a.png&exph=508&expw=816&q=java&simid=608049172503483542&form=IRPRST&ck=0498F3C0DC5285A86C54AA8EBE301A5A&selectedindex=1&itb=0&ajaxhist=0&ajaxserp=0&vt=0&sim=11
1.5.5 超链接:a
href:必须具备,表示点击后会跳转到哪个页面
target:打开方式,默认是 _self,如果是 _blank 则用新的标签页打开
链接的几种形式:
1. 外部链接:href 引用其他网站的地址
<a href="https://www.baidu.com">百度</a>
2. 内部链接:网站内部页面之间的链接,写相对路径即可
在一个目录中,先创建一个 demo1.html,再创建一个 demo2.html
target 设置为 _blank
3. 空链接:使用 # 在 href 中占位
<a href="#">空链接<a>
用于此处需要插入超链接,但还不知道插入哪个的时候
1.5.6 表格标签
- table 标签:表示整个表格
- tr:表示表格的一行
- td:表示一个单元格
- thead:表格的头部区域
- tbody:表格的主体区域
table 包含 tr,tr 包含 td
表格标签中有一些属性,可以用于设置大小边框等,但是一般使用 CSS 方式来设置,这些属性都要放到 table 标签中:
- align 是表格相对于周围元素的对齐方式,align="center"(不是内部元素的对其方式)
- border 表示边框,1 表示有边框(数字越大,边框越粗),"" 表示没边框
- cellpadding:内容距离边框的距离,默认 1 像素
- cellspacing:单元格之间的距离,默认 2 像素
- width / height:设置尺寸
快速生成:
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>10</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
</table>
加上属性:
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
1.5.7 表单标签
表单是让用户输入信息的重要途经,分为两个部分:
- 表单域:包含表单元素的区域,重点是 form 标签
- 表单控件:输入框,提交按钮等,重点是 input 标签
1) input 标签
各种输入控件,单行文本框、按钮、单选框、复选框
- type(必须有),取值种类很多,如:button、checkbox、text、file、image、password、radio 等
- name:给 input 起了个名字,尤其是对于单选按钮,具有相同的 name 才能多选一
- value:input 中的默认值
- checked:默认被选中(用于单选按钮和多选按钮)
常用的类型:
1. 文本框
2. 密码框
3. 单选框
tip:单选框之间必须具备相同的 name 属性,才能实现 多选一 效果
4. 复选框
5. 普通按钮
当前点击了没有反应,需要搭配 JS 使用
6. 提交按钮
<form action="demo1.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
提交按钮必须放到 form 标签中,点击后就会尝试给服务器发送请求
2) select 标签
下拉菜单,option 中定义 selected="selected" 表示默认选中
3) textarea 标签
文本域中的内容就是默认内容,空格也会有影响
rows 和 clos 不会直接使用,都是用 CSS 来改的
4) form 标签
<form action="demo1.html">
...[form 的内容]
</form>
描述了要把数据按照什么方式,提交到哪个页面中
5) 无语义标签:div & span
div 标签,division 的缩写,含义是分割
span 标签,含义是跨度
类似于两个盒子,用于网页布局
div 是独占一行的,是一个大盒子
span 不独占一行,是一个小盒子
1.6 练习:用户注册
用户注册界面:
代码:
<h1>用户注册</h1>
<table>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
</table>
<div>
<input type="button" value="注册">
<span>已有账号?</span><a href="#">登录</a><br/>
</div>