HTML5笔记+案例

最新推荐文章于 2024-09-02 10:22:03 发布
最新推荐文章于 2024-09-02 10:22:03 发布
阅读量3.2k 收藏 12
点赞数 3
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sumuqi/article/details/107013745
版权
本文详细介绍了HTML5的基础知识，包括HTML5的版本、文档结构、标签组成、注释、实体字符、文档类型。重点讲解了常用标签如列表、头部标签、超链接、表格、表单以及HTML5新增的结构和语义标签、多媒体元素等内容，并通过多个实战案例展示了这些知识点的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HTML

一 . html简介
1.HTML是什么？

HTML:hyper text makrup language超文本标记（标签）语言由各种标签组成，用来制作网页，告诉浏览器该如何显示页面

2.作用
  • 制作网页，控制网页和内容的显示
  • 插入图片、音乐、视频、动画等多媒体
  • 通过链接来检查信息
  • 使用表单获取用户数据，实现交互
3.版本

W3C:world wide web consortium万维网联盟，制定Web技术相关标准和规范的组织，HTML就是由W3C制定的标准

两个版本：HTML 4.0.1、HTML5.0:通常H5

4.扩展名

HTML文档是以.html或.htm结尾

二、HTML文档结构
1.基本结构
1.1简介
  • html标签是由尖括号括号的关键词，如<html>,通常标签都是成对出现的,如<html></html>
  • 以<html>为根标签，包含<head>头部和<body>主体部分
  • 头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键词等摘要信息
  • 主体部分提供网页要显示的内容，真正显示页面中的
  • 合理缩进
  • 标签名不区分大小写，但一般要小写
1.2开发工具

记事本notepad，sublime，notepad++，，dreamweaver，vscode，webstorm等

使用 步骤：

1.新建文件（ctrl+n），然后保存ctrl+s，指定扩展名.html

2.编写html代码

3，在浏览器中打开文件进行验证效果

1.3浏览器

常见的浏览器ie微软，chrome谷歌，firefox火狐，safari苹果

浏览器作用：读取html文件，并以网页的形式进行显示

浏览器不会直接显示html标签，而是使用标签来解释网页的内容

案例1 第一个HTML文件.html
<html >
<head>
       <title>第一个HTML文件</title>
       <meat charge="utf-8"
</head>
<body>
	欢迎学习HTML
</body>
</html>

网页效果：
在这里插入图片描述

2.标签
2.1标签的组成

一个完整的html标签的组成：

<标签名 属性名=“属性值”>内容</标签名>

属性值要使用引号引起来，一般使用双引号

2.2标签的分类

根据标签是否关闭，分为：关闭型和非关闭型

  • 关闭型：又开始标签，，也有结束标签，一般成对出现
<title>标题</title>
<body>主体</body>
<h1>一级标题</h1>
  • 非关闭型标签：只有开始标签，没有结束标签
<meta>
<br>
<hr>

根据标签是否独占一行，分为：块级标签和行级标签

  • 块级标签：显示为块状，独占一行
<h1></h1>
<hr>
  • 行级标签：在行内显示，可以与其他文本内容在同行显示
<span></span>

<html>
	<head>
		<title>标签的组成</title>
		<meta charset = "ytf-8">
	</head>
	<body bgcolor = "yellow" text="red">
		标签的组成
		<hr>

		HTML从入门到精通
		<hr>

		<hr>html简介，主讲：刘晓勇</hr>
		<hr>

		<h2>二级标题</h2>

		<h1>哈哈<h1>呵呵
		<hr>

		<span>嘿嘿</span>
		
	</body>
</html>
案例2 标签的组成.html
<!DOCTYPE html>
<html>
<head>
	<title>论美食的碰撞</title>
	<meta charset="utf-8">
</head>
<body bgcolor="pink"  text="yellow">

<hr>
快乐肥宅水
<hr>
甜甜的松软的
<h2>颜值超高</h2>

<h1>云朵</h1>面包
<hr>

<span>火锅&amp;</span>寿喜锅


</body>
</html>

网页效果:
在这里插入图片描述

2.3注释

注释在浏览器中不会显示，是用来标注解释html语句，但通过查看源代码可以看到

<!--注释内容-->
案例3 注释.html
<!DOCTYPE html>
<html long="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
      <!--这是我们的第一个HTML注释-->
      图书：&lt;&lt;云边有个小卖部&gt;&gt;
      <hr>

      景天&nbsp;&nbsp;&nbsp;&nbsp;龙葵&nbsp;&nbsp;&nbsp;&nbsp;重楼
      <hr>

      在HTML中用&amp;lt；表示小于号
      <hr>

      "html语言"或者  &quot;html语言&quot;
      <hr>

      版权所有  &copy;最右
      <hr>


      &reg;
      &times;关闭字符
      &aMp;实体字符名称严格区分大小写，即大小写敏感

</body>
</html>

网页效果：
在这里插入图片描述

2.4实体字符

实体字符也称为特殊字符，用于显示一些特殊符号：如

&实体字符的名称；

常用实体字符

&lt;  <   小于号  less  than
&gt；  >   大于号  great than
&nbsp；  空格   space 在html中对于连续的空白字符（空格、缩进、换行等），在浏览器中只显示为一个空格
&amp；   &与
&quot；   "双撇号
&copy;     版权符号 copyright
&reg；     注册符号  register
&times；    关闭符号

注意：实体字符是严格区分大小写，即大小写敏感

2.5文档类型

在HTML文档中的第一行，使用<!DOCUTYPE HTML>声明html文档的类型用来告诉浏览器页面html文档类型，简单来说，用来指定html版本规范,目前基本上使用的都是html5，

案例4 hello.html
<html >
<head>
       <title>你好，htlm</title>
       <meat charge="GBK"
</head>
<body>
	welcome to html !
