HTML静态网页设计

第一周:HTML写静态网页

一、HTML理论介绍及常用格式

1.HTML主体格式基本结构
<!DOCTYPE html>
<html>
<head>
<mate charset="utf-8"/>
<title>标题</title>
</head>
<body>
主要内容
</body>
</html>
解说:整个HTML格式分为两大部分,一个是head部分,一个是body部分,其中head部分是用于书写网页样式,而body部分用于书写网页主题


2.常用标签:

标题标记

<h1></h1>

...
<h6></h6>

<p></p>段落标签

<b></b> <strong></strong>加粗  

<i></i>倾斜

<br/>换行


&nbsp;空格

<img src="" alt="" title=""/> 图片【gif,png,jpg】src:图片的链接地址 alt:图片加载失败的时候,在图片原本的位置显示的提示文本
title:鼠标悬停的时候,显示的提示文本

<a href="" target=""></a> 超链接  href:链接地址  target:打开新网页的打开方式,默认是在本页面打开

<div></div> 盒子

<span></span>

3.css样式:

内联样式: <标记 style="属性1:属性值1;属性2:属性值2;..."></标记>
内部样式:在head中添加<style></style>

4.选择器:
(1)标签选择器:在<>中的标记都可以作为标签选择器
语法:
<style>
标记{
属性1:属性值1;
属性2:属性值2;
            }
</style>
(2)class选择器:必须在style中进行声明,在标签中进行引用,声明的时候使用“.”进行声明,多个class选择器可以同时作用于一个标记。
语法:
<style>
.color1{
属性1:属性值1;
属性2:属性值2;
            }
        .color2{
属性1:属性值1;
属性2:属性值2;
}
</style>
<p class= "color1 color2">M</p>
id选择器:必须在style中进行声明,在标签中进行引用,声明的时候使用“#”进行声明,他是唯一的,取名的时候不能使用关键字
语法:
<style>
#color1{
属性1:属性值1;
属性2:属性值2;
}
#color2{
属性1:属性值1;
属性2:属性值2;
}
</style>
<p id= "color1">M</p>

:hover 伪类选择器,表示鼠标经过事件
包含选择器:必须要有包含的关系
比如:.box p
<div class="box">
<p></p>
</div>


(5)常用的css属性:
width:宽  取值px/%
height:高  取值px/%
background-color 背景颜色
font-size 字体大小
font-weight:bold;字体加粗
line-height  行高
color 字体颜色
text-align:center/left/right 文本居中/居左/居右
border:边框宽度  边框颜色  边框样式; 边框
box-showdow:水平阴影的位置,垂直阴影的位置,高斯模糊的距离,阴影的宽度,阴影的颜色以及透明度,阴影的样式
border-radius:边框圆角
transform:rotate(10deg) scale(1.2); 动画,旋转动画单位deg  缩放动画
transtion:all 0.3s; 过渡动画,单位ms/s
margin:外边距
padding:内边距

(6)元素类型
块元素:

特征:独占一行,可以设置宽高,一般情况下作为容器。
若宽不指定的情况下默认与父元素宽度相等,若高不指定的情况下,则它的高度由其内容来决定。
对于块元素,我们若指定了宽度,可以使用margin-left与margin-right取值为auto来进行水平居

例如:div、p、h1~h6


行内元素:
特征:不独占一行,设置不上宽高。
行内元素的大小由其内容大小来决定。
例如:span、a


行内块元素:隶属于行内元素,但是又具有块元素的特征。

特征:既不独占一行,又能设置宽高。


(7).元素类型转换
display:block; 转为块元素
display:inline; 转为行内元素
display:inline-block;转为行内块元素


(8)浮动
float:left; 左浮动
float:right; 右浮动
作用:通过浮动,我们可以使块元素在同一行显示


(9)列表
无序列表

<ul>
<li></li>
<li></li>
...
</ul>


有序列表

type的取值:1、a、A、i、I

<ol type="">
<li></li>
<li></li>

</ol>


自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>




(10)css样式:
外部样式的引用
<link   href="外部样式文件的地址"></link>

去掉下划线:
text-decoration: none;

去掉列表默认的样式:
list-style: none;

平移动画
transform: translateX(20px) ;
translateX:在x轴的平移,取值为正,向右平移,取值为负,向左平移
translateY:在y轴的平移,取值为正,向下平移,取值为负,向上平移。


(11)background:背景颜色  背景图片链接地址  背景图片平铺方式  背景图片水平方向的位置  背景图片垂直方向的位置
参数二:url("")
参数三:默认repeat,no-repeat 不平铺  repeat-x水平平铺   repeat-y垂直
参数四:默认left,取值left/right/center/px/%
参数五:默认top,取值top/bottom/center/px/%


