HTML总结 

<!DOCTYPE html>
<!--DOCTYPE告诉浏览器我们需要使用什么规范-->
<html lang ="en">
<html>


    <!--表示网页标签的头部-->
    <head>
        <!--meta表示描述性标签，它用来描述我们网站的一些信息-->
        <meta charset="UTF-8">
        <meta name="keywords" content="无敌的二舅">
        <!--利用head可以表示网页头部的标签信息
          它的内容放置在title文本中-->
        <title>
            我的第一个网页
        </title>
    </head>
    <!--body表示网页的主题也就是网页的内容-->
    <body> 
        <a name="top">顶部</a>
        <!--这里的h1到h4都表示为标签-->
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <!--p是段落标签-->
        <p>
            好久不见！
        </p>
        <!--br是换行标签，可以加上/来进行闭合！！单标签 -->
        你好<br/>
        好久不见！<br/>
        别来无恙<br/>
        <!--水平标准线-->
        <hr/>
        <!--粗体和斜体-->
        粗体:<strong>I love you</strong>
        斜体:<em>I love you</em>
        <!--特殊符号-->
        空格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;七个空格<br/>
        大于号:&gt;<br/>
        小于号:&lt;<br/>
        版权符号:&copy;版权归二舅所有
        <!--图片标签的学习-->
        <!--src为图片地址；这里的图片地址有相对地址和绝对地址两种方式-->
        <!--相对地址可以使用../来表示上一级目录，然后在目录中找图片地址-->
        <!--alt为图片名称当出现异常时会出现图片名称-->
        <!--title为悬停文字-->
        <img src="C:\Users\lenovo\Pictures\Saved Pictures\5f04352c40a11.jpg" alt="大帅哥"title="这是瑞士"width="500"height="500">
       <!--超链接-->  
        <!--a标签
    href : 必填，表示要跳转到那个页面
    target ：表示  窗口在哪里打开
    _blank 在新标签打开
    _self 在自己的网页打开--><br/>
    <a href="https://www.baidu.com" target="_blank">点击我跳转到百度网页</a><br/>
    <!--也可以在超链接中放置图片-->
    <a href="https://www.baidu.com" target="_blank">
        <img src="C:\Users\lenovo\Pictures\Saved Pictures\5f04352c40a11.jpg" alt="大帅哥"title="这是瑞士"width="500"height="500">
    </a><br/>
    <!--锚链接  也就是点击时可以返回我们设置的a标签中去-->
    <a href="#top">点击回到顶部</a><br/>
    <!--锚链接可以页面间相互跳转\
    要想实现页面间的相互跳转不仅要设置超链接还要加上它的文件名称-->
    <a href="myname.html#down">点击跳转到圣诞树页面</a><br/>
    <!--功能型链接
     邮件链接：mailto
     QQ链接：-->
     <a href="mailto:3296330862@qq.com">点击联系我</a>
     <br/><br/>
     <!--列表标签-->
     <!--有序列表-->
     <ol>
        <li>Java<li>
        <li>Python<li>
        <li>C/C++<li>
     </ol>
     <hr/><!--虚线-->
     <!--无序列表-->
     <ul>
        <li>Java</li>
        <li>Python</li>
        <li>C/C++</li>
     </ul>
     <hr/>
     <!--自定义列表-->
     <dl>
        <dt>学科</dt>
        <dd>数学分析</dd>
        <dd>高等代数</dd>
        <dd>解析几何</dd>
     </dl>
     <!--表格学习哦-->
     <table border="1px">
        <tr>
            <td colspan="3">成绩单</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>englis</td>
            <td>100</td>
        </tr>
        <tr>
            <td>科学</td>
            <td>100</td>
        </tr>
     </table>

<hr/>
<!--媒体标签的学习-->
<!--video为视频/音频的播放器
autoplay可以自动播放视频-->
<video src="视频路径" controls autoplay ></video><br/>
<audio src="音频路径" controls autoplay></audio><br/>

<!--页面结构布局 可以在一个网页中显示另一个网页-->
<!--iframe内联框架
src：地址
width 宽度 hight：高度-->
<iframe src="https://20kkk.github.io" name="hello" frameborder="0"></iframe>
<!--表单的学习
action 表单提交的位置，可以是网站，也可以时一个请求网站
menthod  post get
get方式提交，我们可以在url里面看到我们的信息，不安全
post相对安全，可以传输大文件-->
<h1>登录注册</h1>
<form action="myname.html" method="get">
<!--文本输入框-->
<!--在文本输入框中
vakue="波波好帅哦"可以设置为默认值
maxlength="8" 表示最长能写几个字符
size="30" 文本框的长度-->
<!--可以使用readonly设置为不可编写
value="admin" readonly
placeholder 提示信息
required 非空-->
<p>名字:<input type="text"name="我的名字是:" value="" placeholser="请输入名字"required></p>


<!--密码框-->
<!--可以使用hidden对其进行隐藏-->
<p>密码:<input type="password" name ="我的密码是:"placeholser="请输入密码" ></p> 
<p>
    <!--可以设置disabled改为不可选-->
    <input type = "submit" value="提交" disabled>
    <input type = "reset" value="重置">
</p>



<!--
    单选框和多选框 里面加入checked的时候会默认选中
-->
<p>
    <!--单选框标签
    value 单选框的值
    name 表示组-->
    <input type="radio" value="body" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>  

<!--多选框-->
<p>爱好:
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <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"  重置按钮
    注意：可以利用value的值来改变按钮上面的文本
-->
<!--按钮-->
<input type="button" name="button1" value="第一个按钮">
<input type="image" src="C:\Users\lenovo\Pictures\Saved Pictures\5f04352c40a11.jpg">
<!--下拉框，列表框
设置selected为默认的初值-->
<p>
    <select name="列表名称">
    <option  value="China">中国</option>
    <option value="us">美国</option>
    <option value="eth" selected>瑞士</option>
    <option value="yingdu">印度</option>
    </select>
</p>
<br/>
<br/>


<!--文本域-->
<p>
    <textarea name="textarea" cols="50" rows="10" placeholder="请输入文本"></textarea>
</p>

<!--文件域-->
<p>
    <input type="file" name="files">
    <!--在旁边设置提交按钮-->
    <input type="button" name="upload" value="上传">
</p>


<!--邮箱验证-->
<!--可以使用正则表达式pattern-->
<p>邮箱
    <input type="email" name="--邮箱验证--">
</p>

<!--URL-->
<p>URL
   <input type="url" name="URL"> 
</p>

<!--数字-->
<p>商品数量
    <input type="number" name="num" max="100" min="10" step="10">
</p>


<!--滑块-->
<p>系统音量
    <input type="range" name="voice" min="0" max="100" step="2">
</p>

<!--搜索框-->
<p>搜索
    <input type="search" name="search">
</p>
</form>
</body>
</html>

__EOF__

本文作者：userName
本文链接：https://www.cnblogs.com/20kkk/p/16535477.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   鹅城小铁匠  阅读(33)  评论(0)  编辑  收藏  举报
相关博文：
·  javaScript的总结
·  mysql学习（二）
·  HTML总结笔记
·  HTML的基本结构
·  HTML学习
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
Fork me on GitHub
点击右上角即可分享
微信分享提示
AI IDE Trae