文章目录

  • HTML
  • 01 初始HTMl
  • 02 网页基本元素
  • 03 网页基本标签
  • 04 图像标签
  • 05 链接标签
  • 06 行内元素和块元素
  • 07 列表
  • 08 表格
  • 09 媒体元素
  • 10 页面结构分析
  • 11 iframe内联框架
  • 12 初识表单post和get提交
  • 13 文本框和单选框
  • 14 按钮和多选框
  • 15 文本域和文件域
  • 16 搜索框滑块和简单验证
  • 17 表单的应用
  • 18 表单初级验证
  • 19 HTML总结
  • 18 表单初级验证
  • 19 HTML总结


HTML

狂神B站视频：https://www.bilibili.com/video/BV1x4411V75C

01 初始HTMl

什么是HTML？

Hyper Text Markup Language : 超文本标记语言

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

目前使用的是HTML5

W3C标准

W3C标准包括：

  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准语言（DOM、ECMAScript）

常见IDE

  • 记事本
  • Dreamweaver
  • IDEA
  • WebStorm
  • 。。。

02 网页基本元素

HTML基本结构

网页头部

主体部分

网页基本信息

  • DOCTYPE声明：告诉浏览器，我们要使用什么规范
  • <title>标签 ：网页标题
  • <meta>标签：描述性标签，用来描述网站的一些信息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keyboards" content="Java">
    <meta name="description" content="学习Java"> 
    <title>Title</title>
</head>
<body>

</body>
</html>

03 网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--1、标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6>

<!--2、段落标签-->
<p></p>
也许世界就这样
我也还在路上
没有人能诉说
也许我只能沉默
眼泪湿润眼眶
可又不甘懦弱
低着头 期待白昼
接受所有的嘲讽
向着风 拥抱彩虹
勇敢的向前走
黎明的那道光
<p>也许世界就这样</p>
<p>我也还在路上</p>
<p>没有人能诉说</p>
<p>也许我只能沉默</p>
<p>眼泪湿润眼眶</p>
<p>可又不甘懦弱</p>

<!--3、换行标签-->
也许世界就这样 <br>
我也还在路上

<!--4、水平线标签-->
<hr>

<!--5、字体样式标签-->
粗体：<stronge>I LOVE YOU </stronge>
斜体：<em>I LOVE YOU </em>
<hr>
<!--6、特殊符号-->
空  格：     <br>
大于号：>      <br>
小于号：<      <br>
版权符号：©

<!--7、注释-->
</body>
</html>

04 图像标签

常见图像格式：

  • JPG
  • GIF
  • PNG
  • BMP：位图
  • …

语法：

<img src="path" alt="text"    title="标题" width="x" height="y">
     图像地址    图像到的替代文字 鼠标悬停提示文字  图像宽度   图像高度

练习：

<!--图像标签-->
<!--src:图片地址
        相对地址：
            ../   上一级目录
        绝对地址：
-->
<img src="../resource/images/timg.jpg" alt="图像" title="悬停文字" width="200" height="200">

05 链接标签

语法：

<!--链接标签-->
<a href="path" target="目标窗口位置">链接文本或图像</a>

文本超链接

图像超链接

练习：

<!--链接标签：
<a href="path" target="目标窗口位置">链接文本或图像</a>
        href：必填 ，表示要跳转到那个页面
        target:表示窗口在哪里打开，默认是当前页面打开
               _blank：在新的标签页打开
               _self:在自己的网页中打开

-->
<!--文字超链接-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
<br>
<!--图像超链接-->
<a href="http://www.baidu.com">
    <img src="../resource/images/timg.jpg" alt="图像" title="悬停文字" width="200" height="200">
</a>

锚链接：

  • 通过# 实现页面间的跳转
  • 跳转到另一个页面指定的位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
</head>
<body>
    <!--锚链接
    1.需要一个标记
    2.然后跳转到标记
    3.使用 #
-->
<p>
    <a href="http://www.baidu.com">
        <img src="../resource/images/timg.jpg" alt="图像" title="悬停文字" width="200" height="200">
    </a>
</p>
<p>
    <a href="http://www.baidu.com">
        <img src="../resource/images/timg.jpg" alt="图像" title="悬停文字" width="200" height="200">
    </a>
</p>
    ........
<a href="#top">跳转到顶部</a>
<!--分割线 -->   
    
<!--跳转到另一个页面指定的位置 -->
<a href="test.html#down">去测试页面的底部down</a>
    
</body>
</html>
  • 功能性链接
<!--功能性链接：
              邮件链接：mailto
              QQ链接：
-->
<a href="mailto:3478094548@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::53" alt="点击联系我！" title="点击联系我！"/>
</a>

06 行内元素和块元素

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

07 列表

什么是列表：

列表的分类：

  • 有序列表
  • 无序列表
  • 定义列表
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
</ol>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
</ul>
<!--自定义列表
    dl：标签
    dt:列表名称
    dd：列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>python</dd>
    <dd>运维</dd>

    <dt>位置</dt>
    <dd>北京</dd>
    <dd>珠海</dd>
</dl>


08 表格

为什么使用表格？

  • 简单通用
  • 结构稳定

基本结构：

  • 单元格
  • 行 tr
  • 列 td
  • 跨行 rowspan
  • 跨列 colspan
<!--表格
    行：tr
    列：td
    colspan:跨列
    rowspan:跨行

-->
<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>

</table>

09 媒体元素

视频元素

  • video

音频元素

  • audio
<!--媒体元素
视频：
    controls:滚动条
    autoplay：自动播放