</body>
</html>

网页效果：

在这里插入图片描述

三、 常用标签
1.基本标签
标签含义说明
br换行标签非关闭型标签
p段落标签关闭型标签，块级标签，
h1.h2.h3…h6标题标签按照h1到h6逐渐变小，块级标签，并且文本会加粗显示
pre预格式化标签保留编码时的格式
div分区标签常用容器来使用，一般用于页面布局划分，块级标签
span范围标签默认情况下没有任何效果，一般用来设置行内的特殊格式
ol、li有序列表有顺序的项目列表
ul、li无序列表无顺序的项目列表
dl、dt、dd定义列表对术语、图片等进行描述和定义的列表
img图像标签非关闭型标签，行级标签
1.1有序列表

ol:ordered list

li:list item

默认情况下使用阿拉伯数字，从1开始标记，可以通过属性进行修改

  • type属性：设置列表前的符号标记，取值，数字1（默认），字母a或A，罗马数字I或i
  • star属性：设置起始值，值必须是数字
1.2无序列表

ul:unodered list

li:list item

默认使用实心圆作为标记符号，可以通过属性进行修改

type属性：设置列表前的标记符号，取值；disc实心圆（默认）、circle空心圆、square正方形，none不显示符号

1.3定义列表

dl：definition list

dt：definition title

dd：definition description

1.4水平线标签
  • color.颜色

​ 两种写法：如red、green、blue、pink、white、black、orange等

​ 16进制的RGB:Red Green Blue 用法：#RRBGGBB每种颜色的取值范围0-255，转换为16进制00-FF

eg：#FF0000红色、#00FF00绿色、#0000FF蓝色、#000000黑色、#FFFFFF白色、#CCCCCC灰色、#FF7300橙色

  • size：粗细、数值

  • width宽度

    两种写法：

    ​ 像素：绝对值（固定值）

    ​ 百分比：相对值，相对于该标签所在的父容器的宽度来确定的一个百分比

  • align对齐

    取值：默认center居中 left right

    案例5 常用标签1.html
    <!DOCTYPE html>
<html lang="en">
<head>
     <mata <meta charset="utf-8">
	<title>Document</title>
</head>
<body>
      hello world
      <br>
      welcome to html!
    <hr>
      <p>
      	HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
      </p>


      <p>
      	超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
      </p>

</body>
</html>

<hr>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

    网页效果：

    在这里插入图片描述

    案例6 常用标签2.html
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
     <pre>
     	HTML从入门到精通
     	主讲：hector
     </pre>
	<hr>


	<div  style="width: 400px;height: 100px;background: pink">棉花糖</div>
	<div  style="width: 400px;height: 500px;background: yellow">肥宅快乐兽</div>
	<div  style="width: 400px;height: 100px;background: blue">hahaha</div>


	hahaha, 不要888，不要666，只要<span style="font-size: 55px;color: red">99元</span>

	
</body>
</html>

    网页效果：

    在这里插入图片描述
    在这里插入图片描述

    案例7 常用标签3.html
    <body>
	<h3>2020年网络游戏排行榜</h3>
	<ol type="1" start=5>
		<li>吃鸡</li>
		<li>王者荣耀</li>
		<li>LOL</li>
		<li>WOW</li>
	</ol>

	<hr>


	<h3>肥宅快乐兽</h3>
	<ul type="disc">
		<li>猫</li>
		<li>狗</li>
		<li>仓鼠</li>
		<li>龙猫</li>
	</ul>
      <hr>

      <h3>术语的解释</h3>
      <dl>
      	<dt>LOL</dt>
      	<dd>他是腾讯公司代理的一款网络游戏，中文名称叫英雄联盟</dd>
      	<dd>他可以分为PC端和移动端</dd>
      	<dt>HTML</dt>
      	<dd>是一种用来制作网页的标记语言</dd>
      	<dt>JAVA</dt>
      	<dd>是一种跨平台编程语言</dd>
      </dl>
</body>
</html>

    网页效果：

    在这里插入图片描述

    案例8 常用标签4.html
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr color="pink";size=8px>
	<hr color="gree" width="400px">
	<hr color="pink" width="50%" size=10>
	<div style="width:600px;height: 300px;background:#CCCCCC"> 
	<hr color="wathet red" width="50%" align="left" size="10px">
    </div>
</body>
</html>

    网页效果:
    在这里插入图片描述

    案例9 常用标签5.html
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<base href="../img/">
<body>
	<img src="../img/qq.jpg" alt="图片加载失败..."  title="这是腾讯公司的吉祥物，它的名字叫企鹅" >
	<hr>

	<img src="mac.jpg" width="400px">
	<hr>

	<img src="mac.jpg" width="50%">
    <hr>


    <div style="width:800px;hight:800px;background: red;">
    	<img src="mac.jpg" width="50%">
    </div>
</body>
</html>

    网页效果：
    在这里插入图片描述
    在这里插入图片描述

    1.5其他标签
    标签含义说明
    i斜体italic
    em强调的内容在浏览器中显示时一般为斜体
    address地址在浏览器中显示时一般为斜体，块级标签
    b加粗bold
    strong强调的内容在浏览器中显示时一般为加粗
    del删除线delete
    ins下划线
    sub下标
    sup上标
    bdo设置文本方向通过属性dir=“ltr”（left to right）“rtl”（right to left）从右到左
    abbr设置文字缩写通过title属性设置当前鼠标停留在文字上时显示的提示信息
    small相对于当前其他文本的字号减小一号
    big相对于当前基其他文本的字号增大一号
    案例10 其他标签.html
     <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	hahaha<i>kkk</i>i>lll!
	<br>
	hahaha<em>kkk</em>em>lll!
	<hr>
	welcome to<address>上海南京东路</address>
	<hr>
	HTML从<b>入门</b>到精通！
	<hr>
	HTML从 <strong>入门</strong>到精通！
	<br>
	原价：188元，优惠价，<span style="font-size:40px;color:red">98元</span>
	<hr>
	主讲:<ins>Hector</ins>
	<hr>
	水的分子表达式：H <sub>2</sub>0
	<br>
	2<sup>3</sup>=8
	<hr>
	<bdo dir="rtl">welcome to html!</bdo>
	<br>
	<bdo dir="rtl">上海自来水来自上海</bdo>
	<hr>
	<abbr title="Hyper text language">HTML</abbr>
	<br>
	<span title="Hyper text language">HTML</span>
	<hr>
	HTML从<small>入门</small>到精通
	<br>
	HTML从<big>入门</big>到精通


