HTML学习

初识HTML

HTML：Hyper Text Markup Language（超文本标记语言）
HTML5+CSS3
纯天然跨平台

W3C：World Wide Web Consortium(万维网联盟)

W3C标准：

机构化标准语言：HTML、XML
表现标准语言:CSS
行为标准DOM、ECMAScript

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

 <body>、</body>等成对的标签，分别叫做开放标签和闭合标签。
单独呈现的标签（空元素），如<hr/>;意为用/来关闭标签。

网页基本信息

 <!--注释的写法 -->    
<!-- DOCTYPE:告诉浏览器，我们要使用什么规范，默认HTML5-->
<!DOCTYPE html>
 
<!-- 总标签-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta 描述性标签，它用来描述我们网站的一些信息 -->
    <!--meta 一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="ssl,ss,ll">
    <meta name="description" content="真的很强">
    <!--title网页标题  -->
    <title>第一个网站</title>
</head>
 
<!--body标签代表网页主体-->
<body>
 
Hello， world！
 
</body>
</html>

网页基本标签

标题标签

 <h1> 一级标签 </h1>
<h2> 二级标签 </h2>
<h3> 三级标签 </h3>
<h4> 四级标签 </h4>
<h5> 五级标签 </h5>
<h6> 六级标签 </h6>
......

段落标签

 <p>两只老虎，两只老虎， </p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛,</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

换行标签

 两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有耳朵，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

水平线标签
- ```
 <hr/>
```

字体样式标签

 粗体: <strong> i love you </strong>
斜体: <em> i love you </em>

注释和特殊符号

 <!--特殊符号-->
<!--  空格:   &nbsp;   -->
11&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11
<br\>
大于  &gt;
<br\>
小于  &lt;
<br\>
版权  &copy;
<br\>
<!--
特殊符号记忆方式：
&开头 ;结尾
-->

图像标签

