您的位置: 首页  >  IT文章  >  HTML HTML

HTML HTML

分类: IT文章 • 2022-04-24 11:15:56

  1. 注释符：

    <!-- -->  注释符
    快捷键：ctrl+/
    段落标签
    <p>
        
    </p>
    快捷键：p+tab键
    ​

     

    <!-- DOCTTPE：告诉浏览器，我们使用什么type-->
    ​
    <!DOCTYPE html>
    <html lang="en">
    <!--head标签代表头部-->
    <head>
    <!--    meta描述性标签，用于描述网页基本信息-->
    <!--    meta一般用来做SEO-->
        <meta charset="UTF-8">
        <meta name="keywords" contenteditable="yyl第一个网站">
    <!--    tittle网站标题-->
        <title>Title</title>
    </head>
    <!--body标签代表主体-->
    <body>
    ​
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本标签</title>
    </head>
    <body>
    <!--标题标签-->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <!--段落标签-->
    <p>跑得快  跑得快</p>
    <p>两只老虎  两只老虎</p>
    <p>真奇怪  真奇怪</p>
    <!--水平线标签-->
    <hr/>
    <!--换行标签,与段落标签相比间隙更小-->
    跑得快  跑得<br/>
    两只老虎  两只老虎<br/>
    真奇怪  真奇怪<br/>
    <!--粗体，斜体-->
    <h1>字体样式标签</h1>
    <strong>粗体</strong>
    <em>斜体</em>
    <!--特殊符号-->
    空格：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
    大于符号：&gt;
    小于符号:&lt;
    版权符号：&copy;版权所有，狂神
    <!--
    特殊符号记忆方式
    &   ;
    ​
    -->
    </body>
    </html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--image学习
src图片地址：
相对地址，绝对地址
../  代表上一级目录
​
-->
<img src="resources/food.jpg" alt="food" title="悬停文字" width="300" height="300">
​
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name做标记-->
<a name="top">顶部</a>
<!--a标签
herf必填，表示跳转到哪个界面
target:表示窗口在哪里打开
       _blank:在新的标签页打开
       _self:在原本页面打开
-->
<a href="1.我的第一个网页.html" target="_blank"> 点击跳转网页</a>
<a href="2.基本标签.html">点击跳转网页</a>
<br/>
<a href="2.基本标签.html">
    <img src="resources/food.jpg" alt="food" title="悬停文字" width="300" height="300">
</a>
​
​
​
​
​
​
​
​
​
​
<!--锚链接：
1.需要一个锚标记
2.跳转到标记-->
<a href="#top">回到顶部</a>
​
<!--功能性链接
邮件链接：mailto：
QQ链接
-->
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答-->
<ol>
    <li>JAVA</li>
    <li>Python</li>
    <li>c</li>
    <li>c++</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航，侧边栏-->
<ul>
    <li>JAVA</li>
    <li>Python</li>
    <li>c</li>
    <li>c++</li>
</ul>
<!--自定义序列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部-->
<dl>
    <dt>学科</dt>
    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>c</dd>
    <dt>位置</dt>
    <dd>都江堰</dd>
    <dd>天马</dd>
</dl>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
</head>
<body>
<!--表格table
行：tr
列:td
border:元素间隔-->
<table border="1px">
    <tr>
<!--        colspan:跨列，合并列-->
        <td colspan="3">1.1</td>
    </tr>
    <tr>
        <td>1.4</td>
        <td>1.5</td>
        <td>1.6</td>
    </tr>
    <tr>
<!--        rowspan:跨行-->
        <td rowspan="3">1.7</td>
        <td>1.8</td>
        <td>1.9</td>
    </tr>
</table>
</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音视屏</title>
</head>
<body>
<!--音频和视屏
src:文件路径
controls:控制条
autoplay:自动播放-->
<video src="video/起风了.mp4" controls></video>
<audio src="audio/童话镇.flac" controls></audio>
</body>
</html>

结构

HTML HTML

内联标签

<body>
<!--iframe内联框架，
src：目标地址
height，width：高度宽度-->
<iframe src="https://www.baidu.com" name="1111" frameborder="0" width="1000" height="1000"></iframe>
</body>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>
<!--表单form
action:表单提交位置，可以是网站，也可以是请求处理地址
method:get或者post
get方式提交：get方式提交的参数可以在url中被看到，不安全，但是高效
post方式提交：post方式提交的参数不能在url中看到，比较安全，可以传输大文件
-->
<form action="1.我的第一个网页.html" method="post">
<!--文本框参数：input type="text"
1.value：初始值
maxlength：最大长度
size：文本框大小-->


<!--    文本输入框 input type="text"-->
    <p>名字: <input type="text" name="username" value="123456" maxlength="8" size="30"></p>
<!--    密码框：input type="password"-->
    <p>密码：<input type="password" name="password"></p>
    <p>
        <!-- 单选框：input type="radio"
             必须有初始值value，文字写在标签外
             如果要作单选需选择在同一组，即name相同-->
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>
<!--多选框： 如果是get传入，value代表了传入url中选择的信息  -->
        爱好：
        <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">游戏
        <input type="checkbox" value="English" name="hobby">英语
    </p>

<!--    按钮
--> <p>
    <input type="button" name="btn" value="点击变长">
    <input type="image" src="resources/food.jpg" width="450" height="300">
    </p>


<!--    下拉框，列表框：
select name=
selected:代表默认的选项-->
    国家
    <select name="列表名称" >
        <option value="中国"selected>中国</option>
        <option value="美国">美国</option>
        <option value="德国">德国</option>
        <option value="英国">英国</option>
    </select>


<!--    文本域-->
    <p>
        评论
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>
<!--文件域
input type="file"   注意加name属性
 <input type="button"-->
    <p>
        上传文件
        <input type="file" name="files">
        <input type="button" value="上传文件" name="upload" >
    </p>


<!--    邮箱验证-->
    <p>
        <input type="email" name="email">
    </p>
<!--    url-->
    <p>
        <input type="url" name="url">
    </p>
<!--    数字
step:加一按钮-->
    <input type="number" name="num" max="9999" min="0000" step="1">

<!--    滑块
input type="range"-->
    <p>
        音量：
        <input type="range" name="voice" min="10" max="100" step="2">
    </p>
<!--    搜索框-->

    <p>
        <input type="search" name="search">
    </p>


    <p>
<!--    提交框：-->
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>


</form>
</body>
</html>

相关推荐