</body>
</html>

    网页效果：

    在这里插入图片描述

为了更好地语义化

3.头部标签

  • meta定义网页的摘要信息，如字符编码，关键字、描述、作者等信息

  • title定义网页的标题

  • style定义内部的CSS样式

  • link引用外部的CSS样式

  • script定义或引用脚本

  • base定义基础路径 默认以当前页面文件的所在位置为相对路径的参照

    案例11 头部标签.html
    <!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置字符编码 -->
	<meta charset="UTF-8">
<!-- 设置网页关键字 SEO网站优化 -->
<meta name="keywords" conten="IT教育，java开发，WEB前端，Python，Andorid开发....">
<!-- 设置网页的描述 -->
<meta name="description" content="做专业的IT教育.....">
<!-- 设置网站的作者 -->
<meta name="author" content="Hector">
<!-- 设置网页的跳转 -->
<!-- <meta http-equiv="refresh" content="2;url=https://www.baidu.com"> -->

	<title>Document</title>
	<!-- 定义内部的CSS样式 -->
	<style>
	body{
		color:red;
	}
	</style>

	<!-- 引用外部的CSS样式 -->
	<link rel="stylesheet" href="CSS文件的路径">
	<!-- 定义或引用脚本文件 -->
	<!--  <script>
		alert("哈哈");
	</script> -->
	<!-- 定义基础路径 -->
	<base href="../img/">
</head>
<body>
	IT教育，全国计算机等级考试-Hector
	<img src="heihei.gif" alt="">
	<hr>
	<img src="qq.jpg" alt="">
</body>
</html>
	<!-- 定义内部的CSS样式 -->
	<style>
	body{
		color:red;
	}
	</style>

	<!-- 引用外部的CSS样式 -->
	<link rel="stylesheet" href="CSS文件的路径">
	<!-- 定义或引用脚本文件 -->
	<!--  <script>
		alert("哈哈");
	</script> -->
	<!-- 定义基础路径 -->
	<base href="../img/">
</head>
<body>
	IT教育，全国计算机等级考试-Hector
	<img src="heihei.gif" alt="">
	<hr>
	<img src="qq.jpg" alt="">
</body>
</html>

    网页效果：

    在这里插入图片描述

    4.标签的嵌套

    一个标签中嵌套另外一个标签
    标签不能乱嵌套，如以下标签的嵌套是错误的

    </p>
		
	</div>
	<p style="width: 300px;height:300px;background: green ">
	<div style="width: 200px;height: 200px;background: blue">
	hello
		
	</div>
		
	</p>

    浏览器渲染后显示的页面代码与编码时有所不同
    chrome浏览器提供的开发工具：用来帮助开发人员查看和调试页面的
    如何打开：

    • 在页面中右键单击–>检查/审查元素/查看元素
    • 按F12

    常用工具：

    • Elements:从浏览器的角度来看页面，浏览器渲染页面时的结构
    • console:控制台，显示各种警告和错误信息
    • network:查看网络请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源所共费的时间
    案例12 标签的嵌套
    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
  aleert("嘿嘿")
 </script>
</head>
<body>
 <div style="width: 200px;height: 200px;background: blue">
<p>
 hello
</p>
  
 </div>
 <p style="width: 300px;height:300px;background: green ">
 <div style="width: 200px;height: 200px;background: blue">
 hello
  
 </div>
  
 </p>
</body>
</html>

    网页效果：
    在这里插入图片描述

    四、超链接
    1.简介

    使用超链接可以从一个页面跳转到另一个页面，实现页面之间的跳转
    当鼠标移动超链接文本上时，鼠标箭头会变成一只小手
    超链接有三种类型：

    • 普通链接/页面间链接：跳转到另一个页面
    • 锚链接：跳转到锚点（同一个页面的某个位置）
    • 功能链接：实现特殊功能（发邮件，下载）
    2.基本用法

    使用 标签创建超链接
    语法格式：

     <a href="链接地址" target="链接打开的位置">链接文本或图像</a>

    常见属性:
    href链接地址或路径:链接地址

    target链接打开的位置，取值：

    _self自身，当前，默认值 _blank空白、新的页面  _parent父层框架 自定义

    路径分类：

    • 相对路径：

    相对于当页面所在的路径为参照,不是以根开始的

    ./ 当前路径

    …/ 表示上级路径

    • 绝对路径:

      以根开始的路径

      file:///D:/静态网页/b.html

      https://www.baidu.com

      案例13 超链接
      <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <a href="http://www.baidu.com">百度</a>
 <br>
 <a href="http://www.baidu.com" target="blank">百度</a>
 <hr>
 <a href="d:/静态网页/b.html" target="blank">b</a>
 <hr>
 <a href="./c.html" target="blank">c</a>
 <!-- 当前路径 -->
 <hr>
 <a href="../d.html" target="blank">d</a>
 <hr>
 <a href="../../f.html" target="blank">f</a>
