html入门
1. HTML是什么
HTML 是什么:即 HyperText Markup language 超文本标记语言,作用是定义网页的内容和结构。
2. HTML元素
- HTML是由一系列元素组成。如:
<p>Hello</P>
- 元素可以有属性,如:
<p id = "p1">Hello</p>
- 元素之间可以嵌套,如:
<p>Hello <b>Wolrd</b> </p>
- 不包含内容的元素称为空元素,如:
<img src="1.png">
或
<img src="1.png"/>
2.1 常见元素
标题:
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
段落:
<p>段落</p>
无序列表:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
有序列表:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
多级列表:
<ul>
<li>
北京市
<ul>
<li>海淀区</li>
<li>朝阳区</li>
<li>昌平区</li>
</ul>
</li>
<li>
河北省
<ul>
<li>石家庄</li>
<li>保定</li>
</ul>
</li>
</ul>
超链接:
<a href="网页地址">超链接文本</a>
图片:
<img src="文件路径">
// src 格式有 3 种:
// 文件地址
// object URL
// data URL,格式如下:
// data:媒体类型;base64,数据
<img src="data:imge/png;base64,ICDCSD7VERV9ERHVUIHERV8HER98..."
视频:
<video src="文件路径"></video>
// 上述这种写法,不能播放视频,只有个略缩图。若想播放,如下所示:
<video src="文件路径" controls></video>
音频:
<audio src="文件路径"></audio>
<audio src="文件路径" controls></audio>
3. HTML页面介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<p id="p1">Hello, world!</p>
<img src="1.png">
</body>
</html>
4. 表单
作用:收集用户填入的数据,并将这些数据提交给服务器。
语法:
method 请求方式有
- get 提交时,数据跟在 URL 地址之后。(默认)
- post 提交时,数据在请求体内
enctype 在 post 请求时,指定请求体的数据格式
- application/x-www-form-urlencoded(默认) ==================== 表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
- multipart/form-data ==================================== 文件上传需要用 multipart/form-data 格式
- application/json
服务端接收
- 对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据,Spring 接收方式是统一的,只需要用 java bean 的属性名对应请求参数名即可
- 对于 applicaiton/json 格式的数据,Spring 接收需要使用 @RequestBody 注解 + java bean 的方式
表单项提供多种收集数据的方式
- 有 name 属性的
表单项
数据,才会被发送给服务器
<form action="服务器地址" method="请求方式" enctype="数据格式">
<!-- 表单项 -->
<input type="text" name="uesrname">
<input type="password" name="password">
<!-- 提交表单项 -->
<input type="submit" value="提交按钮">
</form>
4.1 常见表单项
文本框:text
<input type="text" name="uesrname">
密码框:password
<input type="password" name="password">
隐藏框:hidden
<input type="hidden" name="id">
日期框:date
<input type="date" name="birthday">
单选:radio
<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
多选:checkbox
<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">
文件上传:请求方式必须是post,且enctype需要是multipart/form-data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<p id="p1">Hello, world!</p>
<img src="1.png">
<form action="http://localhost:8080/upload" method="post" enctype="multipart/form-data"
<input type="file" name="avatar">
<input type="submit" value="提交">
</form>
</body>
</html>
5. CSS
css:它用于网页的表现与展示效果。
5.1 选择器
- type 选择器 - 根据标签名进行匹配(元素选择器)
- class 选择器 - 根据元素的 class 属性进行匹配
- id 选择器 - 根据元素的 id 属性进行匹配
5.2 布局
- div
- template