网页设计标签介绍

HTML网页设计：二、网页的基本标签

千次阅读 多人点赞 2021-03-19 17:59:58

网页的基本标签 1.标题标签基本标题标签：一级标题最大，依次越来越小。 <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>...

网页的基本标签 

 
HTML系列文章目录 
HTML网页设计：一、HTML的基本结构
HTML网页设计：二、网页的基本标签
HTML网页设计：三、图像标签之＜img＞标签
HTML网页设计：四、超链接
HTML网页设计：五、行内元素和块元素
HTML网页设计：六、列表
HTML网页设计：七、表格
HTML网页设计：八、媒体元素
HTML网页设计：九、网页的简单布局
HTML网页设计：十、iframe内联框架
HTML网页设计：十一、表单 


 文章目录
 网页的基本标签
HTML系列文章目录
1.标题标签
2.段落标签
3.换行标签
4.水平线标签
5.注释
6.特殊符号
 

 
1.标题标签 
基本标题标签：一级标题最大，依次越来越小。 
<h1>一级标签</h1>
 <h2>二级标签</h2>
 <h3>三级标签</h3>
 <h4>四级标签</h4>
 <h5>五级标签</h5>
 <h6>六级标签</h6> 
代码示例如下： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签学习</title>
</head>
<body>
	<h1>一级标签</h1>
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	<h4>四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>
</body>
</html>
 
网页显示如下：
  
2.段落标签 
<p>段落</p> 
代码示例如下： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>段落标签学习</title>
</head>
<body>
	<!-- 未使用段落标签 !-->
	我寻你千百度 又一岁荣枯
	可你从不在 灯火阑珊处
	
	我寻你千百度 日出到迟暮	
	一瓢江湖我沉浮
	<!-- 使用段落标签 !-->
	<p>我寻你千百度 又一岁荣枯</p>
	<p>可你从不在 灯火阑珊处</p>
	<p>     </p>
	<p>我寻你千百度 日出到迟暮</p>
	<p>一瓢江湖我沉浮</p>
</body>
</html>
 
网页显示如下：
  
3.换行标签 
<br/> 
        <br>标签是空标签，即没有结束标签，因此<br>…</br>是错误的在xml里面必须要求写出<br/>因为xml要求所有的标签都必须关闭，后面加上/表示关闭标签。二者具有相同作用，但前者是老的html规范，而在新的规范W3C//DTD HTML 4.0要求一切都应象xml那样有结束符，以便严格规范。 
代码示例如下： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>换行标签学习</title>
</head>
<body>
	<!-- 未使用换行标签 !-->
	我寻你千百度 又一岁荣枯
	可你从不在 灯火阑珊处
	
	我寻你千百度 日出到迟暮	
	一瓢江湖我沉浮
	<!-- 使用换行标签 !-->
	我寻你千百度 又一岁荣枯<br/>
	可你从不在 灯火阑珊处<br/>
	<br/>
	我寻你千百度 日出到迟暮<br/>	
	一瓢江湖我沉浮<br/>
</body>
</html>
 
网页显示如下：
  
段落标签和换行标签的不同：在生成的网页中，段落段前段后具有间距，而换行每行之间没有间距。 
4.水平线标签 
<hr/> 
        在 HTML 中，<hr> 标签没有结束标签，在 XHTML 中，<hr> 必须被正确地关闭，比如<hr/>，同<br/>标签，为规范标准使用，需要在后面加一个反斜杠。 
代码示例如下： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水平线标签学习</title>
</head>
<body>
	hello
	<hr/>
	world
</body>
</html>
 
网页显示如下：
  
5.注释 
<!–这是一段注释。注释不会在浏览器中显示。–>】 
dw中注释的快捷方式为选中要注释的内容按ctrl+shift+/ 
代码示例如下： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注释标签学习</title>
</head>
<body>
	<!--这是一段注释，不会再网页上显示。-->
	<p>这是一个普通的段落。</p>
	这是一个普通的句子。<br/>
	这是一个普通的句子。<br/>
</body>
</html>
 
网页显示如下：
  
6.特殊符号 
空格：&nbsp;
 大于号>：&gt;
 小于号<：&lt;
 版权符号©：&copy; 
代码示例如下： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>特殊符号学习</title>
</head>
<body>
	<!--空格-->
	空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
	<!--大于号-->
	x&gt;y<br/>
	<!--小于号-->
	1&lt;2<br/>
	<!--版权符号-->
	这是一个版权符号：&copy;
</body>
</html>
 
网页显示如下：

收起

展开全文

html

WEB前端之网页设计②----最新最全详解/网页常用标签

