HTML

HTML

超文本标记语言 Hyper Text Markup Language(超文本标记语言) -超文本包含文字、图片、音频、视频、动画等

----------------By kuang study

<!--DOCTYPE 告诉浏览器，我们要使用什么规范-->

​
 
​
<!-- title 网站的标题，在标签头部显示-->
<title>我的第一个页面</title>

</head> <!----> <body> Hello,World！ </body> </html>

 

1.标签类

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
​
<!--水平线标签-->
​
<hr/>
​
<!--段落标签-->
<p>闪烁的霓虹灯 照亮我们的脸庞</p>
<p>我感觉今天在场的兄弟全都是色狼</p>
<p>跟随性感的舞步 你们全都非常酷</p>
<p>这种音乐可以嗨到让你家母猪都上树</p>
​
​
<!--换行标签-->
闪烁的霓虹灯 照亮我们的脸庞<br/>
我感觉今天在场的兄弟全都是色狼<br/>
跟随性感的舞步 你们全都非常酷<br/>
这种音乐可以嗨到让你家母猪都上树<br/>
​
粗体：<strong> i love you</strong>
斜体：<em>i love you</em>
​
<!--特殊符号-->
空格： &nbsp;&nbsp;空格
> : &gt;
< : &lt;
版权符号：&copy;版权所有小脚冰凉
 
 <!--img学习
src：图片地址
alt:图片名字
相对地址 ../  --上一级目录-->
 <img src="./resources/img/1.jpg" alt="论文数据图" title="论文数据图" width="300" height="300">
​
<!--锚链接  跳转底部  顶部-->
1. 需要一个标记
2.使用 #name
href：必填，表示跳转到哪里 
target：表示是窗口在哪里打开
_blank: 新标签中打开
-->
<a href="4.链接标签.html #down">点我跳转</a><!--a标签学习
<a href="https://cn.overleaf.com/project"target="_blank">点我跳转到论文修改</a>
<!--src  资源路径   controls    控制条  autoplay 自动播放-->
<video src="../resourse/video/1.mp4" autoplay controls></video>
<autio src="../resourse/video/1.mp3" autoplay controls></autio>
​
​
​

2.列表

<!--有序列表 排序1-5-->
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ol>
<!--无序列表 导航栏 前面自带黑点-->
​
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd：列表内容
公司底部
-->
<dl>
  <dt>科目名称</dt>
  <dd>数学</dd>
  <dd>语文</dd>
  <dd>英语</dd>
  <dd>物理</dd>
  <dt>位置</dt>
  <dd>安徽</dd>
  <dd>安徽</dd>
  <dd>安徽</dd>
​
</dl>

3.表格

<!--table
行 tr
列 td
-->
​
<table border="1px">
<!--    colspan跨列-->
<!--    rowspan跨行-->
    <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>语文</td>
        <td>100</td>
​
    </tr>
​
    <tr>
​
        <td>数学</td>
        <td>100</td>
    </tr>
​
</tr>
​
</table>

image-20220106150258985

4.内联框架

<iframe src="../resources/img/1.jpg"  frameborder="0"width="400" height="600"></iframe>

5.表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
​
<!--
action：指向的地址 位置
method: 提交方式 使用post 安全一些 还有get不建议使用
type  指定元素类型，text,password,checkbox,radio,submit,reset,file,hidden,image,button
-->
<form action="https://www.cnblogs.com/smalljava/p/15736885.html" method="post">
  <p>登陆账号：<input type="text" maxlength="8" required></p>
  <p>登录密码：<input type="password" ></p>
​
  <p>
    <input type="submit"  value="提交">
    <input type="reset" value="重置">
​
  </p>
<!--单选框-->
  <p>
    <input type="radio" value="milk" name="have">牛奶
    <input type="radio" value="bread" name="have">面包
    
  </p>
​
​
<!--多选框-->
  <p>
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="play" name="hobby">玩耍
    <input type="checkbox" value="swim" name="hobby">游泳
    
  </p>
  
  
<!-- 下拉框-->
  <select name="列表名称" id="">
​
    <option value="1">中国</option>
    <option value="2">瑞士</option>
    <option value="3">美国</option>
    <option value="4">英国</option>
    <option value="5" selected>日本</option>
​
  </select>
<!--  文本域-->
  <p>
    <textarea name="textarea" id="1" cols="30" rows="10">文本域</textarea>
​
  </p>
<!--  滑块-->
  <p>
  voice<input type="range" name="voice" min="0" max="100" step="2" >
​
  </p>
<!--  搜索框-->
  百度<input type="search" name="search">
  <!--    增强鼠标的可用性-->
  <p>
    <label for="mark">你点我试试:</label>
    <input type="text" id="mark">
  </p>
​
  <!--正则表达式去查找为什么需要表单验证？
减轻服务器压力并保证数据安全!
required 不能为空，必须要填写 可用在文本框中
placeholder    默认提示信息 可用在控件上
pattern    正则表达式，可以自定义一个正则表达式 -->
  <p>自定义邮箱:
    <input type="text" name="diyname" pattern="00012154">
  </p>
</form>
​
</body>
</html>

 

posted @ 2022-01-06 15:33  小脚冰凉吖  阅读(132)  评论(0)    收藏  举报