HTML5

最新推荐文章于 2025-01-08 16:51:13 发布

Iliuhu

最新推荐文章于 2025-01-08 16:51:13 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

分类专栏： Java_Web 文章标签： html

本文链接：https://blog.youkuaiyun.com/liu_to_liu/article/details/116427041

Java_Web 专栏收录该内容

8 篇文章

订阅专栏

HTML

1、互联网的三大基石
2、HTML
3、HTML标签
4、HTML新特性

1、互联网的三大基石

在这里插入图片描述

2、HTML

HTML是一种专门对网页信息进行规范化展示的语言
HTML：超文本标记语言，描述网页的一种语言。1）超文本：文本信息、图片、声音、视频、超链接等；2）标记：标签的体现
浏览器的内核（渲染引擎）：负责读取网页内容，整理信息，计算网页的显示方式并显示页面
Web标准

3、HTML标签

3.1 标签关系

在这里插入图片描述

3.2 基本结构标签

在这里插入图片描述

3.3 文档类型声明标签

3.3.1 !DOCTYPE

文档声明标签，是告诉浏览器使用哪种HTML版本来显示网页
- <!DOCTYPE html>

3.3.2 lang语言

在这里插入图片描述

3.3.3 charset字符集

在这里插入图片描述

3.4 HTML常用标签

在这里插入图片描述

3.4.1 标题标签（h1 - h6）

在这里插入图片描述

自动加粗加黑，自动换行
align：调整标签的位置

3.4.2 段落标签（p）| 换行`单`标签（br）

在这里插入图片描述

3.4.3 文本格式化标签

在这里插入图片描述

3.4.4 div和span标签

在这里插入图片描述

3.4.5 图像`单`标签（img）和路径

在这里插入图片描述

3.4.5.1 图像标签

在这里插入图片描述

3.4.5.2 路径

在这里插入图片描述

3.4.5.2.1 相对路径

在这里插入图片描述

3.4.5.2.2 绝对路径

在这里插入图片描述

<!--相对路径 指定一个height或width会等比例放大或缩小 align:针对图片时，必须要有一个参考，才能起作用-->
<p>
    6666
    <img src="img/1.jpg" title="图片的标题" height="200px" border="2px" alt="图片找不到时，才显示" align="left">
    8888
</p>
<!--绝对路径-->
<img src="c:\\images\\2.jpg">
<!--网络路径-->
<img src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png">

3.4.6 超链接标签（a）

base标签

3.4.6.1 超链接的语法

在这里插入图片描述

3.4.6.2 超链接的分类

在这里插入图片描述

实现不同页面之间的跳转; href：指定跳转到目标资源的位置; target：打开网页的方式

<a href="index.html" target="_blank">超链接标签</a>

实现描点功能

<a href="#bottom" name="top">返回底部</a>
...
<a href="#top" name="bottom">返回顶部</a>

不会自动换行

3.4.7 注释标签和特殊字符

3.4.7.1 注释

在这里插入图片描述

3.4.7.2 特殊字符

在这里插入图片描述

3.4.7.2.1 空格标签 | 预文本标签（pre）

在这里插入图片描述

3.4.7.2.2 上标标签（sup）

3.4.7.2.3 下标标签（sub）

在这里插入图片描述

3.4.8 分割线`单`标签（hr）

在这里插入图片描述

3.4.9 字体变小标签（small）| 字体变大标签（big）

<!--字体变小标签-->
<small>字体变小标签</small>
<!--字体放大标签-->
<big>字体放大标签</big>

3.4.10 字体标签（font）

<!--字体标签  face:指定字体的风格-->
<font color="red" size="25px" face="宋体">字体标签</font>

3.4.11 表格标签（table）

表格是用来展示数据的

3.4.11.1 表格的基本语法

在这里插入图片描述

3.4.11.2 表头单元格标签

在这里插入图片描述

3.4.11.3 表格属性

在这里插入图片描述

3.4.11.4 表格结构标签

在这里插入图片描述

3.4.11.5 合并单元格

在这里插入图片描述

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
	<thead>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody align="center">
		<tr>
			<td>AA1</td>
			<td colspan="2">A1</td><!-- 跨列合并 -->
			<!-- <td>15</td> -->
		</tr>
		<tr>
			<td rowspan="2">AA2</td><!-- 跨行合并 -->
			<td>A2</td>
			<td>25</td>
		</tr>
		<tr>
			<!-- <td>AA3</td> -->
			<td>A3</td>
			<td>35</td>
		</tr>	
	</tbody>
</table>

在这里插入图片描述

3.4.12 列表标签

表格是用来显示数据的，那么列表就是用来布局的
列表的最大特点就是整齐、整洁、有序、它作为布局会更加自由和方便
列表分为三大类：无序列表、有序列表和自定义列表

3.4.12.1 无序列表

