HTML入门

最新推荐文章于 2024-08-26 19:32:29 发布
最新推荐文章于 2024-08-26 19:32:29 发布
阅读量135 收藏
点赞数
分类专栏： html/css 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a974986042/article/details/84892705
版权

HTML入门

1.什么是HTML？(Hyper Text Markup Language:超文本标记语言)

超文本：功能比普通文本更加强大
标记语言：使用一组标签对内容进行描述的一门语言(它不是编程语言)

2.语法和规范？

HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。
HTML文件分为头部分(<head></head>)和体部分(<body></body>)
HTML标签都是由开始标签和结束标签组成。(<hr />)
HTML标签不区分大小写，建议使用小写。

3.HTML相关标签学习

标题标签<hn />
水平线标签 <hr />
段落标签<p></p>
字体标签<font></font>
属性：size:指定内容的大小
	 color：指定内容的颜色
	 face：指定内容的字体
加粗：<b></b>
斜体：<i></i>
下划线：<u></u>

案例：网站图片显示页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站图片信息显示页面</title>
	</head>
	<body>
		<img src="../img/logo2.png"  width="260px" height="45px" alt="logo图片"/>
		<img src="../img/header.png" width=" 300px" height="45px" alt="header图片"/>
	</body>
</html>


1.图片标签
	<img />
	属性：
		src:指的是图片显示的路径(位置)
			绝对路径：E:\Users\ThinkPad\Desktop\0703JavaEE就业班\WEB01_HTML\资料\WEB01\image
			相对路径：
				①同一级：直接写文件名称或者./文件名称
				②上一级：../文件名称
				③下一级：写上目录名称/文件名称
		width:指定图片的宽度，取值可以是像素值，也可以是百分比
		height：指定图片的高度，取值可以是像素值，也可以是百分比
		alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)

案例：网站友情链接显示页面

<ul>
	<li><a href="../案例一：网站信息显示页面/网站信息显示页面.html">阿里巴巴</a></li>
	<li><a href="#">华为</a></li>
	<li><a href="#">腾讯</a></li>
	<li><a href="#">乐视</a></li>
</ul>

1.列表标签
	有序列表：
		<ol type="I" start="" reversed="reversed">
			<li></li>
		</ol>
	无序列表：
		<ul type="">
			<li></li>
		</ul>
	
2.超链接标签
	<a href="" target=""></a>
	href:指定跳转的位置
	target：指定跳转页面显示的位置(取值：_self 、_blank)

案例：网站首页显示页面（表格布局）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商城首页</title>
	</head>
	<body>
		<!--1.创建一个八行一列的表格-->
		<table border="1px" width="1300px" align="center" cellpadding="0px" cellspacing="0px">
			<!--2.logo部分-->
			<tr>
				<td>
					<!--嵌套一个一行三列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td width="33.3%">
								<img src="../img/logo2.png" height="47px" />
							</td>
							<td width="33.3%">
								<img src="../img/header.png" height="47px" />
							</td>
							<td width="33.3%">
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--3.导航栏-->
			<tr height="50px">
				<td bgcolor="black">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font size="5" color="white">首页</font>
					</a> &nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">手机数码</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">电脑办公</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">鞋靴箱包</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">家用电器</font>
					</a>
				</td>
			</tr>
			<!--4.轮播图-->
			<tr>
				<td>
					<img src="../img/1.jpg" width="100%" />
				</td>
			</tr>
			<!--5.最新商品-->
			<tr>
				<td>
					<!--嵌套一个三行七列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td colspan="7">
								&nbsp;&nbsp;
								<font size="5">最新商品</font>&nbsp;&nbsp;
								<img src="../img/title2.jpg" />
							</td>
						</tr>
						<tr>
							<td rowspan="2" width="190px" height="500px">
								<img src="../img/big01.jpg" width="100%" height="100%" />
							</td>
							<td colspan="3" width="555px" height="250px">
								<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
						</tr>
						<tr>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
						</tr>
					</table>

				</td>
			</tr>
			<!--6.广告图片-->
			<tr>
				<td>
					<img src="../img/ad.jpg" width="100%" />
				</td>
			</tr>
			<!--7.热门商品-->
			<tr>
				<td>
					<!--嵌套一个三行七列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td colspan="7">
								&nbsp;&nbsp;
								<font size="5">热门商品</font>&nbsp;&nbsp;
								<img src="../img/title2.jpg" />
							</td>
						</tr>
						<tr>
							<td rowspan="2" width="190px" height="500px">
								<img src="../img/big01.jpg" width="100%" height="100%" />
							</td>
							<td colspan="3" width="555px" height="250px">
								<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
						</tr>
						<tr>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">¥499</font>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--8.广告图片-->
			<tr>
				<td>
					<img src="../img/footer.jpg"  width="100%"/>
				</td>
			</tr>
			<!--9.友情链接和版权信息-->
			<tr>
				<td align="center">
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					<p>
						Copyright © 2005-2016 传智商城 版权所有 
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>

