HTML超基础速通

最新推荐文章于 2024-09-18 09:47:26 发布

HaungRD

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量348

点赞数 1

分类专栏：前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_57654074/article/details/128069102

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

title: HTML
date: 2022-11-20 12:12:57
categories:

前端
tags:
HTML

个人博客www.huangrd.top，欢迎大家访问交流。

HTML

1、初识HTML

1.html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面[3]。

2.html、css、JavaScript

html:基础网页 html5

css:样式美化 css3

javaScript：动态渲染

3. 网页的基本信息

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!-- head:网页的头部 -->
<!--mate:描述性标签，描述网站的一些信息-->
<!--mate 一般用来做SEO-->
<!-- title：网页标题 -->
<!-- body:网页主体 代码主要写在这-->

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

<html lang="en">

<!-- head:网页的头部 -->
<head>
    <!--mate:描述性标签，描述网站的一些信息-->
    <!--mate 一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="跳动的猪">
    <meta name="description" content="这是一个可以跳的🐖">
    <!-- title：网页标题 -->
    <title>我的第一个网页</title>
</head>

<!-- body:网页主体-->
<body>
🐖在跳动！！！
</body>
</html>

2、网页的基本标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bucRvoGK-1669551355744)(C:\Users\huangruidong\AppData\Roaming\Typora\typora-user-images\image-20220128153751776.png)]

标题标签	一级标题二级标题
段落标签	两只老虎，
水平线标签
换行标签
粗体	i love you
斜体	i love you
空格	&nbsp
大于	&gt
小于	&lt
版权	&copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!--标题标签-->
<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>

<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎，<br/>
两只老虎<br/>
跑得快,<br/>
跑得快,<br/>
一只没有眼睛,<br/>
一只没有尾巴,<br/>
真奇怪,真奇怪.<br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>

粗体：i love you    <strong>i love you</strong>
斜体：i love you    <em>i love you</em>
<br/>

<!--特殊符号-->
空格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>

&gt;
<br/>
&lt;

&copy;版权



</body>
</html>

3、图像、超链接、网页布局

1.图像标签

src:图片地址（必填）
    相对地址（推荐），绝对地址
    ../  -- 上一级目录
<img src="" alt="" title="" width="" height="">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--
src:图片地址（必填）
    相对地址（推荐），绝对地址 D:\JAVA项目\HTML\resources\image\1.png
    ../  -- 上一级目录
-->
<img src="../resources/image/1.png" alt="风景" title="风景" width="384" height="245">

</body>
</html>

2.链接标签学习

a标签

href:必填，表示要跳转到那个界面
target:表示窗口在哪打开
        _blank  在新标签打开
        _self   在自己的网页中打开

锚链接

锚链接
1.需要一个锚标记
2.跳转到标记

