HTML学习总结

学习视频:狂神说 HTML

简介

HTML:Heper Text Markup Language(超文本标记语言)
开发时间:1993-06
最新版本(主流):HTML5 2013-05-06
标准:W3C标准 World Wide Web Consortium(万维网联盟)1994
W3C标准包括:
结构化标准语言(HTML、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript)
编译器IDE:记事本、WebStorm、Idea(常用)
idea使用说明:
在这里插入图片描述
idea浏览器设置:
在这里插入图片描述

HTML代码结构

第一个网页

网页基本信息:
DOCTYPE声明:告诉浏览器使用说明规范
< title >标签
< meta >标签

代码说明:

<!--注释标签-->
<!--DOCTYPE:告诉浏览器使用的规范-->
<!DOCTYPE html>
<html lang="en">

<!--head标签代表网页头部-->
<head>
    <!--描述网页的信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>我的第一个网页</title>
</head>

<!-- body标签代表网页主体 -->
<body>
    <!--内容-->
Hello,World!
</body>
</html>

效果图:
在这里插入图片描述

基本标签

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

代码说明:

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

<!--水平线标签-->
<hr/>

<!--换行标签-->
才是刻骨铭心<br/>
若能回到冰河时期<br/>
多想把你抱紧处理<br/>

<!--粗体,斜体-->
粗体: <strong>i love you</strong>
斜体: <em>i love you</em>
<br/>
<!--特殊符号-->
空格: 空&nbsp;&nbsp;&nbsp;&nbsp;<br/>
大于号: &gt;
小于号: &lt;
版权符号: &copy;版权所有

<!--特殊符号记忆方式&  ;-->
</body>
</html>

效果图:
在这里插入图片描述

图片标签

常见的图像格式
JPG
GIF
PNG
BMP
< img src=“path” alt=“text” title=“text” width=“x” height=“y” >
在这里插入图片描述
代码说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
    <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="700" width="700"/>
</body>
</html>

效果图:
在这里插入图片描述

链接标签

链接标签:
文本超链接
图片超链接

超链接:
页面间链接
锚链接
功能性链接

代码说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a name="top">顶部</a>

<!--a标签
href:必填,表示要跳转到那个页面
target:表示窗口在哪里打开
    _blank 在新标签中打开
    _self 在当前网页打开
-->
    <!--文本链接-->
    <a href="01创建HTML.html" target="_blank">点击我跳转到页面</a>
    <a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
    <br/>

    <!--图片链接-->
    <a href="01创建HTML.html">
        <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="400" width="400"/>
    </a>
    <br/>
    <!--功能性链接
        邮件链接:mailto
        qq链接
    -->
    <a href="mailto:77077@qq.com">点击联系我</a>
    <br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=770782393&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:770782393:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

    <p>
        <a href="01创建HTML.html">
            <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="400" width="400"/>
        </a>
    </p>
    <p>
        <a href="01创建HTML.html">
            <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="400" width="400"/>
        </a>
    </p>
    <p>
        <a href="01创建HTML.html">
            <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="400" width="400"/>
        </a>
    </p>
    <p>
        <a href="01创建HTML.html">
            <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="400" width="400"/>
        </a>
    </p>
    <p>
        <a href="01创建HTML.html">
            <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="400" width="400"/>
        </a>
    </p>
    <p>
        <a href="01创建HTML.html">
            <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="400" width="400"/>
        </a>
    </p>
    <p>
        <a href="01创建HTML.html">
            <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="400" width="400"/>
        </a>
    </p>
    <p>
        <a href="01创建HTML.html">
            <img src="../resource/image/xiamu.jpg" alt="夏目" title="悬停文字" height="400" width="400"/>
        </a>
    </p>

    <!--锚标签
    1.需要一个锚标记
    2.跳转到标记
    #
    -->
    <a href="#top">回到顶部</a>
    <a name="down">底部</a>
    </body>
    </html>

效果图:
在这里插入图片描述

块元素和行内元素

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

列表标签

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

代码说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
    <body>
        <!--有序列表-->
        <ol>
            <li>java</li>
            <li>python</li>
            <li>c</li>
            <li>c++</li>
        </ol>
<hr/>
        <!--无序列表-->
        <!--应用范围: 导航,侧边栏-->
        <ul>
            <li>java</li>
            <li>python</li>
            <li>c</li>
            <li>c++</li>
        </ul>

        <!--自定义列表
        dl: 标签
        dt: 列表名称
        dd: 列表内容
        应用范围:公司网站底部
        -->
        <dl>
            <dt>地区</dt>

            <dd>北京</dd>
            <dd>天津</dd>
            <dd>南京</dd>
            <dd>香港</dd>
        </dl>
    </body>
</html>

效果图:
在这里插入图片描述

表格标签

基本结构:
单元格


跨行
跨列
在这里插入图片描述
代码说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!--表格标签
    行 tr
    列 td
    -->
<table border="1px">
    <tr>
        <td colspan="4" style="text-align: center">学生成绩</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>

效果图:
在这里插入图片描述

媒体标签

音频
视频

代码说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体标签</title>
</head>
<body>
    <!--音频和视频
    scr: 资源路径
    controls:控制条
    autoplay-->
    <video src="../resource/video/ve.mp4" controls autoplay></video>
    <video src="../resource/audio/chushan.mp3" controls autoplay></video>
</body>
</html>

效果图
在这里插入图片描述

页面结构

在这里插入图片描述
代码说明:

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

效果图:
在这里插入图片描述

内联框架

在这里插入图片描述

