JZTXT

HTML5

发布时间 2023-07-10 20:50:42作者: 桃味小云朵

HTML5

HTML5的更新：使用网页实现动态渲染图形、图表、图像和动画，不需要安装插件直接使用网页播放视频。

W3C（万维网联盟）：

W3C标准：

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

IDE ： WebStorm

块元素:无论内容多少，该元素独占一行

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

基本标签

<!-- DOCTYPE:告诉浏览器，我们使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--头部 -->
<head>
    <!--meta：描述性标签，描述网站信息 -->
    <meta charset="UTF-8">
    <meta name="keywords">
    <title>我的第一个网页</title>
</head>
<!-- -->
<body>
<!--标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>

<!--段落标签 -->
<p>好的 好的</p>

<!--换行标签 -->
<br/>

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

<!--粗体，斜体-->
<h1>字体样式标签</h1>
<strong>i love you</strong>
<em>i love you</em>

<br/>
<!--注释，特殊符号,记忆方式：&+字母-->
空格:空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br/>
> : &gt; <br/>
< : &lt; <br/>
版权符号：&copy;

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习：
src:图片地址
    相对地址（推荐使用），绝对地址
    ../ ---上级目录
    title:悬停文字
    width：图像宽度
    height：图像高度
-->
<img src="../resources/image/1.jpg" alt="云朵" title="悬停文字" height="500" width="667">

<a href="链接标签.html#down">跳转</a>

</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="https://www.baidu.com" target="_blank">百度</a><br/>
<a href="FirstWeb.html" target="_self">我的网页</a><br/>

<!--锚链接
1.需要一个标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>

<a name="down"></a>


<!--功能性链接
邮件链接：mailto:-->
<a href="mailto:1544199414@qq.com">点击联系我</a>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
</ol>
<hr/>

<!--无序列表-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
</ul>
<hr/>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>重庆</dd>

</dl>


</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格 table
行：tr rows
列 td


-->
<table border="1px">
    <tr>
<!--colspan跨列-->
        <td colspan="4">1-1</td>
    </tr>
<!--rowspan跨行-->
    <tr>
        <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>

媒体元素

视频（video）音频（ audio）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频
autoplay 自动播放
src 资源路径
control 控制条-->
<video src="../resources/video/1.mp4" controls autoplay></video>

<audio src="../resources/audio/1.MP3" controls autoplay></audio>

</body>
</html>

页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="hello">跳转</a>
</body>
</html>

表单语法

<!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="FirstWeb.html" method="get">
<!--文本输入框：input type=“text”
value: 默认初始值
maxlength：最长字符
size：文本框长度
-->

    <p>名字 <input type="text" name="username" value="请输入名字" maxlength="8" size="20" readonly/></p>

<!--密码框：input type=“password”-->
    <p>密码 <input type="password" name="pwd"></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>

<!--多选框-->
    <p>爱好
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="write" name="hobby" checked/>写字
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </p>

<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset"  重置按钮
-->
    <p>按钮：
        <input type="button" name="button1" value="变"/>
        <input type="image" src="../resources/image/1.jpg"/>
    </p>


<!--下拉框，列表框
    selected 默认值
-->
    <p>下拉框
        <select name="列表名称" id="">
            <option value="选项的值">a</option>
            <option value="选项的值">b</option>
            <option value="选项的值" selected>c</option>
            <option value="选项的值">d</option>
            <option value="选项的值">e</option>
        </select>
    </p>

<!--文本域
cols="30" 列
rows="10" 行
-->

    <p>反馈
        <textarea name="text" id="1" cols="30" rows="10"></textarea>
    </p>

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

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

<!--数字-->

    <p>数字
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

<!--滑块-->

    <p>音量
        <input type="range" min="0" max="100"step="2">
    </p>

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

<!--增强鼠标可用性-->

    <p>
        <label for="mark">来呀来呀</label>
        <input type="text" id="mark">
    </p>

    
    
    <p>
        <input type="submit">
        <input type="reset"value="清空">
    </p>

</form>




</body>
</html>

readonly 只读

disabled 禁用

hidden 隐藏

表单验证

placeholder 提示信息

required 非空判断

pattern 正则表达式