HTML基础

最新推荐文章于 2023-03-06 17:15:50 发布

qq_39033580

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量60

点赞数

分类专栏： html基础学习文章标签： html html5

本文链接：https://blog.csdn.net/qq_39033580/article/details/120084094

版权

html基础学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML：Hyper Text Markup Language 超文本标记语言
超文本：比普通文本更加强大
标记语言：通过一组标签来对内容进行描述

标题标签
换行

段落标签

加粗斜体标签

<h1>静夜思</h1>
<b><i>李白</i></b></br>
<p>床前明月光，</p>
<p>一是地下双。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>

设计网页的基础，HTML5
1.上面是一个文档声明
2.根标签html
3.html文件包含两部分。头部份和体部分
头部份：主要是用来放置页面信息
体部分：主要用来放置我们的Html页面内容
4.通过标签对内容进行描述，标签由开始标签和结束标签
5.标签不区分大小写，官方建议使用小写

<!DOCTYPE html>
<!---
1.上面是一个文档声明
2.根标签html
3.html文件包含两部分。头部份和体部分
头部份：主要是用来放置页面信息
体部分：主要用来放置我们的Html页面内容
4.通过标签对内容进行描述，标签由开始标签和结束标签
5.标签不区分大小写，官方建议使用小写
-->
<html>
	<head>
		<!---网站配置信息、指定网站打开页面的编码方式-->
		<meta charset="utf-8" />
		<!---指定网站标题-->
		<title>入门案例01</title>
	</head>
	<body>
		hello world！
	</body>
</html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!---
		h1标题：h后面的数字取值范围：1-6
		<hr/>水平分割线--->
		<!---font标签常用属性
		color:颜色
		size:改变字体大小范围1-7
		face：字体
		<标签 属性的名称="属性的值">
		-->
	</body>
</html>

加粗，带语义标签
斜体，包含语义标签
网站图片显示

<!------
		常用属性src:指定图片路径
		width：指定图片宽度
		height：图片高度
		alt:文件加载失败时的提示信息
		------->

相对路径
./代表的是当前路径
…/代表的是上一级路径
…/…/上上级路径

网站友情链接
列表标签
无序列表

列表项

type属性，小圆圈，小方块，默认小黑点
有序列表

type :指定序号的类型
start:从几开始，必须得写数字
a 超链接标签：常用的属性
href:指定要跳转去的链接地址需要加上http协议
target:以什么方式打开
_self:默认打开方式，在当前窗口打开
_blank：新起一个标签页打开页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul type="square">
			<li><a href="https://www.zhenai.com/"_blank>珍爱网</a>
			</li>
			<li><a href="https://www.baihe.com" _self>百合网</a>
			</li>
			<li>世纪佳缘网
			</li>
			<li>非诚勿扰
			</li>
			<li>珍爱网
			</li>
		</ul>
	</body>
</html>

表格标签table
行 tr 标签
列 td 标签
常用属性：
border：指定边框
width:宽度
height:高度
bgcolor:背景颜色
align:对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="200px">
			<tr ">
				<td align="center">1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td bgcolor="black">1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
	</body>
</html>

表格的合并
colspan:跨列
rowspan：跨行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="200px">
			<tr ">
				<td colspan="2" >11</td>
				
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td >21</td>
				<td colspan="2" rowspan="2">22</td>
				
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				
				
				<td rowspan="2">34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				
			</tr>
		</table>
	</body>
</html>

qq_39033580

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML：Hyper Text Markup Language 超文本标记语言超文本：比普通文本更加强大标记语言：通过一组标签来对内容进行描述标题标签换行段落标签加粗斜体标签<h1>静夜思</h1>李白床前明月光，一是地下双。举头望明月，<p&
复制链接

扫一扫

专栏目录