HTML全称
Hyper Text Markup Language--- 超文本标记语言
超文本包括:文字，图片，视频，音频等
W3C
W3C标准
创建第一个HTML文件
1.新建一个项目
2.一路next
3.删除src文件
4.新建一个HTML文件
5.创建HTML file
补充：
1.选择你的浏览器
HTML基本结构
代码格式规范：
1.成对的标签：后面那个标签的斜杠加在字母前面
2.单独的标签：标签的斜杠加在字母后面
生成的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
网页基本信息
注释（快捷键ctrl + /）
<!--注释 -->
自己看吧懒得一个一个搞了
<!--DOCTYPE:告诉浏览器我们要用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表头部-->
<head>
<!-- meta描述性标签，用来描述网站的一些基本信息 -->
<!-- meta一般用来做seo(搜索引擎优化) -->
<meta charset="UTF-8">
<meta name="keywords" content="NoMad的第一个网站">
<meta name="description" content="NoMad15234">
<!-- title网页标题 -->
<title>我的第一个网页</title>
</head>
<!--代表网页主体-->
<body>
HELLO,WORLD
</body>
</html>
网页基本标签
补充：快捷键：对应字母 + Tab
- 标题标签
<!--标题标签-->
<h1>一级标题</h1>//有开放标签就得有闭合标签
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
- 段落标签
快捷键： p + Tab
用来分段，不然你所有的字都会在同一行
<!--段落标签-->
<p>HELLO,WORLD</p>
<p>HELLO,WORLD HELLO,WORLD</p>
<p>HELLO,WORLD HELLO,WORLD HELLO,WORLD</p>
<p>HELLO,WORLD HELLO,WORLD HELLO,WORLD</p>
<p>HELLO,WORLD HELLO,WORLD HELLO,WORLD HELLO,WORLD</p>
- 换行标签
快捷键： br + Tab
<!--换行标签-->
HELLO,WORLD <br/>
HELLO,WORLD HELLO,WORLD <br/>
HELLO,WORLD HELLO,WORLD HELLO,WORLD <br/>
HELLO,WORLD HELLO,WORLD HELLO,WORLD <br/>
HELLO,WORLD HELLO,WORLD HELLO,WORLD HELLO,WORLD <br/>
换行标签相对于段落标签更加紧凑
- 水平线标签
<!--水平线标签-->
<hr/>
- 字体样式标签
<!--粗体， 斜体-->
<h1>字体样式</h1>
粗体：<strong>I LOVE YOU</strong>
斜体：<em>I LOVE YOU</em>
补充：
1.先输入strong再按tab
2.粗体<B> 斜体<I>这样也可以
- 注释和特殊符号标签
<!--特殊符号-->
<!--
格式: &//你要输入的;
-->
空 格
你打个&然后随便输入字母就会有提示，想打哪个就百度找对应的字符
图像标签
快捷键：img + Tab
<img src="" alt="">
一般图片路径会放另外一个文件夹
导入图片直接拖进去就好了
src: 是图片路径（必填），有两种
1.相对路径（推荐）（随着项目变化会变化）
2.绝对路径（从磁盘开始查找的路径）
../: 返回上一级
alt: 图片名字（必填），当图片路径不对的时候会显示这个
title: 指针悬停文字
还有一些其他的打个空格就会提示了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--图像标签-->
<img src="../resources/image/1.jpg" alt="王力口乐" title="悬停文字">
</body>
</html>
链接标签
快捷键：a + Tab
<a href=""></a>
网页间链接
href: 必填，表示你要跳到哪个页面
两个标签的文字就是点击文字跳转
两个标签之间还可以嵌套图片的标签，这样就是点击图片跳转
target: 表示窗口在哪里打开
_blank: 在新标签页面打开
_self: 在自己的网页中打开
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<hr>
<a href="https://www.baidu.com/" target="_self">点击我跳转到百度</a>
<hr>
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="王力口乐" title="悬停文字" width="300" height="300">
</a>
锚链接
1.需要一个锚标记
2.跳转到标记
格式: # + 标记名字
还可以实现不同页面间的跳转
格式: href="网页地址 + # + 标记名字"
<a id = "top">顶部</a>---->锚标记
<a href="#top">回到顶部</a>---->跳转
-----------
<a id = "down">down</a>
<a href="4.链接标签.html#down">底部</a>
功能性链接
邮件链接: mailto
QQ链接:
仔细观察，其实也就是用了上面那些知识点
target，href，嵌套图片，alt，title
<a href="mailto: 1002568778@qq.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/pa?p=2::52" alt="+Q上车：1002568778" title="+Q上车：1002568778"/>
</a>
行内元素和块元素
例子：
1.段落标签，标题标签都是块元素
2.链接标签，字体样式标签都是行内元素
列表标签
有序列表(order list)
标签：ol，li
<!--有序列表
应用：试卷 问答...
-->
<ol>
<li>Java</li>
<li>C++</li>
<li>go</li>
<li>Python</li>
</ol>
无序列表(unordered list)
标签：ul，li
<!--无序列表
应用：导航 侧边栏...
-->
<ul>
<li>Java</li>
<li>C++</li>
<li>go</li>
<li>Python</li>
</ul>
自定义列表(diy list)
标签：dl，dt(列表名称)，dd(列表内容)
<!--自定义列表
-->
<dl>
<dt>语言</dt>
<dd>C</dd>
<dd>Java</dd>
<dd>Python</dd>
</dl>
表格标签
标签：table
行：tr
列：td
加边距：border
跨列：colspan
跨行：rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr rows
列 td xxx
border: 加边距
-->
<table border="1px">
<tr>
<!-- colspan 跨列-->
<td colspan="3">1-1</td>
</tr>
<tr>
<!-- rowspan 跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</table>
</body>
</html>
媒体元素
这里也推荐自己创建一个单独的文件夹来放视频和音频，养成好习惯
资源路径: src
控制条: controls
自动播放: autoplay
在src 前加上 muted即可
<video src="../resources/video/2.mp4" controls></video>
<audio src="../resources/audio/3.mp3" controls></audio>
比较简单，下一个
页面结构分析
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
iframe内联框架
<iframe src="https://www.bilibili.com/" id="hello" frameborder="0" width="800px" height="1000px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
解释：
iframe是一个窗口，它的名字是hello，target=hello表示在名为hello的窗口中打开连接
这里target输入hello和_blank效果一样
表单语法
表单：通过提交表单，可以产生一些事件（注册，登录等）
标签：form
提交表单的方式：method（必填）
有两种
1.get 我们可以直接在url中看到提交的信息，不安全 但高效
2.post 比较安全，通常用来传输大文件
表单提交位置：action（必填）
可以是一个网站，也可以是请求处理地址
文本输入框：
<input type="text" name="username">
补充：这里加value是默认值
密码输入框
<input type="password" name = "pwd">
提交
<input type="submit">
重置
<input type="reset">
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form-->
<form action="1.我的第一个网页.html" method="get">
<p>名字: <input type="text" name="username"></p>
<p>密码: <input type="password" name = "pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
效果图
表单元素格式
所有的表单元素都需要name标签
这些都是input标签里面的属性
<p>名字: <input type="text" name="username" value="nomad15234" size="30"></p>
主要讲解type里面的属性
radio：单选框标签
必须要有value和name
value：单选框的值
name：表示组，相同的组，几个value只能选一个，不同的组几个value都可以选上
checked：默认选中
代码演示一下
<p>性别
<input type="radio" value="boy" name="gender"/>男
<input type="radio" value="girl" name="gender"/>女
</p>
checkbox：多选框标签
必须要有value和name
value：多选框的值
name：表示组，最好设置成相同的，比较规范
checked：默认选中
代码演示一下
<p>爱好
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="play" name="hobby"/>玩
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
button：按钮
value：按钮上显示的值
name：按钮名字
<input type="button" value="点击这里" name="but1">
补充：不同的按钮
1.button 普通按钮
<input type="button" value="点击这里" name="but1">
2.image 图像按钮
<input type="image" src="../resources/image/1.jpg">
点击这个和submit效果一样，都可以提交表单
3.submit 提交按钮
<input type="submit">
4.reset 重置按钮
<input type="reset">
file：文件域
<p>文件域
<input type="file" name = "files">
</p>
表单的一些简单验证
email：邮件验证
<p>邮箱
<input type="email" name = "email">
</p>
url：网址验证
<p>网址
<input type="url" name = "url">
</p>
number：数字验证
max，min：最大最小值
step：一次加/减多少
<p>数字
<input type="number" name = "num" max="100" min="0" step="1">
</p>
range：滑块
max，min：最大最小值
step：一次加/减多少
<p>滑块
<input type="range" name = "volume" max="100" min="0" step="1">
</p>
search：搜索
<p>搜索
<input type="search" name="search">
</p>
列表框
<p>列表框
<select name="列表名称">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
<option value="option4">选项4</option>
</select>
</p>
文本域
cols列
rows行
<p>文本域
<textarea name="textarea" cols=50 rows="10"></textarea>
</p>
表单的应用
只读：readonly
添加这个之后是删除不掉的
<p>名字: <input type="text" name="username" value="nomad15234" readonly></p>
禁用：disable
添加这个之后是不能选这个选项
<input type="radio" value="boy" name="gender" disabled/>男
隐藏：hideen
添加之后就看不见了，但是这个属性还存在
<p>密码: <input type="password" name = "pwd" hidden></p>
之前都是点击输入框才能输入，如何实现点击文字就可以输入呢
lable：指向一个位置，增强鼠标可用性
for：输入id，然后指向id这个位置
<p>
<label for="mark">点这里</label>
<input type="text" id="mark">
</p>
表单初级验证
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="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
