CSS+DIV布局基础:HTML标记(二)
div布局技巧
关于DIV布局的技巧二、DIV+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础,也是最简单的布局方式,用DIV+CSS 布局的代码如下:XHTML 代码:一列固定宽度CSS 代码:#main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值,是网页设计中一种非常灵活的布局形式,用DIV+CSS 布局的代码如下:XHTML 代码:一列自适应宽度CSS 代码:#main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }3、一列固定宽度居中页面整体居中是网页布局中最常见到形式,在传统的表格布局中,使用TABLE 的align="center" 属性来实现,在DIV+CSS 布局中采用如下代码来实现:XHTML 代码:一列自适应宽度CSS 代码:DIV+CSS 网页布局方法探析。
如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利,传统的TABLE 网页布局由于其庞大的HTML 代码,使得其在搜索引擎方面显得有些无能为力,而用DIV+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。
但是又由于CSS 对不同浏览器存在兼容性问题,所以对于初学者来说,在使用DIV+CSS 进行网页布局过程中可能会遇到各种问题,本文就给大家探讨几点DIV+CSS 布局的技巧。
4、二列固定宽度在有一列固定宽度布局的基础上,实现二列固定宽度也就很简单了,用DIV+CSS 布局的代码如下:XHTML 代码:左侧右侧CSS 代码:#left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; }5、二列固定宽度居中从一列固定宽度居中的布局方法中,我们就不难完成二列固定宽度居中了,可以使用一个居中的DIV 作为容器,将二列分栏的DIV 放置在容器中,从而就实现二列的居中显示。
学会使用HTML和CSS进行网页设计
学会使用HTML和CSS进行网页设计网页设计是当今互联网发展的重要领域之一,学会使用HTML和CSS进行网页设计已成为许多人追求的技能。
HTML和CSS是网页设计的基础,它们可以实现丰富多样的网页布局和样式,给用户呈现出各种精美的界面。
本文将就学会使用HTML和CSS进行网页设计展开讨论,为读者提供一些实用的技巧和建议。
一、概述 HTML和CSSHTML(超文本标记语言)是一种用来创建网页的标准标记语言,它定义了网页的结构和内容。
CSS(层叠样式表)则是一种用来控制网页样式和布局的样式表语言。
HTML可以看作是网页的骨架,而CSS则是为网页赋予美丽外观的工具。
二、构建网页结构在使用HTML进行网页设计时,首要任务是构建网页的结构。
HTML提供了一系列的标签来定义页面的元素,如标题、段落、列表等。
通过合理使用这些标签,可以使网页结构更加清晰有序,提高用户体验。
对于初学者来说,推荐使用语义化标签来构建网页结构。
语义化标签具有可读性强、结构清晰等特点,例如使用<header>标签定义页面的头部,<nav>标签定义导航菜单,<main>标签定义主要内容区等。
除了使用语义化标签,还可以使用DIV标签来划分页面的不同区域。
通过给不同的DIV添加样式,可以实现更灵活的布局效果。
三、优化页面样式CSS是控制网页样式的重要工具,使用CSS可以使网页呈现出更漂亮的外观。
以下是一些优化页面样式的技巧:1. 使用选择器:选择器用于选择要应用样式的HTML元素。
常见的选择器有标签选择器、类选择器、ID选择器等。
合理使用选择器可以提高样式的灵活性和复用性。
2. 理解权重:CSS样式的权重决定了应用的优先级。
一般来说,ID选择器的权重最高,其次是类选择器和属性选择器,最后是标签选择器。
理解权重的规则可以帮助我们更好地控制样式的应用。
3. 使用盒模型:CSS中的盒模型决定了盒子(元素)的尺寸。
第2章 html基础语法
第2章目录
第2章 HTML语言基础 HTML语言基础
六、超链接标记
链接-当前页面与其他相关页面间的联结关系;链 接的目标可以是任何图像和文件。若浏览器能识别就显 示,不能识别就下载 格式:<A>…</A> 功能:在当前页面和其他页面间建立链接。 主要属性见附表。 【举例2 【举例2-7】超级链接
第2章目录
第2章目录
功能:分区显示文档(布局)
第2章 HTML语言基础 HTML语言基础
说明:在一个文本块或许多段落中设置布局(对齐) 方式,经常使用DIV,它可以将文档内容分成区块一次 性地布局
注意:★若单个align属性出现在DIV内的标题或段 注意:★若单个align属性出现在DIV内的标题或段 落中,这些值将使全局变量DIV的设置无效 落中,这些值将使全局变量DIV的设置无效 ★DIV不是段落类型,故DIV应与其它标记配 DIV不是段落类型,故DIV应与其它标记配 合使用( 合使用(如P、Hn、UL、BLOCKQUOTE等) Hn、UL、BLOCKQUOTE等 ★也可以用CENTER代替DIV 也可以用CENTER代替DIV
第2章目录
【举例2 【举例2-4】文本标记综合示例
第2章 HTML语言基础 HTML语言基础
四、列表格式标记
1、有序列表 格式:<OL type=“符号类型”> <LI type=“符号类型”>……</LI> <LI type=“符号类型”>……</LI> …… </OL> 功能:建立有序列表
第2章目录
第2章目录
【举例】<Br>标记 【举例】<Br>标记
第2章 HTML语言基础 HTML语言基础
html+css常用单词
html+css常用单词当涉及到HTML和CSS时,以下是一些常用的单词和术语:HTML相关单词:1.HTML:HyperText Markup Language(超文本标记语言)的缩写,用于创建网页的标准标记语言。
2.标签(Tag):HTML元素的标记,用尖括号(<>)包围,如<p>、<div>等。
3.元素(Element):HTML页面中的一部分,由开始标签、内容和结束标签组成。
4.属性(Attribute):用于描述HTML元素特性的键值对,位于开始标签中。
5.值(Value):属性的具体设置值,位于等号(=)后面,并用引号(" ")包围。
6.文档类型声明(Doctype):指定HTML文档使用的版本和规范,如<!DOCTYPE html>。
7.头部(Head):包含页面的元数据和引用资源,如<title>、<style>、<script>等。
8.主体(Body):页面的可见内容部分,包含文本、图像、链接等。
9.注释(Comment):用于在HTML代码中添加说明或临时注释,以<!-- -->包围。
CSS相关单词:1.CSS:Cascading Style Sheets(层叠样式表)的缩写,用于描述HTML文档的样式和布局。
2.选择器(Selector):用于选择HTML元素并应用样式的模式或规则。
3.声明块(Declaration Block):包含一组CSS属性和值的代码块,用花括号({})包围。
4.属性(Property):CSS中用于设置样式特性的名称,如color、font-size等。
5.值(Value):CSS属性所设置的具体样式值,如red、16px等。
6.类(Class):HTML元素的自定义标识符,以点号(.)开头,在CSS中通过类选择器应用样式。
7.ID:HTML元素的唯一标识符,以井号(#)开头,在CSS中通过ID选择器应用样式。
Dreamweaver8系列DIV+CSS教程网页标准布局实例教程(二)
div+css网页标准布局实例教程(二)五、布局页面——头部和导航有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面就需要填砖分割空间了。
先分析下头部:分为两部分,一个是logo靠左侧显示,一个是搜索靠右侧显示,那么布局时插入两个div,一个向左浮动,一个向右浮动的方式来完成。
另外还有很多种实现方法,比如logo用h1标签,搜索用span,或者把log o做为背景图片也是可以的,不管采用哪种方法,要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话,那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容,在logo里插入我们事先切割好的logo图片,在search里插入一个表单,一个文本框和一个按钮,插入后如下:<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧,在ps里测量,头部的高度是71px,logo距顶部18px,搜索产品距顶部30px,下面在css里把这些参数都给定义上,看显示的效果和效果图中的效果是不是一样呢?#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
网页设计制作知识点
网页设计制作知识点1. 基础知识1.1 HTML(Hypertext Markup Language)HTML是用于构建网页的标记语言,通过使用各种标签和属性,可以定义网页的结构和内容。
常见的HTML标签包括<head>、<body>、<div>、<p>等。
1.2 CSS(Cascading Style Sheets)CSS用于控制网页的样式和布局,通过将样式属性应用于HTML元素,可以改变它们的颜色、字体、大小等外观特性。
常见的CSS属性包括color、font-family、margin、padding等。
1.3 JavaScriptJavaScript是一种用于增加网页交互性的脚本语言,可以通过在网页中嵌入JavaScript代码来实现动态效果、表单验证等功能。
2. 响应式设计响应式设计是指根据设备的屏幕尺寸和分辨率,自动调整网页的布局和内容,以确保在不同设备上都能正常显示和使用。
常见的响应式设计技术包括媒体查询(Media Queries)、流体布局(Fluid Layout)和弹性图片(Flexible Images)等。
3. 网页导航3.1 导航栏导航栏用于展示网站的主要导航链接,通常位于页面的顶部或侧边。
可以使用HTML和CSS创建导航栏,并为每个链接添加交互效果。
3.2 面包屑导航面包屑导航用于显示当前页面在网站结构中的位置,让用户可以方便地进行导航和返回。
可以使用HTML和CSS创建面包屑导航,并为每个链接添加合适的指向。
4. 网页布局4.1 盒子模型盒子模型是用于布局和定位网页元素的基础概念,每个HTML 元素都可以看作是一个矩形的盒子。
通过设置盒子的宽度、高度、内边距(padding)和外边距(margin),可以精确控制元素在网页中的位置和间距。
4.2 栅格系统栅格系统是一种用于创建响应式网页布局的技术,将页面划分为多个均等的列。
案例1-HTML中使用css+div设计简单网页
表现如下
问题: 网站的底框跑到边框的下边了。之前将边框向右浮动,浮动可以理 解为它位于整个盒子之上的另一层。 因此我们往css中写入: #footer { clear: both; background: orange; height: 66px; }
主要是用在div套div的结构中。 如果内div是浮动的,一般都 需要clear浮动,不然的话内 div会超出外div的框架
第三步:将网站分为五个div,网页基本布局的基础;
第四步:网页布局与div浮动等; 第五步:网页主要框架之外的附加结构的布局与表现; 第六步:页面内的基本文本的样式(css)设置; 第七步:网站头部图标与logo部分的设计; 第八步:页脚信息(版权等)的表现设置; 第九步:导航条的制作(较难);
第三步:将网站分为五个div,网页基本布局的基础
第四步:网页布局与div浮动等
1.浮动,首先让边框浮动到主要内容的右边。用css控制浮动 #sidebar-a { float: right; width: 280px; background: darkgreen; } 表现如下
2. 往主要内容的盒子中写入文字。在html文件中写入 <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div>
网页教案(div布局)
网页教案(div布局)第一章:HTML基础1.1 学习目标:了解HTML的基本结构掌握如何使用标签来创建网页的基本元素1.2 教学内容:HTML简介:HTML的作用和重要性HTML基本结构:`<!DOCTYPE >`、`<>`、`<head>`、`<body>`标签网页元素:、段落、、图片等标签的使用1.3 教学活动:演示HTML的基本结构及其功能示例:创建一个简单的网页,包含、段落和图片学生练习:创建一个网页,使用HTML的基本元素1.4 作业:完成一个简单的HTML练习,创建一个包含、段落和图片的网页第二章:CSS基础2.1 学习目标:了解CSS的作用和重要性掌握如何使用CSS来样式化网页元素2.2 教学内容:CSS简介:CSS的作用和重要性内联样式:使用`style`属性来添加样式内部样式表:使用`<style>`标签来添加样式外部样式表:使用`.css`文件来添加样式2.3 教学活动:演示CSS的作用和重要性示例:使用内联样式、内部样式表和外部样式表来样式化网页元素学生练习:创建一个简单的网页,使用CSS来样式化、段落和图片2.4 作业:完成一个简单的CSS练习,创建一个包含、段落和图片的网页,并使用CSS来样式化它们第三章:DIV标签3.1 学习目标:了解DIV标签的作用和重要性掌握如何使用DIV标签来创建布局3.2 教学内容:DIV标签简介:DIV的作用和重要性使用`<div>`标签来创建块级元素使用CSS来样式化DIV元素3.3 教学活动:演示DIV标签的作用和重要性示例:使用DIV标签来创建一个简单的布局学生练习:创建一个简单的网页布局,使用DIV标签来创建不同的区域3.4 作业:完成一个简单的DIV标签练习,创建一个包含、段落和图片的网页布局第四章:定位和布局4.1 学习目标:了解定位的作用和重要性掌握如何使用CSS定位技术来对元素进行精确布局4.2 教学内容:定位概述:静态定位、相对定位、绝对定位和固定定位使用`position`属性来设置元素的定位方式使用`top`、`right`、`bottom`和`left`属性来控制元素的位置了解`z-index`属性的作用4.3 教学活动:演示不同定位方式的原理和效果示例:使用定位技术创建一个导航栏布局学生练习:创建一个网页布局,使用定位技术来实现一个水平导航栏4.4 作业:完成一个定位练习,创建一个包含导航栏的网页布局。
DIV布局
border(边框):和margin一样,有上右下左四个边框的值。border:solid
定义边框为实线;border:dotted定义边框为虚线。单独定义某一边可以写成 border-left:2px; border-color:#FF0000定义边框为红色。 padding(内边距):是指层的边框到层的内容之间的空白。和margin一样,
示。
2
主要内容
1.CSS盒子模型 2.网页布局 3.块级元素与内联元素 4.DIV设计居中 5.float浮动布局 6.二列的浮动布局
7.三列的浮动布局
8.高度自适应 9.CSS网站导航
3
内容: 是页面实际要传达的真正信息,包含数据、文档或者图片等。注意 这里强调的“真正信息”,是指纯粹的数据信息本身。 结构: 是由文档中的主体部分,再加上结构化标记。 表现: 是你赋予内容的一种样式,就是文档看起来的样子。 行为: 行为就是对内容的交互及操作效果。 CSS+DIV布局中,CSS作为一种表现而单独存在,它实现了表现与结构的分 离。对于网页的修改,可以只对CSS的修改而带来网页样式的变化。
11
DIV与table比较
CSS+DIV网站设计的劣势 (cons) 第一,CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设 计元素通常放在几个l外部文件中,这一个或几个文件有可能相当复 杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变 得惨不忍睹。 第二,对于CSS网站设计的浏览器兼容性问题比较突出。基于 HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问 题,但CSS+DIV设计的网站在IE浏览器里面正常显示的页面,到火狐 浏览器(FireFox )中却可能面目全非(这也是为什么建议网络营销 人员使用火狐浏览器的原因所在 )。CSS+DIV还有待于各个浏览器厂 商的进一步支持。
div+css布局基础
html 静态网页设计
实例1 利用DIV+CSS来完成两列固定宽度布局(P271页)
html 静态网页设计
练习1 简单的DIV+CSS布局(P268页)
1.一列固定宽度布局:打开DW8,新建一个网页,切换到布局模式的标准模式,在当前网页中绘制 一个层,将层的ID修改为“layer”,双击CSS样式的#layer样式,按照P268页,设置背景色:
html 静态网页设计
练习2 操作提示
在DW中新建一个网页,在layout.css文件中定义样式。每个部分的样式如下所示。 1. body样式:宋体,14象素,边距为0,文字对齐居中。 2. container样式:上下边距为0,左右自动;宽度为900象素。
3. header样式:高度为100象素,背景色为:#6cf,下边空5象素。
3.新建一个类样式.blue,设置文字颜色为蓝色,并且将样式存放在bb.css文件中,在代码 中将链接到bb.css的那条代码删除,在网页中写上文字:文字蓝色,应用该样式,看找得 到该样式吗。然后在style标签之间输入:@import url(“bb.css”),继续应用样式,思 考属于P192页的哪种添加CSS的方法;以上这条语句也可以写在外部样式文件中。
html 静态网页设计
练习3 添加样式的方法
1.新建一个HTML文件,新建一个样式body,设置宋体、12字号,并且将样式存放在aa.css 文件中,思考属于P192页的哪种添加CSS的方法;
2.新建一个类样式.hongse,设置文字颜色为红色,仅对此文档起作用,在网页中写上文字: 文字红色,应用该样式,思考属于P192页的哪种添加CSS的方法;
求来设置属性。保存预览。
html 静态网页设计
DIV+CSS网页布局基础-常用HTML标签介绍
文档名称:PPT演示模板 Author:Hellen
Copyright (c) Gillion Version: 3.0
Page 1 of 5 Date: 05.06.2006
常用HTML标签介绍· 目录
HTML简介 table 标签介绍
2. div的使用
div元素是块级元素,用于组合一大块的代码。
div 标签介绍
3. div在布局上经常使用的CSS属性
width 设置div的宽度。 height 设置div的高度。 float 设置div的浮动,值有none,left,right。 margin 设置div的外补丁。 (可分解为margin-left,margin-right,margin-top,margin-bottom) padding 设置div的内补丁。 (可分解为padding-left, padding-right, padding-top, padding-bottom)
常用HTML标签介绍· 目录
HTML简介 table 标签介绍
ul,ol,dl 标签介绍
iframe 标签介绍 div 标签介绍
iframe 标签介绍
பைடு நூலகம்
iframe标记的使用格式是:
<iframe src=“URL” width=“x” height="x" scrolling="[OPTION]“
定义表格的表头
tbody
定义表格的主体
tfoot
定义表格的页脚
tr
定义表格中的一行
th
定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体
web程序设计知识点
web程序设计知识点Web程序设计是指通过编写代码实现网页或网站的开发过程。
下面将介绍一些常见的Web程序设计知识点,包括HTML、CSS、JavaScript以及后端开发等。
一、HTML基础知识HTML(Hyper Text Markup Language)是一种用于创建网页结构的标记语言。
它由一系列的元素(element)构成,每个元素都有特定的含义和属性。
以下是一些常用的HTML标签和属性:1. 基本结构:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>网页标题</title></head><body>网页内容</body></html>2. 文本标签:- `<h1>`至`<h6>`:定义不同级别的标题- `<p>`:定义段落- `<a>`:定义链接- `<img>`:插入图片- `<strong>`、`<em>`:定义粗体和斜体文本3. 列表和表格:- `<ul>`、`<ol>`:定义无序和有序列表- `<li>`:定义列表项- `<table>`、`<tr>`、`<td>`:定义表格结构、行、单元格二、CSS样式设计CSS(Cascading Style Sheets)用于控制网页的样式和布局。
通过为HTML元素添加样式,可以改变字体、颜色、布局和动画效果等。
以下是一些CSS样式的应用:1. 内联样式:在HTML元素上使用style属性为其添加样式,例如:`<div style="color: red; font-size: 16px;">文本内容</div>`2. 内部样式表:在HTML头部的`<style>`标签中定义CSS样式,例如:```<style>div {color: red;font-size: 16px;}</style>```3. 外部样式表:将CSS样式代码放入独立的.css文件,并在HTML中引用,例如: `<link rel="stylesheet" type="text/css" href="styles.css">`三、JavaScript基础知识JavaScript是一种用于为网页添加交互和动态效果的脚本语言。
《网页设计与制作》教案-第9讲 布局技术之二—Div+CSS
第9讲布局技术之二—Div+CSS1.1教学目标:◆知识目标1.理解CSS盒子模式。
2.熟练掌握Div的创建与设置方法。
◆技能目标能够利用DreamweaverCS3预设的CSS布局创建页面。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点:1.掌握Div的创建与设置方法1.3 教学难点理解CSS盒子模式。
1.4教学方法:讲练结合,任务驱动、分子任务操练1.5课时安排:2课时1.6教学对象分析:这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。
1.7教学过程:一、Div+CSS —构建任务1.工作流程⏹在站点中新建一个页面并保存。
⏹插入一个Div并设置相关CSS规则,使之成为外部容器。
⏹根据事先拟好的布局草图,定制四个Div标签并分别设置相关CSS规则。
⏹在各Div窗口中插入相应页面元素。
⏹检查整个布局效果并加以调整,保存并预览布局效果。
二、什么是Div标签Div标签一般用来定义网页上的一个特定区域,将文字、图片和表格等各种网页元素放在此区域里,再用CSS对该<Div>标签定义的区域进行定位和样式的设置。
CSS样式表不但是定义页面样式的良好工具,同时它所具有的精确定位对象的控制能力又使其成为不可多得的网页布局工具,为了提高设计效率,可以事先定义好布局所需的CSS样式规则,然后在“插入Div标签”中应用。
使用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器。
三、CSS的盒子模式要利用CSS进行网页布局,需要借助HTML的一个标签元素Div,也就是目前比较流行的Div+CSS来布局网页结构。
需要接触到的知识点就是CSS的盒子模式,这也是Div排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,而改用CSS排版后,通过CSS定义的大小不一的盒子和盒子嵌套来编排网页。
DreamweaverCS6 HTML CSS DIV JavaScript网站开发网页基础知识
Photoshop:简称"PS",是由AdobeSystems开发与发行地图像处理软件。Photoshop主要处 理以像素所构成地数字图像。使用其众多地编修与绘图工具,可以有效地进行图片编辑工作。PS 有很多功能,在图像,图形,文字,视频,出版等各方面都有涉及。网页主要使用PS来实现图片地处理。
起始页
1.3.1 DreamweaverCS6工具介绍
起始页地设置 设置起始页:勾选"起始页"左下角地不再显示地复选框,可设置关闭"起始页"地效果,如需重新开启改功能,单击 菜单栏地编辑首选参数常规文档类型显示欢迎屏幕,勾选这个选项重新启动"起始页"。
1.3.1 DreamweaverCS6工具介绍
1.3.1 DreamweaverCS6工具介绍
2 认识Dreamweaver CS6工作面板 DreamweaverCS6地属性面板默认在窗口地下部,会随着鼠标所在位置或所选对象地不同显示相对应地属性面 板内容。
1.3.1 DreamweaverCS6工具介绍
2 认识Dreamweaver CS6工作面板 当前标签:光标所在位置地HTML标签名称; 状态栏:状态栏位于文档窗口地底部,它地作用是显示当前正在编辑地文档地有关信息,主要包含当前窗口大小,文 档大小,当前标签,估计下载时间,当前页面编码类型等。 当前文档:表示当前编辑地文档名称,通过点文档名称可更改当前编辑地文档。
HTML知识图谱
网页结构 body
行级标签inline
一般都是基于语义级(semantic)的基本元 素。如常见的内联元素 a,内联元素只能 容纳文本或者其他内联元素。 不以单独成行存签 块级标签包含了块级标签
已经学习的内容
H1-H6标题 P段落标记 基础语法 head 块级标签 定义描述标 签 表格,div 表单与控件 表单等等 无序与有序 列表标签
网页结构 body
HTML
标记
布局 超链,文本 与其他 行级标签 Input,超链 CSS基础 可变标签 等等 CSS进阶 布局控制 图片,span 换行
CSS
实际开发常用的4种块状结构
1、div-ul(ol)-li :常用于分类导航或菜单等 2、div-dl-dt-dd :常用于图文混编的场合 3、table-tr-td :常用于图文布局或显示数 据 4、form-table-tr-td:常用于布局表单
块级标签block
块元素(block element)一般是其他元素的 容器元素,块元素一般都从新行开始,它 可以容纳行级元素和其他块元素,常见块 元素是段落标签'P。"form"这个块元素比 较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每 次另起一行的方式一直往下排。
前端知识总结案例
前端知识总结案例一、HTML(超文本标记语言):网页的骨架。
1. 标签基础。
HTML就像是盖房子的砖头和框架,标签就是那些砖头。
像`<html>`标签,它就像房子的地基和外墙,包裹着整个网页内容。
`<head>`标签就像是房子里的阁楼,放着一些关于网页的重要信息,比如网页标题(`<title>`标签在这呢)、样式表引用、脚本引用等。
而`<body>`标签,那就是房子的客厅、卧室等居住空间啦,我们在网页上看到的各种文字、图片、链接啥的,基本都在这个标签里面。
举个例子,如果我想在网页上显示一个段落,就用`<p>`标签。
像`<p>这是一段文字。
</p>`,就这么简单。
2. HTML5新特性。
HTML5就像是HTML的升级版,多了好多超酷的功能。
比如`<video>`标签,以前在网页上播放视频可麻烦了,得靠各种插件。
现在呢,直接`<video src = "video.mp4">您的浏览器不支持视频播放。
</video>`就搞定了,简单得很。
还有`<canvas>`标签,就像是一块画布,可以在上面用JavaScript画画呢。
可以画个圆啊,画条线啥的,就像个数字艺术家的小天地。
二、CSS(层叠样式表):网页的化妆师。
1. 选择器。
CSS选择器就像是在一群人中精准地找到你想打扮的那个人。
像元素选择器,就很直接,比如说`p { color: red; }`,这就是告诉浏览器,把所有的`<p>`标签里面的文字颜色都变成红色。
类选择器就更灵活啦,你可以给一个元素或者一组元素加上个“小标签”,就像给一群人都戴上同样颜色的帽子。
比如在HTML里有`<div class = "box">`,那在CSS里就可以`.box { width: 100px; height: 100px; background color:blue; }`,这样所有带`box`类的`<div>`都会变成一个100px宽、100px高的蓝色方块。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
TITLE=text
event = script
>
说明:将文本以粗体显示。需要结束标记。
9--------------------------------------------------------------------------------
TABINDEX=n
TARGET=window_name | _blank | _parent | _self | _top
TITLE=text
URN=urn
event = script
>
说明:描述超级链接的开始位置或者目标。要求必须定义herf=或name=属性。需要结束标记。
BOTTOMMARGIN=pixels
CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
LEFTMARGIN=pixels
LINK=color
RIGHTMARGIN=pixels
SRC=url
STYLE=css1-properties
TITLE=text
VSPACE=n
WIDTH=n
event = script
>
说明:在页面中放置可执行的内容。需要结束标记。
7--------------------------------------------------------------------------------
event = script
>
说明:设置一个按钮。需要结束标记。
17--------------------------------------------------------------------------------
< CAPTION
ALIGN=BOTTOM | CENTER | LEFT | RIGHT | TOP
说明:以比当前所用字体稍大的字体显示文本。需要结束标记。
13--------------------------------------------------------------------------------
< BLOCKQUOTE
CLASS=classname
ID=value
<BASE
HREF=url
TARGET=window_name | _blank | _parent | _self | _top
>
说明:描述文档的基本地址,浏览器依此转换相对地址。只能用在HEAD标记中,不需要结束标记。
10--------------------------------------------------------------------------------
DATASRC=#ID
DISABLED
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
TYPE=BUTTON | RESET | SUBMIT
SCROLL=YES|NO
STYLE=css1-properties
TEXT=color
TITLE=string
TOPMARGIN=n
VLINK=color
event = script
>
说明:描述文档主体的开始和结束。需要结束标记。
15--------------------------------------------------------------------------------
8--------------------------------------------------------------------------------
<B
CLASS=classname
ID=value
LANG=nguage
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TABINDEX=n
TARGET=window_name | _blank | _parent | _self | _top
TITLE=text
event = script
>
说明:在客户端图像映射MAP中描述超链接热点的轮廓形状。不需要结束标记。
<ADDRESS
CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event= script
RIGHT | TEXTTOP | TOP
ALT=text
CLASS=classname
CODE=filename
CODEBASE=url
DATAFLD=colname
DATASRC=#ID
HEIGHT=n
HSPACE=n
ID=value
NAME=name
CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
<AREA
ALT=text
CLASS=classname
COORDS=coordinates
HREF=url
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
NOHREF
SHAPE=CIRC | CIRCLE | POLY | POLYGON | RECT | RECTANGLE
< BGSOUND
BALANCE=n
CLASS=classname
ID=value
LANG=language
LOOP=n
SRC=url
TITLE=text
VOLUME=n
>
说明:在页面中加入背景音乐。可使用在HEAD标记中,结束标记可选。
12--------------------------------------------------------------------------------
3-------------------------------------------------------------------------
<A
ACCESSKEY=key
CLASS=classname
DATAFLD=colname
DATASRC=#ID
HREF=url
CSS+DIV布局基础:HTML标记(一)
这些所介绍的HTML标记不一定完全符合XHTML规范。各位在实际布局时应有所取舍,如:B标记,FONT标记,都是不符合XHTML规范的。在此不在一一罗列,相关知识请参考的其它文章。
1-------------------------------------------------------------------------
< BIG
CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>
说明:引用其它资源中的内容,可能会缩进、斜体显示,通常上下加空行。需要结束标记。
<!-- -->
说明:注释标记,在“<!--”与“-->”之间的内容将不在浏览器中显示。
2-------------------------------------------------------------------------
<!DOCTYPE>
说明:描述文件所符合的HTML DTD,用于对文件的兼容性作简要说明。
14--------------------------------------------------------------------------------
< BODY
ALINK=color
BACKGROUND=url
BGCOLOR=color
BGPROPERTIES=FIXED
< BR
CLASS=classname
CLEAR=ALL |LEFT | RIGHT
ID=value
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS