精华内容
下载资源
问答
  • 网页编程设计常用的各类标签

    千次阅读 2018-11-12 21:38:54
    网页编程设计常用的各类标签 之前看了一些js的学习资料,完成了一个非常简单的图片库创建,一开始在运行资料的各个示例程序时看到了几个网页编程的最基础的标签,并没有再深究,只知道它是这样用,今天上了网站...

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

    之前看了一些js的学习资料,完成了一个非常简单的图片库创建,一开始在运行资料中的各个示例程序时看到了几个网页编程的最基础的标签,并没有再深究,只知道它是这样用,今天上了网站开发技术,老师讲到了网页编程的一些常用的标签,在这里分享给大家,也顺便复习一下下。

    • HTML
      所谓的HTML又称为超文本标记语言(Hyper Text Markup Language),是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种标记语言。被用来结构化信息,例如变体、段落和列表等,也可以在一定程度上描述文档的外观和语义。

    • html标签
      简单来说,html标签的作用就是控制html文档的外观,使用时要用尖括号括起来,不同的标签决定了不同的 Web页面外观,在浏览器中标签被解释成具体的内容,如超级链接、标题、段落等。

    • 标签的两种状态:起始标签和结束标签

    • 典型的HTML文本的基本结构形式:

    <html><!--html标记符,表示这是一个超文本标记语言--!>
    <head><!--文件头标记符,描述HTML首部内容,说明文档的整体信息--!>
    <title><!--文档的标题--!>
    文本标题
    </title>
    </head>
    <body><!--体部标记符,设置文档的可见部分,只有这一部分的内容可以在浏览器中显示出来--!>
    文本内容
    </body>
    </html>
    
    • HTML文档结构

    1.标签:HTML文档由标签和被标签的内容组成。标签的作用就是能产生所需要的各种鲜果,类似于一个排版软件,将网页的内容排成理想的效果,基本格式为:

    <标签>受标签影响的内容</标签>
    

    2.标签的属性:每一个标签都有一系列的属性,不同的属性表达不同的效果,格式为:

    <标签 属性1=" 属性值1" 属性2="属性值2"...>受标签影响的内容</标签>
    

    不同的属性之间用空格隔开。

    下面我们写一个简单的网页看看效果

    <html>
    <head>
    <title>西南交通大学</title>
    </head>
    <body>
    西南交通大学在成都
    </body>
    </html>
    

    运行效果如下图所示:
    在这里插入图片描述

    • 简单表格标签
    <!--表格格式设置--!>
    <table  width="500" border="1" bordercolor="blue">
    <!--表格标题设置--!>
    <caption align="left">院系</caption>
    <!--表头设置--!>
    <tr><th>院系名称</th> <th>招生人数</th> <th>男女比例</th></tr>
    <!--表项设置--!>
    <tr><td>地球科学与环境工程学院</td> <td>400</td> <td>1:7</td></tr>
    <tr><td>人文学院</td> <td>500</td> <td>2:7</td></tr>
    <tr><td>建筑学院</td> <td>350</td> <td>5:3</td></tr>
    <tr><td>信息学院</td> <td>550</td> <td>7:3</td></tr>
    </table>
    

    运行效果如下图所示:
    在这里插入图片描述

    • 标题处理
      在HTML中,用户可以通过Hn标记符来标识文档中的标题和副标题,其中n是数字1-6,分别表示不同级别的标题。使用标题样式时,必须使用结束标记符。属性align用来设置标题在页面中的对齐方式:left(左对齐)、center(居中)、rigth(右对齐)。例:
    <h1 align="center">西南交通大学</h1>
    <h2 color="red">学校概况</h2>
    <h3>师资力量</h3>
    <h4>院系</h4>
    <h5>学校图片</h5>
    <h6>历届毕业生就业情况</h6>
    

    运行情况如下图所示:

    注意:在一个标题行下无法使用大小不同的字体;标题格式显示在浏览器窗口内,不显示在浏览器的标题栏中。

    • 注释标记符
    <!--注释内容--!>
    
    • 强制换行标记符
      强制换行标记符为
      ,放在一行的末尾,可以使后面的文字、图片、表格等显示于下一行,并且不会在行与行之间留下空行。

    • 强制换段标记符
      在html文档中,无法用多个回车、空格等来调整文档的段落格式,通常使用

      来进行强制换段操作。并且可以设置段落的格式:

    <p align="对齐方式">文字</p>
    

    例:

    <!--换行和换段操作--!>
    西南交通大学位于成都市,是一个历史悠久的大学。<br>
    它有着120多年的历史<p>
    是国家211工程院校
    

    运行效果如下图所示:
    在这里插入图片描述

    • 显示预排格式标记符
      HTML中有很多不支持的特殊控制符号,如回车或者多个空格,在浏览器中无法显示,我们可以通过
      标记符将预先排好的格式保留下来,例:
    <pre>我  爱  我  的  大  学
    我的大学是我梦想的摇篮!
    </pre>
    

    运行效果如下图所示:
    在这里插入图片描述

    • 水平线
      在页面中插入水平线,可以使不同功能的文字分隔开,看起来美观。例:
    <hr align="center" size="6" color="green" width="50">
    

    运行效果如下图所示:
    在这里插入图片描述
    还有一部分文字处理格式,有空继续更新。未完待续~~~~
    最后附上例子的完整代码:

    <html>
    <head>
    <title>西南交通大学</title>
    </head>
    <body >
    
    <h1 align="center">西南交通大学</h1>
    <hr align="center" size="6" color="green" width="500">
    <pre>我  爱  我  的  大  学
    
    我的大学是我梦想的摇篮!
    </pre>
    <h2 color="red">学校概况</h2>
    
    
    <!--换行和换段操作--!>
    西南交通大学位于成都市,是一个历史悠久的大学。<br>
    它有着120多年的历史<p>
    是国家211工程院校
    
    <h3>师资力量</h3>
    
    <h4>院系</h4>
    
    <h5>学校图片</h5>
    
    <h6>历届毕业生就业情况</h6>
    
    
    
    <!--表格格式设置--!>
    
    <table  width="500" border="1" bordercolor="red">
    
    <!--表格标题设置--!>
    
    <caption align="left">院系</caption>
    
    <!--表头设置--!>
    
    <tr><th>院系名称</th> <th>招生人数</th> <th>男女比例</th></tr>
    
    <!--表项设置--!>
    
    <tr><td>地球科学与环境工程学院</td> <td>400</td> <td>1:7</td></tr>
    
    <tr><td>人文学院</td> <td>500</td> <td>2:7</td></tr>
    
    <tr><td>建筑学院</td> <td>350</td> <td>5:3</td></tr>
    
    <tr><td>信息学院</td> <td>550</td> <td>7:3</td></tr>
    
    </table>
    </boday>
    </html>
    
    
    展开全文
  • HTML网页设计常用标签及属性

    千次阅读 2018-09-18 20:03:28
    在认识标签前,我们先了解了解标签的结构,标签分两大类,一种是单标签,另一种是双标签标签的基本结构: 1.单标签: 1.结构格式: &amp;amp;lt;标签名 属性名='属性值' 属性名='属性值' .../&amp;...

    在认识标签前,我们先了解了解标签的结构,标签分两大类,一种是单标签,另一种是双标签。
    标签的基本结构:

    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常用于包含其他的标签或者普通的文本内容,也是用于网页布局的一种,本身没有任何其他的独特属性
    
    展开全文
  • 大家都知道网页的主体都是HTML代码,那么网页设计中常用的HTML代码有哪些呢?今天主要讲一下html常用代码。总结有8个在网页设计中常用到的html基本代码,分别如下: 1.在网页设置自己的浏览器ico图标先准备一个.ico的...

    大家都知道网页的主体都是HTML代码,那么网页设计中常用的HTML代码有哪些呢?今天主要讲一下html常用代码。总结有8个在网页设计中常用到的html基本代码,分别如下: 1.在网页中设置自己的浏览器ico图标先准备一个.ico的文件放置在站点的根目录下、并在网页中加入以下代码 link 为网页中的链接标签。rel 指定ico图标将要显示的地方href 设置的ico文件地址或路径。

    2.在网页中设置背景音乐只适用于IE <bgsound src='http://www.xin126.cn/music/Ring.wma' loop='-1'>对Netscape ,IE 都适用 <embed src="地址" autostart="true" loop="true" hidden="true">bgsound 为网页中的声音标签。src 设置音乐的URL地址或路径。loop 设置循环播放的次数,-1为无限循环。
    
    3.让body中的文字不被选中 <body onselectstart="return false"> 定义网页的关键字(KeyWords)为了使网页在搜索引擎中能很容易地被检索到,准确定义网页中的关键字是一项很重要的工作。定义网页中的关键字,在源代码中的<head>与</head>标签中,添加如下代码:
    
    在Dreamweaver中用(Insert)插入 → (HTML) → (Head)头文件标签 → (KeyWords)关键字。为了提高检索的命中率,我们可以重复多次使用同一个关键字,content中的即为关键字,用逗号隔开。
    4.自动加入网页更改后的日期只需要在源文件<body>与</body>之间添加如下代码即可。
    
    在浏览器中的显示样式为: Last Updated:07/22/2010 08:24:48 5.去除图片连接的虚线边框
    6.虚线效果水平线 <hr width="50%" style="border:3px dashed #FF0000; height:3px">演示效果: 定时自动刷新网页 <head>  <meta http-equiv="refresh" content="360; url=index.html"> </head>content 设定自动刷新的间隔时间,单位是秒。url 设定自动刷新的页面,若不写则自动刷新当前本页。也可指定其它地址,到达自动定时跳转页面效果
    
    7.自定义链接时状态栏的显示文本 <a href="index.html" OnMouseOver="window.status='这里是 ... 我自定的文本'; return true">中国网页设计</a>当鼠标移到链接上,状态栏上将显示自定义的文本,即:这里是 ... 我自定的文本
    
    8.跳到页面的顶部 <a href="#top">返回本面顶部</a>当然你也可以用按钮或图片,例如:返回本面顶部
    
    展开全文
  • 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常用的五种标签

    千次阅读 2020-12-03 21:46:32
    是在html布局使用最多的标签,div本身没有什么特别之处,只是div标签替代了以前table标签布局。 div 是一个块级元素,它的内容会自动地开始一个新行。 div标签作用:起分割作用,是分割内容常使用的标签 例: <...
  • 网页中导航,菜单等部分的设计,需要使用到列表ul,其中的列表项li一般会嵌套a标签,超链接到指定url。在li标签嵌套a链接时,a链接通常包含文字。 为了使文字居中,而且当点击li标签时,整个区域都可以响应到a...
  • 网页设计\网页制作常用软件大全

    千次阅读 多人点赞 2014-03-04 12:08:26
    网页设计\网页制作常用软件 一、专业的网页设计、网页制作软件: 1、CorelDraw:通过CorelDRAW9的全方面的设计及网页功能融合到现有的设计方案,制作矢量的插图、设计及图像,出色地设计公司标志、简报、彩页、...
  • 网页制作上常用的英文翻译 关于我们:About Us 作者:Author 公司:Company 联系我们:Contact Us 版权:Copyright 邮箱地址:Email Address 首页:Home 登录:Login 会员名:Member Name 密码:Password 产品:...
  • 有html,css文件,全部都有,还有JavaScript的代码,网页中有图片定时滑动,切换,图标的使用等
  • 这篇文章主要是介绍Python爬取网页信息时,经常使用的正则表达式及方法。它是一篇总结性文章,实用性比较大,主要解决自己遇到的爬虫问题,也希望对你...常用正则表达式爬取网页信息及HTML分析总结 1.获取<t...
  • HTML网页设计:三、图像标签标签

    千次阅读 多人点赞 2021-03-20 21:07:44
    图像标签——<img>标签        在 HTML ,图像由<...常用属性: [src]: 规定显示图像的URL,URL 指存储图像的位置,可以用绝对位置和相对位置,建议使用相对
  • div常用标签

    2013-03-18 13:14:25
    div+css常用标签,挺有用的,对于学网页设计特有用。
  • HTML常用标签

    2012-02-11 14:26:43
    非常常用的HTML标签网页设计的基础,大家可以看看
  • 网页设计-HTML各种标签

    千次阅读 多人点赞 2018-09-17 09:30:10
    常用标签 -p段落 -a链接 链接文本 如果你将taget属性设置为_blank,链接将在新窗口打开 -br 换行 -h1-h6 文本格式 - - - -&amp;amp;amp;amp;amp;amp;amp;lt;\small&amp;amp;amp;amp;amp;amp;amp...
  • 常用的css标签

    2014-03-25 16:28:57
    网页设计中常用的css标签,开发时方便查阅和学习。
  • 网页设计常用术语解释

    千次阅读 2015-03-16 10:43:36
    万维网: ...  超级文本:   超级文本与普通文本不同,它是一种使用用户于计算机之间...类似于普通书本的目录,我们要看某一个章节,就要用手翻页到相关的页面,在这里,我们用鼠标点击相关的链接(相当于书本
  • 网页代码link标签的用法

    千次阅读 2019-12-24 12:06:46
    link标签是我们在html的一个基础标签,多用来在网页中引入外部的css文件,在这里我们一起来看一下这个标签在我们写代码是用到的写法。 1、引入外部css文件 <link href=...
  • HTML网页设计标签和属性

    千次阅读 2008-11-10 17:52:00
    一本HTML网页设计,大多无非是标签和属性的介绍,真正涉及到设计的艺术和美观的,几乎没有。可以HTML的精华也就在这些标签属性里面了。美化,那不是技术上的事情。可惜那么多年来,我就是在美化网页上做的一塌糊涂,...
  • H5新增的标签和新增的标签
  • HTML常用标签含义及对应英文

    千次阅读 多人点赞 2017-12-23 15:00:58
    标签标签含义英文英文含义备注h标题headline标题 p段落paragraph段落 hr水平分割线horizontal rules水平分割线 b加粗bold加粗/粗体 strong加粗(强调语
  • HTML学习6:常用标签之超链接标签

    千次阅读 2015-10-24 14:45:16
    几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。  一,HTML 超链接(链接)  超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者...
  • HTML5中常用标签居中方式

    万次阅读 2016-11-23 10:17:40
    html标签剧中方式汇总
  • 这篇文章主要是介绍Python爬取网页信息时,经常使用的正则表达式及方法。它是一篇总结性文章,实用性比较大,主要解决自己遇到的爬虫问题...常用正则表达式爬取网页信息及HTML分析总结 1.获取&amp;amp;amp;lt;...
  • JSP页面中常用四种标签

    万次阅读 2015-09-23 14:43:12
    JSP页面常用四种标签: 1. EL表达式: ${} 2. jstl表达式(sun apache):  uri="http://java.sun.com/jsp/jstl/core" %>  uri="http://java.sun.com/jsp/jstl/functions" %>  uri=...
  • HTML网页标签入门

    2011-02-24 12:55:37
    很适合网页设计初学者学习,里面列举了常用的HTML标签的使用方法和效果,有图片说明
  • 网页设计课程设计报告

    万次阅读 多人点赞 2019-03-01 21:45:11
    学号 课 程 设 计 课程名称 网页设计 题 目 鑫晨之家特效网站设计 专 业 软件工程 ...
  • 网页设计中的三大类配色

    千次阅读 2017-11-28 14:58:26
    在色彩设计应用,我们对颜色不同程度的理解,影响到设计页面的表现,熟练地运用色彩搭配,设计时岂不事半功倍。一张优秀的设计作品,它的色彩搭配必定和谐得体,令人赏心 悦目,反思我们在设计过程,怎样的色彩...
  • 这篇文章主要是介绍Python爬取网页信息时,经常使用的正则表达式及方法。它是一篇总结性文章,实用性比较大,主要解决自己遇到的爬虫问题,也希望对你有所帮助~ 当然如果会Selenium基于自动化测试爬虫、...
  • HTML常用标签属性汇总

    2012-10-18 20:19:04
    自己总结的一些常用的HTML的标签属性!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,511
精华内容 24,204
关键字:

网页设计中常用标签