千次阅读 多人点赞 2018-09-09 17:56:05

WEB前端之网页设计—-最新最全详解/网页常用标签② 一、h1-h6标签详解 h1-h6标签解释 h1-h6 网页标题标签从h1到h6文本字体逐渐减小 h1-h6标签内属性值解释 align=”center/lift/right/botto/...

WEB前端之网页设计②—-最新最全详解/网页常用标签

今天给大家分享和总结一下我们最新的HTML5网页常见和常用标签，总结的非常详细和全面，希望大家喜欢。

一、h1-h6标签详解

h1-h6标签	解释
h1-h6	网页标题标签从h1到h6文本字体逐渐减小
h1-h6标签内属性值	解释
align=”center/lift/right/botto/top”	居中/左对齐/右对齐/下对齐/上对齐

二、hr标签详解

hr标签	解释
`<hr/>`	网页分割线。是网页标签中为数不多的单个出现的标签。
hr标签内属性值	解释
align=”center/lift/right”	居中/左对齐/右对齐
noshade=”noshade”	规定hr的颜色显示为纯色
size=”pixels”	规定hr元素的高度
width=”pixels%”	规定hr的宽度
color=”#fff000”	设置水平线的颜色

三、p段落标签详解

p标签	解释
`<p></p>`	段落标签，用来定义网页中文章的段落也支持换行，一次换一行
p标签内属性值	解释
align=”center/lift/right/justify”	居中/左对齐/右对齐/左右对齐

四、 pre预格式化标签详解

pre标签	解释
`<pre></pre>`	预格式化标签，被pre标签包裹的文本会保留原来的格式，如空格、换行等
pre标签内属性值	解释
基本没有	不常用

五、font字体属性标签

font标签	解释
`<font></font>`	规定文本中字体的大小、颜色等
font标签内属性值	解释
color=”#fff000”	规定文本字体的字体颜色
face=”楷书”	规定文本字体的字体
size=”25px”	规定文本字体的字体大小

六、img插入图片标签

img标签	解释
`<img></img>`	插入图片标签。可以向网页中插入图片
img标签内属性值	解释
src=”图片存储路径”	图片的存储路径
width=”图片的宽度”	图片的宽度
height=”图片的高度”	图片的高度
title=”当鼠标移动到图片上时图片显示的文字”	当鼠标移动到图片上时图片显示的文字
alt=”当图片加载失败时显示的文字”	当图片加载失败时显示的文字

七、marquee元素滚动标签

marquee标签	解释
`<marquee></marquee>`	可以让元素在网页中来回滚动的标签。
marquee标签内属性值	解释
direction=”right/left/down/up	向右滚动/向左滚动/向下滚动/向上滚动
behavior=”alternate/scroll/slide	元素来回滚动/单方向滚动/只滚动一次（具体滚动方向由direction的值决定，如果无direction则默认为向右滚动）
scrollamount=”填数字”	表示元素滚动的速度(速率)
scrolldelay=”填数字”	表示元素延迟滚得的速度。
loop=”填正整数”	设置元素的滚动的次数。值是正整数，如果loop的值为-1这表示元素无限循环
align=”top/texttop/middle/bottom/right/lift/baseline/absmiddle/absbottom”	顶部对其/顶线对齐/中间对齐/底部对齐/右对齐/左对齐/底线对齐/绝对中央对齐/绝对底部对齐
bgcolor=”颜色”	表示运动区域的背景色
height=“高度”	表示运动区域的高度，默认为元素的高度
width=”宽度”	表示运动区域的宽度，默认为100%
οnmοuseοver=this.stop()	表示当鼠标移动到该元素时停止
οnmοuseοver=this.start()	当移开时又继续滚动

结语:好了先分享到这里，后续还有跟新会再次发布的,希望我的文章对刚入HTML网页设计的你有所帮助。
上一篇：WEB前端之网页设计①—-最新最全详解/网页基础结构
下一篇：WEB前端之网页设计③—-最新最全详解/如何在网页上创建表格
版权声明：非商用自由转载-保持署名-注明出处
署名(TM): TopGradeModel

收起

展开全文

HTML网页设计：三、图像标签之标签

千次阅读 多人点赞 2021-03-20 21:07:44

图像标签——<img>标签在 HTML 中，图像由<img>标签定义。<img> 是空标签，只包含属性，没有闭合标签。实际上图像并不会插入至HTML页面中，而是链接...

