HTML详解

m0_63947250

已于 2022-05-03 10:42:37 修改

阅读量371

点赞数

文章标签： html

于 2022-04-10 17:01:14 首次发布

本文链接：https://blog.csdn.net/m0_63947250/article/details/124080100

版权

本文详细介绍了HTML5的基本概念，包括超文本、W3C标准、网页结构和基本标签。讲解了HTML5文档类型、头部元素、标题、段落、图像、链接、行内元素与块元素、列表、表格、多媒体以及表单元素的使用方法。通过实例展示了如何创建和控制网页内容，为初学者提供了全面的HTML5入门指导。

摘要由CSDN通过智能技术生成

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM5NDcyNTA=,size_20,color_FFFFFF,t_70,g_se,x_16

1:定义:超文本标记语言(Hyper Text Markup Language)

①超文本:文字，图片，音频，视频动画等

②现在使用的是HTML5版本

2:W3C(万维网联盟)

①一个国际中立性技术标准机构

②标准包括，结构化语言(HTML,XML),表现标准语言(CSS),行为标准(DOM,ECMASxript)

(网站分三部分:(视图层)html (表现层)css js(交互))

3网页基本框架信息

<!DOCTYPE html><!--doctype告诉浏览器我们使用什么规范（html）-->
<html lang="en">
<head><!--head代表网页头部，开放标签-->
<!--meta为描述性标签，它用来描述一些我们网站的信息-->
<!--meta一般用来做SEO-->
    <meta charset="UTF-8">
<!--title标签表示网页的一个标题-->
    <title>第一个网页</title>

</head><!--闭合标签，以上为网页头部-->
<body>
Hello,World

</body><!--body内网页主体部分-->
</html><!--总标签，代码都要包含在此内-->

4:ctrl＋左/:创建注释快捷键

h,p＋tab:自动生成标签

ctrl＋d:复制当前行到下一行

5:网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签，单独的h不算是标签不会加粗-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--水平线标签-->
<hr/>
<!--段落标签，因为在网页中不会把空格（不管多少只会空一个）和换行自动换行，所以需要段落标签来分段-->
<p>好好学习</p>
<p>天天向上</p>
<!--换行标签(自闭和标签),与段落标签的区别换行距离紧凑，俩行之间不会那么开-->
好好学习<br/>
天天向上<br/>
<!--字体样式标签：粗体，斜体标签-->
<strong>好好学习：粗体</strong><br/>
<em>天天向上：斜体</em>
<!--特殊符号,&开头 ；结尾-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
大于号：&gt;
小于号：&lt;<br>
版权符号：&copy;
</body>
</html>

(思维导图)

6:图像标签

①常见的图像格式 JPG,PNG,GIF,BMP,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--图片标签 img src:图片地址（必填） alt:图片加载失败显示的文字（必填） width:显示图片的宽度 height:图片的高度-->
<!--title；悬停文字-->
<!--路径来源分俩种，绝对路径和相对路径，推荐使用相对路径,../表示上一层文件，要从与HTMl的文件开始相对-->
<img src="../resources/images/pic1.jpg" alt="狂神" title="悬停文字">

</body>
</html>

7:超链接标签及应用

①链接标签:

文本超链接

图像超链接，俩者的区别在于一个点击文本跳转，一个点击图片跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--a标签
href:必填，表示要跳转到那个页面
target:表示窗口在哪里打开
_blank：在新标签中打开
_self;默认值，在自身页面打开
-->
<a href="my.html" target="_blank">点我跳转</a><br/>
<a href="https://www.baidu.com">点我跳转到百度</a>
<a href="https://www.baidu.com"><img src="../resources/images/pic1.jpg" alt="狂神" title="悬停文字"></a>

</body>
</html>

8:行内元素和块元素

块元素:无论内容多少，该元素独占一行

(p,h1-h6等)此元素包含的内容单独占一行

行内元素:

内容撑开宽度，左右都是行内元素的可以排在一行

(strong.em)不独占一行，俩种元素包含的内容可以在一行

9:列表标签

呈现的形式:无线条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表
形式：默认的会有数字开头
应用范围：试卷，问答.....
-->
<ol>
    <li>java</li>
    <li>css</li>
    <li>html</li>
</ol>
<hr/>
<!--无序列表
形式：无数字开头，以小黑点开头分序
应用范围：导航，侧边栏....
-->
<ul>
    <li>java</li>
    <li>css</li>
    <li>html</li>
</ul>
<!--自定义列表
dl:L表示列表，dl表示标签
dt:列表标题（可以有多组）
dd:列表内容
形式：无数字，也无黑点开头
应用范围：公司网站底部
-->
<dl>
    <dt>我的世界</dt>
    <dd>小黄人</dd>
    <dd>玛卡玛卡</dd>
    <dd>花园宝宝</dd>
    <dt>我的世界</dt>
    <dd>小黄人</dd>
    <dd>玛卡玛卡</dd>
    <dd>花园宝宝</dd>
</dl>

</body>
</html>

10:表格标签

呈现形式:有线条

