HTML入门学习

2023-05-16

基本标签

  • 文档声明
<!DOCTYPE html>  <!--文档声明,表示这是一个HTML页面-->
  • HTML标签
<html></html>  <!--html标签对,告诉浏览器这个页面的范围-->
  • head标签
<html>
<head></head>  <!--head标签对,是网页的头部,用于定义一些特殊的内容-->
</html>
  • title标签
<html>
<head>
<!--title标签对,是head标签的内部标签,标签内定义网页的标题,显示在浏览器栏目中-->
<!--除此之外,还有meta标签、link标签、style标签、script标签、base标签可以放在head标签内部-->
<titlle>这是网页的标题</title> 
</head> 
</html>
  • body标签
<!DOCTYPE html>
<html>
<head></head>
<body></body>  <!--body标签对,是网页的身体,内部编写网页的大部分代码-->
</html>
  • 标题标签
<!DOCTYPE html>
<html>
<head></head>
<body>
<!--在HTML中,一共有以下六个级别的标题标签。
一个页面一般只能有一个h1标签,其他标签可以有多个。
区别于title标签,h1-h6标签用于显示网页内容的标题。-->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
  • 段落标签
<!DOCTYPE html>
<html>
<head></head>
<body>
<!--p标签对,可以用来显示一段文字,段落标签会自动换行,并且段落与段落之间有一定的间距-->
<p>段落内容</p> 
</body>  
</html>
  • 换行标签
<!--br标签用来给文字换行,而p标签用来给文字分段。
p标签会导致段落之间有一定间隙,而br标签不会。-->
<br/>  
  • 水平线标签
<!--hr标签可用来生成一条水平分割线-->
<hr/>
  • 字体样式标签
<strong></strong>  <!--粗体-->
<em></em>  <!--斜体-->
  • 常见特殊符号
&nbsp;  <!--空格-->
&gt;  <!--大于号>-->
&lt;  <!--小于号<-->
&copy;  <!--版权符号©-->

下面是简单示例

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

	<hr/>

	成就最好的自己<br/>
	服务祖国和人民<br/>

	<p><strong>追求卓越</strong></p>
	<p><em>追求卓越</em></p>

	<p>&nbsp;&nbsp;&nbsp;</p>
	<p>&gt;</p>
	<p>&lt;</p>
	<p>&copy;钱小强</p>
</body>
</html>

图片

<img src="图片地址" alt="默认返回的图片的替代文字(找不到图片时会显示)" 
title="鼠标悬停时的提示文字" width="图片宽度" height="图片高度"/>

下面是简单示例

<!DOCTYPYE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图像标签</title>
</head>
<body>
	<img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧" 
		title="钱小强的个人主页" width="800px" height="500px"/> 
	
	<!--超链接,跨页面跳转-->
	<a href="超链接标签.html#down">点击去底部</a>
</body>
</html>

超链接

  • 文本和图片超链接
<!--target常用取值有_blank和_self
_blank 在新窗口打开
_self 在原窗口打开(不写target参数时,默认是_self) 
-->
<a href="跳转页面的地址" target="打开方式">文本或图片</a>
  • 锚链接
<!--锚链接 需要一个锚标记,点击超链接可以跳转到标记所在的位置-->

<a name="标记名">文本</a>  <!--使用name作为锚标记-->

<a href="#标记名">文本</a>  <!--跳转到标记位置-->
  • 邮箱链接
<a href="mailto:邮箱地址">文本</a>

下面是简单示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>超链接标签</title>
</head>
<body>
	<!--顶部标记-->
	<a name="top">页面顶部</a><br/>

	<!-- 文本超链接 -->
	<a href="基本标签.html" target="_blank">点击跳转页面</a><br/>
	<a href="https://www.baidu.com" target="_self">点击跳转到百度</a><br/>

	<!-- 图像超链接 -->
	<a href="基本标签.html">
	<img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧" 
		title="钱小强的个人主页" width="800px" height="500px"/>
	</a>

	<!--以下重复代码是为了延长页面,方便看到使用锚链接跳转到页面顶部和底部的效果-->
	<p>
		<img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧" 
		title="钱小强的个人主页" width="800px" height="500px"/> 
	</p>
	<p>
		<img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧" 
		title="钱小强的个人主页" width="800px" height="500px"/> 
	</p>
	<p>
		<img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧" 
		title="钱小强的个人主页" width="800px" height="500px"/> 
	</p>

	<!-- 锚链接 -->
	<a href="#top">点击去顶部</a><br/>

	<!-- 邮箱链接 -->
	<a href="mailto:...@qq.com">点击发邮件</a><br/>

	<!--底部标记-->
	<!--图片标签部分有相应代码,可以实现跨页面跳转 href="页面地址#标记名"
	<a href="超链接标签.html#down">点击去底部</a>
	-->
	<a name="down">页面底部</a>
