web前端技术笔记（一）html简介及常用标签、页面布局

最新推荐文章于 2023-12-14 17:04:35 发布
最新推荐文章于 2023-12-14 17:04:35 发布
阅读量554 收藏 1
点赞数
分类专栏： 前端 文章标签： 学习笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27251475/article/details/90607984
版权 

<!DOCTYPE html> <!--html 文档声明，声明此文档是个html的文档-->
<!--快捷键：html+Tab-->
<html><!--html开始标签-->
    <head><!--网页的设置项和资源引用，不会呗显示-->
        <meta charset="UTF-8">
        <title>001-html</title>
    </head>

    <body><!--网页主体，显示的内容写在这个标签内-->
        今天是星期二。
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6><!--标题最高为h6-->

        <!--p标签为段落 br为换行,span为特殊标志或样式-->
        <!--字符实体 &nbsp;为空格 &lt;为小于号 &gt;为大于号-->
        <p>&nbsp;&nbsp;&nbsp;12345678912111113121
            2312&lt;312313&gt;1313131123123123121
            3212313 <br> 123112312312312312312311
            231321<span>32132112</span>2312312312
        </p>

        <!--a标签为链接-->
        <a href="http://www.baidu.com">百度</a>
        <a href="tel:1311111111">致电咨询</a>
        <a href="class_2">跳转到同级目录的文件</a>
        <a href="http://www.baidu.com"><img src="images/1.png" alt="百度"></a><!--带链接的图片-->
        <a href="#">缺省的链接地址，可以跳转至页面最上部</a>
        <a href="#end">跳转至页面最底部</a>

        <!--img标签为图片 src为图片地址 alt为文件不能显示时显示的文案-->
        <img src="images/1.png" alt="图片加载失败">

        <!--div标签为模块-->
        <div>这是第一个div元素</div>
        <div>这是第二个div元素</div>


    </body>
</html>

<a>标签

可以在网页上定义一个链接地址，它的常用属性有：

  • href属性 定义跳转的地址
  • title属性 定义鼠标悬停时弹出的提示文字框
  • target属性 定义链接窗口打开的位置
    • target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
    • target="_blank" 新页面会在新开的一个浏览器窗口打开

html块标签

1、<div> 标签 块元素，表示一块内容，没有具体的语义。
2、<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。

含样式和语义的标签

1、<em> 标签 行内元素，表示语气中的强调词
2、<i> 标签 行内元素，表示专业词汇
3、<b> 标签 行内元素，表示文档中的关键字或者产品名
4、<strong> 标签 行内元素，表示非常重要的内容

语义化的标签

语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

table 标签

1.<table>标签：声明一个表格，它的常用属性如下：

  • border属性 定义表格的边框，设置值是数值
  • cellpadding属性 定义单元格内容与边框的距离，设置值是数值
  • cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
  • align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

  • align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
  • valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
  • colspan 设置单元格水平合并，设置值是数值
  • rowspan 设置单元格垂直合并，设置值是数值
<table border="1" width="700" height="300" align="center">
		<tr>
			<td colspan="5">基本情况</td>			
		</tr>
		<tr>
			<td width="15%"></td>
			<td width="25%"></td>
			<td width="15%"></td>
			<td width="25%"></td>
			<td rowspan="5"><img src="images/person.png" alt="人物图片"></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>			
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
	</table>

</body>
</html>

页面布局概述

布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：

1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。

2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人简历</title>
</head>
<body topmargin="0">

	<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
		<tr>
			<td width="260" valign="top" bgcolor="#f2f2f2">

				
				<table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td height="100"></td>
					</tr>
					<tr>
						<td align="right"><img src="images/person.png"></td>
					</tr>
					<tr>
						<td align="right">张达山 </td>
					</tr>
					<tr>
						<td align="right">18210898888 </td>
					</tr>
					<tr>
						<td align="right">zhangdasan@126.com</td>
					</tr>
				</table>


			</td>
			<td width="30"></td>
			<td width="480" valign="top">
				
				<table width="480" border="0" cellpadding="0" cellspacing="0">
					<tr><td height="80"></td></tr>
					<tr>
						<td align="right"><img src="images/resume.png"></td>
					</tr>
				</table>
				<br>
				<hr />
				<br>

				<table width="480" height="200" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td colspan="2"><b>个人基本情况</b></td>					
					</tr>
					<tr>
						<td><b>姓 名：</b>张达山	</td>
						<td><b>籍 贯：</b>北京昌平</td>
					</tr>
					<tr>
						<td><b>性 别：</b>男</td>
						<td><b>身 高：</b>175cm</td>
					</tr>
					<tr>
						<td><b>民 族：</b>汉</td>
						<td><b>体 重：</b>70kg</td>
					</tr>
					<tr>
						<td><b>出生日期：</b>1992.03.28	</td>
						<td><b>电 话：</b>18210898888</td>
					</tr>
					<tr>
						<td><b>现居住地：</b>昌平天通苑</td>
						<td><b>专 业：</b>工业设计</td>
					</tr>
				</table>
				<br>
				<br>

				<table width="480" height="80" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td><b>教育背景及工作经历</b></td>
					</tr>
					<tr>
						<td><b>2008.09-2011.06</b> 北京邮电大学 工业设计专业</td>
					</tr>
					<tr>
						<td><b>2011.06-2012.09</b>北京微创信息科技有限公司 任前端开发工程师</td>
					</tr>


				</table>

					<br>
				<br>

				<table width="480" height="80" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td><b>所获证书</b></td>
					</tr>
					<tr>
						<td><b>2009年：</b> 荣获“高级美术设计师”证书</td>
					</tr>
					<tr>
						<td><b>2009年：</b>荣获“优秀班干部”证书</td>
					</tr>


				</table>

			</td>
			<td width="30"></td>
		</tr>
	</table>