1.表格标签
	<table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
		</tr>
		<tr>
			<td></td>
		</tr>
	</table>
2.跨行跨列操作
	跨行：rowspan
	跨列：colspan

案例：网站后台系统页面

left.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="right.html" target="right">会员管理</a><br /><br />
		<a href="#">品牌管理</a><br /><br />
		<a href="#">商品管理</a><br /><br />
		<a href="#">分类管理</a>
	</body>
</html>

right.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		所有用户信息、
	</body>
</html>

top.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font size="7">欢迎XXXX进入后台管理系统</font>
	</body>
</html>

框架页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站后台系统显示页面</title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame name="right" />
		</frameset>
	</frameset>
</html>

框架集标签：
	<frameset rows="" cols="">
		<frame src=""/>
		<frame name=""/>
	</frameset>
src:指定该区域显示的文件(路径)
name:它通常会结合超链接的 target 属性使用，来定义最终的显示位置。
三个和尚_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html标签主体分为三个部分,HTML的基本结构与标签的初步了解
weixin_35744893的博客
06-22 3207
一、初步了解HTMLHTML是一种超文本标签语言，浏览器则是用来“解释和执行”HTML源码的工具。HTML的基本结构其中是文档类型声明，声明这个文件必须是HTML5文件，让浏览器按照HTML5准备进行解析，必须在HTML5中，必须要有，且是一定要写在文件的最上方滴。是网页的标题，显示在最上方的文字： 是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。。。这些信息，大多在浏览器看不到，...
python抓取网站88titienmae88中的“图片区”的第一页的所有图片
象话的博客
12-18 5万+
#-*-coding:utf-8-*- from urllib.request import urlopen, urlretrieve from bs4 import BeautifulSoup import re import os ''' 抓取网站http://jyghf.com/中的“图片区”的第一页的所有图片 关于这个网站，大家不要太有纠结的情绪，作为一个泱泱大国的男士
一个html文档有那三部分组成,JavaScript 三个组成部分
weixin_42318030的博客
06-09 435
1、核心(ECMAScript)ECMAScript 仅仅是一个描述，定义了脚本语言的所有属性、方法和对象。其他语言可以实现 ECMAScript 来作为功能的基准，JavaScript 就是这样：2、文档对象模型(DOM)DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生...
数据分析个人笔记
阳阳的博客
06-18 8031
数据分析 一、 Jupyter Notebook Jupyter Notebook 有两种键盘输入模式。编辑模式，允许你往单元中键入代码或文本；这时的单元框线是绿色的。命令模式，键盘输入运行程序命令；这时的单元框线是灰色。 1、 命令模式 (按键 Esc 开启) Enter : 转入编辑模式 Shift-Enter : 运行本单元，选中下个单元 Ctrl-Enter : 运行本单元 Alt-Enter : 运行本单元，在其下插入新单元 Y : 单元转入代码状态 M :单元转入markdown状态 R :
HTML基本结构包含几个部分？
黑马程序员官方博客
12-09 3021
HTML基本结构包含几个部分？完整HTML页面包括HTMLDOCTYPE声明、title标题、head、网页编码声明等内容。学习HTML需要能够写出html的基本结构并学以致用。 HTML结构代码： （1）第一行 是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。 （2）… 标签是开发人员在告诉浏览器，整个网页是从 这里开始的，到 结束,也就是html文档的开始和结束标签。 （3）… 标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
html入门学习.zip
01-01
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入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
HTML入门学习的源代码.zip
01-01
HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源...
HTML：如何将网页分为上下两个部分
weixin_34128839的博客
11-08 6945
1.使用table： <table><tr><tdheight="80%"><jsp:includepage="2.jsp"></td></tr><tr><tdheight="20%"><jsp:includepage="3.jsp"></td&g...
HTML页面基本结构
ysds20211402的博客
04-05 2274
转自：微点阅读https://www.weidianyuedu.com 之前介绍了HTML的编码规范，良好编码规范可以让我们的代码更加的易于维护，而今天要说的基本结构，则是能够让我们的页面正确的进行页面显示和SEO，正确的HTML格式加上良好的编码规范才是一个成熟合格的项目。 HTML页面基本结构 <!DOCTYPE html><html><head><metacharset="utf-8"...
HTML文档的基本结构
一只努力搬砖的打工妹纸
06-01 2万+
作为一门语言，虽然HTML比较简单，但是，它仍然会有自己的语法规则，该篇文章针对语法规则，做一些笔记HTML文档的基本结构如下：（1）文档类型声明（2）html 标签对（3）head 标签对（4）body 标签对一：文档类型声明（Document Type Declaration,DTD）这个部分的用来说明该文档是HTML文档。所有的HTML文档开始于文档声明之后，它说明了文档的类型及其所遵守的标...
页面平均分成4部分
yuanyuan214365的博客
10-25 1182
将页面平均分成四部分 *{ margin: 0; padding: 0; } .main{ width: 100%; height: 100%; position: absolute; }
一个html文件由三部分组成部分组成部分,HTML的入门及结构组成
weixin_30844407的博客
06-11 4110
当大家在浏览网页的时候，是否思考过这样一个问题：怎样才能制作出一个网页呢？只做出一个网页是很简单的，只要知道什么是HTML并掌握HTML的基础知识就可以制作出一个简单的网页，今天我就为讲解HTML的入门及结构组成。一、什么是HTML?1、在我们开始学习HTML之前我们需要知道什么是HTML？HTML的全称为Hyper Text Markup Language，中文名称为超文本标记语言，阅览方式为网...
CSS 将一个页面平均分成四个部分（div）
weixin_34174105的博客
08-11 1万+
在项目中遇到需求，数据监控页面需要同时显示4个板块内容，如下图： CSS 如何将一个页面平均分成四个部分（div）呢？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将页面平均分成四部分</t...
html页面分成三个部分_HTML入门笔记1
weixin_39524834的博客
12-03 3655
HTML概述：HTML 的全名是“超文本标记语言”（HyperText Markup Language），它是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。1.HTML之父李爵士(Tim Berners-Lee)李爵士发明了WWW、HTML、HTTP和URL。李爵士是万维网的开创者，他写了世界上第一个网页浏览器(WorldWideWe...
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
2301_78945238的博客
08-23 368
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
html文本文字中保留空格和换行
最新发布
qq_41985405的博客
08-26 111
空格和换行的样式：虽然HTML本身并不直接支持对空格和换行的样式设置，但是我们可以通过CSS来实现这个效果，我们可以使用whitespace属性来控制如何处理元素中的空白。会使元素中的所有空白都被保留，而whitespace: nowrap;则会阻止元素中的文本换行。
HTML入门：控件标签详解
在HTML入门学习中，控件的标签符是理解网页结构和交互的基础元素。HTML（HyperText Markup Language）是一种超文本标记语言，它的核心作用是通过一系列标记符（tags）来指导浏览器理解和呈现网页内容。这些标记符...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值