常见的图像格式：JPG、GIF、PNG、BMP(位图）...

 <img src="图像地址" alt="图像显示失败的代替文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度"/>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src :图片地址
      相对路径(推荐)，绝对路径
      ../   --上一级目录
alt :图像显示失败的代替文字
title:鼠标悬停提示文字
width:图像宽度
height:图像高度
-->
<img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</body>
</html>

超链接标签及应用

文本超链接
图像超链接

 <a href="path" target="目标窗口位置">链接文本或图像</a>

锚链接

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

功能性链接

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

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记，现在已经弃用了，用id-->
<a id="top">顶部</a>
 
<!--a 标签
href:必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
  _blank 在新标签页中打开
  _self 在自己的网页打开
-->
<a href="1.我的第一个网页.html"> 跳转到页面一</a>
<br/>
<a href="https://www.baidu.com"> 点我去百度</a>
</body>
 
<br/>
 
<a href="https://www.baidu.com">
  <img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</a>
 
<br/>
<a href="https://www.baidu.com">
  <img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</a>
 
<br/>
<a href="https://www.baidu.com">
  <img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</a>
 
<br/>
<a href="https://www.baidu.com">
  <img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</a>
 
<br/>
<!--锚链接
1.需要一个锚标记
2.跳转到标记#
-->
<a href="#top">回到顶部</a>
 
<!--功能性链接
邮件链接：mailto:
qq链接：qq推广，自动生成。
-->
<a href="mailto:123@qq.com">联系我</a>
</html>

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- (p,h1-h6)
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- (a、strong、em...)

列表标签

列表:就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式展示出来，以便浏览者能更快捷地获得相应的信息。

分类：

无序列表

 <ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

有序列表

 <ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

定义列表

 <dl>
  <dt>列表名称</dt>
  <dd>a</dd>
  <dd>b</dd>
  <dd>c</dd>
  <dd>d</dd>
</dl>

表格标签

表格的优点:简单通用、结构稳定

基本结构: 单元格、行、列、跨行、跨列

 <table >
  <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>

视频和音频

 <!--视频video
    src：资源路径
    controls 控制条
    autoplay 自动播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>

 <!--音频audio
    src：资源路径
    controls 控制条
    autoplay 自动播放
-->
<audio src="../resources/audio/1.mp3" controls autoplay></audio>

页面结构

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚步区域的内容(用于页面或页面中的一块区域)
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

 <!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>

iframe内联框架

 <iframe src="path" name="mainFrame">
 
</iframe>

 <body>
<iframe src="//player.bilibili.com/player.html?aid=428389802&bvid=BV1NG411p73L&cid=774808937&page=1"
        scrolling="yes" border="0" frameborder="yes" framespacing="0" allowfullscreen="true"> </iframe>
 
<iframe src="//player.bilibili.com/player.html?aid=899473498&bvid=BV1YN4y1G7k6&cid=803337401&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
 
</body>

name:链接跳转

 <body>
<iframe src="" name="hello"  width="1000px" height="800"></iframe>
 
<a href="https://www.bilibili.com/video/BV1x4411V75C?p=11&spm_id_from=pageDriver&vd_source=b1c9346178fc41766e00c3d88901f1cf" target="hello">dian</a>
</body>

初识表单post和get提交

表单语法：

 <!--
    method:
        get方式提交，可以在url看到信息，不安全，高效
        post方式提交：
-->
<body>
    <form method="post" action="提交的页面">
        <p>名字：<input name="name" type="text"></p>
        <p>密码：<input name="pass" type="password"></p>
        <p>
            <input type="submit" name="Button" value="提交"/>
            <input type="reset" name="Reset" value="重填"/>
        </p>
    </form>
</body>

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

单选框radio

 name选定一组
<p>
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

多选框 checkbox

name选定一组

 name选定一组
<p>
    <input type="checkbox" value="sleep" name="habby"/>睡觉
    <input type="checkbox" value="play" name="habby"/>玩
</p>

按钮button

 <p>
    <input type="button" name="btn1" value="按钮"/>   普通按钮
    <input type="image" src="网址"/>    图片按钮，点击跳转
    <input type="submit" name="Button" value="提交"/> 提交按钮
    <input type="reset" name="Reset" value="重填"/>  重置按钮
</p>

列表框文本域和文件域

select /option

 <p>下拉框
    <select name="列表名称">
        <option value="1">1</option>
        <option value="2" checked>2</option>  默认
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</p>

textarea

 <p>
    <textarea name="textarea" id="" cols="30" rows="10"></textarea>
</p>

文件域

 <!--        文件域-->
        <p>
            <input type="file" name="file">
            <input type="button" value="上传" name="upload">
        </p>

搜索滑动块和简单验证

 <!--邮件验证-->
<p>邮箱
    <input type="email" name="email">
</p>
<!--URL-->
<p>URL
    <input type="url" name="url">
</p>
<!--数字-->
<p>数字
    <input type="number" name="num" max="100" min="0" step="10">
</p>

 <!--滑块-->
<p>滑块：
    <input type="range">
</p>

 <!--搜索框-->
<p>搜索：
    <input type="search" name="搜索" >
</p>

表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

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

表单的初级验证

常用方式：

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

posted @ 2022-10-07 20:20 林每天都要努力阅读(36) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 表现标准语言CSS3学习入门+导入方式

· MarkDown语法

· HTML 学习笔记

· HTML简述

· HTML基础

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

公告

昵称：林每天都要努力
园龄： 2年5个月
粉丝： 3
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

ssl-study

HTML学习

HTML学习

初识HTML

网页基本信息

网页基本标签

图像标签

超链接标签及应用

行内元素和块元素

列表标签

表格标签

视频和音频

页面结构

iframe内联框架

初识表单post和get提交

单选框radio

多选框 checkbox

按钮button

列表框文本域和文件域

搜索滑动块和简单验证

表单的应用

表单的初级验证

公告

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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

	</body>
	</html>

	<body>、</body>等成对的标签，分别叫做开放标签和闭合标签。
	单独呈现的标签（空元素），如<hr/>;意为用/来关闭标签。

	<!--注释的写法 -->
	<!-- DOCTYPE:告诉浏览器，我们要使用什么规范，默认HTML5-->
	<!DOCTYPE html>

	<!-- 总标签-->
	<html lang="en">
	<!--head标签代表网页头部-->
	<head>
	<!--meta 描述性标签，它用来描述我们网站的一些信息 -->
	<!--meta 一般用来做SEO -->
	<meta charset="UTF-8">
	<meta name="keywords" content="ssl,ss,ll">
	<meta name="description" content="真的很强">
	<!--title网页标题 -->
	<title>第一个网站</title>
	</head>

	<!--body标签代表网页主体-->
	<body>

	Hello， world！

	</body>
	</html>

	<h1> 一级标签 </h1>
	<h2> 二级标签 </h2>
	<h3> 三级标签 </h3>
	<h4> 四级标签 </h4>
	<h5> 五级标签 </h5>
	<h6> 六级标签 </h6>
	......

	<p>两只老虎，两只老虎， </p>
	<p>跑得快，跑得快，</p>
	<p>一只没有眼睛,</p>
	<p>一只没有尾巴，</p>
	<p>真奇怪！真奇怪！</p>

	两只老虎，两只老虎，<br/>
	跑得快，跑得快，<br/>
	一只没有耳朵，<br/>
	一只没有尾巴，<br/>
	真奇怪！真奇怪！<br/>

	粗体: <strong> i love you </strong>
	斜体: <em> i love you </em>

	<!--特殊符号-->
	<!-- 空格:   -->
	11       11
	<br\>
	大于 >
	<br\>
	小于 <
	<br\>
	版权 ©
	<br\>
	<!--
	特殊符号记忆方式：
	&开头 ;结尾
	-->

	<dl>
	<dt>列表名称</dt>
	<dd>a</dd>
	<dd>b</dd>
	<dd>c</dd>
	<dd>d</dd>
	</dl>

	<table >
	<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>

	<!--视频video
	src：资源路径
	controls 控制条
	autoplay 自动播放
	-->
	<video src="../resources/video/1.mp4" controls autoplay></video>

	<!--音频audio
	src：资源路径
	controls 控制条
	autoplay 自动播放
	-->
	<audio src="../resources/audio/1.mp3" controls autoplay></audio>

	<body>
	<iframe src="//player.bilibili.com/player.html?aid=428389802&bvid=BV1NG411p73L&cid=774808937&page=1"
	scrolling="yes" border="0" frameborder="yes" framespacing="0" allowfullscreen="true"> </iframe>

	<iframe src="//player.bilibili.com/player.html?aid=899473498&bvid=BV1YN4y1G7k6&cid=803337401&page=1"
	scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

	</body>

	<body>
	<iframe src="" name="hello" width="1000px" height="800"></iframe>

	<a href="https://www.bilibili.com/video/BV1x4411V75C?p=11&spm_id_from=pageDriver&vd_source=b1c9346178fc41766e00c3d88901f1cf" target="hello">dian</a>
	</body>

	<!--
	method:
	get方式提交，可以在url看到信息，不安全，高效
	post方式提交：
	-->
	<body>
	<form method="post" action="提交的页面">
	<p>名字：<input name="name" type="text"></p>
	<p>密码：<input name="pass" type="password"></p>
	<p>
	<input type="submit" name="Button" value="提交"/>
	<input type="reset" name="Reset" value="重填"/>
	</p>
	</form>
	</body>

	name选定一组
	<p>
	<input type="radio" value="boy" name="sex"/>男
	<input type="radio" value="girl" name="sex"/>女
	</p>

	name选定一组
	<p>
	<input type="checkbox" value="sleep" name="habby"/>睡觉
	<input type="checkbox" value="play" name="habby"/>玩
	</p>

	<p>
	<input type="button" name="btn1" value="按钮"/> 普通按钮
	<input type="image" src="网址"/> 图片按钮，点击跳转
	<input type="submit" name="Button" value="提交"/> 提交按钮
	<input type="reset" name="Reset" value="重填"/> 重置按钮
	</p>

	<p>下拉框
	<select name="列表名称">
	<option value="1">1</option>
	<option value="2" checked>2</option> 默认
	<option value="3">3</option>
	<option value="4">4</option>
	</select>
	</p>

	<p>
	<textarea name="textarea" id="" cols="30" rows="10"></textarea>
	</p>

	<!-- 文件域-->
	<p>
	<input type="file" name="file">
	<input type="button" value="上传" name="upload">
	</p>

	<!--邮件验证-->
	<p>邮箱
	<input type="email" name="email">
	</p>
	<!--URL-->
	<p>URL
	<input type="url" name="url">
	</p>
	<!--数字-->
	<p>数字
	<input type="number" name="num" max="100" min="0" step="10">
	</p>

	<!--搜索框-->
	<p>搜索：
	<input type="search" name="搜索" >
	</p>

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