代码说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--iframe内联框架
src:地址
w-h:高度宽度
-->
<!--<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px" ></iframe>-->

<iframe src="" name="baidu" frameborder="0" width="1000px" height="800px" ></iframe>

<!--a:target="baidu"属性表示链接在baidu对象中打开-->
<a href="https://www.baidu.com" target="baidu">点击跳转</a>
</body>
</html>

效果图:
在这里插入图片描述

表单标签

1.表单标签
在这里插入图片描述

代码说明:

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

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

效果图:
在这里插入图片描述
表单提交信息:
在这里插入图片描述
2.表单元素格式:
在这里插入图片描述
代码说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get提交方式
    get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
    post:比较安全,传输大文件
-->
    <form action="01创建HTML.html" method="get">
        <!--文本输入框:input type="text"
        value="夏目温柔" 默认初始值
        maxlength="8" 最长能写几个字符
        size="30" 文本框的长度
        -->
        <p>名字:<input type="text" name="username" value="夏目温柔" maxlength="8" size="30"></p>
        <!--密码框:input type="password"-->
        <p>密码:<input tyoe="password" name="pwd"></p>

        <!--单选框
            input type="radio"
            value:单选框的值
            name:表示组
            checked:默认选择
        -->
        <p>性别(单选框):
            <input type="radio" value="boy" name="sex" checked/><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>
        <!--按钮-->
        <p>按钮:
            <input type="button" name="btn1" value="点击变长">
            <input type="image" src="../resource/image/xiamu.jpg" width="400" height="400">

        </p>
        <!--下拉框,列表框
        option value="中国" selected 默认选择
        -->
        <p>下拉框:
            <select name="国家">
                <option value="中国">中国</option>
                <option value="俄罗斯">俄罗斯</option>
                <option value="美国">美国</option>
                <option value="日本" selected>日本</option>
            </select>
        </p>

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

        <!--文件域
        -->
        <p>文本域:
            <input type="file" name="files">
        </p>

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

        <!--URL-->
        <p>URL:
            <input type="url" name="url">
        </p>

        <!--数字-->
        <p>数字:
            <input type="number" name="number" max="100" min="0" step="1">
        </p>

        <p>滑块:
            <input type="range" name="voice" min="0" max="100" step="2">
        </p>

        <!--搜索框-->
        <p>搜索:
            <input type="search" name="search">
        </p>
        <p>
            <input type="submit">
            <input type="reset">

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

效果图:
在这里插入图片描述

提交表单信息:
http://localhost:63342/study01/html/01%E5%88%9B%E5%BB%BAHTML.html?username=aaaaa&pwd=ababa&sex=boy&hobby=code&%E5%9B%BD%E5%AE%B6=%E6%97%A5%E6%9C%AC&textarea=sdafda&files=fan.png&email=&url=&number=&voice=50&search=

3.表单的应用:
隐藏域 hidden隐藏
只读 readonly只读
禁用 disabled禁用
增强鼠标可读性
< label for=“mark”>点击< /label>
< input type=“text” id=mark>

代码说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get提交方式
    get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
    post:比较安全,传输大文件
-->
    <form action="01创建HTML.html" method="get">
        <!--文本输入框:input type="text"
        value="夏目温柔" 默认初始值
        maxlength="8" 最长能写几个字符
        size="30" 文本框的长度
        -->
        <p>名字:<input type="text" name="username" value="夏目温柔" maxlength="8" size="30" readonly></p>
        <!--密码框:input type="password"-->
        <p>密码:<input tyoe="password" name="pwd" hidden></p>

        <!--单选框
            input type="radio"
            value:单选框的值
            name:表示组
            checked:默认选择
        -->
        <p>性别(单选框):
            <input type="radio" value="boy" name="sex" checked disabled/><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>
        <!--按钮-->
        <p>按钮:
            <input type="button" name="btn1" value="点击变长">
            <input type="image" src="../resource/image/xiamu.jpg" width="400" height="400">

        </p>
        <!--下拉框,列表框
        option value="中国" selected 默认选择
        -->
        <p>下拉框:
            <select name="国家">
                <option value="中国">中国</option>
                <option value="俄罗斯">俄罗斯</option>
                <option value="美国">美国</option>
                <option value="日本" selected>日本</option>
            </select>
        </p>

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

        <!--文件域
        -->
        <p>文本域:
            <input type="file" name="files">
        </p>

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

        <!--URL-->
        <p>URL:
            <input type="url" name="url">
        </p>

        <!--数字-->
        <p>数字:
            <input type="number" name="number" max="100" min="0" step="1">
        </p>

        <p>滑块:
            <input type="range" name="voice" min="0" max="100" step="2">
        </p>

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

        <label for="mark">点击</label>
        <input type="text" id=mark>
        <p>
            <input type="submit">
            <input type="reset">

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

效果图:
在这里插入图片描述
4.表单初级验证
常用方式:
placeholder
required
pattern

代码说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<h1>注册</h1>

    <form action="01创建HTML.html" method="get">
        <p>名字:<input type="text" name="username" maxlength="8" size="30" placeholder="请输入用户名" required></p>
        <!--密码框:input type="password"-->
        <p>密码:<input tyoe="password" name="pwd" placeholder="请输入密码" required></p>
        <p>自定义邮箱:
            <input type="text" name="diymail" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" required>
        </p>
        <p>
            <input type="submit">
            <input type="reset">

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

效果图:
在这里插入图片描述
正则表达式查询网址:https://www.jb51.net/tools/regexsc.htm

总结

在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Baal Austin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值