HTML

什么是HTML

Hyper Text Markup Language(超文本标记语言)

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

w3c标准

WOrld Wide Web Consortium(万维网联盟)

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

W3C标准包括

  1. 结构化标准语言（HTML、XML）
  2. 表现标准语言（CSS）
  3. 行为标准（DOM、ECMAScript）
  1. <!--告诉浏览器，我们要是用什么规范 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <!--head 网页头部-->
  5. <head>
  6. <!--    meta描述性标签，用来描述我们网站的一些信息-->
  7. <!--    meta一般用来做SEO-->
  8.     <meta charset="UTF-8">
  9.     <meta name="keywords" content="跟狂神学Java">
  10.     <meta name="description" content="可以学习java">
  11. <!--    title网页标题-->
  12.     <title>我的第一个网页</title>
  13. </head>
  14. <body>
  15. Hello，World！
  16. </body>
  17. </html>

网页基本标签

  • 标题标签 标题
  • 段落标签
    一段话
  • 换行标签 一句话
  • 水平线标签
  • 字体样式标签 粗体 粗体 斜体
  • 注释和特殊符号 
    1. <!--特殊符号-->
    2. 空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
    3. 大于号&gt;
    4. 小于号&lt;
    5. &copy;版权符号

图像标签

常见的图像格式

JPG

GIF

PNG

BMP

  1. <img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="1366" height="768">
  2. <!--img学习
  3. src:图片地址
  4.     相对地址（推荐使用），绝对地址
  5.     ../返回上一级目录  -->

alt 图片加载失败会显示的内容“”。

链接标签

  1. <!-- a标签
  2. href：必填，表示要跳转到那个页面
  3. target：表示窗口在那里打开
  4. _blank 在新标签中打开
  5. _self   在自己的网页中打开
  6. -->

超链接

页面间链接

从一个页面链接到另一个页面

锚链接

功能性链接

  1. <body>
  2. <!--使用name作为标记-->
  3. <a name="top">顶部</a>
  4. <!-- a标签
  5. href：必填，表示要跳转到那个页面
  6. target：表示窗口在那里打开
  7. _blank 在新标签中打开
  8. _self   在自己的网页中打开
  9. -->
  10. <a href="https://www.baidu.com" target="_blank">点击调转到百度
  11.     <img src="../resources/image/1.jpg" alt="图片加载失败">
  13. </a>
  14. <!--锚链接
  15. 1.需要一个锚标记
  16. 2.跳转到标记-->
  17. <a href="#top">回到顶部</a>
  18. <a name="down">底部</a>
  19. <!--功能性连接
  20. 邮件连接：mailto
  21. QQ链接-->
  22. <a href="mailto:1395950933@qq.com">点击联系我</a>
  24. </body>
  25. </html>

行内元素和块元素

块元素：无论内容有多少，元素自己独占一行

例如：

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

例如：

列表标签

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

  • 无序列表
  • 有序列表
  • 定义列表

表格

<!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>

视频和音频

    <title>视频和音频学习</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：控制调
autoplay：自动播放-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>
</body>
</html>

  <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚步</h2>
</footer>
<!--导航 nav-->
<nav></nav>
</body>
</html>

iframe内联框架

  <title>内联框架iframe</title>
</head>
<body>
<!--iframe内联框架
src：地址
w-h：宽，高-->
<iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe>
<a href="https://www.baidu.com" target="change" >点击跳转</a>


</body>
</html>

表单

    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
    post：比较安全，传输大文件-->
<form action="10.表单.html" method="post">
<!--文本输入框 Input type="text"  submit提交按钮 reset重置按钮  -->
    <p>名字：<input type="text" name="username"/></p>
    <p>密码：<input type="password" name="pwd"/></p>
    <p><input type="submit">
        <input type="reset"></p>


</form>

    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
    post：比较安全，传输大文件-->
<form action="10.表单.html" method="post">
<!--文本输入框 Input type="text"  name 输入框的名字
value 默认一个初始化值
maxlength 文本框最大输入字符
size 文本框长度
submit提交按钮 reset重置按钮
 -->
    <p>名字：<input type="text" name="username" value="帅" maxlength="8" size="10"/></p>
    <p>密码：<input type="password" name="pwd"/></p>
<!--单选框按钮  name必须为一致，才能表示为同一组，才能只选择一个
  input标签 类型是radio时，必须有value-->
    <p>
        <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>

单选框多选框

<!--单选框按钮 input type="radio" name必须为一致，才能表示为同一组，才能只选择一个
  input标签 类型是radio时，必须有value
    checked 默认选中-->
    <p>
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl"name="sex">女
<!-- 多选框标签 input type="checkbox"   -->
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="talk" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby" checked/>游戏
        <input type="checkbox" value="eat" 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/1.jpg"/>
    </p>
    <p><input type="submit">
        <input type="reset"></p>

下拉框

<!--下拉框 列表框
    <select>
    name是下拉框的名字
    option value 是下拉框可以选择的值
    selected是默认为那个列
-->
<p>国家
    <select name="列表名称" >
        <option value="china" selected>中国</option>
        <option value="us">美国</option>
        <option value="agt">阿根廷</option>
        <option value="md">缅甸</option>
    </select>
</p>

文本域、文件域

<!--    文本域
cols="30" rows="10" 行，，，列
-->
    <p>反馈：<textarea name="textarea"  cols="30" rows="10">文本内容</textarea></p>
<!--    文件域

-->
    <p><input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

功能验证