</body>
</html>

      网页效果：
      在这里插入图片描述

    3.锚链接

    3.1 简介
    点击链接后跳转到页面的指定位置（锚点anchor）
    锚链接的分类

    • 页面内的锚链接
    • 页面间的锚链接

    3.2 页面内的锚链接
    步骤：

    1. 定义锚点（标记）

       <a name="锚点名称">目标位置</a>

    2. 链接锚点

       <a href="#锚点名称">链接文本</a>
      案例14 锚链接

      在这里插入图片描述
      在这里插入图片描述
      网页效果：
      在这里插入图片描述

    3.3页面间的锚链接

       <a href="目标页面#锚点名称">链接文本</a>

    案例15 页面间的锚链接

在这里插入图片描述
网页效果：
在这里插入图片描述

4.功能链接
5. URL
5.1简介

URL:Uniform Resource Locator 统一资源定位器,用来定位资源所在的位置，常见的就是网址

https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
5.2 组成
https://www.w3school.com.cn/html5/index.asp http://www.sxgjpx.net file:///C:/Users/Administrator/Desktop/project/code/18.%E5%8A%9F%E8%83%BD%E9%93%BE%E6%8 E%A5.html ftp://10.255.254.253/ https://www.baidu.com/img/bd_logo1.png

一个完整的URL由8个部分组成：

  • 协议：prococol 如

http:超文本传输协议，用来访问WEB网站Hyper text Transfer protocol https:更加安全的协议 SSL安全套接子层

ftp文件传输协议，用来访问服务器上的文件，实现文件的上传和下载File Transfer protocol

file:文件协议，用来访问本地文件

  • 主机名hostname服务器地址或服务器Netbios名称,如www.baidu.com ftp://10.255.254.254
  • 端口：port位于主机名的后面，使用冒号进行分隔

不同的协议使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21

如果使用的是默认端口，则端口可以省略,如果使用的不是默认端口，则必须指定端口http://59.49.32.213:7070/

  • 路径：path目标文件所在的路径结构，如:https://www.bilibili.com/video/av93425449//
  • 资源resource要访问的目标文件，如bd_logo1.png
  • 查询字符串：query string 也称为参数

在资源后面使用?开头的一组名称/值

名称和值之间以=分隔，多个表达式之间用&分隔，如:?name=tom&age=2&sex=male

  • 锚点anchor，在资源后面使用#开头的文本，如#6
  • 身份认证authentication,指定身份信息，如：ftp://账户:密码@ftp.bbshh010.com
案例16 功能链接
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <a href="../img/heihei.gif">点击此处下载图片</a>
 <br>
 <a href="mailto:2057353827@qq.com">联系我们</a>
</body>
</html>

网页效果：
在这里插入图片描述

五、表格
1.简介

表格是一个规则的行列结构，每个表格是由若干行组成，每行是由若干个单元格组成
table、row、column

2.基本结构
2.1 table标签

用来定义表格
常用属性：

  • border边框,默认值为0
  • width/height宽度/高度
  • align对齐方式,取值：left center right
  • bordercolor:边框颜色
  • bgcolor:背景颜色
  • background:背景图片
  • cellspacing:间距 单元格与单元格之间的距离
  • cellpadding:边距 单元格内容与边界之间的距离
2.2 tr标签

用来定义行:table row
常用的属性：

  • align水平对齐 取值left(默认) center right
  • valign垂直对齐 取值top middle bottom
  • bgcolor:背景颜色
  • background：背景图
2.3 td标签

用来定义单元格：table data
常用属性:align valign bgcolor background

案例17 表格
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="400px" height="200px" align="center" bordercolor="pink" bgcolor="#CCCCCC" background="../img/p1.jpg" cellspacing="0" cellpadding="0px">
		<tr align="right" valign="top">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr align="center" valign="middle" bgcolor="pink">
			<td>hello</td>
			<td bgcolor="yellow" valign="bottom">hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr valign="bottom" background="../img/heihei.gif">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

3.合并单元格

合并单元格也称为表格的跨行和跨列
两个属性:

  • rowspan

设置单元格所跨的行数,如rowspan=“2” 表示跨越2行

  • colspan

设置单元格所跨的列数,如clospan=“4” 表示跨越4列
步骤：

  1. 在跨直的单元格中设置rowspan/colspan属性

  2. 将被跨越的单元格删除

注意：必须要保证每行的实际列数是相同的，否则表格可能会出现错乱

案例18 合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table>(tr>td{hello$}*4)*4 -->
	<table border="1" width="500px" height="300px">
	<tr>
		<td colspan="4" align="center">hahaha</td>
	</tr>
		<tr>
			<td rowspan="3">hello1</td>
			<td>hello2</td>
			<td>hello3</td>
			<td>hello4</td>
		</tr>
		<tr>
			
			<td>hello2</td>
			<td rowspan="2" colspan="2">hello3</td>
			
		</tr>
		<tr>
			
			<td>hello2</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

4.高级标签
4.1 caption

表格的标题标签

4.2 thead标签

表格的头部table head

4.3 th标签

表格的头部标题table head title
一般在thead中，设置头部标题，替代td标签，与td的区别，加粗和居中对齐

4.4 tbody标签

表格的主体 table body

4.5 tfoot标签

表格的底部table foot

19 表格的高级标签
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <table border="1" width="600px" height="300px" align="center">
        <caption><h2>学生基本信息表</h2></caption>
    	<thead bgcolor='cyan'>
    		<th>学号</th>
    		<th>姓名</th>
    		<th>年龄</th>
    		<th>性别</th>
    	</thead>
    	<tbody bgcolor="pink">
    	    <tr>
    	    	<td>1001</td>
    	    	<td>哈哈</td>
    	    	<td>21</td>
    	    	<td>男</td>
      
    	    </tr>
    	    <tr>
    	    	<td>1002</td>
    	    	<td>喜喜</td>
    	    	<td>20</td>
    	    	<td>女</td>
    	    </tr>
    	    <tr>
    	    	<td>1003</td>
    	    	<td>嘿嘿</td>
    	    	<td>23</td>
    	    	<td>男</td>
    	    </tr>
    	</tbody>
    	<tfoot bgcolor="yellow" align="center">
    		<tr>
    			<td width="25%">总计人数</td>
    			<td colspan="3" align="center">4</td>
    			
    		</tr>
    	</tfoot>
    </table>
