HTML

1、初识HTML

什么是HTML？

HTML：

Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等

目前网页中常用：HTML5

W3C标准

W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994，web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

HTML基本结构

<html>
<!--网页头部-->
<head><title>我的第一个网页</title>
</head>
<!--主体部分-->
<body>我的第一个网页
</body>
</html>

、等成对的标签，分别叫==开放标签==和==闭合标签==

单独呈现的标签（空元素），如

；意为用 / 来关闭空元素

2、网页基本信息


<!-- DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html><html lang="en"><!-- head标签代表网页头部 -->
<head><!--meta描述性标签，它用来描述我们网站的一些信息--><!--meta一般用来做SEO--><meta charset="UTF-8"><meta name="keywords" content="Gai某学HTML"><meta name="description" content="在这里可以学习HTML"><!-- title网页标题 --><title>Title</title>
</head><!-- body标签代表网页主体 -->
<body>Hello,World!</body></html>

3、网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

<!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><p>跑得快，跑得快，</p><p>一只没有耳朵，</p><p>一只没有尾巴，</p><p>真奇怪！真奇怪！</p><!--水平线标签-->
<hr><!--换行标签-->
两只老虎，两只老虎，<br/>跑得快，跑得快，<br/>一只没有眼睛，跑得快，跑得快，<br/>一只没有尾巴，跑得快，跑得快，<br/>真奇怪！真奇怪！<br/>两只老虎，两只老虎，<br/>跑得快，跑得快，<br/>一只没有耳朵，<br/>一只没有尾巴，<br/>真奇怪！真奇怪！<br/><!--粗体、斜体-->
<h1>字体样式标签</h1>粗体 ： <strong>i love you</strong>
斜体 ： <em>i love you</em><br/>
<!--特殊符号-->空     格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
&gt;
<br/>
&lt;
&copy;<!--
特殊符号记忆方式&    ;--></body>

4、图像标签

常见的图像格式
- JPG
- GIF
- PNG
- BMP
- …

<img src="path" alt="text" title="text" width="x" height="y"/>

src：图像地址 alt：图像的代替文字 title：鼠标悬停的文字 width：图像宽度 height：图像高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body>
<!--img学习../     --上一级目录推荐使用相对路径，即下面代码里的路径src和alt必填，其他选填
-->
<img src="../resources/image/1.png" alt="截图" title="截图" width="300" height="300"/></body>
</html>

5、链接标签

<a href="path" target="目标窗口位置">连接图文本或象</a>

href：链接路径 target：链接在哪个窗口打开目标窗口位置：常用值：_self 、 _blank

文本超链接
图像超链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body><!--a标签
href：必填，跳转到哪个页面
target：表示窗口在哪里打开_blank：在新标签中打开_self：在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<hr>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br><a href="1.我的第一个网页.html"><img src="../resources/image/1.png" alt="截图" title="截图" width="300" height="300"/>
</a></body>
</html>

超链接

页面间链接
- 从一个页面链接到另一个页面
锚链接
功能性链接

锚链接：

设置一个锚：

<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<!--使用name作为标记-->
<a name="top">顶部</a>

通过锚链接跳转到其他页面的某个位置：

<a href="4.链接标签.html#top">跳到4.链接标签的顶部</a>

通过锚链接跳转到本页面的某个位置：

<a href="#top">回到顶部</a>

功能性链接：

<!--功能性链接
邮件链接：mailto:
QQ链接：百度QQ推广
--><a href="mailto:xxxxx@163.com">点击联系我的邮箱</a><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/xxxxx" alt="你好，加我领取小电影！" title="你好，加我领取小电影！"/></a>

6、块元素和行内元素

块元素
- 无论内容多少，该元素独占一行（会换行的）
- （p、h1-h6…）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行（不会换行的）
- （a、strong、em…）

7、列表标签

