后端学习HTML只要这一篇足矣

基本标签

• head网页头部

• meta描述性标签，用来描述网站的一些信息

• title网页标题

• h1一级标签

• h2二级标签

• h3三级标签

• 以此类推

• hr水平线标签

• br换行标签

• strong 粗体

• em斜体

• >大于号

• <小于号

• ©版权符号

图像标签

<img src="../resources/images/1000884.jpg" alt="王一博" title="王一博">

• 其中src:图片地址（必填选项）相对路径（推介使用）alt图像的替代文字 title鼠标放到图片上显示的文字

链接标签

<p><a href="***.html" target="_blank">点击跳转到页面一</a>

• href:必填选项，表示要跳转的网站或页面
• target:表示窗口在哪里打开
• _blank:在新窗口打开
• 锚链接
  跳转到标记

<!--使用name作为标记-->

	<a name="top">顶部</a>

	<a href="#top">跳转到顶部</a>

• 功能性链接
  邮件链接：mailto：
  QQ链接（百度搜索QQ推广，在推广工具中写出想要的内容会生成相应的代码，直接复制粘贴即可）

<a href="mailto:2899901694@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>

表格标签

• 表格table
tr：行
  td：列

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

媒体元素

• 音频和视频
  src:资源路径
  controls：控制条
  autoplay：自动播放

<!--<video src="../resources/videos/202106172223.mp4" controls autoplay></video>-->
<audio src="../resources/audios/录音.m4a" controls></audio>

列表标签

<!--无序列表-->
<ul>
    <li>java</li>
    <li>linux</li>
    <li>c/c++</li>
</ul>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>linux</li>
    <li>c/c++</li>
</ol>
<!--自定义列表-->
<dl>
    <div>123</div>
    <dt>学习科目</dt>
    <dd>java</dd>
    <dd>linux</dd>
    <dd>c/c++</dd>
</dl>

页面结构分析

<header>
    <h2>网页头部</h2>
</header>
<footer>
    <h2>网页脚部</h2>
</footer>
<section>
    <h2>网页主体</h2>
</section>

内联框架

<iframe src="https:www.baidu.com" name="hello" frameborder="0" width="1000px" height="300px" ></iframe>
<a href="3.图像标签.html" target="hello">点击跳转</a>

表单

• 表单form
  action：表单提交的位置，可以是网站，也可以是一个请求处理地址
  method：post，get 提交方式
  post:比较安全，传输大文件
  get:我们可以在URL中看到我们提交的信息，不安全，高效
• readonly：只读
• disable：禁用
• hidden：隐藏
• value：默认值
• placeholder：提示信息（用于输入框）
• required：非空判断
• pattern：正则表达

<form action="***.html" method="post">
<!--    文本输入框
    input type="text"
    value="呵呵" 默认初始值
    maxlength="8" 最长能写入几个字
    size="30" 文本框的长度
-->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
<!--单选框标签
    input type="radio"
    value：单选框的值
    name：表示组
-->
    <p>
        性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
<!--多选框
    input type="checkbox
-->
    <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>
<!--    按钮
    input type="button" 普通按钮
    input type="image" 图像按钮
    input type="submit" 提交按钮
    input type="reset" 重置
-->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/images/1000884.jpg">-->
    </p>
<!--    下拉框
        列表框
    -->
    <p>国家：
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="America">美国</option>
            <option value="Swiss">瑞士</option>
            <option value="indie" selected>印度</option><!--默认印度-->
        </select>
    </p>
<!--    文本域
            textarea
            cols="30" rows="10"
-->
    <p>反馈：
        <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
    </p>
<!--    文件域
            input type="file"
            name="files"
-->
    <p>文件：
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
<!--    简单验证-->
<!--邮箱验证
pattern：正则表达式-->
    <p>自定义邮箱：
        <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
    <p>邮箱：
        <input type="email" name="email">
    </p>
<!--    URL-->
    <p>URL：
        <input type="url" name="url">
    </p>
<!--    数字-->
    <p>商品数量：
        <input type="number" name="num" min="0" max="100" step="1" id="mark">
    </p>
<!--  滑块
        input type="range"
  -->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="any">
    </p>
<!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>
<!--增强鼠标可用性-->
<p>
    <label for="mark">点击我试试</label>
    <input type="text" >
</p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>

看完记得点个赞鸭，关个注鸭，加个收藏鸭！！！！！！！！！！！！！