</body>
</html>

在这里插入图片描述

六、表单
1.简介

表单是一个包含若干个表单元素的区域，用于获取不同类型的用记信息

表单元素是允许用户在表单中输入信息的元素，如：文本框、密码框、单选按钮、复选框、下拉按钮、列表等

2.表单结构
2.1表单的语法
<form acition="" method="">
    多个表单元素
</form>
2.2form标签

用来定义表单，可以包含多个表单元素

常用属性：

  • action提交数据给处理，即处理数据的程序，默认为当前页面，并且以查询字符串的形式来表现

  • method提交数据的方式，取值：get（默认）、post

    get和post的区别：

    ​ get：以查询字符串形式提交，在地址栏中能够看到，长度有限制，不安全

    ​ post：以表单数据组形式提交，在地址栏中看不到，长度无限制，安全

  • enctype：提交数据的编码，取值：application/x-www-form-urlencode（默认）、multipart/form-data（文件上传)

3.表单元素

大多数表单元素都是使用标签来定义，通过设置type属性来定义不同的表单元素

<input type="表单元素的类型" name="名称" value="默认值" size="宽度">
表单元素的类型含义说明
text单行文本框省略时默认就是text
password密码框输入时以点号显示，安全
redio单选按钮只能选择其中一个
checkbox复选框可以同时选择多个
submit提交按钮提交表单数据
reset重置按钮重置表单元素的初始值
image图像按钮可以使用图片作为按钮
button普通按钮默认情况下无功能
file文件选择器选择要上传的文件
hidden隐藏域在页面上不显示，但是会提交，可以用来存储数据
3.1单行文本框

常用属性：

  • name属性：名称，很重要，如果没有指定name，则该表单元素的数据是无法提交的
  • value属性：当用户没有输入数据时，文本框中的默认值
  • size文本框显示宽度
  • maxlength最大字符数，默认字符数
  • readonly：只读readonly=“readonly”，可以简写readonly，即只写属性名
  • disabled：不可用，禁用disbled=“disabled” 可以简写disabled，完全被禁用

​ readonly和disabled的区别：readonly的数据会提交，而disabled的数据不会提交

3.2单选按钮

常用属性

  • name：名称，多个radio的name属性必须相同，才可以实现互斥（单选）
  • value：值
  • checked是否被选中，两种状态，选中，未选中 checked="checked"简写“checked”
3.3 复选框

常用属性与radio类似

3.4 文件选择器

常用属性：

  • name属性：名称

  • accept设置可以选择的文件类型，用来限制上传文件的类型

    使用MIME格式字符串对资源类型进行限制

    常用MIME类型：

    • 纯文本：text/plain text/heml text/xml
    • 图像：image/png image/gif image/jpeg
    案例20 表单的基本用法
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h2>用户注册</h2>
	<form action="" method="get" enctype="application/x-www-form-urlencoded">
		用户名：<input type="text" name="usr_name" value="无名氏" >
		<br>
		密码：<input type="text" name="pwd" size="20" maxlength="6">
		<br>
		年龄：<input type="text" name="age" disabled>
		<br>
		<input type="submit">
	</form>
</body>
</html>

    网页效果：
    在这里插入图片描述

    案例21 表单的基本用法2
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h2>用户注册</h2>
	<form action="" method="get" enctype="multipart/form-data">
		用户名：<input type="text" name="usr_name" size="10" value="无名氏">
		<br>
		密码：<input type="text" name="pwd" size="10" maxlength="6">
		<br>
		年龄：<input type="text" name="age"size="10" >
		<br>
		性别：<input type="radio" name="sex" value="male">
		      <img src="../../img/male.gif" alt="">
		      <input type="radio" name="sex" value="female" checked>
		      <img src="../../img/female.gif" alt="">
		<br>
		爱好：
		      <input type="checkbox" name="hobby" value="eat">吃饭   
		      <input type="checkbox" name="hobby" value="sleep">睡觉
		      <input type="checkbox" name="hobby" value="doudou">打豆豆  
		<br>
		头像：<input type="file" name="head" accept="img/jpeg"> 
		      <input type="hidden" name="usr_id" value="9528">      
		<hr>
		<input type="submit" value="注  册">
		<input type="reset" value="重  置">
		<hr>
		<input type="image" src="../../img/submit.gif">
		<input type="image" src="../../img/reset.gif">
		<hr>
		<input type="button" value="普通按钮">

	</form>
</body> 
</html>

    网页效果：
    在这里插入图片描述

4.特殊表单元素
表单元素含义说明
select下拉列表
option列表选项
optgroup选项组用来对option分组
textarea文本域/多行文本框用于创建一个多行文本框
4.1 下拉列表

select 常用属性：

  • name属性
  • size：下拉列表所显示的行数，同时显示多个选项
  • multiple允许同时选择多个

option常用属性：

  • value选项值
  • selected设置默认选中的项

optgroup常用属性：

  • table分组的标题
4.2 文本域

常用属性：

  • name：名称
  • rows行数
  • cols列数