图像标签——<img>标签 
HTML系列文章目录 
HTML网页设计：一、HTML的基本结构
HTML网页设计：二、网页的基本标签
HTML网页设计：三、图像标签之＜img＞标签
HTML网页设计：四、超链接
HTML网页设计：五、行内元素和块元素
HTML网页设计：六、列表
HTML网页设计：七、表格
HTML网页设计：八、媒体元素
HTML网页设计：九、网页的简单布局
HTML网页设计：十、iframe内联框架
HTML网页设计：十一、表单 
       在 HTML 中，图像由<img>标签定义。<img> 是空标签，只包含属性，没有闭合标签。 实际上图像并不会插入至HTML页面中，而是链接到HTML页面上，<img> 标签的作用是为被引用的图像创建占位符，其src和alt为必需属性。 
常用属性： 
[src]： 规定显示图像的URL，URL 指存储图像的位置，可以用绝对位置和相对位置，建议使用相对路径。
[alt]： 规定图像的替换文本，即在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。
[title]：显示鼠标悬停文字。
[width]：规定图像的宽度（若指定width=“100%”，表示不管图片尺寸，将图片设置为浏览器宽度的100%，自动按照比例确定图片高度）。
[height]： 规定图像的高度。 
代码示例如下： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图像标签学习</title>
</head>
<body>
	<!--同级目录下文件相对路径使用./ 相对目录下文件相对路径使用../-->
	<img src="./7908.jpg" alt="许嵩照片" title="许嵩" width="200px" height="280px">
	<br/>
	<!--许嵩照片在同级目录下 所以使用../应该加载不出来，故显示替换文本-->
	<img src="../7908.jpg" alt="许嵩照片" title="许嵩" width="200px" height="280px">
	<br/>
	<!--指定width属性为100%-->
	<img src="../9736.jpg" alt="可爱猫猫" title="猫猫" width="100%" height="280px">
</body>
</html>
 
网页显示如下：

收起

展开全文

html

网页设计html详细案例介绍
2010-09-16 10:55:51
详细的介绍了html语言，网页设计的原则，通过大量的例子介绍常用的html标签
收起

HTML网页设计常用标签及属性

千次阅读 2018-09-18 20:03:28

在认识标签前，我们先了解了解标签的结构，标签分两大类，一种是单标签，另一种是双标签。标签的基本结构: 1.单标签: 1.结构格式: &amp;lt;标签名属性名='属性值' 属性名='属性值' .../&...

在认识标签前，我们先了解了解标签的结构，标签分两大类，一种是单标签，另一种是双标签。
 标签的基本结构: 
1.单标签: 
			1.结构格式:
				<标签名 属性名='属性值' 属性名='属性值' .../>
			2.注意;
				单标签在最后有一个正斜杠 '/'
 
2.双标签: 
			1.结构格式:
				<标签名 属性名='属性值'...>内容</标签名>
			2.注意:
				双标签会分两个部分,左边叫开始标签,右边叫结束标签,结束标签必须有正斜杠'/'
 
html中标签也可以分为块级标签,内联标签, 
    	1.1块级标签:
    	如果两个同样的标签写在一起,出现在不同的行上,这种就叫块级标签,比如说<h1>标签,div标签,
    	特点占据整行或多行,自带换行效果,除了div外,一般的块级标签都会有内外边距,宽度和高度

		1.2内联标签:
	    如果两个同样的标签写在一起,出现在一行则表示这是内联标签,特点是不会占据多余面积,
	  内联标签没有内外边距,但可以通过css来设置,也没有上下边距,没有宽度和高度
	注意:
    	在内联标签中,有一个标签,img标签是有边距和宽度及高度的,叫行内块级标签	
 
常用的标签介绍: 
1.标题标签:
	<h1>标题1[字号最大]</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	...
	<h6>标题6</h6>
		标题标签一共有6个级别,即h1~h6,字号从大到小

2.段落标签:
	<p>内容</p>
		代表文章的一个段落

3.换行标签:
	<br/>

4.图片标签:
	<img src="" alt>
		src表示图片路径,可写相对路径,也可以写绝对路径
		alt表示当图片没有时,也就是裂图时描述图片的信息或者替代的文本

5.超链接标签:
	<a href="链接网址">链接的文字或者图片</a>
	注意:
		<a href="url" target= "_blank" title="新建
		的网页的标题">内容</a>

		#target 表示用户点击链接,打开的方式,他的值是固定的
			_self 表示在当前页面打开新的页面,也就覆盖当前的页面[默认值]
			_blank 表示在新建的浏览器窗口中打开一个新的窗口

6.列表标签:
列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下
	1.有序列表:
	    <ol>
	        <li> </li>
	    </ol>

	2.无序列表:
	    <ul>
	        <li> </li>
	    </ul>

		3.自定义列表:
		    <dl>
		        <dt> </dt>
		    </dl>
		列表之间可以进行嵌套使用