什么是列表
- 列表就是信息资源的一种展示形式。它可以是信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类
- 无序列表
- 有序列表
- 定义列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表学习</title>
</head>
<body><!--有序列表
应用范围：试卷、问答......
-->
<ol><li>Java</li><li>Python</li><li>运维</li><li>前端</li><li>C/C++</li>
</ol><hr><!--无序列表
应用范围：导航，侧边栏......
-->
<ul><li>Java</li><li>Python</li><li>运维</li><li>前端</li><li>C/C++</li>
</ul><!--自定义列表
dl：标签
dt：列表名称
dd：列表内容应用范围：公司网站底部
-->
<dl><dt></dt><dd>Java</dd><dd>Python</dd><dd>Linux</dd><dd>C</dd><dt>位置</dt><dd>西安</dd><dd>重庆</dd><dd>新疆</dd>
</dl></body>
</html>

8、表格标签

为什么使用表格？
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格学习</title>
</head>
<body><!--表格table
行   tr  rows
列   td
边框 border
--><table border="1px"><tr><!--colspan 跨列--><td colspan="4">1-1</td></tr><tr><!--rowspan 跨行--><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table></body>
</html>

p8视频结束小作业：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>成绩单</title>
</head>
<body><table border="1px">
<tr><td colspan="4">学生成绩</td>
</tr>
<tr><td rowspan="2">XXX</td><td>语文</td><td>120</td>
</tr>
<tr><td>数学</td><td>150</td>
</tr>
<tr><td rowspan="2">XXX</td><td>语文</td><td>120</td>
</tr>
<tr><td>数学</td><td>150</td>
</tr></table></body>
</html>

9、媒体元素

视频元素
- video
音频元素
- audio

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body><!--音频和视频
需要加上controls才能在打开的网页直接播放，不加的话打开网页是空白的，需要右键鼠标点击空白网页才能在新窗口播放
autoplay 自动播放(狂神是可以直接放出来...但是我得加上muted...loop，弹幕说谷歌浏览器限制自动播放)
src 资源路径
--><!--<video muted src="../resources/video/原子邦妮%20-%20在名为未来的波浪里.mp4" controls autoplay loop></video>--><audio src="../resources/audio/漆柚%20-%20封刀不为峥嵘.mp3" controls></audio></body>
</html>

10、页面结构分析

元素名描述

header 标题头部区域的内容（用于页面或页面中的一块区域）

footer 标记脚部区域的内容（用于整个页面或页面的一块区域）

section web页面中的一块独立区域

article 独立的文章内容

aside 相关内容或应用（常用于侧边栏）

nav 导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面结构分析</title>
</head>
<body><header><h2>网页头部</h2></header><section><h2>网页主体</h2></section><footer><h2>网页脚部</h2></footer></body>
</html>

11、iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

path：引用页面地址 mainFrame：框架标识名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><iframe src="" name="xxx" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://space.bilibili.com/xxxxxxxx" target="xxx">点击跳转至B站个人空间</a><!--<iframe src="//player.bilibili.com/player.html?aid=586410702&bvid=BV1Az4y1D7rD&cid=289711703&page=1"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>--></body>
</html>

12、初识表单post和get提交

<form method="post" action="result.html"><p> 名字: <input name="name" type="text"> </p><p> 名字: <input name="pass" type="password"> </p><p><input type="submit" name="Button" value="提交/"><input type="reset" name="Reset" value="重填/"></p>
</form>

post：规定如何发送表单数据常用值：get | post

result.html：表示向何处发送表单数据

表单：

这种注册登录就是一种表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body><h1>注册</h1><!--表单formaction：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post、get 提交方式get方式提交：我们可以在url中看到我们提交的信息，不安全，高效post：比较安全，传输大文件
--><form action="1.我的第一个网页.html" method="get"><!--文本输入框：input type="text"--><p>名字：<input type="text" name="username"></p><!--密码框：input type="password"--><p>密码：<input type="password" name="pwd"></p><p><input type="submit"><input type="reset"></p></form></body>
</html>