案例23 特殊表单元素
<body>
	<form action="">
		学历：
		<select name="degree">
			<option value="0">--请选择学历--</option>
			<option value="benke" selected>本科</option>
			<option value="yanjiusheng">研究生</option>
			<option value="shuoshi">硕士</option>
		</select>
        <br>
        城市：
        <select name="city">
            <optgroup label="山西省">
            	<option value="taiyuan">太原</option>
        	    <option value="datong">大同</option>
        	    <option value="changzhi">长治</option>
            </optgroup>
            <optgroup label="山东省">
            	<option value="jinan">济南</option>
        	    <option value="qingdao">青岛</option>
        	    <option value="rizhao">日照</option>
            </optgroup>
        	<optgroup label="江苏省">
        		<option value="nanjing">南京</option>
        	    <option value="yangzhou">扬州</option>
        	    <option value="xvzhou">徐州</option>
        	</optgroup>
        </select>	
        	<br>
        	个人简介：
        	<textarea name="intrduce"></textarea>
        	<br>
        	服务协议:
        	<textarea name="intrduce" rows="10" cols="20"readonly >
        		请遵守本网站的相关协议和国家的法律法规
        		请遵守本网站的相关协议和国家的法律法规
        		请遵守本网站的相关协议和国家的法律法规
        		请遵守本网站的相关协议和国家的法律法规
        		请遵守本网站的相关协议和国家的法律法规
        	</textarea>
        
		<hr>
		<input type="submit">
	</form>
</body>
</html>

网页效果：
在这里插入图片描述

其他表单元素
5.1 label标签

为表单元素提供标签，当选中lable标签中的文本时会自动将焦点切换到与之相关联的表单元素当中

常用属性：

  • for必须将该属性值设置为与之相关联的表单元素的id属性值相同

注意：几乎所有的html标签都有一个id属性，且id属性值必须唯一

5.6 button标签

也表示按钮，与input按钮类似

语法：

<button type="按钮类型">
    按钮的文本或图像
</button>

常用属性：

  • type按钮的类型：取值submit（默认）、reset、button
5.3 fieldset和legend标签

fieldset标签，对表单元素进行分组

legend标签：对分组添加标题

案例24 其他表单元素
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <fieldset>
        <legend>个人信息</legend>
	    <label for="name">用户名：</label>
	    <input type="text" name="username" id="name">
	    <br>
        <label for="email">邮箱：</label>
        <input type="text" name="email" id="email">
        <hr>
    </fieldset>


    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
    <input type="image" src="../../img/submit.gif">
    <input type="button" value="普通按钮">
    <hr>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮</button>
    <button><img src="../../img/submit.gif" alt=""></button>
    <hr>

    <fieldset>
    	<legend>院校信息</legend>
    	学号：<input type="text" name="stuID"><br>
    	学校：<input type="text" name="stuSchool"><br>
    	专业：<input type="text" name="stuMajor"><br>
    </fieldset>
</body>
</html>

网页效果：
在这里插入图片描述

七、内嵌框架
1、简介

使用iframe可以在一个页面当中引用另一个页面，实现页面代码的复用

2、基本语法

语法

<iframe src="">
    
</iframe>

常用属性：

  • src引用的页面
  • width/height宽度/高度 像素或百分比
  • frameborder是否显示边框 取值：1（yes） 0（no）
  • scrolling是否显示滚动条，取值：yes、no、auto
  • nam为框架定义名称
3、在框架中打开超链接
<iframe name="hello"></iframe>
<a href="链接地址" target="hello">链接文本或图像</a></a>
八、HTML简介
1. 发展

W3C于1992年12月发布了HTML4.0.1标准

W3C于2014年10月发布了HTML5标准

2、特点
  • 取消了过时的标签，如font、center等，它们仅限于展示外观
  • 增加了一些更加具有语义化的标签，如header、footer、aside等
  • 增加了一些功能标签，如audio、video、canvas等
  • 增加了一些表单控件，如email、date、time、url、search等
  • 可以直接在浏览器当中绘图（canvas），无须flash
  • 增加了本地存储的功能
3、兼容性

http://caniuse.com

提供了各浏览器版本对html5和CSS3规范的支持度

九、HTML5新增内容

1、结构相关标签

用来进行页面结构布局，本身无任何特殊样式，需要使用CSS进行样式设置

  • article定义一个独立的内容，完整的文章
  • section定义文档的章节和段落
  • header文章的头部、页眉、标题
  • footer文章的底部、页脚、标注、脚注
  • aside定义侧边栏
  • figure图片区域
  • figcaption图片标题
  • navigate导航

结构便签只是表明各部分的角色，并无实际外观样式，与普通的div相同

2、语义相关的标签
2.1 mark标签

标注，用来突出显示文本，默认添加黄色背景

2.2 time标签

定义日期和时间，便于搜索引擎智能查找

2.3 details和summary标签

默认显示summary中的内容，点击后显示details中的内容

注：并不是所有的浏览器都兼容，chrome、opera支持，firefox不支持

2.4 meter标签

技术仪，表示度量

常用属性：

  • max定义最大值，默认为1
  • min定义最小值，默认为0
  • value定义当前值
  • high定义限定为高的值
  • low定义限定为低的值
  • optimum定义最佳值

规则

1、如果optimum大于high，则表示值越大越好

​ 当value值大于high时为绿色

​ 当value值在high和low之间时为黄色

​ 当value值小于low时为红色

2、如果optimum小于low，则表示值越小越好

​ 当value值小于low时为绿色

​ 当value值在high和low之间时为黄色

​ 当value值大于high时为红色

3、当optimum介于low和high之间时，则表示值在low和high之间为最好

​ 当value值在low和high之间时为绿色，否则为黄色

2.5progress标签

进度条，表示运行中的进度

常用属性：

  • value定义当前值
  • max定义完成的值
3、表单相关
3.1新增表单元素
  • email接收邮箱
  • url接受url
  • tel接收电话号码，目前仅在移动设备上有效
  • search搜索文本框
  • number/range接收数学/数字滑块，包含min、max、step属性
  • date/month/week/time/datetime日期时间选择器，兼容性不好
  • color颜色拾取