<!--  邮箱验证  -->
    <p><input type="email" name="email"></p>
<!--    URL验证-->
    <p><input type="url" name="url"></p>
<!--    数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
    <p><input type="number" name="num" max="100" min="1" step="1"></p>
<!--滑块-->
    <p>音量<input type="range" name="voice" max="100" min="0" step="2" ></p>
<!--    搜索框-->
    <p><input type="search" name="search"></p>

表单的应用
只读：value=”admin”（先给一个默认值） readonly
禁用：disabled
隐藏：hidden
单词：description 描述 content内容

<!--    增强鼠标可用性-->
   <p> <lable for="mark">点击</lable>
       <input type="text" id="mark"/>
   </p>

表单初级验证

placeholder="请输入用户名"<!--提示属性-->
required 非空判断
pattern 正则表达式

基础汇总

<!--告诉浏览器使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!--网页的头部-->
<head>
<!--    meta描述标签，描述网站信息-->
    <meta name="description" content="和狂神学java">
    <meta charset="UTF-8">
    <title>HTML小练习</title>
</head>
<body>
<a name="top">顶部</a>
<!--段落-->
<p>
    <b>你好，世界</b><br/>
    <em>i&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; love you</em>

    &copy;赵东
</p>
<!--水平线-->
<hr/>
<!--src=相对路径 alt=加载失败后显示文字 title=鼠标放在图片上显示的文字 width宽 height高-->
<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="800" height="600">
<!--锚链接 先使用a标签 定义名字做标记 再想返回标记的地方 a标签 #名字-->
<!-- a标签
href：必填，表示要跳转到那个页面
target：表示窗口在那里打开
_blank 在新标签中打开
_self   在自己的网页中打开
-->
<a href="https://www.baidu.com" target="_blank">点击跳转百度</a>
<!--功能性连接
邮件连接：mailto
QQ链接-->
<a href="mailto:1395950933@qq.com">点击联系我</a>
<!--有序列表
应用范围：试卷，问答。。。-->
<ol>
    <ul>Java</ul>
    <ul>C++</ul>
    <ul>运维</ul>
    <ul>前端</ul>
</ol>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>C++</li>
    <li>运维</li>
    <li>前端</li>

</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
范围：公司网站-->
<dl>
    <dt>学科</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dd>自然</dd>
</dl>
<!--表格table
行 tr rows
列 td
border表格的边框-->
<table border="1px">
    <tr>
<!-- colspan跨列 -->
        <td colspan="4">学习java </td>
    </tr>
    <tr>
<!--rowspan跨行 -->
        <td rowspan="2">java</td>
        <td>前端</td>
        <td>数据库</td>
        <td>Tomcat</td>
    </tr>
    <tr>
        <td>框架</td>
        <td>面向对象</td>
        <td>微服务</td>
    </tr>
</table>
<!--音频和视频
src：资源路径
controls：控制调
autoplay：自动播放-->
<hr/>
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>
<a href="#top">回到顶部</a>
<!--页面结构 header网页头部
            section网页主体
            footer网页脚部-->
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
<!--导航 nav-->
<nav></nav>
<hr>
<!--内联框架 iframe
src：地址
w-h：宽，高-->
<iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe>
<a href="https://www.baidu.com" target="change" >点击跳转</a>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
    get：可以在url中看到我们提交的信息，不安全
    post：比较安全，可传输大文件-->
<form action="1.我的第一个网页.html" method="get">
<!--    文本输入框 Input type=text name输入框名字
value默认初始值
maxlength文本框输入最大字节
size文本框长度
submit提交按钮
reset重置按钮-->
    <p>请注册账号</p>
    <p>名字：<input type="text" name="username" value="帅哥" size="30" maxlength="20" placeholder="请输入用户名" ></p>
    <p>密码：<input type="password" name="pwd"></p>
<!--单选框标签 type=radio input标签类型为radio时必须有value
    checked 默认选中-->
    <p><input type="radio" value="boy" name="sex" checked>男</p>
    <p><input type="radio" value="girl" name="sex">女</p>
<!-- 多选框标签 input type=“checkbox”  -->
    <p><input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="talk" name="hobby">说话
        <input type="checkbox" value="study" name="hobby">学习
        <input type="checkbox" value="eat" 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/1.jpg" width="200" height="160"/>
    <input type="submit"/>
    <input type="reset"/>
</p>
<!--下拉框 列表框    -->
<p>国家
    <select name="列表名称" id="">
        <option value="china" selected>中国</option>
        <option value="us">美国</option>
        <option value="agt">阿根廷</option>
        <option value="md">缅甸</option>
    </select></p>
<!--文本域
cols 行 rows 列-->
    <p>反馈：<textarea name="textarea"  cols="30" rows="10">文本内容</textarea></p>
<!--    文件域-->
    <p><input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
<!--    邮箱验证-->
    <p>邮箱：<input type="email" name="email"></p>
<!--    URL验证-->
    <p>URL <input type="url" name="url"></p>
<!--    数字验证
    max 最大数量
    min 最小数量
    step 每次点击增加或减少的数量-->
    <p>数字：<input type="number" name="num" max="100" min="1" step="1">
        <!--    滑块-->
        音量：<input type="range" name="voice" max="100" min="0" step="2">
    </p>
<!--搜索框-->
    <p><input type="search" name="search"></p>
    <p><input type="submit"></p>
<!--    增强鼠标可用性-->
        <p> <label for="mark"></label>
            <input type="text" id="mark"/>
        </p>


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