网页设计标签介绍

使用自定义HTML标签来进行网页设计
2021-01-08 17:39:23
如果能在自己的网页中使用自定义的标签是不是很酷呢，比如用你的网站的名称、用你的网名、用你所爱的人的名字来定义HTML标签并内嵌到网页中，本文就介绍一下这方面的内容。　本文以我的网站的拼音为例来自定义HTML...
收起

网页设计（五）——marquee标签

2020-07-11 15:51:08

首先给出一些关于marquee标签的介绍： marquee的作用是创建一个滚动的文本字幕语法：<marquee>...</marquee>；在标记“…”之间添加要进行滚动的内容。重要属性： 1.滚动方向direction（包括4个...

前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~

 

首先给出一些关于marquee标签的介绍：

marquee的作用是创建一个滚动的文本字幕

语法：<marquee>...</marquee>； 在标记“…”之间添加要进行滚动的内容。

重要属性：

1.滚动方向direction（包括4个值：up、 down、 left和 right）

　　语法：<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

　　语法：<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）

　　语法：<marquee scrollamount="5">...</marquee>

4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）

　　语法：<marquee scrolldelay="100">...</marquee>

5.滚动循环loop（默认值是-1，滚动会不断的循环下去）

　　语法：<marquee loop="2">...</marquee>

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

 

下面给出一个例子：

<html>
<head>
<style type="text/css">
#dynamic_text
{
  width:740px;
  height:32px;	
  margin:20px auto 10px auto;
  border:1px solid gray;
  float:left;
}
</style>
</head>
<body>
<div id="dynamic_text">
<marquee align="left" behavior="scroll" bgcolor="white" direction="left" hspace="0" vspace="0" weith="800" height="27" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
	<p style="color:#1F202B;font-size:12px;font-family:宋体;">国务院教育督导委员会办公室主任、教育部教育督导局局长何秀超，教育部基础教育一司司长吕玉刚，湖南省人民政府副省长、秘书长向力力，中南大学党委书记高文兵、校长张尧学，教育部和湖南省相关部门负责人参加督查。</p>
</marquee>
</div>
</body>
</html>

由于是动态效果，这里就不截图了，有兴趣自行拷贝代码，按照《网页设计（一）——HTML基础概念》的实例2（https://blog.csdn.net/csyzcyj/article/details/107283767）方法打开即可看到效果。

 

附网页设计系列的文章链接：

网页设计（一）——HTML基础概念：https://blog.csdn.net/csyzcyj/article/details/107283767

网页设计（二）——DIV+CSS布局1：https://blog.csdn.net/csyzcyj/article/details/107284087

网页设计（三）——DIV+CSS布局2：https://blog.csdn.net/csyzcyj/article/details/107284655

网页设计（四）——DIV+CSS布局3：https://blog.csdn.net/csyzcyj/article/details/107285198

网页设计（五）——marquee标签：https://blog.csdn.net/csyzcyj/article/details/107285901

网页设计（六）——基于HTML+CSS框架的网页设计实例：https://blog.csdn.net/csyzcyj/article/details/107286067

 

转载注明出处：https://blog.csdn.net/csyzcyj/

收起

展开全文

html css 前端

美工之路 网页设计视频教程Html篇-05.Font标签.rar
2019-07-09 23:34:22
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-08.列表标签.rar
2019-07-09 20:32:58
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-20.Form表单标签(3).rar
2019-07-09 20:35:10
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-21.Form表单标签(4).rar
2019-07-09 20:35:07
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-19.Form表单标签(2).rar
2019-07-09 20:34:37
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-16.Table表格标签(3).rar
2019-07-09 20:34:31
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-18.Form表单标签(1).rar
2019-07-09 20:34:27
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-17.Table表格标签(4).rar
2019-07-09 20:34:23
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-14.Table表格标签(1).rar
2019-07-09 20:33:49
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-11.图片img标签(3).rar
2019-07-09 20:33:40
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-09.图片img标签(1).rar
2019-07-09 20:33:35
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起
美工之路 网页设计视频教程Html篇-10.图片img标签(2).rar
2019-07-09 20:33:12
不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值，使您在较短的时间内学习设计符合标准的Web。下面对新教程作一个简单的介绍：　本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程...
收起

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

千次阅读 2019-06-17 17:42:06

