HTML快速入门

最新推荐文章于 2024-05-11 23:02:38 发布

一修2020

最新推荐文章于 2024-05-11 23:02:38 发布

阅读量73

点赞数

文章标签： html web

本文链接：https://blog.csdn.net/weixin_45863242/article/details/107758064

版权

HTML

1、概念

Hyper Text Markup Language 超文本标记语言
超文本：超文本是用超链接的方法将各种不同空间文字信息组织在一起的网状文本
标记语言：由标签构成的语言。<标签名称>如html、xml，标记语言不是编程语言

2、快速入门

语法：
1、html文档后缀名.html或者.htm
2、标签分为：

1、围堵标签：有开始标签和结束标签。如<html></html>
2、自闭和标签：开始标签和结束标签在一起。如<br/>

3、标签可以嵌套
需要正确嵌套，不能泥中有我，我中有你
4、在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引进来
5、html的标签不区分大小写，但是建议使用小写

eg、
<html>
<head>
<title>title</title>
</head>
<body>
<font color='red'>Hello World</font></br>
<font color='blue'>Hello World</font>
</body>
</html>

3、标签名以及其属性

1、img:展示图片

属性：
src:指定图片位置

注意：
相对路径：以.开头的路径
./：代表当前目录
../：代表上一级目录

2、列表标签

有序列表：
ol:定义有序列表
li:定义每一项
无序列表：
ul:定义无序列表
li:定义每一项

注意：
type:可以改变标签的样式
start:可以改变标签的起点

3、连接标签

a:定义一个超链接
属性：
href：指定访问资源的URL（统一资源定位符）
target:指定打开资源的方式

_self：默认值，在当前页面打开
_blank：在空白页面打开

4、块标签

div:每一个div占满一整行。块级标签
span:文本信息在一行显示，行内标签内联标签

6、语义化标签

html5中为了提高程序的可读性，提供了一些标签
1、< header>
2、< footer>

6、表格标签

table:定义表格

属性：
	width:宽度
	border：边框
	cellpadding:定义内容和单元格的距离
	cellspacing:定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
	bgcolor:背景色
	align:对齐方式

tr:定义行

属性：
	bgcolor:背景色
	align:对齐方式

td:定义单元格

属性：
	colspan:合并列
	rowspan:合并行

th:定义表头单元格
caption:表格标题
thead:表示表格的头部份
tbody:表示表格的体部分
tfoot:表示表格的脚部分

案例

设计步骤：

1、确定使用table来完成布局
2、如果某一行只有一个单元格，则使用< tr >< td>< /td>< /tr>
3、如果某一行有多个单元格，则使用表格嵌套< tr >< td>< table>< /table>< /td>< /tr>

下面展示 案例实现。

<DOCTYPE html>
<html lang="en">
<head>
	<meta chaeset="UTF-8">
	<title>title</title>
</head>
<body>
	<!--采用table来完成布局-->
	<!--最外面的table，用于整个页面的布局-->
	<table width="100%" align="center">
		<!--第一行-->
		<tr>
			<td>
				<img src="image/top_banner.jpg" width="100%" alt="">
			</td>
		</tr>
		<!--第二行-->
		<tr>
			<td>
				<table width="100%" align="center">
					<tr>
						<td><img src="image/logo.jpg" alt=""></td>
						<td><img src="image/search.png" alt=""></td>
						<td><img src="image/hotel_tel.png" alt=""></td>
					</tr>
				</table>
			</td>
		</tr>
		<!--第三行-->
		<tr>
			<td>
				<table width="100%" align="center">
					<tr bgcolor="#ffd700" align="center" height="45">
						<td>
						<a href="">首页1</a>
						</td>
						<td>
						<a href="">首页2</a>
						</td>
						<td>
						<a href="">首页3</a>
						</td>
						<td>
						<a href="">首页4</a>
						</td>
						<td>
						<a href="">首页5</a>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<!--第四行-->
		<tr>
			<td>
				<img src="image/banner_3.jpg" width="100%" alt="">
			</td>
		</tr>
		<!--第五行-->
		<tr>
			<td>
				<img src="image/icon_5.jpg"  alt="">
				精选
				<hr color="#ffd700">
			</td>
		</tr>
		<tr>
			<td>
				<table>
					<tr>
						<td>
							<img src="image/jiangxuan_1.jpg" alt="">
							<p>巴拉巴拉巴拉</p>
							<font color="red">$yen;899</font>
						</td>
					</tr>
				</table>
			</td>
		<tr>
		...
	</table>
</body>

一修2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML快速入门

HTML1、概念Hyper Text Markup Language 超文本标记语言超文本：超文本是用超链接的方法将各种不同空间文字信息组织在一起的网状文本标记语言：由标签构成的语言。<标签名称>如html、xml，标记语言不是编程语言2、快速入门语法：1、html文档后缀名.html或者.htm2、标签分为：1、围堵标签：有开始标签和结束标签。如<html></html>2、自闭和标签：开始标签和结束标签在一起。如<br/>3、标签可
复制链接

扫一扫