</body>
</html>

列表

  • 有序列表
<!--ol是外部标签,li是列表内容-->
<ol>
<li></li>
<li></li>
</ol>
  • 无序列表
<!--ul是外部标签,li是列表内容-->
<ul>
<li></li>
<li></li>
</ul>
  • 自定义列表
<!--dl是外部标签,dt列表标题,dd是列表内容-->
<dl>
<dt></dt>
<dd></dd>
</dl>

下面是简单示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>列表学习</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>生物</li>
</ol>
<hr/>

<!-- 无序列表 -->
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>生物</li>
</ul>
<hr/>

<!-- 自定义列表 -->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
<dd>生物</dd>
</dl>

<dl>
<dt>年级</dt>
<dd>高一</dd>
<dd>高二</dd>
<dd>高三</dd>
</dl>
</body>
</html>

表格

<table border="给表格设置边框">
<!--tr 行  td 列-->
<tr>
<td rowspan="跨行扩展的行数" colspan="跨列扩展的列数"></td>
</tr>
</table>

下面是简单示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格学习</title>
</head>
<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>100</td>
		</tr>
		<tr>
			<td rowspan="2">小强</td>
			<td>语文</td>
			<td>100</td>
		</tr>
		<tr>
			<td>数学</td>
			<td>100</td>
		</tr>
	</table>
</body>
</html>

媒体元素

<!--视频
controls 控制条
autoplay 自动播放(浏览器原因,可能不能自动播放,可以手动点击播放)
-->
<video src="视频地址" controls autoplay></video>
<!--音频-->
<audio src="音频地址" controls autoplay></audio>

内联框架

<!--可以使用iframe标签在一个页面中嵌入另外一个页面-->
<iframe src="链接页面的地址" name="框架标识名" width="框架宽度" height="框架高度">
</iframe>

下面是简单示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>内联框架</title>
</head>
<body>
	<iframe src="基本标签.html" width="800px" height=""500px></iframe>
	
	<!--超链接和框架标识名结合使用-->
	<iframe src="" name="hello" width="800px" height="500px"></iframe>
	<a href="基本标签.html" target="hello">点击在框架中打开</a>
</body>
</html>

表单

  • form标签
<!--method取值有两个 post和get
get 可以在url中看到提交的信息,安全性低
post 在url中看不到提交的信息,安全性更高,实际开发中常用
-->
<form action="表单提交的地址" method="提交方式">
各种表单标签
</form>
  • 单行文本框
<input type="text" name="表单元素的名称" value="默认初始值" 
	maxlength="可输入文本的最大长度" size="文本框的长度"/>
  • 密码框
<input type="password" name="表单元素的名称" value="默认初始值"/>
  • 单选框
<!--name属性如果不写或者取值各不相同,则是多选的效果;只有name取值相同,才是单选.
checked 表示默认被选中
-->
<input type="radio" name="组名" value="单选框的值" checked/>
  • 多选框
<!--checked 表示默认被选中-->
<input type="checkbox" name="组名" value="多选框的值" checked/>
  • 按钮
<!--普通按钮-->
<input type="button" value="按钮上的文字"/>
<!--图像按钮 点击图片可以直接提交表单-->
<input type="image" src="图片路径"/>
<!--提交按钮-->
<input type="submit" value="按钮上的文字"/>
<!--重置按钮-->
<input type=""reset value="按钮上的文字"/>
  • 下拉框
<!--selected 默认被选中-->
<select>
	<option value="选项值" selected>选项内容</option>
</select>
  • 文本域(多行文本框)
<textarea rows="行数" cols="列数">默认内容</textarea>
  • 文件域
<input type="file"/>
  • 简单验证
<!--邮箱验证 只能验证邮箱的基本格式,并不规范-->
<input type="email"/>
<!--URL验证 -->
<input type="url"/>
<!--数字验证 设置了max min step就只能输入特定的数字-->
<input type="number" max="最大值" min="最小值" step="步长"/>
  • 滑块
