HTML学习
学习地址：https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0
初识HTML：
Hyper Text Markup Language 超文本标记语言
World Wide Web Consortium 万维网联盟W3C：是最具有影响力和权威的国际中立性技术标准机构
- W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）、
使用工具：IDEA
注：可以IDEA->File->setting->搜web->Tools->web Browsers，然后修改path的路径，加上常用的浏览器运行程序.exe路径
这样编辑的前端页面就可以用常用浏览器打开了
网页基本信息：
等成对的标签，分别叫开放标签和闭合标签只有一个的标签(空元素)，比如
意为用/来关闭空元素
<!--DOCTYPE :告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--mate描述性标签，它用来描述我们的网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="来b站看狂神说">
<!--title网页标题-->
<title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello,World!
</body>
</html>
网页基本标签：
-
标题标签
<!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> -
段落标签
<!--段落标签--> <p>两只老虎 爱跳舞</p> <p>小兔子乖乖 拔萝卜</p> <p>我和小鸭子 学走路</p> <p>童年时最美的 礼物</p> -
换行标签
<!--换行标签--> 两只老虎爱跳舞 <br/> 小兔子乖乖拔萝卜 <br/> 我和小鸭子学走路<br/> 童年时最美的礼物<br/> 小螺号呀嘀嘀地吹<br/> -
水平线标签
<!--水平线标签--> <hr/> -
字体样式标签
<!--粗体，斜体--> <hr/> 粗体：<strong>i love you</strong> 斜体： <em>i love you</em> -
注释和特殊符号标签
<!--特殊符号--> 空 格<br/> 空 格<br/> >大于号<br/> <小于号<br/> ©版权所有狂神 <!-- 特殊符号随用随调,不需要特殊去记，知道空格 和版权符号©就行了 其他还能查百度 -->
图像、超链接、网页布局：
图像标签：
<body>
<!--img学习
src：图片地址
相对路径，绝对路径
../ --上一级目录
alt：图片名字（必填）
-->
<img src="../resources/image/简历照.jpg" alt="简历照"
title="悬停文字" width="480" height="640">
</body>
超链接标签及应用：
页面链接：
从一个页面链接到另一个页面
<!--a标签
href:必填，表示要跳转到那个页面
target：表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开（默认）
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.bilibili.com/" target="_self">点击我跳转到页面哔哩哔哩</a>
<br>
<a href="2.基本标签.html">
<img src="../resources/image/简历照.jpg" alt="简历照"
title="悬停文字" width="480" height="640">
</a>
锚链接：
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
功能性链接：
<!--功能性链接
邮件链接：mailto
-->
<a href="mailto:1434421717@qq.com">点击联系我</a>
补充：有一个QQ推广会自动生成在线聊天链接，有点好玩
块元素和行内元素：
-
块元素：
- 无论内容多少，该元素独占一行
- (p,h1-h6…)
-
行内元素
-
内容撑开宽度，左右都是行内元素的可以排在一行
-
（a,strong,em…)
-
列表、表格、媒体元素：
列表标签：
列表可以使信息结构化和条理化
-
列表的分类：
-
无序列表
<!--有序列表 应用范围 ：试卷，问答... --> <ol> <li>java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C/C++</li> </ol> -
有序列表
<!--无序列表 应用范围：导航、侧边栏...--> <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>运维</dd> <dd>前端</dd> <dd>Python</dd> <dt>位置</dt> <dd>重庆</dd> <dd>杭州</dd> <dd>北京</dd> </dl>
-
表格标签：
- 为什么使用表格：
- 简单通用
- 结构稳定
- 基本结构：
- 单元格
- 行
- 列
- 跨行
- 跨列
<!--表格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>
小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生成绩</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">小明</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">小红</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒体元素：
视频：video
音频：audio
<!--音频和视频
src : 资源路径
controls ： 控制条
muted autoplay ：静音自动播放
由于优化体验之后，单独的autoplay不能自动播放了
但是音频的我试了一下，不管是单独的autoplay还是muted autoplay都无法自动播放
-->
<video src="../resources/video/江皓南%20-%20般配.mp4" controls muted autoplay></video>
<audio src="../resources/audio/Hattie海婷%20-%20Cold（Cover：sage）.mp3" controls muted autoplay></audio>
页面结构分析：
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
头部header，脚部footer，导航nav比较重要
iframe 内联框架：
<!--iframe 内联框架
src ：地址
w-h ：宽度-高度
-->
<iframe src="https://www.bilibili.com/" name="111" frameborder="0" width="1000px" height="800px"></iframe>
<!--也可以将跳转的页面放进去-->
<a href="https://space.bilibili.com/95256449/channel/seriesdetail?sid=393820" target="111">点击这里跳转网页</a>
表单及表单应用（重点）：
初识表单post和get提交：
<h1>注册</h1>
<!--表单form
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
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>
文本框和单选框：
<!--文本输入框 ：input type = "text"
value="找工作好紧张" ----默认初始值
maxlength="8" -------最长能写几个字符
size="30" ----------文本框的长度
-->
<p>名字：<input type="text" name="username"></p>
<!--密码框 ：input type = "password"-->
<p>密码：<input type="password" name="pwd"></p>
<!--单选框标签 ：input type="radio"
value : 单选框的值
name ：表示组
如果下面男女的组不一致，比如一个放sex组里，一个放sex2组里，
那么就会出现两个都可以勾选
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
按钮和多选框：
<!--多选框
input type="checkbox"
checked 默认选中
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby"checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<p>
<input type="button" name="btn1" value="点击边长">
<input type="image" src="../resources/image/简历照.jpg">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
列表框、文本域和文件域：
<!--下拉框，列表框
selected 默认选中
-->
<p>国家：
<select name="列表名称">
<option value="China">中国</option>
<option value="us">美国</option>
<option value="eth"selected>瑞士</option>
<option value="e">俄罗斯</option>
</select>
</p>
<!--文本域
cols="30" rows="10"
-->
<p>反馈：
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域
input type="file" name="files"
所有的input标签表单属性，都要写上一个name属性就能显示
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload" >
</p>
button的value值就是显示在它的按钮上的，而其他组件的value值则是要传到后台，而name就是这个值传的地方—粗略理解
搜索框滑块和简单验证：
<!--邮箱验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL-->
<p>URL：
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!--滑块
input type="range"
-->
<p>
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!--搜索框-->
<p>搜索：
<input type="search" name="search">
</p>
表单的应用：
只读 readonly
<p>名字：<input type="text" name="username" value="饺子"readonly></p>
禁用 disabled
<input type="radio" value="boy" name="sex" disabled/>男
隐藏 hidden
<p>密码：<input type="password" name="pwd" hidden value="123456"></p
点击文本调到输入框–增强鼠标可用性
<p>
<!--增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
表单初级验证：
思考：为什么要进行表单验证？
1.为了减轻服务器的压力
2.为了安全
-
placeholder 提示信息
-----得放在输入框的组件上，放到单选多选没用
<p>名字：<input type="text" name="username" placeholder="请输入用户名"></p> -
required 非空判断
------不能为空
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p> -
pattern 正则表达式
<p>自定义邮箱： <input type="text" name="diyMail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"> </p>
Typora当不带html框的html代码放进去后，会直接出效果，还挺好玩
HTML总结：
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