作用：

  • 具有格式校验的功能
  • 可以与移动设备的键盘进行关联
3.2新增表单属性

form标签属性：

  • autocomplete是否启用表单的自动完成功能，取值on（默认）、off
  • novialldate提交表单时不进行校验，默认会进行表单校验
3.3新增表单元素属性

新增表单元素属性，input/select/textarea等

  • placeholder提示文字
  • required是否必填
  • autocomplete是否启用该表单元素的自动完成功能
  • autofocus设置初始焦点元素
  • pattern使用正则表达式（RegExp后面会讲解），进行数据校验
  • list使文本元素具有下拉列表功能，需要配置datalist和option标签一起使用
  • form可以将表单元素写在form标签外部，然后通过该属性来关联到指定的表单
4、多媒体的标签
4.1audio标签

在页面上插入音频，不同的浏览器对音频格式的支持不一致

audio常用属性：

  • src音频文件的来源
  • controls是否显示控制面板，默认不显示
  • autoplay是否自动播放，默认不自动播放
  • loop是否循环播放
  • muted是否静音
  • preload是否预加载，取值：none不预加载，auto预加载（默认）、metadata只预加载元数据，如果设置了autoplay属性，preload无效

可以结合source标签使用，指定多个音频文件，浏览器会检测并使用第一个可用的音频文件

4.2video标签

在页面中插入视频，不同的浏览器对视频格式的支持不一样

用法和audio标签基本相同，增加属性

  • widith/height视频播放器的尺寸
  • poster在视频加载前显示的图片
案例25 内嵌框架
<!DOCTYPE html>
html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <iframe src="top.html" width="100%" height="200" frameborder="0" scrolling="auto"></iframe>
	<h3>主体部分</h3>
	<hr>

	<a href="01.表格.html" target="hello">01.html</a>
	<a href="02.合并单元格.html" target="hello">02.html</a>

    <iframe src="./foot.html" width="400px" height="400px" frameborder="0" name="hello"></iframe>
</body>
</html>

网页效果：
在这里插入图片描述

案例26HTML新增结构相关标签
!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<article>
	    <header>标题</header>
		<section>
			第一段
		</section>
		<section>
			第二段
		</section>
		<footer>脚注</footer>
	</article>
	<aside>广告</aside>
	<br>

	<figure>
	    <figcaption>log标题</figcaption>
		<img src="../../img/google.png" alt="">
		<img src="../../img/facebook.png" alt="">
	</figure>
	<nav>

		<ul>
    	    <li>网页</li>
    	    <li>资讯</li>
    	    <li>视频</li>
    	    <li>美食</li>
    	    <li>旅游</li>
    	    <li>文库</li>
    	    <li>贴吧</li>
        </ul>
    </nav>
</body>
</html>

网页效果：
在这里插入图片描述

案例27新增语义相关标签
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	welcome <mark>to</mark> html!
	<br>
	我在<time datetime="2020年3月24日">情人节</time>玩泥巴！
	<hr>
	<details>
		<summary>HTML简介</summary>
		<p>HTNL是一门用来制作网页的标签语言</p>
		<p>HTML可以包含文本、图像、音频、视频等各种多媒体信息</p>
	</details>
	<meter max="100" min="1" value="60" ></meter>
	<hr>
    <meter max="100" min="1" value="30" high="60" low="20" optimum="10"></meter>
    <hr>
    <meter max="100" min="1" value="10" high="60" low="20" optimum="10"></meter>
    <hr>
    <meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
    <hr>
    <meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
    <hr>
    <meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
    <hr>
    <meter max="100" min="1" value="10" high="60" low="20" optimum="65"></meter>
    <hr>
    <meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
    <meter max="100" min="1" value="10" high="60" low="20" optimum="10"></meter>
    <meter max="100" min="1" value="30" high="60" low="20" optimum="15"></meter>
    <meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
    <hr>
    <meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
    <meter max="100" min="1" value="10" high="60" low="20" optimum="35"></meter>
    <meter max="100" min="1" value="90" high="60" low="20" optimum="35"></meter>
    <hr>
    <progress value="20" max="50"></progress>
</body>
</html>

网页效果：
在这里插入图片描述

案例28HTML5新增表单相关标签
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
     <!-- <form action="" autocomplete="off" novalidate> -->
     <form action="" autocomplete="on" id="myform">
        <label for="email">邮箱:</label>
	    <input type="email" name="email" id="email">
	    <br>


	    <label for="home">个人主页:</label>
	    <input type="url" name="home" id="home">
        <br>

        <label for="phone">个人号码:</label>
        <input type="tel" name="phone" id="phone">
        <br>


        <label for="keyword">关键字</label>
        <input type="search" name="keyword" id="keyword">
        <br>

        <label for="num">数字</label>
        <input type="number" name="num" id="num" min="2" max="10" step="2">
        <br>


        <label for="birthday">出生日期:</label>
        <input type="month" name="birthday" id="birthday">
        <br>

        <label for="color">颜色:</label>
        <input type="color" name="color" id="color">
        <br>

        <label for="username">用户名:</label>
        <input type="text" name="name" id="username" placeholder="请输入用户名"required autocomplete="off" autofocus>
        <br>

        <label for="age">年龄:</label>
        <input type="text" name="age" id="age" pattern="/d{1,2}">
        <br>
        <label for="city">城市:</label>
        <input type="text" name="city" id="city">
        <datalist id="citylist">
        	<option value="bj">北京</option>
        	<option value="nj">南京</option>
        	<option value="tj">天津</option>
        	<option value="sh">上海</option>
        </datalist>
    </form>
	    <hr>
	    <input type="submit" form="myform">
        
</body>
</html>

网页效果：
在这里插入图片描述

