HTML学习

最新推荐文章于 2025-05-30 22:33:54 发布

人间百态104

最新推荐文章于 2025-05-30 22:33:54 发布

阅读量73

点赞数 1

文章标签： html 学习算法

本文链接：https://blog.youkuaiyun.com/weixin_73687730/article/details/132061074

版权

本文详细介绍了HTML的基础结构，包括doctype声明、语言标记、头部和主体元素，以及各种常用标签如标题、段落、链接、列表、表格、媒体元素（如视频、音频和iframe）、表单控件和高级表单属性，为初学者提供了HTML入门指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.第一个HTML文件

<！DOCTYPE html>代表什么格式

<html lang="en">表示这个页面是英语的

<head>代表头部文件

其中内容大多是标题
结束要用</head>使其闭合

<body>代表文件主题

里面就是我们的主要代码

</body>

最后结束

</html>

2.基本标签

（1）标题标签<h></h>

（2）段落标签

（3）换行标签

（4）水平线标签<hr>

（5）粗体标签

（6）斜体标签

（7）特殊符号&nbsp空格，&lt小于，&gt大于，&copy书名号

3.图像标签

src 内容为图片的地址可以为相对地址也可以为绝对地址

alt代表图片文件没有加载到时，所代替文件的问题

title内容为网页中鼠标点击网页时所出现的文字

4.链接标签

一般链接（）

<a href="1.我的第一个网页.html">点击我跳转到页面1</a>

<a href="https://www.baidu.com"target="_blank"> 点击我跳转到百度</a>

<!--
可以用图片进行进行跳转
_blank表示新建一个网页跳转
_self表示在自己网页跳转
-->

锚链接

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

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

<!--锚链接,用name命名一个标志符然后#标识符回到标识符的地方-->

<!--功能性链接
qq链接
-->

<a href="mailto:2785990280@qq.com">点击联系我</a>

5.列表学习

（1）有序列表

<!--有序列表
有1,2,3,4顺序-->
<ol>
    <li>Java</li>
    <li>C</li>
    <li>C++</li>
    <li>前端</li>
</ol>

（2）无序列表

<ul>
    <li>Java</li>
    <li>C</li>
    <li>C++</li>
    <li>前端</li>
</ul>

（3）自定义列表

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>C</dd>
    <dd>C++</dd>
</dl>

6.表格标签

一般先tr后td

<!--表格table
tr行
td列
colspan跨列
rowspan跨行

-->
<body>
<table border="1px">
 <tr>
   <td colspan="3">学生成绩</td>
 </tr>
  <tr>
    <td rowspan="2">狂神</td>
    <td>数学</td>
    <td>100</td>
  </tr>
  <tr>
    <td>语文</td>
    <td>000</td>
  </tr>
  <tr>
    <td rowspan="2">天哥</td>
    <td>数学</td>
    <td>000</td>
  </tr>
  <tr>
    <td>语文</td>
    <td>000</td>
  </tr>
</table>

7.媒体元素

1.有controls才能够在网页播放要不然只能复制网址，重开一个网页播放

<!--视频和音频
src:资源的路径
controls :控制条
autoplay :自动播放
-->
<!--<video src="../Resource/video/学习.mp4" controls autoplay></video>-->
<!--<audio src="../Resource/audio/L嘉欣 - 春泥.mp3" controls> </audio>-->

8.内敛架构

<!--iframe 内敛框架
src引用页面地址,也不可以不写用锚链接
w-h高度
-->
<iframe src="" name="hello"width="1000px",height="800px">
</iframe>
<a href="https://www.baidu.com" target="#hello" >
    跳转到百度
</a>

9.表单

<!-- 表单
 aciton表示完成提交后转到那个网页
 method 里面post和get表示获得，其中get不安全但是高效，post安全（不会获得相关信息，但是可以监测的到）
 input type表示类型 text表示文本框，password表示密码，submit表示提交，reset表示重置
-->
 <form action="https://www.baidu.com" method="post">
   <p>名字 <input type="text" name="username"> </p>
   <p>密码 <input type="password" name="pwd"> </p>
    <p>
      <input type="submit">
      <input type="reset">
    </p>
 </form>

文本框和单选框

<!--文本框
value 设置默认值
maxlength 最大长度
-->
 <form action="https://www.baidu.com" method="get">
   <p>名字 <input type="text" name="username"value="2698543594" maxlength="8"> </p>
   <p>密码 <input type="password" name="pwd"> </p>
<!-- 单选框
radio 后面必须有默认值
value 后面就是默认值
如果要单选 name必须相同（组相同）
-->
   <p>
     <input type="radio" value="boy" name="sex">男
     <input type="radio" value="girl" name="sex">女
       <input type="radio" value="hermaphrodite" name="sex">人妖
   </p>

多选框和按钮

<!-- --多选框
 input type="checkbox"
 -->
     <p>
         <input type="checkbox", value="sleep">睡觉
         <input type="checkbox", value="char">聊天
         <input type="checkbox", value="play basketball">打篮球
     </p>
<!--
创建按钮
button按钮 普通按钮
image按钮   图片按钮会跳到action的地方
submit按钮  提交按钮也会跳到action的地方
reset按钮   充值按钮，将页面的值都清空
-->
     <p>
         <input type="button" name="btn1" value="点击变长">
         <input type="image" src="../Resource/Image/kaishi.jpg">
     </p>
    <p>

下拉框，文本域，文件域

<!--
 下拉框
 -->
     <p>
         <select name="列表名称">
             <option value="china" selected>中国</option>
             <option value="us">美国</option>
             <option value="eth">瑞士</option>
             <option value="Indian">印度</option>
         </select>
     </p>
<!--
文本域
-->
     <p>
         <textarea name="textarea"  cols="30" rows="10"></textarea>
     </p>
<!--
文件域
-->
     <p>
         <input type="file" name="files">
         <input type="button" value="上传文件">
     </p>

其他

<!--邮箱-->
     <p>邮箱
         <input type="email" name="email">
     </p>
<!--URL-->
     <p>URL
         <input type="url" name="url" >
     </p>
<!--数字-->
     <p>音量
         <input type="number" name="voice" max="100" min="10">
     </p>
<!--滑块-->
     <p>滑块
         <input type="range" name="size" max="100"  min="0" value="10" >
     </p>
<!--搜索框-->
     <p>搜索
         <input type="search" name="search">
     </p>

表单的属性

隐藏 hidden

只读 readonly

禁用 disabled

表单的初级验证

placeholder 提示信息

required 要求非空

pattern 要求正则表达式