HTML笔记整理

最新推荐文章于 2022-06-04 14:09:40 发布

君诀

最新推荐文章于 2022-06-04 14:09:40 发布

阅读量296

点赞数 7

文章标签： html

本文链接：https://blog.csdn.net/qq_48241564/article/details/116131828

版权

HTML笔记整理

一.html是什么

二.html文档结构

补充：

1.MIME类型：所有的文件在网络上用于显示还是用于下载都存在自己响应的类型。

2.字符集常见问题：因为字符集不统一，容易出现乱码问题，为了解决问题所以推出全球统一格式 ----UTF-8。

单选框为了实现单选的效果，name属性必须取相同名字，如果没有设置相同名字则会出现可复选的效果，同时为了显示如上述的男、女或其他文字，需要在input 标签之后写出文字，如果没有单独写文字那么显示的就只有一个选择框。

（三）select标签

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>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd"/> </p>
        <p>性&nbsp;&nbsp;&nbsp;别：<input type="radio" name="sex" value="男"/>男
            <input type="radio" name="sex" value="女"/>女
        </p>
        <p>
            爱&nbsp;&nbsp;&nbsp;好:<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>

君诀

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML笔记整理

HTML笔记整理一.html是什么超文本标记语言（HyperTextMarkupLanguage）缩写为HTML，标准通用标记语言下的一个应用。HTML是一种标记语言（markup language），是网页制作所必备的工具。超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。二.html文档结构<!DOCTYPE html> //文档类型是html类型---MIME类型<html ...
复制链接

扫一扫