案例29 HTML5新增多媒体标签
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- <audio src="../../audio/water.mp3" controls  loop muted preload="metadata"></audio> -->
	<audio>
		<source src="../../audio/earth.ogg">
		<source src="../../audio/water.mp3">
		您的浏览器不支持audio标签，请更换浏览器
	</audio>

	<video src="../../video/volcano.mp4" controls width="600px" poster="../../img/p1.jpg"></video>
</body>
</html>

网页效果：
在这里插入图片描述
百度网盘：
链接：https://pan.baidu.com/s/1uT6tgD-n0p56fHDdZ-03Vw
提取码：bzv5

sumuqi
关注
HTML笔记及案例（全）
A12344321_的博客
07-01 518
一、 HTML简介 1.HTML是什么？ HTML: HYper Text language超文本 标记（标签）语言有多种标签组成，用来制作网页，告浏览器该如何显示页面 2.HTML语言作用？ 制作网页，控制网页、内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接检索信息 使用表单获取用户信息，实现交互 3.版本 W3C：world wide wed consortium万维网联盟，制定WEB技术相关表尊和规范的组织，HTML就是由W3C制定的标准 常用的两个版本：HTML4.0和HTML5.0 官网
HTML思维导图+学习笔记+实际案例
01-08
（5）html文档申明： a、framset框架文档类型 b、严格的文档类型 c、过渡的文档类型（宽松的文档类型） d、html5的文档类型 三、html基本标签 1、文件标签（结构标签） Insert title here ：根标签 ...
JavaScript 提交和跳转的例子
古寒居
09-02 425
这个方法是用来跳转action最后到页面的。 [code="java"] function toAdd() { window.location.href("tellist.do?method=toAdd"); } [/code] 这个方法是用来提交的。可以带值 [code="java"] function toUpdate(id,tel,area) { var ...
HTML5 form例子
stevenbill的博客
12-22 131
很简单的HTML5表单提交例子，html5代码如此之少。 [code="java"] First name: Last name: [/code]
HTML(5)——列表、表格
qq_34573534的博客
07-27 348
1. 列表：<ul><li>灌水区</li><li>版务区</li><li>原创贴图</li></ul>。unordered list。 2. 还有有序的列表<ol></ol>，用的很少。ordered list 。 3. 表格：<table></table...
html5零基础学习笔记
m0_51326276的博客
12-08 763
HTML5基础 最常见的没有兼容性的HTML标签 网页 网站 网站是☞因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合 网页 网页是☞网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读 网页是构成网站的基本元素，通常有图片、链接、文字、声音、视频等元素组成，通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件 HTML ​ HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语
黑马基础学习html+css课程笔记和案例
06-29
在“黑马基础学习html+css课程笔记和案例”中，你可以找到学习这两门语言的详细资源，包括理论知识和实践案例。 HTML是网页内容的结构标记语言，它定义了网页的基本元素，如标题、段落、链接、图片等。学习HTML首先...
H5+CSS学习资料+笔记+项目资料
07-13
可能是HTML5和CSS3的学习笔记，包含了作者在学习过程中的总结和心得，对于理解和记忆相关知识非常有帮助。 总的来说，这个资料包是一个全面的前端学习资源，通过它你可以深入理解HTML5和CSS3的核心概念，同时通过...
HTML+CSS知识笔记、分析案例
05-14
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选； CSS入门容易，精通难。...所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。 会持续更新~
入门HTML(含常见标签)—附实现案例
qq_63218110的博客
11-27 5013
HTML不同于我们所熟知的C，Java等编程语言，它是一种标签化语言，其形式类似于XML。本篇文章主要常见文本标签和文档结构标签。
HTML5的时钟实例（初级者）
04-27
HTML5的时钟实例，适合于HTML5的初级者学习，直接打开就可以看到效果
北大青鸟ACCP8.0 S1 html学习笔记
12-20
2017年ACCP8.0最新html5笔记，内容非常详细，教员老师整理
HTML5经典中文教程大全-从入门到精通-含html5案例代码
12-04
HTML5经典中文教程大全 html5从入门到精通 含html5案例代码 HTML 5结构元素 这真是大快人心。目前，我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部，底部或者侧栏等。有了它们，代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构：
一站式网页设计零基础HTML5布局实例教程(第五节PS篇)
02-26
一站式网页设计零基础HTML5布局实例教程(第五节PS篇)，主要讲解了修复修补工具组。
几个HTML5入门学习的好例子(代码)
10-16
HTML5将慢慢地变成网络的领军者，希望对有兴趣有朋友有所帮助
尝试了一切方法，但HTML内容仍未显示
最新发布
4G/5G随身WiFi专业DIY改装
09-02 1164
如果尝试了一切方法但 HTML 内容仍未显示，以下是一些可能的解决步骤：检查 HTML 代码：确保 HTML 代码没有语法错误或缺失的标签。使用 HTML 验证工具可以帮助你检查代码的正确性。检查文件路径：确保 HTML 文件的路径正确，并且文件存在于指定的位置。检查浏览器设置：确保浏览器没有设置为阻止显示 HTML 内容...
HTML——form表单/个人信息
热门推荐
Chenbaby_的博客
11-15 2万+
姓名： 密码： 性别：             男             女                        喜爱的运动：篮球                             足球               棒球                     排球                                         
HTML表单用于收集,HTML表单
weixin_34857730的博客
06-16 371
HTML 表单用于收集用户输入。HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它。HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。表单元素元素该元素正式定义了一个表单，它是一个容器元素，同时它在客户端定义如...
JQuery（李江南）
LuckyGuyy的博客
01-22 1532
文章目录jQuery使用jQueryjQuery字典简单样例1.jQuery核心2.jQuery工具、选择器3.jQuery选择器4.属性5.CSS6.事件7.效果8.文档处理9.ajaxcookiehash jQuery jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 它封装JavaScript常用的功能代码，提供一种简便的J
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值