7.表格标签
	表格元素及相关样式
		1、<table>标签：声明一个表格

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

		3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

	表格相关样式属性
	border-collapse 设置表格的边线合并，如：border-collapse:collapse;
 
标签的属性: 
		1.属性格式:
			<标签名 属性名='属性值'...>内容</标签>
		2.属性有什么作用?
			描述标签的作用,给用户进行标签的提示或者增加标签的功能

		3.实体字符(具有特性功能的字符)
			1.&nbsp :表示空白字符,即一个空格
			2.&lt :小于号
			3.&gt :大于号

		4.无意义标签div和span
			1.div常用于包含其他的标签,用于表示网页的一整部分内容,一般用于网页的布局
			2.span常用于包含其他的标签或者普通的文本内容,也是用于网页布局的一种,本身没有任何其他的独特属性

收起

展开全文

学习笔记

网页编程设计常用的各类标签
千次阅读 2018-11-12 21:38:54
网页编程设计常用的各类标签之前看了一些js的学习资料，完成了一个非常简单的图片库创建，一开始在运行资料中的各个示例程序时看到了几个网页编程的最基础的标签，并没有再深究，只知道它是这样用，今天上了网站...
收起
网页设计-HTML各种标签
千次阅读 多人点赞 2018-09-17 09:30:10
常用标签 -p段落 -a链接链接文本如果你将taget属性设置为_blank，链接将在新窗口打开 -br 换行 -h1-h6 文本格式 - - - -&amp;amp;amp;amp;amp;amp;lt;\small&amp;amp;amp;amp;amp;amp...
收起
HTML
HTML网页设计的标签和属性
千次阅读 2008-11-10 17:52:00
一本HTML网页设计，大多无非是标签和属性的介绍，真正涉及到设计的艺术和美观的，几乎没有。可以HTML的精华也就在这些标签属性里面了。美化，那不是技术上的事情。可惜那么多年来，我就是在美化网页上做的一塌糊涂，...
收起
html border behavior div
使用自定义HTML标签来进行网页设计
千次阅读 2020-02-22 18:03:46
如果能在自己的网页中使用自定义的标签是不是很酷呢，比如用你的网站的名称、用你的网名、用你所爱的人的名字来定义HTML标签并内嵌到网页中，本文就介绍一下这方面的内容。　本文以我的网站的拼音为例来自定义HTML...
收起
css html html5
网页设计：HTML常用的五种标签
千次阅读 2020-12-03 21:46:32
div标签 p标签 span标签 a标签 img标签 html：超级文本标记语言 ###1，div标签：是在html中布局使用最多的标签，div本身没有什么特别之处，只是div标签替代了以前table标签布局。 div 是一个块级元素，它的内容会...
收起
数据库
网页设计课程设计报告
万次阅读 多人点赞 2019-03-01 21:45:11
学号课程设计课程名称 网页设计 题目鑫晨之家特效网站设计专业软件工程 ...
收起
网页设计成品
2016-05-27 10:25:08
网页设计成品，采用html+css布局，是不错的学习网页设计的案例和源代码
收起
大学生川菜网页制作教程表格布局网页模板学生HTML静态水煮鱼网页设计作业成品简单网页制作代码学生美食...
千次阅读 2020-11-27 12:48:17
学生川菜水煮鱼网页设计作品网页技术点作品介绍制作代码演示导航代码图片列表效果演示成品地址网页技术点表格table布局、透明底色、H5视频标签作品介绍本静态HTML网页作业成品设计简单，使用dreamweaver采用表格...
收起
html css web
网页设计师要懂的前端知识之HTML标签及规范
千次阅读 2019-06-17 17:42:06
超文本标记语言（英文：HyperText Markup Language，HTML）是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言。 1.1 什么是浏览器解释和执行HTML源码的工具。五大浏览器：Internet Explorer ...
收起
前端编程程序员
学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网页设计成品 dreamweaver学生网站模板
千次阅读 多人点赞 2020-11-14 14:03:53
海贼王动漫网页制作学生作品为航海王漫画介绍主题，网页设计使用DIV CSS布局制作，三层结构共16个页面：网站首页、故事介绍、主要角色、创作背景、账户注册、会员登录（角色下设10个三级角色介绍页面）。网页整体...
收起
html css javascript
手机端HTML网页生成 meta标签针对苹果手机页面设计问题
千次阅读 2013-09-22 09:04:38
上周三快放假的时候由于我们的APP有一个活动公告，而原理就是生成一个HTML网页供手机端来访问，起初自己编码以后就直接使用的普通HTML标签生成，但是直到下午用iOS访问的时候出现了问题（注：HTML在苹果上面显示...
收起
网页设计命名规范
千次阅读 2017-06-06 23:14:09
网页设计命名规范
收起
响应式网页设计
千次阅读 2019-05-24 15:49:36
什么是响应式网页设计？响应式网页设计使您的网页在所有设备上都很好看。响应式网页设计仅使用HTML和CSS。响应式网页设计不是程序或JavaScript。为所有用户设计最佳体验可以使用许多不同的设备查看网页：...
收起
html5 css3
WAP设计中：WML网页标签说明与示例
千次阅读 2009-02-23 10:50:00
WML 标签标签能够定义锚点，锚点的用途有两种：使用href属性来连接连到另一个文档连接到 W3pop:W3popWML 标签标签可以插入一单独的换行,是一个空标签（这意味着它并没有结束标签 - 这样是错误的:）在HTML中不...
收起
access 任务 go
大学生体育运动网页设计模板代码校园篮球网页作业成品学校篮球网页制作模板学生简单体育运动网站设计...
千次阅读 2020-12-10 12:06:29
校园篮球网页设计网页知识点应用网页作品介绍网页HTML代码网页效果预览网页源地址网页知识点应用 DIV CSS布局、网页背景图片、图片轮播切换、CSS3简鼠标经过放大及动态载入效果、CSS3圆角及背景透明效果、鼠标经过...
收起
css3 html web