基本结构:单元格，行，列，跨行(一个内容占俩行)，跨列(一个内容占俩列)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格标签table
行：tr
列:td
默认的是白色的线条：看不出来
加个border（边框）就看得出来
-->
<table border="2px">
    <tr>
<!--colspan:跨列（从当前列开始跨）
需要删原本的列，否则会挤出
-->
        <td colspan="3">一行三列</td>
    </tr>
    <tr>
<!--rowspan:跨行（从当前行开始跨）
不需要删原本的行-->
       <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

</body>
</html>

11:视频和音频

视频元素:video

音频元素:audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--video:视频标签
controls:控制视频播放（必填）
autoplay:自动播放
-->
<!--<video src="../resources/video/蜘蛛侠.mp4" controls ></video>-->
<hr/>
<!--audio:音频标签
controls:控制视频播放（必填）
autoplay:自动播放
-->
<audio src="../resources/audio/一个人挺好.mp3" autoplay controls ></audio>
</body>
</html>

快捷键:M开启静音

12:页面机构分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
以下都为结构标签类型
<header>
    <h2>网页头部（用于页面或页面中的一块区域）</h2>
</header>
<article>
    独立的文章内容
</article>
<section>
    网站中独立的一块区域
</section>
<aside>
    相关内容或应用（常用于侧边栏）
</aside>
<footer>
    <h2>网页脚部（用于页面或页面中的一块区域）</h2>
</footer>
<nav>
    导航类辅助内容
</nav>

</body>
</html>

13:iframe内联框架

定义:在页面内直接打开另一个网页，嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--iframe的俩种用法
1：页面之间镶入另一个页面
2：修饰我没跳转的页面，name给窗口取名，target打开指定窗口
-->
<<iframe src="https://www.bilibili.com/" frameborder="0" width="1500px" height="800px"></iframe>
<!--<iframe src="" name="hh" frameborder="0" width="1500px" height="800px"></iframe>-->
<!--<a href="https://www.bilibili.com" target="hh">点我跳转</a>-->

</body>
</html>

14:表单语法与建立

15:表单初级验证

常用方式:placeholder(提示信息),required(非空判断),pattern(正则表达式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录与注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单标签：form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:以什么方式提交：get（跳转出来的网站显示name信息，不安全）,post(不显示信息，安全，提交大文件) 提交方式
-->
<form action="https://www.bilibili.com/" method="get">
<!--文本输入框：input type="text"
value:表单内默认初始值
maxlength：最长能写几个字符
size:文本框的长度
只读:readonly（即改不了初始值)：用于文本
disabled:被选中无法选择：用于按钮
hidden:隐藏域，不会显示原来的值
palceholder:默认提示，一层底白色（作用范围：输入框，文本域，不可按钮）
required:要求非空，必须填，否则无法提交
-->
    <p><input type="text" name="usename" placeholder="请输入你的姓名" maxlength="8" size="30" required></p>
<!--密码框：imput type="password"-->
    <p><input type="password" name="pwd"></p>
<!--单选框标签:
input type="radio"
value:初始值（必填）
name:表示组（必填）
（单选框只能为一个组，才二选一，也可以设置不同组，name名字不同）
checked:默认选中
-->
    <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="chat" name="hobby">聊天
        <input type="checkbox" value="study" name="hobby">学习
    </p>
<!--按钮：
所有的表格类型最好都取name
图片按钮；作用等于submit直接跳转
-->
    <p>
        <input type="button" name="bti" value="加一">
        <input type="image" src="">
    </p>
<!--下拉框，列表框
selected:默认选中
-->
<p>下拉框国家：
    <select name="列表名称">
        <option value="列表的值">中国</option>
        <option value="列表的值">美国</option>
        <option value="列表的值" selected>冰岛</option>
    </select>

</p>
<!--文本域：以列表形式多行文本
corls:行
row：列
-->
<p>反馈
    <textarea name="textarea"  cols="30" rows="10">多行文本内容</textarea>
</p>
<!--文件域
input type="file"
input类型name必填
-->
    <p>
        <input type="file" name="files">
        <input type="button" name="button" value="上传">
    </p>
<!--邮箱验证(带有功能的标签，需要输入正确的形式才能执行)-->
<p>请输入你的邮箱：
    <input type="email" name="email">
</p>
<!--url（网址验证）-->
<p>请输入选则的网址：
    <input type="url" name="url">
</p>
<!--数字验证
input type="number"
max:限制数字的最大值
min:限制数字的最小值
step:数字的增长值；
-->
<p>商品数量;
    <input type="number" name="num" max="10" min="1" step="1">
</p>
<!--滑块-->
<p>音量：
    <input type="range" name="range" max="100" min="0" step="2">
</p>
<!--搜索框-->
<p>搜索
    <input type="search" name="search">
</p>
<!--增强鼠标可读性（即点文字出框输入）-->
    <p>
        <label for="hh">点此处</label>
        <input type="text" id="hh">
    </p>

<!--    p标签;形成一个块元素都在一行
       俩个按钮
       submit；提交框：以get/post传到action对应的位置
       reset:重置框
-->
<p>
    <input type="submit">
    <input type="reset">
</p>



</form>

</body>
</html>

补充: embed镶入的标签