超文本标记语言（英文：HyperText Markup Language，HTML）是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言。 1.1 什么是浏览器解释和执行HTML源码的工具。五大浏览器：Internet Explorer ...

1. HTML介绍

超文本标记语言（英文：HyperText Markup Language，HTML）是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言。

1.1 什么是浏览器

解释和执行HTML源码的工具。

五大浏览器：Internet Explorer (IE)，FireFox(火狐)，Chrome（谷歌），Opera（欧朋），Safari（苹果）

最后，如果大家如果在自学遇到困难，想找一个前端的学习环境，可以加入我们的前端学习圈，点击我加入吧，会节约很多时间，减少很多在学习中遇到的难题。

1.2 浏览器内核

1. Trident内核：代表产品IE,又称为IE内核。是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有:IE，遨游,世界之窗浏览器，腾讯TT等等。

1. Gecko内核：代表产品Mozilla FirefoxGecko是一套开源的，C++编写的排版引擎。使用它最著名的浏览器有Firefox,Netscape6至9。

1. WebKit内核：代表产品有Safari，主要用于Mac OS系统。使用它的浏览器是Safari和谷歌浏览器Chrome。

1. Presto内核：代表产品OperaPresto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了。

1. Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome和Opera内核是Blink。

1.3 HTML发展史

1.3.1 HTML的概念

HTML的概念HTML是Hypertext Markup Language（超文本标记语言）的缩写，是一种基于SGML（标准通用标记语言）的标记语言，是Web用于编辑网页的主要工具。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的"母语"。WWW是环球信息网的缩写，所使用的出版语言就是HTML语言。

1.3.2 HTML的功能

· 展示在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。

· 通过超链接检索在线的信息。

· 为获取远程服务而设计表单，可用于检索信息、定购产品等。

· 在文档中直接包含电子表格、视频剪辑、声音剪辑以及其他的一些应用。

1.3.3 HTML历次版本

· HTML 1.0——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）。

· HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。

· HTML 3.2——1996年1月14日，W3C推荐标准。

· HTML 4.0——1997年12月18日，W3C推荐标准。

· HTML 4.01——1999年12月24日，是在HTML4.0基础上的微小改进W3C推荐标准。

· HTML 5——2014年10月28日，W3C推荐标准。

1.4 HTML与互联网介绍

· HTML

· HTML超文本标记语言（Hyper Text Mark-up Language）是一种制作万维网页面的标准语言，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

· 互联网

· 互联网（英语：Internet），又称网际网络，或者音译因特网、英特网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

2. 开发工具

安装文件请查看练习案例-1.安装文件及安装说明。

2.1 Adobe Dreamweaver

Adobe Dreamweaver简称"DW"，中文名称 "梦想编织者"，是美国Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

图2-1 Adobe Dreamweaver

2.2 DCloud - Hbuilder

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的最大优势，就是其拥有完整的语法提示和代码输入法，可以在编写HTML、CSS、JavaScript时更加快速便捷，同时默认添加了emmet语法插件，前端程序员在编写HTML代码时可以更加暴力。

图2-2 DCloud - Hbuilder

2.3 Sublime Text 3

Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。

图2-3 Sublime Text 3

2.4 Visual Studio Code

Visual Studio Code (简称 VS Code / VSC) 是由微软推出的一款免费开源的现代化轻量级代码编辑器。支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，并且有强大的插件库，可以针对不同的开发需求进行对应的插件配置。

图2-4 Visual Studio Code

3.HTML的标签结构

3.1 HTML文件结构

3.1.1 HTML结构

3.1.2 解释

· <html></html>称为根元素，所有的网页元素都在<html></html>中

· <head></head>元素用于定义文档的头部

· 头部元素含有有:<meta> <title> <link> <script> <style>

· <title> 标签定义文档的标题

· <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。针对搜索引擎的关键词，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面

· <meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content="xxx@qq.com"><meta name="Keywords" content="HTML,CSS,HTML5,CSS3,jQuery"><meta name="Description" content="辛苦一阵子，幸福一辈子">

· <link> 元素引入外部样式

· <link rel="shortcut icon " type="images/x-icon" href="http://www.jd.com/favicon.ico">

· <script> 元素该元素可以定义页面的脚本内容

· <style>标签用于为 HTML 文档定义样式信息

· <body></body>元素用于定义网页显示的内容

3.2 基本标签

· <div>

· div 标签它是可用于组合其他HTML元素的容器。

