HTML超基础速通
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 html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="跳动的猪">
<meta name="description" content="这是一个可以跳的">
<title>我的第一个网页title>
head>
<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 |
| 空格 | |
| 大于 | > |
| 小于 | < |
| 版权 | © |
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 youstrong>
斜体：i love you <em>i love youem>
<br/>
空格
空 格
<br/>
>
<br/>
<
©版权
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>
<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>
<a name="top">顶部a>
<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>
<a href="#top">回到顶部a>
<a name="down">a>
<a href="mailto:[email protected]">点击联系我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>javali>
<li>pythonli>
<li>cppli>
<li>golangli>
<li>rustli>
ol>
<ul>
<li>javali>
<li>pythonli>
<li>cppli>
<li>golangli>
<li>rustli>
ul>
<dl>
<dt>语言dt>
<dd>javadd>
<dd>pythondd>
<dd>cppdd>
<dd>golangdd>
<dd>rustdd>
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 border="1px">
<tr>
<td colspan="4">1-1td>
tr>
<tr>
<td rowspan="2">2-1td>
<td>2-2td>
<td>2-3td>
<td>2-4td>
tr>
<tr>
<td>3-1td>
<td>3-2td>
<td>3-3td>
tr>
table>
body>
html>
3.媒体
音频和视频
- src:资源路径
- controls:控制条
- autoplay:自动播放
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体title>
head>
<body>
<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>内联框架iframetitle>
head>
<body>
<iframe src="1.我的第一个html文件.html" name="hello" width="1000px" height="800px0" frameborder="0">iframe>
<a href="https://blog.kuangstudy.com">狂神a>
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="1.我的第一个html文件.html" 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>
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="1.我的第一个html文件.html" method="get">
<p>名字：<input type="text" name="username" value="跳动的猪" maxlength="8" size="30">p>
<p>密码框:<input type="password" name="pwd">p>
<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="1.我的第一个html文件.html" method="get">
<p>名字：<input type="text" name="username" value="跳动的猪" maxlength="8" size="30">p>
<p>密码框:<input type="password" name="pwd">p>
<p>
性别：
<input type="radio" value="boy" 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>
<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 值
<p>反馈（文本域）：
<textarea name="textarea" cols="30" rows="10">文本内容textarea>
p>
<p>上传文件（文件域）
<input type="file" name="files">
<input type="button" value="上传" name="upload">
p>
<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>
<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
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)]