HTML入门学习

最新推荐文章于 2023-03-01 13:59:09 发布
最新推荐文章于 2023-03-01 13:59:09 发布
阅读量3.7k 收藏 6
点赞数
分类专栏： 计算机 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46556545/article/details/123644542
版权

基本标签

  • 文档声明
<!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>
钱小强。
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入
HTML基础学习.zip
最新发布
01-01
HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基
html头部中各式各样的meta
weixin_30668887的博客
06-05 212
在写网页的过程中，第一步就是创建一个html文档。如下是最简单的 html5 文档。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wid...
前端基础-01-HTML
gemoumou的python学习实记
05-19 599
一个完整的网页是由 >html:完成页面各组成部分的搭建;css：进行页面修饰；js：让html页面具有很多的功能 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>我是标题</title>.
【学习笔记】HTML5 示例
码海畅游记录
07-18 2423
示例1 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet
html基础
qq_50452445的博客
07-06 2742
HTML 的全称为超文本标记语言, 是一种标记语言。主要用来为文本添加语义。 注释 基本标签 h p img src: “图片的 URL”alt: “图像显示出错的替代文本”width: “图像宽度”height: “图像高度”注意点:​ 1.默认显示图像正常宽高​ 2.图像只设置宽度,高度自适应​ 3.图像只设置高度,宽度自适应​ 4.图像同时设置宽和高, 可能会导致图像变形 a href: “链接指向的页面 URL”target: “新页面打开方式” base target: “所有页面打开方
web---HTML基础知识
Allure泽宇的博客
06-11 5339
HTML基础知识内容总结
HTML基础语法
weixin_46931860的博客
10-30 2108
HTML语义化 一、基本标签 1、HTML结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>这是网页的标题</title> </head> <body> <p>这是网页的内容</p> </body> </html> 2、head标签 title meta l
＜!DOCTYPE html＞＜html＞＜head＞ ＜meta charset=“utf-8“ /＞ ＜meta name=“viewport“ conten
weixin_55229531的博客
03-01 6197
HTML中的 ＜!DOCTYPE＞ 声明
qq_51735681的博客
04-05 2710
HTML中的 <!DOCTYPE> 声明： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> 内容...... </body> </html> 几乎所有主流浏览器都支持 <!DOCTYPE> 声明。（其中包括像IE、火狐、Opera、Go
Html基础学习
02-02
网站简单的Html基础编程，以ppt的形式结合代码了解Html中的各个标签
html使用
悲欢离合
04-25 714
1.html说明 1.1<!--注解 --> 注释:解释说明，对代码的说明；注释浏览器不解析 2html:超文本标签语言 浏览器解析； 弱语言：偶尔写错浏览也能解析；程序员编写的时候尽量规范； 3标签的作用：让html页面语义化 4标准的html格式 文档声明：<!doctype html> html标签：包括所有内容 head标签：文档头，包括一些关于页...
初识Html基础
m0_54373495的博客
05-26 403
1. 初始HTML 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 网页主要由三部分组成： 结构（ Structure） 、 表现（Presentation） 和行为（Behavior） HTML —— 结构， 决定网页的结构和内容（ “是什么”） CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”） JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”） 2. 网页基本信息 3. 网页
前端入门HTML篇
qq_44354408的博客
08-04 772
HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页。 标签是什么？ HTML标签 是由一对尖括号包裹的单词构成 例如: 所有标签中的单词不可能以数字开头；标签不区分大小写 和 推荐使用小写；标签分为两部分: 开始标签 和 结束标签 ， 两个标签之间的部分，......
html 标准文档结构
l_ymttt的博客
09-01 196
PC版 <!DOCTYPE html> <html> <head> <!-- 国际统一字符编码集一定要写在最前面 --> <meta charset="UTF-8"> <!-- 解决浏览器兼容，以webkit内核解析，ie 以最高内核解析或以谷歌内核 --> <meta name="renderer" content="webkit"/> <meta http-equiv="X-
【HTML5】1.语法入门总结（第一部分）
qq_44078824的博客
04-17 1933
0.思维导图 1.HTML5基本框架 HTML5 是HyperText Markup Language 5 的缩写，是一种标记语言。 第一个程序，基本框架。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
前端的学习之路：初级HTML---meta标签
weixin_44647555的博客
02-01 715
meta标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>meta标签</title> </head> <body> <!--
nginx访问控制+用户认证+https
z07121的博客
06-27 440
nginx访问控制 访问控制 用于location段 allow：设定允许哪台或哪些主机访问，多个参数间用空格隔开 deny：设定禁止哪台或哪些主机访问，多个参数间用空格隔开 [root@localhost conf]# vim nginx.conf location /test { deny 192.168.100.123; echo "lalala"; } [root@localhost conf]# nginx -s reload
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 5683
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
html自学网页制作,HTML入门学习教程:简单网页制作
05-27
很高兴回答你的问题！对于想要自学网页制作的初学者来说，HTML是必须要学习的一门语言。以下是一个简单的HTML入门学习教程，帮助你制作一个简单的网页。 1. 编辑器选择：你可以使用任何文本编辑器，比如Notepad++、Sublime Text或Atom。它们都是很好的选择。 2. HTML基础：HTML是超文本标记语言的缩写，它是用来描述网页内容的语言。通过标记和属性，你可以为网页添加文本、图片、链接和其他元素。学习HTML的基础知识是学习网页制作的第一步。 3. 创建HTML文件：使用你选择的编辑器创建一个新的HTML文件，并将其保存为.html文件。 4. 添加HTML标记：在文件中添加HTML标记，比如<html>和<body>。这些标记指示浏览器如何解释你的网页内容。 5. 添加文本：在<body>标记中添加一些文本，比如“Hello, World!”。这是你的网页内容的第一部分。 6. 添加图片：在<body>标记中添加一个<img>标记，指向一张你想要在网页上展示的图片。 7. 添加链接：在<body>标记中添加一个<a>标记，链接到另一个网页或文件。 8. 预览网页：保存你的HTML文件，并在浏览器中打开它，以查看你的网页。 这是一个简单的教程，你可以在实践中学习更多的HTML技巧和技术。祝你好运！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值