</body>
</html>

table布局及实例

table来做整体页面的布局，布局的技巧归纳为如下几点：

1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。

2、将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。

3、针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。

4、单元格中的元素或者嵌套的表格用align和valign设置对齐方式

5、通过属性或者css样式设置单元格中元素的样式

打开网页服务

html文件放到C：\inetpub\wwwroot

访问地址：127.0.0.1/XXX.html

M行者X
关注
专栏目录
Web 前端学习笔记之 HTML 入门（1）
贱贱的梦想
12-28 1333
HTML 简介什么是 HTMLHTML 是一种使用标签来描述页面的内容和结构的语言。 HTML 指的是超文本标记语言（Hyper Text Markup Language） HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 的发展史HTML 的产生 1991年，Tim Be
WEB前端技术笔记整理
08-28
**WEB前端技术笔记整理** 前端开发是构建网页或应用程序用户界面的关键部分，它涉及与用户的交互和页面动态呈现。在本笔记中，我们将深入探讨HTML、JavaScript（JS）、jQuery（JQ）、CSS以及HTML5这五种核心技术，...
HTML（Hyper Text Markup Language）超文本标记语言基础学习
m0_47794838的博客
08-06 678
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html> 注意：在中文网页中需要使用&
html超文本标记语言学习
WitsMakeMen的专栏
11-05 3903
所有内容整理自 ： http://www.w3school.com.cn/html/html_styles.asp HTML 标题 This is a heading This is a heading This is a heading     HTML 链接 This is a link、   HTML 图像 HTML 图像是通过 标签进行定义的   HTML
超文本语言
coffee3139564344的博客
11-30 1633
什么是超文本语言？ 标记语言的威力在于其强大的搜集能力，它可以将收集来的文档组合成一个完整的信息库，并且可以将信息库与世界上的其他文档集合连接起来。 这样的话，读者不仅可以完全控制文档在屏幕的显示，还可以通过超链接来控制浏览信息的顺序。这就是HTML 和XHTML中的ht（超文本 hyper text） ，就是它将整个web网络连接起来。 超文本的...
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
web前端笔记
07-28
【web前端笔记】是我在参加专业培训机构学习时整理的一系列笔记，主要涵盖了Web前端开发的基础知识、重要概念和技术栈。这些笔记旨在帮助初学者或有经验的开发者更好地理解和掌握前端开发的核心技能，同时也可供自我...
webProject:web前端技术笔记
03-23
【web前端技术笔记】是关于Web开发领域前端技术的一份详细学习资料，主要涵盖了Web前端的基础到高级的各种知识点。这份笔记以"webProject-master"作为压缩包文件名，表明其可能是一个开源项目，允许用户查看、学习...
web前端零基础html5 +css3+前端项目视频教程笔记、源码第一章初识HTML
11-12
HTML5和CSS3是现代Web前端开发的基础，它们共同构成了网页的结构和样式。本教程旨在帮助零基础的学员从头开始学习这两种关键技术，并通过实际项目加深理解。 HTML（HyperText Markup Language）是用于创建网页内容...
39.超文本标记语言HTML详解（下）
Mars Loo的博客
08-26 3490
HTML总结笔记，一篇太大，分成两篇。
前端标签笔记
kailimanong的博客
03-20 135
DOCTPYPE 用来声明html的版本 html是双标签 html包括头部《head》和内容块《body》 《meta charset=“utf-8”》该网页展示时的字符集编码，注意，你所给的编码要跟代码编辑器的编码一致才不会乱码 《title》网页打开时的网页标题 《body》是要展示的内容 《P》：段落 《h1》到《h6》： 标题 《hr》：水平线 《！–内容–》：注释 《body bgc...
前端标签笔记（html5）
Jack__Tu小纪
12-04 195
字体标签 font color:颜色 size:大小（1-7） face:改变字体 p 段落标签 h 标题标签 br 换行 hr 水平线 b 加粗 i 斜体 strong :加粗 包含语义 em 斜体 包含语义 img标签 src :指定图片的路径 width：宽度 height:高度 alt:图片加载错误的提示信息 相对路径 ./ 代表的是当前路径 ../代表的是上一...
Web前端笔记(标签)
W15105879792的博客
08-01 369
学习笔记
HTML布局--使用<div>元素
weixin_34233856的博客
12-01 85
div元素是用于分组HTML元素的块级元素 上图代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&...
什么是html超文本语言,什么是超文本？HTML超文本标记语言怎么学？
weixin_33452735的博客
06-03 680
什么是超文本(HTML超文本标记语言怎么学？)HTML超文本标记语言是应用于网页端的页面标记语言，它通过在文本中添加标记，浏览器依据标签的不同，按照不同的方式显示内容，组织内容结构。HTML是作为一名前端开发工程师必须精通的语言。htmlHTML有W3C组织维护，目前已经发展到HTML5，大部分的桌面浏览器和几乎全部的移动端浏览器都已经支持了HTML5，但也还有少数的浏览器并不支持。因此学习者对于...
Web前端-HTML（常用标签）
最新发布
apple_73204060的博客
12-14 2012
常用标签
【前端】HTML标签基础复习笔记
明月沉江春雾晓
04-18 2544
不够完美又何妨？万物皆有裂隙，那是光进来的地方。 文章目录HTML复习笔记JavaWeb相关概述HTML概述HTML语法 HTML复习笔记 JavaWeb相关概述 Javaweb： 使用Java语言开发基于互联网的项目 软件架构： C/s:Client/server 客户端/服务器端 在用户本地有一个客户端程序，在远程有一个服务器端程序 如：QQ，迅雷… 优点： 用户体验好 缺点： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值