在这里插入图片描述

3.4.12.2 有序列表

在这里插入图片描述

3.4.12.3 自定义列表

<dl>
    <dt>java</dt>
    <dd>javaEE</dd>
    <dd>javaME</dd>
    <dd>javaSE</dd>
</dl>

在这里插入图片描述

3.4.13 表单标签（form）

表单目的为了收集用户信息

3.4.13.1 表单的组成

在这里插入图片描述

3.4.13.1.1 表单域

1）在写表单元素之前，应该有个表单域把我们进行包含
2）表单域是form标签

3.4.13.1.2 表单控件（表单元素）

3.4.13.1.2.1 input输入表单元素

在这里插入图片描述

<form action="demo.php" method="get" name="name1">
	<!-- text 文本框 用户可以输入任何文字 -->
	用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
	
	<!-- password 密码框 用户看不见输入的密码 -->
	密码：<input type="password" name="pwd"/> <br>
	
	<!-- radio 单选框 可以实现多选一 -->
	<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才能实现多选一 -->
	<!-- 单选框和复选框设置checked属性，当页面打开的时候把就可以默认选中这个按钮 -->
	性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"> <br>
	
	<!-- checkbox 复选框 实现多选一 -->
	爱好：吃饭<input type="checkbox" name="hobby" value="吃饭">睡觉<input type="checkbox" name="hobby" value="睡觉" checked="checked"> <br>
	
	<!-- 点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器 -->
	<input type="submit" value="免费注册">
	
	<!-- 重置按钮可以还原表单元素初始的默认状态 -->
	<input type="reset" value="重新填写">
	
	<!-- 普通按钮 后期结合js使用-->
	<input type="button" value="获取短信验证码"><br>
	
	<!-- 文件域 使用场景 上传文件使用的 -->
	上传头像：<input type="file" name="" id="">
</form>

label标签

<label for="text">用户名：</label><input type="text" id="text"><br>
<input type="radio" id="nan" name="sex"><label for="nan">男</label>
<input type="radio" id="nv" name="sex"><label for="nv">女</label>

3.4.13.1.2.2 select下拉表单元素

在这里插入图片描述

<form action="" method="post">
	贯籍：
	<select name="">
		<option>山东</option>
		<option>北京</option>
		<option selected="selected">天津</option>
	</select>
</form>

3.4.13.1.2.3 textarea文本域元素

在这里插入图片描述

<!--
    action：表单提交的位置
    method：表单提交的方式；
    1）get：参数会依附于url地址之后。利用get方式提交数据，数据的长度有限制的；利用get方式提交数据，是不安全的
    2）post：参数不会依附于url地址之后；利用post处理参数不受限制；post提交数据比较安全
-->
    <form action="https://www.baidu.com/s" method="get">
        <!--普通文本框-->
        <input type="text" name="wd" id="">
        <input type="submit" value="百度一下">
    </form>

<form>
        <!--普通文本框-->
        账号：<input type="text" name="zh" value="123" /> <br>
        密码：<input type="password" name="pwd" value="123" /> <br>

        <!--单选框 实现单选的效果必须指定同一个name属性-->
        男：<input type="radio" name="sex" checked="checked"/>
        女：<input type="radio" name="sex" /> <br>

        <!--多选框-->
        足球：<input type="checkbox" checked="checked" />
        篮球：<input type="checkbox" checked="checked" />
        皮球：<input type="checkbox" /> <br>

        <!--多行文本框-->
        个人介绍：<textarea cols="15" rows="20"></textarea> <br>

        <!--文件选择框-->
        <input type="file" name="file" /> <br>

        <!--隐藏框-->
        <input type="hidden" name="sno" value="20180906" /> <br>

        <!--下拉框-->
        <select name="ch">
            <option value="1">中国1</option>
            <option value="2" selected="selected">中国2</option>
            <option value="3">中国3</option>
        </select> <br>

        <!--提交按钮-->
        <input type="submit" value="提交"> <br>

        <!--清除按钮-->
        <input type="reset" value="清除"> <br>

        <!--普通按钮 结合javascript时间来使用的-->
        <input type="button" value="提交">
    </form>

