HTML笔记整理
目录
1.MIME类型:所有的文件在网络上 用于显示还是用于下载都存在自己响应的类型。
2.字符集常见问题:因为字符集不统一,容易出现乱码问题,为了解决问题所以推出全球统一格式 ----UTF-8。
1.select标签与option标签共同使用实现下拉框的功能
一.html是什么
超文本标记语言(Hyper Text Markup Language)缩写为HTML,标准通用标记语言下的一个应用。HTML是一种标记语言(markup language),是网页制作所必备的工具。超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
二.html文档结构
<!DOCTYPE html> //文档类型是html类型---MIME类型
<html lang="en">
<head>
<meta charset="UTF-8">//源 编码字符集----utf-8
<title>标题</title>
</head>
<body>
正文
</body>
</html>
补充:
1.MIME类型:所有的文件在网络上 用于显示还是用于下载都存在自己响应的类型。
2.字符集常见问题:因为字符集不统一,容易出现乱码问题,为了解决问题所以推出全球统一格式 ----UTF-8。
三.HTML中常见标签
(一)form标签
form标签为表单标签,主要用于收集用户数据,常用于登录、注册、表格等需要提交数据的场景。
form标签的属性包括action和method。
action:表单的提交路径,具有跳转功能。
method:表单的提交方式,主要来源于HTTP协议(HTTP协议是超文本传输协议,主要请求方式有9种),但method常用类型只有两种:get和post。
1.get方式
<form action="https://www.baidu.com/?tn=02003390_63_hao_pg" method="get" > <input type="submit" value="提交" /> </form>
效果展示:
2.post方式
<form action="https://www.baidu.com/?tn=02003390_63_hao_pg" method="post" > <input type="submit" value="提交" /> </form>
效果展示:
3.get方式和post方式的区别
get方式提交时路径上存在属性的信息,安全性低,因为get请求在路径的地址上存在属性值 url的地址是有限制的,最大为64kb。
post方式提交时路径上没有属性的信息,安全性相对较高。对于数据的性质需要安全性比较高时,一定要使用post,而且在设计写文件功能时,需要post提交方式。
(二)input标签
1.input常用类型
文本框(text)
密码框(password)
多选框(checkbox)
单选框(radio)
提交按钮(submit)
重置按钮(reset)
文件上传(file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input例子</title>
</head>
<body>
<form action="01-html第一天学习内容.html"method="get">
<p>用户名:<input type="text" name="username"/></p>
<p>密 码:<input type="password" name="pwd"/> </p>
<p>性 别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</p>
<p>
爱 好:<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="棒球"/>棒球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
<input type="checkbox" name="hobby" value="乒乓球" />乒乓球
</p>
<p><input type="submit" value="提交"></p>
<p><input type="reset" value="取消"></p>
</form>
</body>
</html>
补充:
单选框为了实现单选的效果,name属性必须取相同名字,如果没有设置相同名字则会出现可复选的效果,同时为了显示如上述的男、女或其他文字,需要在input 标签之后写出文字,如果没有单独写文字那么显示的就只有一个选择框。
(三)select标签
1.select标签与option标签共同使用实现下拉框的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>美食:
<select name="food">
<option>--请选择美食--</option>
<option value="肉夹馍">肉夹馍</option>
<option value="大盘鸡">大盘鸡</option>
<option value="兰州拉面">兰州拉面</option>
<option value="火锅">火锅</option>
<option value="串串">串串</option>
</select>
</p>
</body>
</html>
效果展示:
2.select标签的multiple属性实现多选的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>美食:
<select name="food" multiple="multiple">
<option>--请选择美食--</option>
<option value="肉夹馍">肉夹馍</option>
<option value="大盘鸡">大盘鸡</option>
<option value="兰州拉面">兰州拉面</option>
<option value="火锅">火锅</option>
<option value="串串">串串</option>
</select>
</p>
</body>
</html>
效果展示:
(四)a标签
1.a标签 超链接实现页面跳转
a标签实现外部跳转 ------ 外链接
<a href="../01-html第一天学习的内容/01-html第一天学习内容.html?username=nihao&pwd=123">外链接</a>
效果显示:
2.a标签跳转到网页的内部 -----锚点
效果显示:
(五)img标签
主要用于在页面中引入图片,它常用的两个属性src和alt。
src ---source 源代码
alt ---用于在图片无法显示时,所需要显示的文字
1.img的重要属性usemap
usemap ---用于做位图
map --- 映射
usemap和map通常一起使用。html中#跟映射有关系,name能帮我们拿到传递的数据,id就不好拿,而且id在css里面有特殊含义所以为了更好的使用map标签最好把id和class同时使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
<!--<a href="01-a标签.html"><img src="../image/classroom.png" alt="教室" border="15px" width="400px" height="200px"></a>-->
<img src="../image/classroom.png" alt="教室" border="15px" width="400px" height="200px" usemap="#first">
<map id="first" name="first">
<area shape="circle" coords="112,110,50" href="01-a标签.html" />
<!-- 圆形:shape="circle",coords="x,y,z" 这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),z是以像素为单位的圆形半径。-->
<!--这里的圆形表示选择区域,当点击选择区域便可以进入01-a标签.html里面-->
</map>
</body>
</html>
(六)列表标签
列表标签分为:无序列表<ul>、有序列表<ol>和定义列表<dl>
无序列表主要应用于导航 nav 侧栏 sidebar 商品栏等
定义列表主要运用于对项目的定义与<dt>和<dd>一起使用达到对项目的定义和描述。
(七)frameset多窗口框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<frameset rows="15%,70%,15%">
<frame src="header.html" name="header"></frame>
<frameset cols="20%,80%">
<frame src="menu.html" name="menu"></frame>
<frame src="center.html" name="center"></frame>
</frameset>
<frame src="4.html" name="footer"></frame>
</frameset>
</html>
补充:<frameset>标签不能和body标签连用
(八)多媒体标签
1.<video>视频标签
<video>
标签是一个块级元素,用于放置视频。如果浏览器支持加载的视频格式,就会显示一个播放器,否则显示<video>
内部的子元素。
controls:播放器是否显示控制栏。该属性是布尔属性,不用赋值,只要写上属性名,就表示打开。如果不想使用浏览器默认的播放器,而想使用自定义播放器,就不要使用该属性。
<video src="./video/first.mp4" controls="controls"></video>
2. <audio> 音频标签
<audio>
标签是一个块级元素,用于放置音频,用法与<video>
标签基本一致。
<audio src="./music/大雨还在下.mp3" controls="controls"></audio>