(12)position定位
可以有四个方位进行定位:
left、top、right、bottom

绝对定位:position:absolute;
特征:参照物是具有定位属性的父元素,不占据原本的位置(脱离文档流)
相对定位:position:relative;
特征:参照物是自己原本的位置,占据自己原本的位置(不脱离文档流),一般情况下作为包含块


固定定位:position:fixed;
特征:参照物当前窗口,它的位置与父元素无关,也与当前所在位置无关。


(13)高度塌陷
高度塌陷出现的契机:当没有给父元素高度,并且它里面所有的子元素都发生浮动的时候,会出现高度塌陷。
why? 父元素没有指定高度,那么它的高度由其子元素来决定,当子元素都给了浮动,【浮动是脱离文档流的(不再占据自己原本的位置)】,
父元素测量不到子元素的高度,高度显示为0
解决:
给父元素添加overflow:hidden;
在子元素的最后添加一个空盒子,并且给这个空盒子添加clear:both;




(14)opacity透明度
他的取值[0,1] 0:全透明  1:不透明




(15)display:none; 隐藏

opacity:0; 与display:none;区别
使用它们两个的时候,都可以实现不可见的功能,但是opacity:0的时候,这个元素它存在只是透明度发生变化
,而是display:none;这个元素不占据位置(移除)


(16)选择器的权重

“*”通配符权重为0000
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
内联样式的权重为1000
伪类选择器的权重 0010
群组选择器的权重等于它自己本身的权重
包含选择器的权重为所有权重之和


当属性出现重复的时候,会遵从权重高的那个,当权重相同的时候,后写的属性值会覆盖前面的那个




(17)图片整合
本质:就是对背景图片进行定位。
使用的契机:背景图片大于盒子的时候。




(18)锚链接
定义锚点,使用id来定义 :<p id="back">锚点</p>
定义锚链接,使用a标签:<a href="#back">锚链接</a>




(19)overflow:hidden/scroll/auto
hidden:超出显示区域的部分隐藏
scroll:无论内容有木有超出显示区域,都会显示滚动条
auto:当内容超出显示区域的时候,则显示滚动条,否则不显示。




(20)子类选择器
.nav li:nth-child(1),小括号中可以使用2n或者2n+1/2n+1,选中奇数或者是选中偶数个,
通过1/2/3...可以选中.nav下面的第n个li。



二、项目实战

(一)一些粗浅的想法。

1.拿到一个需求,第一步不是去按照自己的想法立刻去敲代码,首先应该做好规划,就以写静态网页为例,写规划的时间要远远小于你自己后期改代码的时间。

2.添加注释。添加注释是很好的习惯,在刚写代码的时候,添加的注释要尽可能的详细,这会为后期的维护和项目的交接提供很好的便利,不然没人看的懂你的代码。

3.变量名的选择。在取变量名的时候,千万不要使用拼音,因为拼音看多了,真的是接受不了。使用英文的变量名会好很多,见文知意。

4.代码书写完,功能实现之后,要去优化自己的代码,让自己的代码更加简洁,可读性更强

(二)书写项目导航栏(以CNDS为例)


首先:对于这个导航栏分析一下,第一个cnds图标放在一个盒子里(logo),然后给文字信息一个盒子(content),所以CNDS和文字信息都在同一个盒子(nav)

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CNDS</title>
		<style type="text/css">
			/*上面这部分是书写这个box盒子的格式,其中包括大小,背景颜色,以及位置*/
			.nav{
				width: 1000px;
				height: 50px;
				/*给出背景颜色,可以更好的判断盒子的位置,最后再滤除背景颜色*/
				/*background: red;*/
				margin: 20px 10px;
			}
			.logo{
				width: 95px;
				height: 40px;
				/*margin-top: 10px;*/
				float: left;
				margin: 10px;
			}
			.logo img{
				line-height: 40px;
			}
			.content{
				width: 500px;
				height: 35px;
				margin: 5px;
				/*background: bisque;*/
				float: left;
			}
			.content ul{
				/*去除列表格式*/
				list-style: none;
			}
			.content li{
				/*去除列表格式*/
				list-style: none;
				/*使列表排成一排*/
				float: left;
				/*上下间隔为0,左右间隔为5个像素*/
				margin: 0 5px;
				/*上下居中*/
				line-height: 100%;
			}
			.content li a {
				/*去除超链接的下划线*/
				text-decoration: none;
				/*超链接的字体颜色:黑色*/
				color: black;
			}
			.content li a:hover{
				/*使用hover动画,改变鼠标经过事件*/
				color: red;
			}
		</style>
	</head>
	<body>
		<!--给出一个大盒子nav,用于存放CNDSlogo和文本-->
		<div class="nav">
			<div class="logo">
				<!--导入图片使用<img src="图片地址">-->
				<img src="img/CNDS.png"/>
			</div>
			<div class="content">
				<ul>
					<li><a href="#">首先</a></li>
					<li><a href="#">博客</a></li>
					<li><a href="#">学院</a></li>
					<li><a href="#">下载</a></li>
					<li><a href="#">GitChat</a></li>
					<li><a href="#">TinyMind</a></li>
					<li><a href="#">商城</a></li>
					<li><a href="#">VIP</a></li>
					<li><a href="#">其他</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>


