67.【HTML 5】
2024-06-18 07:47:45
HTML
- 1.什么是HTML？
- 2.HTML基本结构
- 3.网页基本信息
- 4.网页基本标签
- 5.图像标签:
- 6.超链接标签及应用
- 7.列表标签
- 8.表格标签
- 9.媒体元素
- 10.页面结构分析
- 11.iframe内联框架
- 12.表单语法
- 13.文本框和单选框
- 14.按钮和多选框
- 15.列表框和文本域和文件域
- 16.搜索框和滑块和简单验证
- 17.只读
- 18.表单的应用(增强鼠标地可用性)
- 19.表单地初级验证
1.什么是HTML？
Element
Layui
Echarts
1.
Hyper Text Markup Language (超文本标记语言)
2.W3C标准
World wide web Consortium(万维网联盟)--->web技术领域最权威和具有影响力的
国际中立性技术标准机构。
3.W3C标准包括
(1).结构化标准语言(HTML XML)
(2).表现标准语言（CSS）
(3).行为标准(DOM.ECMAScript)
2.HTML基本结构
<body>、</body>等成对的白哦前，分别叫做"开放标签"和"闭合标签",单独呈现的标签(空元素)
,如<hr/>;意为用 "/" 来关闭空元素。
3.网页基本信息
1.HTML: 注释: <!--****-- >
2.<meta > 描述性标签，它用来描述我们网站的一些信息
3.<title> 标签的内容</title>
4.<body>hello world!</body> 在网页中输入hello world!
<!--告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部-->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息--><meta charset="UTF-8"><meta name="keyworld" content="吉士先生，CSDN"><meta name="description" content="来这个地方梦启航的开始">
<!-- 网页标题 --><title>吉士先生第一个网页</title>
</head>
<!-- body标签代表网页主体-->
<body>
hello world!
</body>
</html>
4.网页基本标签
1.<hn> <hn> ----->n级标签
2.<p> <p> ------>段落标签
3.<hr/> -------->水平线标签
4.<br/> -------->换行标签
5.<strong> <strong> ----->黑体
6.<em> <em> ------->斜体
7. --------->空格
8.© ---------->版权
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落 标签-->
<p>两只老虎爱跳舞，小兔子乖乖拔萝卜，</p>
<p>我和小鸭子学走路，童年是最美的礼物。</p>
<p>小螺号呀嘀嘀地吹，我学海鸥展翅飞，</p>
<p>不怕风雨不怕累，快快把本领都学会。</p>
<p>宝贝，星星为你指路，哦？</p>
<p>宝贝，月亮为你祝福，哦！</p><!--水平线标签-->
<hr/><!--黄行标签-->
两只老虎爱跳舞，小兔子乖乖拔萝卜，<br/>
我和小鸭子学走路，童年是最美的礼物。<br/>
小螺号呀嘀嘀地吹，我学海鸥展翅飞，<br/>
不怕风雨不怕累，快快把本领都学会。<br/>
宝贝，星星为你指路，哦？<br/>
宝贝，月亮为你祝福，哦！<br/><!--粗体，斜体-->
<h1>字体样式标签</h1>粗体: <strong>i love you?</strong> <br/>
斜体: <em>i love you!</em> <br/><!--特殊符号-->空 格 :<br/>
空 格<br/>><br/>
<<br/>
©版权所有吉士先生!<br/>
</body>
</html>
5.图像标签:
必须要写地:
<img src="" alt="" title="">
<img src="" alt="" title="" wideth="" height="">
1. ../表示上一级目录
2. src: 图片的地址/绝对地址/相对地址
3. alt: 图片名字
4. title: 悬停文字
5. wideth: 宽度
6. height: 长度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body>
<!--
src: 图片地址
相对地址:
绝对地址: <盘符写的>
../ --》表示上一级目录
-->
<img src="../resources/imag/1.jpg" alt="吉士先生头像" title="悬停文字" width="300" height="300">
</body>
</html>
6.超链接标签及应用
超链接:必写项目:
<a herf="跳转内容" targect="跳转方式"></a>
锚链接必写:
<a id="标记内容">点击我跳转</a>
<a herf="#标记内容">点击我跳转页面</a
1.超链接:
<a herf="跳转内容" targect="跳转方式">点击我跳转链接</a>
跳转方式: _blank 打开另一个页面 _self 在本页面打开
eg:
跳转百度:<a herf="https://www.baidu.com">跳转百度</a>
2.锚链接:
<a id="标记内容">点击我跳转</a>
<a herf="#标记内容">点击我跳转页面</a>
3.功能性链接:
<a herf="mailto:2261203961@qq.com">点击我跳转</a>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title><!--href : 必填，表示要跳转到哪个页面?target : 表示窗口能在那里打开?_blank 在标签中打开_self 在自己网页打开--><!--锚链接:1.锚标记: <a id=" "> </a>2.锚链接: <a herf=""> <herf>-->
<!--
功能性链接:邮件链接: mailto:
-->
</head>
<!--<a href="#down">回到底部</a><br/><br/>-->
<a id="top">回到顶部</a><br/>
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a> <br/>
<a href="https://www.baidu.com">点击我跳转百度</a> <br/>
<a href="2.标题标签学习.html" target="_self">点击我跳转标签2</a><br/><p><img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400">
</p>
<p><img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400">
</p><p><img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400">
</p><p><img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400">
</p><p><img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400">
</p><p><img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400">
</p><p><img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400">
</p><p><img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400">
</p><p><img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400">
</p>
<a id="down">底部</a>
<a href="#top">回到顶部</a>
<a href="mailto:2261203961@qq.com">如何联系我?</a>
</body>
</html>
7.列表标签
1.什么是列表?
列表就是信息资源的一种展现形式，它可以使信息结构化和条理化，并以列表
的样式显示出来，以便浏览者能更快捷地获得相应地信息。
2.列表的分类:
（1）.有序列表(order list)
<ol>
<li>1<li>
<li>1<li>
</ol>
（2）.无序列表(unorder list)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
（3）.定义列表（definttation list）(defintation title) (defintation describle)
<dl><dt>...</dt><dd></dd><dd></dd>
</dl>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表学习</title>
</head>
<body>
<!--有序列表(order list)-->
<ol><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li>
</ol>
<hr/>
<!--无序列表(unordered list)-->
<ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li>
</ul>
<hr/>
<!--自定义列表
(defintation list) ：标签
(defintation title) :列表名称
dd : 列表内容
-->
<dl><dt>学科</dt><dd>1</dd><dd>2</dd><dd>1</dd><dt>位置</dt><dd>1</dd><dd>1</dd><dd>1</dd></dl>
</body>
</html>
8.表格标签
1.为什么要使用表格?
（1）.简单通用
（2）.结构稳定
2.基本结构
(1).单元格，行，列，跨行，跨列
<table> 表格
<caption>标题</caption>
<tr> 行<td>表头</td> 列
跨行
<td rowspan="2"></td>
跨列
<td colspan="3"></td></tr></table>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<!--表格(Table)
行 :row <tr>
列 :description(table ) (td)
-->
<table border="1px"><tr>
<!-- colspan 跨列--><td colspan="3">学生成绩</td></tr>
<!-- rowspan--><tr><td rowspan="2">吉士先生</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><td>3-2</td>
</tr><tr><td rowspan="2">李明</td><td>3-2</td><td>3-3</td></tr><tr><td>3-1</td><td>3-2</td></tr></table>
</body>
</html>
<table border="1"align="center" bgcolor="#deb887"><caption>我是标题</caption><tr><th>表头1</th> <th>表头1=2</th> <th>表头1=3</th></tr><tr><td>内容1</td><td>内容2</td><td>内容3</td></tr><tr><td>内容4</td><td>内容5</td><td>内容6</td></tr></table>
9.媒体元素
1.video 音频(视频)
音频和视频
src: 视频地路径
control: 进度条
autoplay: 自动播放
<video src="../resources/Video/1..mp4" controls autoplay></video>
2.audio 音乐
src: 视频地路径
control: 进度条
autoplay: 自动播放
muted: 静音
loop: 循环
<audio src="../resources/Video/2.m4a" controls autoplay></audio>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>视频学习</title>
</head>
<body>
<!--音频和视频
src: 视频地路径
control: 进度条
autoplay: 自动播放
-->
<!--<video src="../resources/Video/1..mp4" controls autoplay></video>-->
<audio src="../resources/Video/2.m4a" controls autoplay></audio>
</body>
</html>
10.页面结构分析
1.页面结构分析操作:
<head><h1>网页头部</h1></head>
<section><h1>网页主题部分</h1></section>
<footer><h1>网页脚部</h1></footer>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面结构</title>
</head>
<body>
<head><h1>网页头部</h1></head>
<section><h1>网页主题部分</h1></section>
<footer><h1>网页脚部</h1></footer>
</body>
</html>
11.iframe内联框架
ifname必写项目:
<iframe src="" name="hello" frameborder="0" ></iframe>
1.网页里面再内嵌一个网页src: 地址
w-h 宽度和高度
name: 相当于一个标签，与target搭配超链接跳转<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架</title>
</head>
<!--
src: 地址
w-h 宽度和高度
-->
<body>
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://blog.csdn.net/qq_69683957?spm=1000.2115.3001.5343" target="hello">点击我跳转</a>
</body>
</html>
12.表单语法
必写:
<form action="" method=""></form>
name:抓包用的。。。。。。。。
text中的value代表: 文本框的内容
action :表单提交地位置，可以是网站，也可以是一个请求处理地位
method : post|get 提交方式
get方式提交: 我们可以再url中，看到我们提交地信息，不安全,能够看到账号和密码
pos方式提交: 我们看不到密码和账号，比较安全。
`1.form_data
<form action="" method=""> 表单<p>名字: <input type="text" name="Username"></p>
<p>密码: <input type="password" name="Passworld"></p>
<p><input type="submit" name="提交"><input type="reset" name="重置"></form>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body>
<!--
action :表单提交地位置，可以是网站，也可以是一个请求处理地位
method : post|get 提交方式
get方式提交: 我们可以再url中，看到我们提交地信息，不安全,能够看到账号和密码
pos方式提交: 我们看不到密码和账号，比较安全。
`
-->
<h1>注册窗口</h1>
<form action="1.我的第一个网页.html" method="post">
<!--文本输入框-->
<p>名字: <input type="text" name="Username"></p>
<p>密码: <input type="password" name="Passworld"></p>
<p><input type="submit" name="提交"><input type="reset" name="重置">
</p>
</form>
</body>
</html>
13.文本框和单选框
文本款必写:
<input type="radio" value="box" name="sex"/>
单选框标签 type:value: 值name: 组名<p>性别: 男<input type="radio" value="box" name="sex"/>女<input type="radio" value="girl" name="sex"/></p>
14.按钮和多选框
必写:
1.多选框
type value name
2.单选框标签type: value: 值 name: 组名
3.按钮:
type value name
4.图片按钮 (具有提交地功能)
type src<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body>
<!--
<form>
action :表单提交地位置，可以是网站，也可以是一个请求处理地位
method : post|get 提交方式
get方式提交: 我们可以再url中，看到我们提交地信息，不安全,能够看到账号和密码
pos方式提交: 我们看不到密码和账号，比较安全。
`
2.<input>
type : 文本框类型
name : 组名
value : 默认值
maxlenth: 最多输入多少个字符
size : 文本框长度
-->
<h1>注册窗口</h1>
<form action="1.我的第一个网页.html" method="post">
<!--文本输入框-->
<p>名字: <input type="text" name="Username" value="请输入您地账号" maxlength="8" size="30"></p>
<p>密码: <input type="password" name="Passworld"></p>
<!-- 单选框标签type:value: 值name: 组名--><p>性别: 男<input type="radio" value="box" name="sex"/>女<input type="radio" value="girl" name="sex"/></p>
<!-- 多选框
type value name
--><p>爱好:睡觉:<input type="checkbox" value="sleep" name="hobby">游戏:<input type="checkbox" value="playGrame" name="hobby">学习:<input type="checkbox" value="learn" name="hobby">吃饭:<input type="checkbox" value="eat" name="hobby"></p>
<!-- 按钮
button 普通按钮
image 图片按钮
submit 提交按钮
reset 重置按钮
--><p>按钮:<input type="button" name="but1" value="默认值">
<!-- 图片按钮有自动提交地功能 --><input type="image" src="../resources/imag/3.jpg"></p>
<p><input type="submit" name="提交"><input type="reset" name="重置">
</p>
</form>
</body>
</html>
15.列表框和文本域和文件域
1.下拉框:
<select name="列表名称" id=""><option value="选填">China</option><option value="选填">America</option><option value="选填" selected>Jpane</option><option value="选填">India</option>
</select>
2.文本域
<p>反馈</p><p><textarea name="textarea" id="" cols="30" rows="10"></textarea>
</p>
3.文件域
<p><input type="file" name="files">
</p>
16.搜索框和滑块和简单验证
1.简单验证:<!-- 邮件验证-->邮箱:<input type="email" name="email">
<!-- --><p>数字:<input type="number" name="number" max="100" min="0" step="1"></p>
2.滑动块<p><input type="range" name="voice" min="0" max="100"></p>
3.搜索框:<p>搜索:<input type="search" name="seach" >
</p>
17.只读
readonly 只读
disabled 禁用
value 默认值
hidden 隐藏
18.表单的应用(增强鼠标地可用性)
for="" ----->指向id 地值
id="" ------->自定义<p><label for="mark">你点击我试试看 </label><input type="text" id="mark"></p>
19.表单地初级验证
placeholder 提示信息 (文本框常用)
required 不能为空(文本框常用)
pattern (正则表达式)
eg:
pattern=" "
67.【HTML 5】相关推荐
- 手工纸盒子_【创意手工】怒赞！如此有趣的儿童折纸，你不学我学！
折纸糖果盒子 基本的盒子制作方法,这里给大家做了一个简略图,很方便很快的可以完成制作.纸张的大小和后面制作糖果盒子的部分相同,然后用美工刀严则会两个边缘向内裁切大约0.2到0.3厘米.这样就会使得这个 ...
- 【73套】Epic Stock Media配乐音效素材合集包
[73套]Epic Stock Media配乐音效素材合集包 大小:114G丨WAV Epic Stock Media 系列音效合辑 包含了战争电影音效.史诗梦幻音效.日常生活音效.森林环境音效.电影 ...
- 5793. 【NOIP2008模拟】小S练跑步
Description 小S是一个爱锻炼的孩子,他在放假期间坚持在A公园练习跑步. 但不久后,他就开始为在重复的地点练习感到厌烦了,他就打算去B公园跑步. 但是小 ...
- 【2018.12.15】【考试总结】【模拟+逆序对+树状数组+贪心+multiset】爆零之旅
这是我悲惨的接近爆零的一次考试,但是本蒟蒻不能放弃,还是要总结的QAQ 答题卡 [题目背景] 八月是个悲惨的月份.先不谈炎热的天气,对于新生来说,八月意味着军训: 而对于高二高三的同学来说,八月意味着 ...
- 【面试现场】如何在10亿数中找出前1000大的数
小史是一个应届生,虽然学的是电子专业,但是自己业余时间看了很多互联网与编程方面的书,一心想进BAT互联网公司. 之前小史在BAT三家的面试中已经挂了两家,今天小史去了BAT中的最后一家面试了. 简单的 ...
- 2007年上半年 网络工程师 上下午试卷【附带答案】
2004-2017年真题+答案[0.23RMB]自取 2007年上半年 网络工程师 上午试卷 ● (1) 不属于计算机控制器中的部件. (1)A．指令寄存器IR B．程序计数 ...
- 2007年下半年 网络工程师 上下午试卷【附带答案】
2004-2017年真题+答案[0.23RMB]自取 2007年下半年 网络工程师 上午试卷 ● 若内存地址区间为4000H~43FFH,每个存储单位可存储16位二进制数,该内存区域由4片存储器芯片构 ...
- 2006年下半年 网络工程师 上下午试卷【附带答案】
2004-2017年真题+答案[0.23RMB]自取 2006年下半年 网络工程师 上午试卷 ● 若内存按字节编址,用存储容量为32K X 8 比特的存储器芯片构成地址编号A0000H至DFFFFH的 ...
- 2005年下半年 网络工程师 上下午试卷【附带答案】
2004-2017年真题+答案[0.23RMB]自取 2005年下半年 网络工程师 上午试卷 ● 阵列处理机属于 (1) 计算机. (1)A．SISD B．SIMD C．MISD ...
最新文章
- MyBatis-20MyBatis高级结果映射【一对一映射（4种方式）】
- 刚体Collider包围测试
- 六十一、Vue中父子组件传值和组件参数校验
- mysql中计算问题_MYSQL 数学运算符问题
- 逻辑门电路的知识点归纳
- 只要一点点力气就可以撬起重物？
- 16进制数用空格分开 tcp_面试时，你是否被问到过TCP/IP协议？
- Boost智能指针——scoped_ptr
- SDUTOJ3468_广度优先搜索练习之神奇的电梯(BFS + 用vector建图)
- C++类的赋值运算符“=”重载，以及深拷贝和浅拷贝
- vs2010 打开 vs2012 的解决方案
- php5.3 appache phpstudy win7win8win10下 运行速度慢
- USBCAN 、便携式 CAN 分析仪 、CAN卡
- 关于海康威视sdk与海康威视web的史上最精细的教程 （一）
- iphonex时间显示蓝色_iphonex时间显示蓝色
- diy服务器个人主机_DIY个人服务器
- GCC(Graph Contrastive Clustering)论文代码复现
- 精益软件度量之读书笔记（一）度量和组织目标
- led流水灯c语言程序移位,LED流水灯程序 移位写法
- 量子计算机工作原理如何解释,量子计算机工作原理