<inpute type="range" max="最大值" min="最小值" step="步长"/>
  • 搜索框
<input type="search"/>
  • 简单应用
<!--几个常用属性,见下方示例中的应用
readonly 只读
disabled 禁用
hidden 隐藏
-->
  • 初级验证
<!--几个属性,见下方示例中的应用
placeholder 给出用户提示信息
required 进行非空判断
pattern 正则表达式验证
-->

下面是简单示例

<html>
<head>
	<meta charset="utf-8">
	<title>表单学习</title>
</head>
<body>
	<h1>登录注册</h1>

	<form action="基本标签.html" method="post">

	<!-- 单行文本框 -->
	<p>用户名:
	<input type="text" name="username" value="你好" maxlength="8" size="25" readonly>
	</p>

	<!-- 密码框 -->
	<p>密码:
	<input type="password" name="pwd" hidden>
	</p>

	<!-- 单选框 -->
	<p>性别:
	<input type="radio" name="gender" value="boy"><input type="radio" name="gender" value="girl" checked></p>

	<!-- 多选框 -->
	<p>爱好:
	<input type="checkbox" name="hobby" value="code">编程
	<input type="checkbox" name="hobby" value="music" checked>音乐
	<input type="checkbox" name="hobby" value="dance">舞蹈
	</p>

	<!-- 按钮 -->
	<p>普通按钮:
	<input type="button" name="btn" value="点击">
	</p>
	<p>图像按钮:
	<input type="image" src="D:\Media\Pictures\1.png">
	</p>

	 <!-- 下拉框 -->
	<p>国家:
	<select name="country">
		<option value="china">英国</option>
		<option value="usa">美国</option>
		<option value="india" selected>印度</option>
	</select>
	</p>

	 <!-- 文本域 -->
	<p>个人简介:<br/>
	<textarea cols="30" rows="10">请介绍一下你自己</textarea>
	</p>

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

	 <!-- 简单验证 -->
	<p>邮箱:
	<input type="email" name="email" required>
	</p>
	<p>URL:
	<input type="url" name="url" placeholder="请输入url">
	</p>
	<p>商品数量:
	<input type="number" name="num" max="100" min="0" step="2">
	</p>

	  <!-- 滑块 -->
	<p>音量:
	<input type="range" name="voice" min="0" max="100" step="2">
	</p>

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

	<!-- 正则表达式验证 会更加严格的验证邮箱的格式,包括基本的符号和各个部分的位数
	可以上网搜索常用的正则表达式
	 -->
	<p>自定义邮箱:
	<input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
	</p>

	<p>
	<input type="submit" value="提交">
	<input type="reset" value="重置" disabled>
	</p>

	</form>
	
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML入门学习 的相关文章

  • 解决WSL2/ubuntu安装软件报错 E: Invalid operation insatll 问题

    文章目录 解决WSL2安装软件报错E Invalid operation insatll 问题方法一方法二 解决WSL2安装软件报错E Invalid operation insatll 问题 此问题为系统定位不到软件包 xff0c 无法安
  • github-copilot的使用步骤

    1 首先登录你的github账号 xff0c 点击头像 xff0c 点击设置 2 在设置界面点击Copilot 并点击try Colilot 3 点击绿色按钮继续 4 设置为允许 xff0c 并取消允许使用你的代码来改进这一选项 xff0c
  • Arduino IDE配置esp8266开发环境

    目录 前言arduino IDE安装配置ESP8266开发环境通过开发板管理器安装手动安装开发版管理器备用的网址 参考 前言 之前本科那会疫情在家用esp8266 ESP 01s Relay模块做了一个远程浇花的设备 xff0c 当时使用a
  • 三、Ubuntu 18.04系统调试(命令/换源)

    目录 一 常用命令 二 Ubuntu 18 04换源 2 1便捷方法 2 2命令行方法 xff08 较为复杂 xff0c 但可查看防止后期有些错误是因为源导致的源文件 xff09 一 常用命令 目录操作 pwd 查看当前目录 cd 返回上一
  • 使用VScode远程操作虚拟机(ubuntu)

    1 VSCode安装 2 打开Ubuntu 使用ifconfig 获取系统接口 3 打开remote ssh 4 配置好相关属性 5 开启远程连接输入密码即可连接
  • 学习率(Learing Rate)的作用以及如何调整

    1 什么是学习率 学习率 Learning rate 作为监督学习以及深度学习中重要的超参 xff0c 其决定着目标函数能否收敛到局部最小值以及何时收敛到最小值 合适的学习率能够使目标函数在合适的时间内收敛到局部最小值 这里以梯度下降为例
  • Pytorch 中net.train() 和 net.eval()的作用和如何使用?

    一般在训练模型的代码段加入 xff1a model train 在测试模型时候加入 xff1a model eval 同时发现 xff0c 如果不写这两个程序也可以运行 xff0c 这是因为这两个方法是针对在网络训练和测试时采用不同方式的情
  • Qt 子窗口内嵌到父窗口中

    有时需要把一个子窗口内嵌进入父窗口当中 我们可以这样做 1 新建一个QWidget 或者QDialog的子类 ClassA xff08 父类为ClassB xff09 2 在新建类的构造函数中添加设置窗口属性 setWindowFlags
  • 用Cmake 编译OpenCV常见的错误

    minGW32 make遇到的错误1 xff1a 37 Linking CXX shared library bin libopencv core341 dll CMakeFiles opencv core dir objects a me
  • 卷积 反卷积 上采样 下采样 区别

    1 卷积 就是利用卷积核 步长前进 卷积整个图片 2 反卷积 反卷积的具体操作 原图输入尺寸为 1 xff0c 3 xff0c 3 xff0c 3 对应 batch size channels width height 反卷积tconv 6
  • Go语言操作数据库MySQL

    连接 Go语言中的database sql包提供了保证SQL或类SQL数据库的泛用接口 xff0c 并不提供具体的数据库驱动 使用database sql包时必须注入 xff08 至少 xff09 一个数据库驱动 我们常用的数据库基本上都有
  • 解决Git请求错误问题

    git clone gits github com Cloning into 39 FdogSerialize 39 git 39 remote gits 39 is not a git command See 39 git help 39
  • Reactor 模式

    Reactor 翻译过来的意思是 反应堆 xff0c 可能大家会联想到物理学里的核反应堆 xff0c 实际上并不是的这个意思 这里的反应指的是 对事件反应 xff0c 也就是来了一个事件 xff0c Reactor 就有相对应的反应 响应
  • MATLAB画图调整分辨率

    问题 xff1a 经常需要用MATLAB画图 xff0c 但是保存之后分辨率不高 xff0c 特别是需要放大的情况下 解决 xff1a 对于下面这种画出的图形 选择 文件 61 gt 导出设置 61 gt 渲染 61 gt 分辨率 选择60
  • C语言中常见的逻辑错误

    常见错误一 xff1a 61 和 61 61 混在一起 int main int ret if ret 61 1 return 0 结果 xff1a 变量被错误赋值 xff0c 逻辑判断错误 错误二 xff1a 定义较大的全局变量造成 编译
  • Qt中常见的位置和尺寸

    QPoint类的介绍 QPoint 类封装了我们常用用到的坐标点 x y 常用的 API 如下 构造函数 构造一个坐标原点 即 0 0 QPoint QPoint 参数为 x轴坐标 y轴坐标 QPoint QPoint int xpos i
  • 关于QT线程运用的三种方式

    QThread 类函数 QThread 类常用 API 构造函数 QThread QThread QObject parent 61 Q NULLPTR 判断线程中的任务是不是处理完毕了 bool QThread isFinished co
  • 安装Ubuntu22.04+nvidia驱动+CUDA-11.7+GRPMACS patch PLUMED

    首先是Ubuntu22 4的安装 Ubuntu系统一般直接可以使用RUFUS软件制作U盘启动项 xff0c 再依照顺序安装Ubuntu系统 xff0c 这里不赘述 CUDA 11 7 span class token function su
  • Linux部署Nexus私服

    这篇文章主要介绍了Linux搭建自己Nexus私服的实现方法 xff0c 文中通过示例代码介绍的非常详细 xff0c 对大家的学习或者工作具有一定的参考学习价值 一 Nexus介绍 对maven来说仓库分为两类 xff1a 本地仓库和远程仓
  • 元学习和机器学习的对比

    目录 引言机器学习元学习什么是元学习元学习的流程学习学习函数评价学习函数好坏迭代优化 整体框架 元学习和机器学习的对比定义的区别数据集划分的区别损失函数的区别两者之间的共通之处 总结 引言 本篇博客是李宏毅老师元学习课程的笔记 深度学习大部

随机推荐