html5

HTML5

HTML基本结构

、等成对出现的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素)，如

---

意为用/来关闭空元素

网页基本信息

html中注释的写法

DOCTYPE：使用的是什么规范
head：代表网页头部
meta：描述性标签，用来描述网站的一些信息，一般用来做SEO

<meta charset="UTF-8">
<meta name="keyword" content="我自己的网站">
<meta name="description" content="尝试一下自己做网页">

body：代表网页主体
title：网页标题

网页基本标签

标题标签

<h1>    一级标签h1>
<h2>    二级标签h2>
<h3>    三级标签h3>

段落标签

而现在，
乡愁是一湾浅浅的海峡，
我在这头，
大陆在那头。
<p>而现在，p>
<p>乡愁是一湾浅浅的海峡，p>
<p>我在这头，p>
<p>大陆在那头。p>

#效果
而现在，乡愁是一湾浅浅的海峡，我在这头，大陆在那头。
而现在，
乡愁是一湾浅浅的海峡，
我在这头，
大陆在那头。

换行标签

如果有一天 <br/>
我老无所依 <br>
请把我留在 <br>
在那春风里 <br>

水平线标签

<hr>

粗体，斜体

粗体：<strong>I love youstrong>斜体：<em>I love youem>

特殊符号

空格：
大于号：>
小于号：<
版权符号：©

图像标签

src:图片地址
相对地址（推荐），绝对地址
alt:图片无法加载显示文本
title:悬停文字
width:宽
height:高

链接标签

href:必填，表示要跳转到哪个页面
target:在哪个页面打开

• _blank 在新标签中打开
• _self 在当前页面打开

<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一a>
<a href="https://www.baidu.com">点击我跳转到百度a>
<a href="1.我的第一个网页.html">
    <img src="../resource/image/1.jpg" alt="点击我跳转到页面一">
a>

锚链接

1.需要一个锚标记
2.跳转到标记

<a id="top">顶部a> 一个锚标记

<a href="#top">回到顶部a> 跳转加#，前面可以加上页面实现页面间跳转

功能性链接

邮件链接 mailto

列表

无序列表
<ol>
  <li>Javali>
  <li>Pythonli>
  <li>Cli>
  <li>C+li>
ol>
有序列表
<ul>
    <li>Javali>
    <li>Pythonli>
    <li>Cli>
    <li>C+li>
ul>
自定义列表
<dl>
    <dt>列表名称dt>
    <dd>Javadd>
    <dd>Pythondd>
    <dd>Cdd>
    <dd>Linuxdd>
dl>

显示效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fCHtVg0L-1637545150993)(C:\Users\ZRZ\AppData\Roaming\Typora\typora-user-images\image-20211109102413526.png)]

表格

表格table
行 tr
列 td

<table border="'1px">
    <tr>
        <td>1.1td>
        <td>1.2td>
        <td>1.3td>
        <td>1.4td>
    tr>
    <tr>
        <td>2.1td>
        <td>2.2td>
        <td>2.3td>
        <td>2.4td>
    tr>
    <tr>
        <td>3.1td>
        <td>3.2td>
        <td>3.3td>
        <td>3.4td>
    tr>
table>

跨行和跨列

<table border="'1px">
    <tr>
        
        <td colspan="4">1.1td>
        <td>1.2td>
        <td>1.3td>
        <td>1.4td>
    tr>
    <tr>
        
        <td rowspan="2">2.1td>
        <td>2.2td>
        <td>2.3td>
        <td>2.4td>
    tr>
    <tr>
        <td>3.1td>
        <td>3.2td>
        <td>3.3td>
        <td>3.4td>
    tr>
table>

视频和音频

视频

src:资源路径
controls：控制条
autoplay：自动播放

<video src="" controls autoplay>video>

音频

src:资源路径
controls：控制条
autoplay：自动播放

<audio src="" controls autoplay>audio>

页面结构分析

内联框架iframe

<iframe src="" name="hello" frameborder="0">iframe>
<a href="1.我的第一个网页.html" target="hello">点此跳转a>

表单

<h1>注册h1>

<form action="1.我的第一个网页.html" method="post">

    <p>名字：<input type="text" name="username">p>

    <p>密码：<input type="password" name="pwd">p>

    <p>
        <input type="radio" value="boy" name="gender" checked>男
        <input type="radio" value="girl" name="gender">女
    p>

    <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="点击变长">

    p>

    <p>美食：
        <select name="列表名称" id="">
            <option value="选项的值">煎饼option>
            <option value="选项的值" selected>火锅option>
            <option value="选项的值">烧烤option>
            <option value="选项的值">日料option>
            <option value="选项的值">汤锅option>
            <option value="选项的值">炒菜option>
        select>
    p>

    <p>反馈
        <textarea name="textarea" id="01" cols="50" rows="10">真的是太酷了！！！textarea>
    p>

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

    <p>邮箱
        <input type="email" name="email">
    p>

    <p>网址
        <input type="url" name="email">
    p>

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

    <p>滑块
        <input type="range" name="volumn" min="0" max="100">
    p>

    <p>搜索
        <input type="search" name="search">
    p>
    <p>
        <input type="submit" name="确认">
        <input type="reset" name="重置">
    p>
form>

效果预览：

表单的应用

隐藏域 hidden
只读 readonly
禁用 disable

表单初级验证

常用方式
预显示：placeholder=“”
非空判断：requied
正则表达式：pattern