(三)一个完整页面的设计

1.功能需求

(1)以设计稿为主,页面宽度可以参考下面网址,设计稿相对于下面网址做了小修改
(2)总时间为4小时 首页和文章详情页面(如图)
(3)详情页面的新闻详情不需要自己单独排版,随便复制内容 调整 行高 和字体大小就可以了
(4)轮播先用一张图片代替  images文件夹已经提供
(5)分享也用一张图片代替,images文件夹已经提供
(6)页面的制作完全按照设计稿   文字 和图片可以随便复制,但是布局出来的效果要和设计稿一样

原网站:http://yigujin.wang/

2.代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上机考试</title>
		<style type="text/css">
			.box{
				width: 100%;
				height: 100%;
				/*background: red;*/	
			}
			.box .head{
				width: 100%;
				height: 105px;
				background: white;
			}
			.head .logo{
				width: 235px;
				height: 65px;
				background: blue;
				float: left;
				margin: 0 20px;
				background: url(img/logo.jpg) no-repeat;
			}
			.head .nav{
				width: 650px;
				height: 65px;
				/*background: blueviolet;*/
				float: right;
				margin: 0 200px;
			}
			.nav ul{
				list-style: none;
				text-align: center;
				line-height: auto;
			}
			.nav li{
				width: 75px;
				height: 25px;
				list-style: none;
				float: left;
				margin: 0 10px;
				text-align: center;
				line-height: 25px;
			}
			.nav li a{
				text-decoration: none;
				color: black;
				font: 10px;
				font-weight: bold;
				display: block;
			}
			.nav li:nth-child(1):hover{
				background: ;
				
			}
			.nav li:nth-child(2):hover{
				background: red;	
			}
			.nav li:nth-child(3):hover{
				background: red;	
			}
			.nav li:nth-child(4):hover{
				background: red;	
			}
			.nav li:nth-child(5):hover{
				background: red;	
			}
			.content{
				width: 1100px;
				height: 2500px;
				/*background: blue;*/
				margin: 0 100px;
				margin-bottom: 200px;
			}
			.main{
				width: 800px;
				height: 100%;
				/*background: green;*/
				float: left;
				margin: 0 10px;
			}
			
			.main .bg{
				width:800px ;
				height: 300px;
				margin: 10px 0;
				
			}
			.bg img{
				width:100% ;
				height: 100%;
			}
			.text1{
				width: 100%;
				height: 215px;
				
			}
			.text1 .bg-sb{
				width: 270px;
				height: 200px;
				margin: 2px 2px;
				float: left;
				
			}
			.bg-sb img{
				width:100%;
				height: 100%;
			}
			.text1 .essay{
				width: 380px;
				height: 200px;
				float: left;
				/*background: violet;*/
				margin: 0 10px;
			}
			
			.essay ul{
				list-style: none;
				text-align: left;
			}
			.essay li{
				list-style: none;
				
			
			}
			.essay li:nth-child(1){
				font-size: 18px;
				font-weight: bold;
			}
			.essay li:nth-child(4){
				font-size: 18px;
				font-weight: bold;
				margin: 10px ;
			}
			.essay li a{
				display: block;
				text-decoration: none;
				font-size: 12px;
				color: rgb(168,181,213);
				float: left;
				margin:  0 10px;	
			}
			.main .avd1{
				width: 800px;
				height: 200px;
				/*background: hotpink;*/
				
			}
			.adv1 img{
				width: 800px;
				height: 200px;
			}
			.consult{
				width:240px;
				height: 100%;
				/*background: gold;*/
				float: left;
				margin: 0 20px;
			}
			.consult1{
				width: 240px;
				height: 85px;
				/*background: yellowgreen;*/
				margin: 10px 0;
			}
			.consult1 img{
				width: 100%;
				height: 85px;
				margin: 10px 0;
			}
			.consult2{
				width: 240px;
				height: 480px;
				/*background: darkgrey;*/
				border: 1px solid white;
			}
			.consult2 p{
				font-size: 18px;
				font-weight: bold;
				margin: 5px 5px;
			}
			.consult2 ul{
				list-style: none;
			}
			.consult2 li{
				width: 200px;
				display: block;
				list-style: none;
				margin: 15px 0;
				/*border: 1px dashed black;*/
				border-bottom: 1px dashed black;
				
			}
			.consult2 li a{
				text-decoration: none;
				color: gray;
			}
			.foot{
				width: 100%;
				height: 260px;
				background: black;
				margin-bottom: 20px;
			}
			.title{
				width: 1100px;
				height: 100px;
				background: gray;
				margin: 10px 30px;
			}
			.title ul{
				list-style: none;
			}
			.title li{
				list-style: none;
				float: left;
				margin: 0 10px;
			}
			.title li a{
				text-decoration: none;
				color: white;
			}
			.num{
				width:1100px;
				height: 50px;
				margin: 100px 30px;
			}
			.num ul{
				list-style: none;
				
			}
			.num li{
				list-style: none;
				float: left;
				margin: 0 10px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="head">
				<div class="logo">
					
				</div>
				<div class="nav">
					<ul>
						<li  ><a style="color: red;"href="#">本站首页</a></li>
						<li><a href="#">Nana主题</a></li>
						<li><a href="#">随笔笔记</a></li>
						<li><a href="#">技术文档</a></li>
						<li><a href="#">手气不错</a></li>
						<li><a style="background: rgb(192,30,34);color:white ;">搜索</a></li>
					</ul>
				</div>
			</div>
			<div class="content">
				<div class="main">
					<div class="bg">
						<img src="img/banner.jpg"/>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是9折或85折的优惠,经过与老薛主机首席运营官Mars的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="adv1">
						<img src="img/ad04.jpg"/>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>台下一年功,台上10分钟</li>
								<li>随笔笔记  :9小时前</li>
								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
								<li><a href="">阅读26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="adv2">
						
					</div>
				</div>
				<div class="consult">
					<div class="consult1">
						<img src="img/ad01.jpg"/>
					</div>
					<div class="consult2">
						<p>最新文章</p>
						<ul>
							<li><a href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li>
							<li><a href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li>
							<li><a href="#">帝国之双面佳人第六十章</a></li>
							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
						</ul>
					</div>
					<div class="consult1">
						<img src="img/ad01.jpg"/>
					</div>
					<div class="consult2">
						<p>最新文章</p>
						<ul>
							<li><a href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li>
							<li><a href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li>
							<li><a href="#">帝国之双面佳人第六十章</a></li>
							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
						</ul>
					</div>
					
				</div>
			</div>
			<div class="foot">
				<div class="title">
					<ul>
						<li>友情链接:</li>
						<li><a href="#">百度</a></li>
						<li><a href="#">博客</a></li>
					</ul>
				</div>
				<div class="num">
					<ul>
						<li>copyright@zbpNana主题</li>
						<li>桂ICP备1400471号</li>
						<li>Theme by zbpNana </li>
						<li>Powered by Z-BlogPHP</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

结束语:第一次写博客,还有很多欠缺的地方,请各位大神多多指教。


  • 332
    点赞
  • 1547
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML(超文本标记语言)是一种用于创建网页的标记语言。要设计一个静态网页,首先需要了解HTML的基本语法和标签。 以下是一些常见的HTML标签: - `<html>`:定义文档的根元素。 - `<head>`:包含文档的元数据,如标题、描述和样式表等。 - `<title>`:定义文档的标题,显示在浏览器的标签页上。 - `<body>`:包含文档的所有可见内容,如文本、图像和链接等。 - `<h1>`~`<h6>`:定义标题,从大到小依次排列。 - `<p>`:定义段落。 - `<img>`:插入图像。 - `<a>`:定义链接。 - `<ul>`:定义无序列表。 - `<ol>`:定义有序列表。 - `<li>`:定义列表项。 - `<table>`:定义表格。 - `<tr>`:定义表格行。 - `<td>`:定义表格单元格。 可以使用文本编辑器(如Notepad++、Sublime Text等)编写HTML代码。保存为.html文件后,用浏览器打开即可查看效果。 除了HTML,还需要了解CSS(层叠样式表)来美化网页。CSS用于控制网页的布局、字体、颜色、背景等样式。可以将CSS代码写在HTML文档的`<head>`标签的`<style>`标签内,也可以保存为.css文件并在HTML文档引用。 以下是一个简单的HTML网页示例: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Webpage</title> <style> body { font-family: Arial, sans-serif; background-color: #F5F5F5; } h1 { color: #333; text-align: center; } </style> </head> <body> <h1>Welcome to My Webpage</h1> <p>This is a paragraph.</p> <img src="image.jpg" alt="Image"> <a href="https://www.google.com">Go to Google</a> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <table> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值