综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
	</head>
	<body>
		<h4>青春不常在，抓紧谈恋爱</h4>
		<table width="600">
			<tr>
				<td>性别</td>
				<td>
					<input type="radio" name="sex" id="nan" checked="checked"><label for="nan"><img src="#" > 男</label>
					<input type="radio" name="sex" id="nv"><label for="nv"><img src="#" > 女</label>
				</td>
			</tr>
			<tr>
				<td>生日</td>
				<td>
					<select>
						<option>--请选择年份--</option>
						<option>2020</option>
						<option>2021</option>
						<option>2022</option>
					</select>
					<select>
						<option>--请选择月份--</option>
						<option>01</option>
						<option>02</option>
						<option>03</option>
					</select>
					<select>
						<option>--请选择日--</option>
						<option>10</option>
						<option>11</option>
						<option>12</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>所在地区</td>
				<td><input type="text" value="北京"></td>
			</tr>
			<tr>
				<td>婚姻状况</td>
				<td>
					<input type="radio" name="marry" id="NO" checked="checked"><label for="NO">未婚</label>
					<input type="radio" name="marry" id="YES"><label for="YES">已婚</label>
					<input type="radio" name="marry" id="NAN"><label for="NAN">离异</label>
				</td>
			</tr>
			<tr>
				<td>学历</td>
				<td><input type="text" value="博士后"></td>
			</tr>
			<tr>
				<td>喜欢的类型</td>
				<td>
					<input type="checkbox" name="love" id=""> 妩媚的
					<input type="checkbox" name="love" id=""> 小鲜肉
					<input type="checkbox" name="love" id=""> 可爱的
					<input type="checkbox" name="love" id="" checked="checked"> 都喜欢
				</td>
			</tr>
			<tr>
				<td>个人介绍</td>
				<td>
					<textarea>个人简介</textarea>
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="免费注册"></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="checkbox" checked="checked">我同意注册条款和会员加入标准
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<a href="#">我是会员，立即登录</a>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<h5>我承诺</h5>
					<ul>
						<li>年满18岁、单身</li>
						<li>抱着严肃的态度</li>
						<li>真诚寻找另一半</li>
					</ul>
				</td>
			</tr>
		</table>
	</body>
</html>

3.4.14 跑马灯标签（marquee）

<!--跑马灯标签   direction:方向 scrollamount:滚动时间-->
<marquee direction="right" scrollamount="40px">进口发动机啊</marquee>

3.4.15 框架标签（iframe）

<ul>
    <li><a href="http://www.baidu.com" target="ifm"> 百度 </a></li>
    <li><a href="http://www.taobao.com" target="ifm"> 淘宝 </a></li>
    <li><a href="http://www.jd.com" target="ifm"> 京东 </a></li>
</ul>

<!--框架学习 width:宽度 height：高度 src:默认路径-->
<iframe width="600px" height="450px" name="ifm" src="http://www.baidu.com"</iframe>

3.4.16 frameset

不推荐使用，在H5中删除了这个标签，在移动端上表现不出来

<frameset rows="150px.*.100px">
    <!--顶部部分-->
    <frame src="admin/top.html" noresize="noresize"/>
    <!--中间部分-->
    <frame />
    <frameset cols=10%.*"">
        <!--左侧部分-->
        <frame src="admin/left.html"/>
        <!--右侧部分-->
        <frame src="admin/right.html"/>
    </frameset>
    <!--底部部分-->
    <frame src="admin/bottom.html"/>
</frameset>

4、HTML新特性

4.1 HTML5新增的语义化标签

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<style type="text/css">
			header,nav{
				height: 120px;
				background-color: pink;
				border-radius: 15px;
				width: 800px;
				margin: 15px auto;
			}
			section{
				width: 500px;
				height: 300px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<header>头部标签</header>
		<nav>导航栏标签</nav>
		<section>某个区域</section>
	</body>
</html>

4.2 HTML5新增的多媒体标签

在这里插入图片描述

4.2.1 视频（video）

在这里插入图片描述

<video src="./media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" width="100%" loop="loop" poster="./images/1.jpeg"></video>

<video width="800" height="">
			<source src="myvideo.mp4" type="video/mp4"></source>
			<source src="myvideo.ogv" type="video/ogg"></source>
			<source src="myvideo.webm" type="video/webm"></source>
			<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
				<param name="movie" value="myvideo.swf" />
				<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
			</object>
			当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
		</video>

4.2.2 音频（audeo）

在这里插入图片描述

<audio src="./media/mi.mp3" controls="controls">
	当前浏览器不支持audio
</audio>

在这里插入图片描述

4.3 HTML5新增的input标签

在这里插入图片描述

<!-- input标签必须添加在form表单域中 -->
<form action="">
	<ul>
		<li>邮箱：<input type="email" ></li>
		<li>网址：<input type="url" ></li>
		<li>日期：<input type="date" ></li>
		<li>时间：<input type="time" ></li>
		<li>数量：<input type="number" ></li>
		<li>手机号码：<input type="tel" ></li>
		<li>搜索：<input type="search" ></li>
		<li>颜色：<input type="color" ></li>
		<li><input type="submit" value="提交"></li>
	</ul>
</form>

4.4 HTML5新增的表单属性

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<style>
			input::placeholder{
				color:pink;
		</style>
	</head>
	<body>
		<form action="">
			<input type="search" name="" id="" required="required" placeholder="hello world" autofocus="autofocus" autocomplete="off">
			<input type="submit" value="提交">
		</form>
	</body>
</html>