HTML网页设计：二、网页的基本标签

网页的基本标签

HTML系列文章目录

文章目录

1.标题标签

2.段落标签

3.换行标签

4.水平线标签

5.注释

6.特殊符号

WEB前端之网页设计②----最新最全详解/网页常用标签

WEB前端之网页设计②—-最新最全详解/网页常用标签

HTML网页设计：三、图像标签之标签

图像标签——<img>标签

HTML系列文章目录

常用属性：

网页设计html详细案例介绍

HTML网页设计常用标签及属性

网页编程设计常用的各类标签

网页设计-HTML各种标签

HTML网页设计的标签和属性

使用自定义HTML标签来进行网页设计

网页设计：HTML常用的五种标签

网页设计课程设计报告

网页设计成品

大学生川菜网页制作教程表格布局网页模板学生HTML静态水煮鱼网页设计作业成品简单网页制作代码学生美食...

网页设计师要懂的前端知识之HTML标签及规范

学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网页设计成品 dreamweaver学生网站模板

手机端HTML网页生成 meta标签针对苹果手机页面设计问题

网页设计命名规范

响应式网页设计

WAP设计中：WML网页标签说明与示例

大学生体育运动网页设计模板代码校园篮球网页作业成品学校篮球网页制作模板学生简单体育运动网站设计...

网页设计标签介绍

HTML网页设计：二、网页的基本标签

网页的基本标签

HTML系列文章目录

文章目录

1.标题标签

2.段落标签

3.换行标签

4.水平线标签

5.注释

6.特殊符号

WEB前端之网页设计②----最新最全详解/网页常用标签

WEB前端之网页设计②—-最新最全详解/网页常用标签

HTML网页设计：三、图像标签之标签

图像标签——<img>标签

HTML系列文章目录

常用属性：

网页设计html详细案例介绍

HTML网页设计常用标签及属性

网页编程设计常用的各类标签

网页设计-HTML各种标签

HTML网页设计的标签和属性

使用自定义HTML标签来进行网页设计

网页设计：HTML常用的五种标签

网页设计课程设计报告

网页设计成品

大学生川菜网页制作教程 表格布局网页模板 学生HTML静态水煮鱼网页设计作业成品 简单网页制作代码 学生美食...

网页设计师要懂的前端知识之HTML标签及规范

学生动漫网页设计模板下载 海贼王大学生HTML网页制作作品 简单漫画网页设计成品 dreamweaver学生网站模板

手机端HTML网页生成 meta标签针对苹果手机页面设计问题

网页设计命名规范

响应式网页设计

WAP设计中：WML网页标签说明与示例

大学生体育运动网页设计模板代码 校园篮球网页作业成品 学校篮球网页制作模板 学生简单体育运动网站设计...

网页设计标签介绍

大学生川菜网页制作教程表格布局网页模板学生HTML静态水煮鱼网页设计作业成品简单网页制作代码学生美食...

学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网页设计成品 dreamweaver学生网站模板

大学生体育运动网页设计模板代码校园篮球网页作业成品学校篮球网页制作模板学生简单体育运动网站设计...