提交后跳转到action中的网页

用post方式可以在网页中f12点network，下面选择headers，在其中最下方的From Data里可以看见提交的数据，但是可以加密

13、文本框和单选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body><h1>注册</h1><!--表单formaction：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post、get 提交方式get方式提交：我们可以在url中看到我们提交的信息，不安全，高效post：比较安全，传输大文件
--><form action="1.我的第一个网页.html" method="get"><!--文本输入框：input type="text"value：默认值maxlength：最长能写几个字符size：文本框的长度--><p>名字：<input type="text" name="username" value="Gai某" maxlength="16" size="30"></p><!--密码框：input type="password"--><p>密码：<input type="password" name="pwd"></p><p>性别：<!--这里不写name的话性别可以多选，name表示组，name一样就是一个组，组不一样可以多选--><input type="radio" value="boy" name="sex">男<input type="radio" value="girl" name="sex">女</p><p><input type="submit"><input type="reset"></p></form></body>
</html>

14、按钮和多选框

    <!--多选框input type="checkbox"--><p>爱好：<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="code" name="hobby">敲代码<input type="checkbox" value="game" name="hobby">玩游戏<input type="checkbox" value="chat" name="hobby">聊天<input type="checkbox" value="exercise" name="hobby">运动<input type="checkbox" value="study" name="hobby">学习<input type="checkbox" value="TV" name="hobby">电视剧<input type="checkbox" value="movie" name="hobby">电影</p><!--按钮button：普通按钮image：图像按钮submit：提交按钮reset：重置按钮--><p>按钮：<input type="button" name="btn1" value="点击变长"><input type="image" src="../resources/image/冲田总司.jpeg"></p>

15、列表框文本域和文件域

    <!--下拉框，列表框--><p>国家：<select name="列表名称"><option value="China" selected>中国</option><option value="Japan">日本</option><option value="French">法国</option><option value="Germany">德国</option><option value="Russia">俄罗斯</option><option value="Britain">英国</option><option value="America">美国</option><option value="Singapore">新加坡</option><option value="Czech Republic">捷克</option></select></p><!--文本域
textarea name="textarea" cols="50" rows="10"
--><p>自我介绍：<textarea name="textarea" cols="50" rows="10">文本内容</textarea></p><!--文件域
input type="file"
--><p>选择个性化背景：<input type="file" name="files"><input type="button" value="上传" name="upload"></p>

16、搜索框滑块和简单验证

<!--邮件验证--><p>邮箱：<input type="email" name="myEmail"></p>
<!--URL--><p>个人博客网址：<input type="url" name="myUrl"></p>
<!--数字--><p>年龄：<input type="number" name="num" max="100" min="0" step="1"></p><!--滑块--><p>背景音乐默认音量：<input type="range" name="vioce" min="0" max="100" step="1"></p><!--搜索框--><p>搜索：<input type="search" name="search"></input></p>

17、表单的应用

隐藏域 hidden
只读 readonly
禁用 disable

<p>名字：<input type="text" name="username" value="Gai某" readonly maxlength="16" size="30"></p>
<!--加上readonly框里的内容无法修改，只能看-->
<input type="radio" value="boy" name="sex" disable>男
<!--加上disable就无法勾选内容-->
<p>密码：<input type="password" name="pwd" hidden></p>
<!--加上hidden密码框就看不见了，但它还在，可以用于设置默认密码等等--><!--增强鼠标可用性--><p><label for="mark">你点我试试</label><input type="text" id="mark"></p>

18、表单初级验证

思考？为什么要进行表单验证

常用方法
- placeholder
- required
- pattern

palceholder：在文本框里提示输入的内容，输入内容后消失

required：文本框不能为空

背景音乐默认音量：

<p>搜索：<input type="search" name="search"></input>
</p>