· 可用于对大的内容块设置样式属性。

· 文档布局。它取代了使用表格定义布局的老式方法。

· <hx>

· hx HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题 html提供的标题有六种分别是h1 h2 h3 h4 h5 h6 。

· <h1> 定义字号最大的标题,代表大标题,一般一个页面只用一次。

· <h6> 定义字号最小的标题。

· <p>

· p 元素定义段落,会自动在其前后创建一些空白。浏览器会自动添加这些空间。

· <br>

· br 元素会在浏览器插入一个简单的换行符。

· <hr>

· hr 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

· <a>

· a标签签用来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

· href属性：描述了链接的目标URL。

· target属性：设置链接跳转方式

· <img>

· img 标签用来申明图像的插入。

· src属性：规定显示图像的 URL。URL为图片的相对路径或者绝对路径均可。

· alt属性：规定图像的替代文本。

· title属性：定义图片的标题，鼠标移动到图片出现。

· <span>

· span 用来组合文档中的行内元素,可用作文本的容器。 span 元素没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。

· <ul>

· ul 标签作为无序列表，它是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于 <ul> 标签。每个列表项始于 <li> 标签

· <ul> <li>无序列表一</li> <li>无序列表二</li></ul>

· <ol>

· 有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签

· <ol> <li>有序列表一</li> <li>有序列表二</li></ol>

·

· 注释标签用于在源代码中插入注释。注释不会显示在浏览器中。可使用注释对代码进行解释，这样做有助于在以后的时间对代码的修改，当编写了大量代码时尤其有用

· <p>这是一个p标签</p>

3.3 标签属性

HTML 元素可以通过设置属性，实现某些特定的效果。

属性可以在元素中添加附加信息。

属性一般描述于开始标签。

属性总是以名称/值对的形式出现，比如：name="value"。

<p class="container"> 这是一个带有class属性且值为container的段落<P>标签</p>

3.4 文本格式化标签

· <b>

· b 标签表示以粗体字体形式展现内容

· <strong>

· strong标签与b标签都表示粗体。但strong表示强调。例如，一个单词或短语需要显示得更高调，更响亮...总之要比一般文本更加突出。这里我们就使用strong标签在SEO中的应用，告知搜索引擎我们内容强调的是什么。

· <i>

· i 标签表示以斜体字体形式展现内容

· <em>

· em 标签告诉浏览器把其中的文本表示为强调的内容并以斜体形式展现

· <pre>

· pre 标签可定义预格式化的文本。被包围在 pre 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

· <small>

· small标签定义小型文本

· <bdo>

· bdo 标签指定文本方向，其dir属性申明文本显示方向

· ltr 属性值默认从左到右显示

· rtl 属性值从右到左显示

· <sub>

· sub 标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方

· <sup>

· sup 标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方

3.5 HTML 单双标记的区别

3.5.1 单标记

单标记指的是由一个标签组成。

比如：

换行符：<br/>

水平线：<hr/>

图片标签:<img/>

文本标签:<input/>

link标签：<link/>

元信息标签： <meta/>

3.5.2 双标记

由"开始标签"和"结束标签"两部分构成，必须成对使用。

如：

<p></p>段落标签，其中<p>是开始标签表示一个段落的开始，</p>是结束标签，表示一个段落的结束。

常见的双标记标签的有：

<html> <head> <title> <body> <table> <span> <div> <p> <h1>等等。

3.6 HTML 实体转义

在HTML中，内容编辑时，如果是通过空格键编辑的多个空格，网页只会显示成一个，而小于号（<）和大于号（>），网站则会认为是标签而无法直接显示在页面中。而这些都可以通过实体字符来解决。

4. HTML块状元素&&行内元素

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为block，成为"块级"元素(block-level)；而span元素的默认display属性值为inline，称为"行内"元素。

4.1 块状元素

块级元素会独占一行，其宽度自动填满其父元素宽度，一般情况下，块级元素可以设置width, height属性一般用来搭建网站架构、布局、承载内容……

它包括以下这些标签： address、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、menu、noframes、ol、p、pre、table、ul

4.2 行内元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下才会换行，其宽度随元素的内容而变化，行内元素设置width, height无效。一般用在网站内容之中的某些细节或部位，用以"强调、区分样式、上标、下标、锚点"等等。

下面这些标签都属于内嵌元素： a、b、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、strong、sub、sup、textarea

