2021-06-23---------04HTML

最新推荐文章于 2025-08-16 06:13:53 发布

我卡在门缝里了>_<

最新推荐文章于 2025-08-16 06:13:53 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

分类专栏： javaweb 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_44494957/article/details/118145207

javaweb 专栏收录该内容

5 篇文章

订阅专栏

04HTML

- - - - 逻辑
        事件
        视图
        通信
1.什么是HTML？
- 简介：
2.基本标签
3.列表
4.第一个网页
5.表格标签
6.视频和音频
7.页面结构分析
8.iframe内联框架
9.表单

逻辑

判断
循环

事件

Dom事件
jQuery

视图

html
css

通信

ajax

1.什么是HTML？

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

W3C标准

简介：

World Wide Web ConsortIum(万维网联盟)
成立于1994年，web技术领域最权威和具有影响力的国际中立性技术标准机构
http://www.w3.org/

标准包括：

结构化标准语言(HTML,XML)

表现标准语言（CSS）

行为标准语言（DOM,ECMAScript）

常见的IDE

Dreamweaver,idea,WebStorm

网页的基本信息

2.基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    块元素：下一个标签或者本标签另起一行
    行内元素：标签不另起一行
    可以互相切换
    -->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段落标签-->
<p>跑的快    跑的快</跑的快>
<p>跑的快    跑的快</跑的快>
<!--换行标签-->
<br/>跑得快
<!--水平线标签-->
<hr/>
<!--粗体，斜体-->
<strong>i love you</strong><br>
<em>i love you</em><br>
<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
&gt;大于
&lt;小于
&copy;版权符号
<br>
<!--图像标签
path:表示要跳转的位置
alt:加载不出来用文字表示
title:表示鼠标指的时候出现的文字
-->
<img src="../resource/img/3.jpg" alt="动漫女生" title="悬浮文字" width="80" height="40"><br>
<!--链接标签
a标签
href：表示要跳转的位置
target:表示窗口在哪里打开
        _blank在新页面打开
        _self在自己页面打开
-->
<a href="https://www.baidu.com" target="_self">百度</a><br>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a name="down">底部</a><br>
<!--
功能性链接
邮件链接：
qq链接
-->
<a href="mailto:1445@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="点击这里给我发消息" title="点击这里给我发消息"/></a>




</body>
</html>

3.列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
</ol>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>java</li>
    <li>python</li>
</ul>
<!--自定义列表
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dt>位置</dt>
    <dd>西江</dd>
</dl>

</body>
</html>

4.第一个网页

<!--DOCTYPE：告诉浏览器要使用什么规范
    head:表示网页头部
    body:表示网页主题
    title:表示网页标题
    meta:描述性标签，用来描述网站的一些信息，一般用来做SEO
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="我爱java">
    <meta name="descript" content="第一次学习">

    <title>Title</title>
</head>
<body>
<!--跳转到固定页面的指定位置-->
<a href="基本标签.html#down">跳转</a>

</body>
</html>

5.表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格
table
行：tr
列：td
colspan:跨列
rowspan：跨行
-->
<table border="1" bgcolor="aqua">
    <tr>
        <td colspan="4">1</td>

    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
</body>
</html>

6.视频和音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--
视频：
controls：控制条
autoplay：自动播放
-->
<video src="" height="" controls autoplay></video>
<!--音频-->
<audio src="" controls autoplay></audio>
</body>
</html>

7.页面结构分析

footer:标记脚部区域的内容

section：web页面中的一块独立区域

article:独立的文章内容

aside:相关内容或者应用
nav:导航类辅助内容

8.iframe内联框架

内联框架指的是在本页面跳转，而本页面保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--<iframe
        src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97256834&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>-->
<!--
内联框架
src:地址
frameborder:
name:
-->
<iframe src="" name="Hello" frameborder="0"></iframe>
<a href="我的第一个网页.html" target="Hello">跳转</a>
</body>
</html>

9.表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单
value:配置默认值
maxlength：最长能写几个字符
size:文本的长度
readonly:只读，不能更改
disabled:禁用
hidden:密码框不在了
placeholder：提示信息
required:数据不能为空，非空判断
pattern:正则表达式


-->
<form action="我的第一个网页.html" method="get">
    <p>名字：<input type="text" name="username" value="狂神牛逼" maxlength="8" size="20" required readonly placeholder="请输入用户信息"></p>
    <p>密码：<input type="password" name="password" hidden value="12345"></p>
    <!--
    单选框：
    value:单选框的值
    name:分组，如果组不一样，也能同时选两个，也就失去了单选的意义

    -->
    <p>
        性别：
        <input type="radio" value="boy" name="sex" checked disabled>男
        <input type="radio" value="girl" name="sex">女

    </p>
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
    </p>
    <!--按钮-->
    <p>
        按钮：
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resource/img/3.jpg" width="80" height="40">
    </p>
    <p>
        <input type="submit" value="交出">
        <input type="reset" value="清空表单">
    </p>
    <!--
    selected:默认选中
    -->
    <p>
        国家 ：
        <select name="列表名称" id="">
            <option value="选项的值">中国</option>
            <option value="选项的值" selected>瑞士ETH</option>
            <option value="选项的值">美国</option>
        </select>
    </p>
    <!--文本域-->
    <p>
        反馈：
        <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
    </p>
    <!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <!--邮件验证-->
    <p>
        邮箱：
        <input type="email" name="email"><br>
        URL：
        <input type="url" name="url"><br>
        <!--max：最大值
        step:步长
        -->
        数字：
        <input type="number" name="num" max="10" min="1" step="1">
    </p>
    <!--滑块-->
    <p>
        音量：
        <input type="range" min="0" max="10" step="1" name="voice">
    </p>
    <!--搜索框-->
    <p>
        <input type="search" name="搜索框" id="mark">
    </p>
    <!--增强鼠标可用性-->
    <p>
        <label for="mark">点我试试</label>
    </p>
<!--自定义邮箱-->
    <p>
        自定义邮箱：
        <input type="email" pattern="">
    </p>
</form>
</body>
</html>

表单初级验证作用