功能链接
```
功能链接

邮件链接：mailto
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--使用name标记-->
<a name="top">顶部</a>


<!--a标签
href:必填，表示要跳转到那个界面
target:表示窗口在哪打开
        _blank  在新标签打开
        _self   在自己的网页中打开
-->
<a href="1.我的第一个html文件.html" target="_blank">点记我跳转到第一个界面</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

<a href="2.基本标签学习.html">
    <img src="../resources/image/1.png" alt="风景">
</a>

<p>
    <a href="2.基本标签学习.html">
        <img src="../resources/image/1.png" alt="风景">
    </a>
</p>
<p>
    <a href="2.基本标签学习.html">
        <img src="../resources/image/1.png" alt="风景">
    </a>
</p>
<p>
    <a href="2.基本标签学习.html">
        <img src="../resources/image/1.png" alt="风景">
    </a>
</p>
<p>
    <a href="2.基本标签学习.html">
        <img src="../resources/image/1.png" alt="风景">
    </a>
</p>



<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>

<a name="down"></a>


<!--功能链接

邮件链接：mailto
qq推广

-->
<a href="mailto:huangruidong.xauat@gmail.com">点击联系我</a>
</body>
</html>

3.行元素，块元素

块元素：无论内容多少，该元素独占一行（p、h1-h6）

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a.strong.em…）

4、列表、表格、媒体元素

1.列表

有序列表 ol
无序列表 ul
自定义列表 dl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--有序列表
应用范围：试卷，问答...
-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>cpp</li>
    <li>golang</li>
    <li>rust</li>
</ol>

<!--无序列表
应用范围：导航栏，侧边栏...
-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>cpp</li>
    <li>golang</li>
    <li>rust</li>

</ul>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围:公司网站底部
-->
<dl>
    <dt>语言</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>cpp</dd>
    <dd>golang</dd>
    <dd>rust</dd>
</dl>


</body>
</html>

2.表格

colspan 跨列

rowspan跨行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wuVgLPtg-1669551355745)(C:\Users\huangruidong\AppData\Roaming\Typora\typora-user-images\image-20220128224929843.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行 tr rows
列 td
-->

<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>

</table>
</body>
</html>

3.媒体

音频和视频

src:资源路径
controls:控制条
autoplay:自动播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体</title>
</head>
<body>

<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->

<!--<video src="../resources/video/xxx.mp4" controls autoplay></video>-->

<audio src="../resources/audio/暗杠%20-%20走歌人.mp3" controls autoplay></audio>
</body>
</html>

4.页面结构分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QsnEOmez-1669551355747)(C:\Users\huangruidong\AppData\Roaming\Typora\typora-user-images\image-20220128230608569.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主题</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

5.iframe内联框架

iframe内联框架

src：引用页面地址
w-h:宽度高度
name:框架标识符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe</title>
</head>
<body>

<!--iframe内联框架
src：地址
w-h:宽度高度
-->
<iframe src="1.我的第一个html文件.html" name="hello" width="1000px" height="800px0" frameborder="0"></iframe>
<a href="https://blog.kuangstudy.com">狂神</a>

<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->

</body>
</html>

5、列表及表单应用

1.from表单

form表单

action:表单提交的位置，可以是网站，也可以是一个请求处理的地址

method:post,get 提交方式

get方式提交：我们可以在url中看到我们提交的信息，不安全，高效

在浏览器审查元素获取输入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vIlI6Uxf-1669551355747)(C:\Users\huangruidong\AppData\Roaming\Typora\typora-user-images\image-20220129212305053.png)]
post:比较安全，不能传输大文件

user后缀

http://localhost:63342/HTML/html/1.%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AAhtml%E6%96%87%E4%BB%B6.html?username=2005010112&pwd=123456

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6dQeZCC-1669551355748)(C:\Users\huangruidong\AppData\Roaming\Typora\typora-user-images\image-20220129212425873.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>登录</h1>

<!--form表单
action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
method:post,get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post:比较安全，不能传输大文件
-->

<form action="1.我的第一个html文件.html" method="post">
<!--文本输入框input type="text"-->
    <p>名字：<input type="text" name="username"></p>
<!--密码框：input type="password"-->
    <p>密码框:<input type="password" name="pwd"></p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

2.文本框单选框

文本框选择标签：可以没有

value=“跳动的猪” 默认是初始值
maxlength=“8” 最大字符长度
size=“30” 文本框长度

单选框标签：至少有的三个值

input type=“radio” radio是单选框
value=“boy” 单选框的值
name=“sex” 表示组：只有值在一个组才可以单选

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8iKte8f-1669551355756)(C:\Users\huangruidong\AppData\Roaming\Typora\typora-user-images\image-20220129212725281.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>登录</h1>

<!--form表单
action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
method:post,get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post:比较安全，不能传输大文件
-->

<form action="1.我的第一个html文件.html" method="get">
<!--文本输入框input type="text"-->
<!--
value="跳动的猪"    默认是初始值
maxlength="8"      最大字符长度
size="30"           文本框长度-->
    <p>名字：<input type="text" name="username" value="跳动的猪" maxlength="8" size="30"></p>
<!--密码框：input type="password"-->
    <p>密码框:<input type="password" name="pwd"></p>

    
<!--单选框标签
input type="radio"  radio是单选框
value="boy"     单选框的值
name="sex"       表示组：只有值在一个组才可以单选
-->
    <p>
        性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

3.按钮多选框

多选框

input type=“checkbox” 多选框
value=“sleep” 值
name=“hobby” 分组

<input type="checkbox" value="chat" name="hobby">聊天

显示的是后边的文字，提交的值是value

按钮：

input type=“button” 普通按钮
input type=“image” 图像按钮提交
input type=“submit” 提交按钮
input type=“reset” 重置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>登录</h1>

<!--form表单
action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
method:post,get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post:比较安全，不能传输大文件
-->

<form action="1.我的第一个html文件.html" method="get">
<!--文本输入框input type="text"-->
<!--
value="跳动的猪"    默认是初始值
maxlength="8"      最大字符长度
size="30"           文本框长度-->
    <p>名字：<input type="text" name="username" value="跳动的猪" maxlength="8" size="30"></p>
<!--密码框：input type="password"-->
    <p>密码框:<input type="password" name="pwd"></p>


<!--单选框标签
input type="radio"  radio是单选框
value="boy"     单选框的值
name="sex"       表示组：只有值在一个组才可以单选
-->
    <p>
        性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

    
<!--多选框
input type="checkbox"   多选框
value="sleep"            值
name="hobby"            分组
-->
    <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"  重置
-->
    <p>按钮：
        <input type="button" name="btn" value="你也想跳动吗">
        <input type="image" src="../resources/image/1.png">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

4.文本域、文件域、下拉框

文本域：

cols="30"列
rows=“10” 行

文件域

input type=“file”
name=“files”

下拉框，列表框

select 列表
option 值

<!--文本域：
cols="30"列
rows="10" 行
-->
    <p>反馈（文本域）：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

<!--文件域
input type="file"
name="files"
-->
    <p>上传文件（文件域）
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    
<!--下拉框，列表框    
select 列表
option 值
-->
    <p>国家（下拉框，列表框）：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
        </select>
    </p>

5.其他相关框

<!--    邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
<!--    url-->
    <p>
        <input type="url" name="url">
    </p>
<!--    数字-->
    <p>商品数量
        <input type="number" name="num" max="10" min="0" step="1">
    </p>
<!--    滑块-->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="10">
    </p>
<!--    搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

6.表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled
默认 selected
提示 placeholder

<!--    增强鼠标可读性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="">
    </p>

6、表单初级验证

placeholder 提示信息
required 非空判断
pattern 正则表达式

 <p>名字：<input type="text" name="username" placeholder="请输入用户名" required ></p>

<p>自定义邮箱:
    <input type="text" name="diy email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>

7.总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b9u0yDB9-1669551355757)(C:\Users\huangruidong\AppData\Roaming\Typora\typora-user-images\image-20220129230412584.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cban47fJ-1669551355758)(C:\Users\huangruidong\AppData\Roaming\Typora\typora-user-images\image-20220129230443469.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8MZ4HtM9-1669551355759)(C:\Users\huangruidong\AppData\Roaming\Typora\typora-user-images\image-20220129230347184.png)]