5. w3c规范

5.1 什么是W3C

万维网联盟(world wide web)。

简单的说就是一个国际性的中立组织，专门负责统一web相关的各项标准。

5.2 为什么要统一web标准

试想你用湖北话交流，他用广东话交流，你们是永远都无法进行畅通的沟通。

所以这个时候"普通话"就出现了！它能够促使你们畅通的交流，互相理解彼此的意图。

这里的不同话种其实就是不同浏览器的解析规则，而你想表达的意思就是浏览器的解析结果。

因此，不同的浏览器想要解析出相同的内容呈现给用户，就需要有一个统一标准的解析规则。

这就是W3C出现的缘由。

5.3 标签嵌套规则

1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

· <div><h1></h1><p></p></div> —— 对<a href="#"><span></span></a> —— 对<span><div></div></span> —— 错

1. 块级元素不能放在<p>里面

· <p><ol><li></li></ol></p> —— 错<p><div></div></p> —— 错

1. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是

· h1、h2、h3、h4、h5、h6、p、dt

1. 块级元素与块级元素并列、内嵌元素与内嵌元素并列

· <div><h2></h2><p></p></div> —— 对<div><a href="#"></a><span></span></div> —— 对<div><h2></h2><span></span></div> —— 错

5.4 HTML语义化标签

