HTML5详解-CSDN博客

本文链接：https://blog.csdn.net/m0_52734332/article/details/136161097

什么是HTML

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

网页基本标签

标题标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

段落标签

<!--段落标签-->
<p>两只老虎    两只老虎</p>
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<p>两只老虎     两只老虎</p>
<p>跑得快        跑得快</p>

换行标签

<!--换行标签-->
两只老虎    两只老虎 <br/>
两只老虎    两只老虎 <br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>

水平线标签

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

字体样式标签

<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>

注释和特殊符号

<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;格
大于 &gt;
小于 &lt;
等等；用的时候可以查百度

图片标签

<!--
src :存储地址，推荐写相对地址
alt:文件加载不出来时，显示的代替性文字
title:悬停文字
-->
<img src="../rescourse/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">

链接标签

页面间链接

<!--页面间链接
href:链接到的地址
target:打开方式
    _blank：新页面打开
    _self:本页面打开
-->
<a href="我的第一个html.html" target="_blank">点击这里跳转到第一个页面</a>
<br/>
<a href="https://www.baidu.com" target="_self">点击这里跳转到百度</a>
<a href="图像标签.html">
    <img src="../rescourse/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
</a>

锚链接

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




<!--填充内容-->




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

功能链接

<!--邮件标签
-->
<a href="mailto:1983984706@qq.com">联系我的邮箱</a>

列表

什么是列表
◆列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并
以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类

无序列表
<ul>
    <li>无序列表</li>
    <li>无序列表</li>

    <li>无序列表</li>

</ul>
有序列表
<ol>
    <li>有序列表1</li>
    <li>有序列表1</li>
    <li>有序列表1</li>
    <li>有序列表1</li>
</ol>
自定义列表
<dl>
    <dt>学科</dt>
    <dd>数学</dd>
    <dd>英语</dd>
</dl>

表格

<!--
    tr:行标签
    td:列
    border:边框
    colspan:跨列
    rowspan:跨行
-->
<table border="1px">
    <tr>
        <td colspan="3">&nbsp;&nbsp;学习成绩&nbsp;&nbsp;</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>

页面结构分析

iframe内联框架

表单

<!--表单form
    action：表单提交的位置，可以是网站，也可以是一个请求处理地址
    method:
    post,get提交方式
        get方式提交：我们可以在urL中看到我们提交的信息，不安全，高效·
        Post:比较安全，输大文件
-->
<form action="1我的第一个html.html" method="post">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="psd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

单选框

<!--单选框
input type="radio" 
value:单选框的值
name:表明组
-->
<p>
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>

多选框

<p>多选
        <input type="checkbox" value="sleep" name="bobby">睡觉
        <input type="checkbox" value="code" name="hobby ">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="chat" name="hobby">游戏
    </p>

按钮

<p>按钮
        <input type="button" name="btu1" value="第一个按钮">
        <br>
    <hr>
        图片按钮
        <br>
        <input type="image" src="../rescourse/image/1.jpg" width="300" height="300">

    </p>

下拉框

<p>下拉框
    <select name="列表名称">
        <option value="china">中国</option>
            <!--seclected 默认-->
        <option value="USA" selected>美国</option>
        <option value="Japan">小日本</option>
        <option value="Indian">意大利</option>
    </select>
</p>

文本域

<p>文本域
     <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

文件域

<p>文本域
     <textarea name="textarea" 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>url
        <input type="url" name="url">
    </p>

    <p>
        商品数量
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
    
    <p>
        滑块
        <input type="range" name="voide" min="0" max="100" step="2">
    </p>

只读

<p>账号：
        <input type="text" name="username" value="admin" readonly>
    </p>

禁用

        <input type="radio" value="boy" name="sex" disabled>男

隐藏

    <p>密码：<input type="password" name="psd" hidden></p>

输入提示

        <input type="text" name="username"  placeholder="请输入用户名">

不能为空

    <p>密码：<input type="password" name="psd" required></p>