-->
<video src="../resource/video/4.mp4" controls autoplay></video>

<audio src="../resource/audio/薛之谦%20-%20演员.mp3" controls></audio>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W1m38XLr-1613567238892)(C:\Users\17316\AppData\Roaming\Typora\typora-user-images\image-20210216231054805.png)]

10 页面结构分析

11 iframe内联框架

语法：

<iframe src="path" frameborder="0" name="mainFrame"></iframe>
        引用页面地址                 框架标示名

哔哩哔哩html5切换 哔哩哔哩网页html分析_html5

<!--iframe内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=331637164&bvid=BV1yA411T7Nc&cid=298197620&page=1"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true">
</iframe>
<iframe src="https://www.baidu.com" frameborder="0" name="mainFrame" width="800px" height="1000px"></iframe>

<!--通过a标签往iframe里加东西-->
<iframe src="" frameborder="0" name="hello" width="800px" height="1000px"></iframe>
    <a href="https://www.bilibili.com/" target="hello">点击我跳转到B站</a>

12 初识表单post和get提交

表单语法：

<!--初识表单post和get提交
    method:规定如何发送表单数据，常用值：：post、get
        get方式提交：可以在url中看到提交的信息
		post方式提交：比较安全，可以传输大文件
    action:表示向何处发送表单数据,可以是一个网站，或者一个请求处理地址
-->
<form method="get" action="2.基本标签.html">
    <!--文本输入框：text-->
    <p>姓名：<input type="text" name="username"></p>
    <!--密码框：password-->
    <p>密码：<input type="password" name="password"></p>

    <!--提交-->
    <input type="submit">
    <!--重置-->
    <input type="reset">
</form>

哔哩哔哩html5切换 哔哩哔哩网页html分析_html_02

哔哩哔哩html5切换 哔哩哔哩网页html分析_哔哩哔哩html5切换_03

哔哩哔哩html5切换 哔哩哔哩网页html分析_表单_04

哔哩哔哩html5切换 哔哩哔哩网页html分析_哔哩哔哩html5切换_05

13 文本框和单选框

表单语法

哔哩哔哩html5切换 哔哩哔哩网页html分析_html_06

单选框：

<!--单选框标签：
    input type="radio"
    value：单选框的值
    name：表示组，name相同为一个组，即只能选择一个
-->
<radio>
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</radio>

多选框：

<!--多选框-->
<p> 爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="book" name="hobby">看书
    <input type="checkbox" value="swimming" name="hobby">游泳
    <input type="checkbox" value="write" name="hobby">写作

</p>

14 按钮和多选框

普通按钮：

<!--按钮-->
    <p> 按钮：
        <input type="button" name="btn1" value="点击查看">
    </p>

图片按钮：

<input type="image" name="bt2" src="../resource/images/timg.jpg"><!--可以点击提交，相当于submit-->

下拉框：

<p>国家：
    <select name="country">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="ruishi" selected>瑞士</option>
    </select>
</p>

15 文本域和文件域

文本域：

<!--文本域-->
<p>反馈：
<textarea name="texttarea" cols="10" rows="10">文本内容</textarea>
</p>

文件域：

<!--文件域-->
<input type="file" name="files">

http://localhost:63342/HTML/html/test.html?username=lisa&password=ddd&sex=girl&hobby=book&country=us&texttarea=%E9%A9%B1%E8%9A%8A%E5%99%A8%E6%97%A0%E7%BE%A4%E6%97%A0&files=beauty_20190618184051.jpg

16 搜索框滑块和简单验证

<!--邮件验证-->
<p> 邮箱：
    <input type="email" name="email">
</p>

<p> URL：
    <input type="url" name="url">
</p>
<p> number：
    <input type="number" name="number" max="100" min="0" step="10">
</p>
  <!--滑块：-->
    <p>滑块：
        <input type="range" name="voice" min="0" max="10">
    </p>

哔哩哔哩html5切换 哔哩哔哩网页html分析_表单_07

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

17 表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled
只读：
<p>姓名：<input type="text" name="username" value="lisa" readonly></p>
禁用：可以放到任何地方
 <input type="radio" value="boy" name="sex" disabled/>男
隐藏域：
    <p>密码：<input type="password" name="password" hidden value="123456"></p>

增强鼠标的可用性：

<p>增强鼠标的可用性：
        <label for="mark">你点我试试！！</label>
        <input type="text" id="mark">

 </p>

哔哩哔哩html5切换 哔哩哔哩网页html分析_表单_08

18 表单初级验证

思考：

  • 减轻服务器的压力
  • 安全性

常用方式：

  • placeholder 提示信息
  • required 元素不能为空，应用于所有的文本框中
  • pattern 正则表达式
<p>姓名：<input type="text" name="username" placeholder="请输入用户名"></p>
    <p>姓名：<input type="text" name="username" placeholder="请输入用户名" required></p>

<p> 自定义邮箱：
        <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

    </p>

19 HTML总结

用性：
你点我试试！！

```

[外链图片转存中…(img-oVCOfCqh-1613567238915)]

18 表单初级验证

思考：

  • 减轻服务器的压力
  • 安全性

常用方式：

  • placeholder 提示信息
  • required 元素不能为空，应用于所有的文本框中
  • pattern 正则表达式
<p>姓名：<input type="text" name="username" placeholder="请输入用户名"></p>
    <p>姓名：<input type="text" name="username" placeholder="请输入用户名" required></p>

<p> 自定义邮箱：
        <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

    </p>

19 HTML总结

哔哩哔哩html5切换 哔哩哔哩网页html分析_哔哩哔哩html5切换_09