1. 什么是语义化标签那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如：网页上的文章的标题就可以用h1~h6，网页上的各个栏目的栏目名称也可以使`h1~h6。文章中内容的段落就得放在段落标签p 中，在文章中有想强调的文本，就可以使用em标签表示强调等等

1. 为啥使用语义化标签

10. 更容易被搜索引擎收录

10. 更容易让屏幕阅读器读出网页内容

10. 能够更好的体现页面的主题

10. 兼容性更好，支持更多的网络设备

1. HTML语义化标签

11. <a>标签：实现超链接强调:title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

11. <p>标签：文章段落放到<p>标签中

11. <hx>标签：文章标题，栏目标题用<hx>表示标题标签一共有6个， h1、h2、h3、h4、h5、h6 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。 <h1> 是最高的等级

11. <strong>和<em>标签：特别强调某几个文字但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong>用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调

11. <q>标签：短文本引用注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号

11. <blockquote>标签：长文本引用注意浏览器对 <blockquote>标签的解析是缩进样式

11. <address>标签：为网页加入地址信息

11. <ul>标签：无序列表

11. <ol>标签：有序列表

11. <caption>标签：为表格添加标题和摘要摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容语法： <table summary="表格简介文本"> 标题用以描述表格内容，标题的显示位置：表格上方。语法：<caption>标题文本</caption>

6. 企业官网命名规范

页面命名规范

首页：index.html

公司介绍：about.html

新闻列表： news.html

新闻详情页：news_details.html

产品列表：product.html

产品详情页：pro_details.html

联系我们：contact.html

7. 总结

通过本篇文章，你可以学到以下几点

· HTML介绍

· 开发工具

· HTML结构、标签

· HTML块状元素&&行内元素

· w3c规范

· 企业官网命名规范

收起

展开全文

前端 IT 程序员

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

千次阅读 2020-11-27 12:48:17

学生川菜水煮鱼网页设计作品网页技术点作品介绍制作代码演示导航代码图片列表效果演示成品地址网页技术点表格table布局、透明底色、H5视频标签作品介绍本静态HTML网页作业成品设计简单，使用dreamweaver采用表格...


学生川菜水煮鱼网页设计作品
网页技术点
作品介绍
制作代码演示
导航代码
图片列表
效果演示
成品地址

网页技术点
表格table布局、透明底色、H5视频标签
作品介绍
本静态HTML网页作业成品设计简单，使用dreamweaver采用表格布局制作，网页中的图片使用PS裁剪制作，顶部导航使用CSS设置了透明底色效果。共3个页面，首页、文字页面、视频页面。视频采用VIDEO标签嵌入视频，代码简单，适合大一网页设计作业或对作品技术水平要求低的。
制作代码演示
导航代码
<table width="1000" height="500" border="0" id="nav">
  <tr id="menu">
    <td><a href="">网站首页</a></td>
    <td><a href="">菜品介绍</a></td>
    <td><a href="">视频教学</a></td>
  </tr>
  <tr>
    <td height="430px"></td>
    <td></td>
    <td></td>
  </tr>
</table>

图片列表
<table width="1000"  border="0" id="chuan">
  <tr>
    <td align="center"><a href="jieshao.html"><img src="image/szy1.jpg" width="495" height="260" /></a></td>
    <td align="center"><a href="shipin.html" ><img src="image/szy2.jpg" width="495" height="260" /></a></td>
  </tr>
    <tr>
    <td align="center"><a href="jieshao.html">菜品介绍</a></td>
    <td align="center"><a href="shipin.html">视频教学</a></td>
  </tr>
</table>

效果演示

成品地址
stu-works.com/html/meishi/245.html

收起

展开全文

html css web

CSS网页设计基础教程
2019-07-22 21:28:00
资源名称：CSS 网页设计基础教程教程内容：00-00-课程介绍01-01-html01-02-段落标签01-03-图片标签01-04-列表标签01-05-区块标签01-06-链接标签01-07-span标签02-01-css02-02-在网页中嵌入CSS02-03-选择器控制...
收起
【网页设计】CSS相关知识介绍和尝试（简单接触CSS）
2019-07-17 20:44:17
CSS定义：cascading style sheet 层叠样式表。 (建议先看例子及其结果) ...1、通过选择器选择上标签 2、在选择的标签上设置样式选择器分类：标签选择器： p{} 类选择器： .className{} id选择器： #id{} 一些常见...
收起
《Dreamweaver网页设计》第1章概述.ppt
2019-12-30 15:20:19
本部分内容是设计网页的基础本章首先介绍了一些与Internet和网页设计相关的基础知识是读者设计网页必不可少的知识虽然利用Dreamweaver可以不用编写一行代码就能设计出专业水准的网页但理解和掌握HTML语言对网页设计...
收起
Html常用标签介绍
2017-09-26 16:28:18
使用Dreamweaver来设计网页，对于好的网页设计，通过搜索直接到效果的源代码，看起如何实现的。（一）Html（Hyper Text Markup Language）：超文本标记语言 1、标记(标签或元素)的形式 <元素名>内容<...
收起
03-ASP（网页设计基础）
2020-10-17 16:02:54
下面主要是对网页设计中最常用的一些标签的用法的介绍。 1、html、head、body标签这三个标签，构成了网页设计的基本结构。 <html>标明这是一个html文件 <head> 这一部分，提供与网页相关的信息，比如...
收起
html asp
网页设计知识要点
2015-09-03 23:45:05
重点介绍了html,css,javascript三个方面的的基本内容，如标签，属性，方法等，适合入门人员
收起
【网页设计】BootStrap前端开发开源工具包简单介绍（CSS）
2019-07-17 21:56:56
什么是Bootstrap？通俗版高度概括： bootstrap就是一些别人写好的代码我们只需要掌握简单的使用方法即可...Bootstrap提供了大量的全局样式，在基本的Html标签上通过添加class样式就能得到增强的效果。框架：库 ...
收起
BootStrap
《Dreamweaver网页设计》-第1章》-公开课件.ppt
2019-12-26 23:04:36
本部分内容是设计网页的基础本章首先介绍了一些与Internet和网页设计相关的基础知识是读者设计网页必不可少的知识虽然利用Dreamweaver可以不用编写一行代码就能设计出专业水准的网页但理解和掌握HTML语言对网页设计...
收起
2009年最新网页设计趋势(续)
2019-10-08 21:29:16
之前我们发布了 2009年最新网页设计趋势，介绍了2009年最新的10个网页设计趋势，今天我们继续探讨另外15种趋势。首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述发表于：2009-06-08 10:15 分类：...
收起
第五讲 HTML网页设计基础三.ppt
2020-07-01 11:26:42
第五讲 HTML网页设计基础三学习目标掌握文字标记掌握段落标记水平线内容提要Point Content) HTML基本结构示例结构分析 标签介绍 字体标记font Face 字体size 字号color 颜色语法 ...
收起
HTML网页设计基础笔记 • 【第1章 HTML5基础】
万次阅读 多人点赞 2020-03-19 13:42:47
1.1 HTML介绍及开发工具 1.1.1 HTML 的基本概念 1.1.2 网页 1.1.3 Web 标准 1.1.4 HTML5 与移动互联网 1.1.5 网页开发工具 1.2 HTML5 标签 1.2.1 HTML5 标签概述 1.2.2 doctype 标签 1.2.3 html标签 1.2.4...
收起
html5 html css css3

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

HTML网页设计的标签和属性

网页设计（五）——marquee标签

美工之路 网页设计视频教程Html篇-05.Font标签.rar

美工之路 网页设计视频教程Html篇-08.列表标签.rar

美工之路 网页设计视频教程Html篇-20.Form表单标签(3).rar

美工之路 网页设计视频教程Html篇-21.Form表单标签(4).rar

美工之路 网页设计视频教程Html篇-19.Form表单标签(2).rar

美工之路 网页设计视频教程Html篇-16.Table表格标签(3).rar

美工之路 网页设计视频教程Html篇-18.Form表单标签(1).rar

美工之路 网页设计视频教程Html篇-17.Table表格标签(4).rar

美工之路 网页设计视频教程Html篇-14.Table表格标签(1).rar

美工之路 网页设计视频教程Html篇-11.图片img标签(3).rar

美工之路 网页设计视频教程Html篇-09.图片img标签(1).rar

美工之路 网页设计视频教程Html篇-10.图片img标签(2).rar

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

1. HTML介绍

1.1 什么是浏览器

1.2 浏览器内核

1.3 HTML发展史

1.3.1 HTML的概念

1.3.2 HTML的功能

1.3.3 HTML历次版本

1.4 HTML与互联网介绍

2. 开发工具

2.1 Adobe Dreamweaver

2.2 DCloud - Hbuilder

2.3 Sublime Text 3

2.4 Visual Studio Code

3.HTML的标签结构

3.1 HTML文件结构

3.1.1 HTML结构

3.1.2 解释

3.2 基本标签

3.3 标签属性

3.4 文本格式化标签

3.5 HTML 单双标记的区别

3.5.1 单标记

3.5.2 双标记

3.6 HTML 实体转义

4. HTML块状元素&&行内元素

4.1 块状元素

4.2 行内元素

5. w3c规范

5.1 什么是W3C

5.2 为什么要统一web标准

5.3 标签嵌套规则

5.4 HTML语义化标签

6. 企业官网命名规范

7. 总结

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

学生川菜水煮鱼网页设计作品

网页技术点

作品介绍

制作代码演示

导航代码

图片列表

效果演示

成品地址

CSS网页设计基础教程

【网页设计】CSS相关知识介绍和尝试（简单接触CSS）

《Dreamweaver网页设计》第1章概述.ppt

Html常用标签介绍

03-ASP（网页设计基础）

网页设计知识要点

【网页设计】BootStrap前端开发开源工具包简单介绍（CSS）

《Dreamweaver网页设计》-第1章》-公开课件.ppt

2009年最新网页设计趋势(续)

第五讲 HTML网页设计基础三.ppt

HTML网页设计基础笔记 • 【第1章 HTML5基础】

网页设计标签介绍

线程状态

MySQL 存储过程（创建海量数据实验环境）

Educational Codeforces Round 105 (Rated for Div. 2) D题-Dogeforces（构造+并查集）

学军 20210302 测试 解题报告

2014年重庆理工大学《计算机网络基础A》期末考试试卷.pdf

MySQL 多实例安装 及配置主从复制实验环境

股票数据网站

2014年重庆理工大学《电子商务（双语）》两套期末考试试卷.pdf

MHA 高可用 MySQL 架构与 Altas 读写分离

美工之路网页设计视频教程Html篇-05.Font标签.rar

美工之路网页设计视频教程Html篇-08.列表标签.rar

美工之路网页设计视频教程Html篇-20.Form表单标签(3).rar

美工之路网页设计视频教程Html篇-21.Form表单标签(4).rar

美工之路网页设计视频教程Html篇-19.Form表单标签(2).rar

美工之路网页设计视频教程Html篇-16.Table表格标签(3).rar

美工之路网页设计视频教程Html篇-18.Form表单标签(1).rar

美工之路网页设计视频教程Html篇-17.Table表格标签(4).rar

美工之路网页设计视频教程Html篇-14.Table表格标签(1).rar

美工之路网页设计视频教程Html篇-11.图片img标签(3).rar

美工之路网页设计视频教程Html篇-09.图片img标签(1).rar

美工之路网页设计视频教程Html篇-10.图片img标签(2).rar

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

学军 20210302 测试解题报告

MySQL 多实例安装及配置主从复制实验环境