# 17、表单的应用- 隐藏域 hidden
- 只读    readonly- 禁用    disable```html
<p>名字：<input type="text" name="username" value="Gai某" readonly maxlength="16" size="30"></p>
<!--加上readonly框里的内容无法修改，只能看-->
<input type="radio" value="boy" name="sex" disable>男
<!--加上disable就无法勾选内容-->
<p>密码：<input type="password" name="pwd" hidden></p>
<!--加上hidden密码框就看不见了，但它还在，可以用于设置默认密码等等--><!--增强鼠标可用性--><p><label for="mark">你点我试试</label><input type="text" id="mark"></p>

18、表单初级验证

思考？为什么要进行表单验证

常用方法
- placeholder
- required
- pattern

palceholder：在文本框里提示输入的内容，输入内容后消失

required：文本框不能为空

pattern：正则表达式

ps：这个就是狂神的视频笔记

HTML（b站学习记录）相关推荐

AD学习笔记——B站学习记录
AD学习笔记--B站学习记录 B站视频路径一.菜单栏操作二.(SCHLIB)原理图库三.(Pcblib)封装库四.原理图五.PCB(大部分操作和Pcblib相同,反之亦然) 六.其它 B站视 ...
CSS（b站学习记录）
1.CSS的简单介绍前端三要素:HTML+CSS+JS 结构+表现+交互什么是CSS? 如何学习 1.css是什么 2.css怎么用(快速入门) 3.css选择器(重点+难点) 4.美化网页(文字 ...
C++ 类 B站学习记录封装，构造函数 99 -- 109
(99) 封装封装的意义将属性和行为作为一个整体,表现事物将属性和行为加以权限控制注明: 属性:成员变量行为:成员函数 Code1 用类实现求圆的周长 #include<iostrea ...
王爽 16 位汇编语言学习记录
以下为汇编学习记录,内容全部出自王爽的16位<汇编语言>,如有错误,可直接去查看原书. 汇编语言机器语言是机器指令集的集合,机器指令是一列二进制数字,计算机将其翻译成高低电平,从而使 ...
小余学调度：学习记录（2021.11月）
小余学调度系列文章,记录小余同学入职电力调度员一路的学习记录,由于工作性质,在这个系列,只写能公开的知识点,不涉及机密. 提示:专栏解锁后,可以查看该专栏所有文章文章目录一.PT由运行转冷备用,和 ...
Unity学习记录——模型与动画
Unity学习记录--模型与动画前言本文是中山大学软件工程学院2020级3d游戏编程与设计的作业7 编程题:智能巡逻兵 1.学习参考除去老师在课堂上讲的内容,本次作业代码与操作主要参考了 ...
关于视频流媒体服务器的学习记录
关于视频流媒体服务器的学习记录前言由于有时候做的小demo里面会有视频功能的实现,而且基本是借助阿里云和七牛云等等这种第三方平台来实现和管理视频功能,但是只知道用第三方平台是远远不够的.毕竟也 ...
Unity2021 Inventory（背包）系统学习记录
Unity2021 Inventory(背包)系统学习记录最近学习了Unity背包系统设计的基本设计.学习资料主要参考了B站up主:M_Studio的教学视频.学习完后,在Assets Store上 ...
python学习记录——容器篇
容器字符串下标(索引) # 下表也称为是索引,是一个整型数字,可以是正数,也可以是负数 # 正数下标是从0开始的,表示第一个字符,-1表示最后一个字符 my_str = 'hello'h e l ...

HTML（b站学习记录）

1、初识HTML

什么是HTML？

W3C标准

HTML基本结构

2、网页基本信息

3、网页基本标签

4、图像标签

5、链接标签

6、块元素和行内元素

7、列表标签

8、表格标签

9、媒体元素

10、页面结构分析

11、iframe内联框架

12、初识表单post和get提交

13、文本框和单选框

14、按钮和多选框

15、列表框文本域和文件域

16、搜索框滑块和简单验证

17、表单的应用

18、表单初级验证

18、表单初级验证

HTML（b站学习记录）相关推荐

最新文章

热门文章