阅读是最好的习惯
当前位置：微精选 > 实用 > 正文

代码入门教程（7）

2022-05-31 分类：实用 阅读(87) 评论(0)
代码入门教程（7）

行楷入门教程：偏旁部首的写法

想要写好行楷，基础一定要打牢固。01双人旁02竖心旁特别提醒一下，需要注意此偏旁的笔顺哦！03三点水04绞丝旁05示字旁06王字旁07女字旁08牛字旁

行楷字帖入门教程：从笔画到结构学习赵孟頫楷书

赵体寿春堂标准习字帖，包括基本笔画和间架结构两部分，便于初学书法者由浅入深、从笔画到间架结构一以贯之地学习赵孟頫楷书。赵孟頫所书正楷，笔画圆润清秀，结构端正谨严，行书流利娟秀，风格潇洒超逸，秀美易学，非常适合书法初学者。

 

第一章　代码基础知识

第十二节　其它标签

代码入门教程（7）

  

        本节讲解几种常用标签：块区标签、段落标签、定位标签、强调标签、换行标签等8种标签。

        1、<div>是块区标签，又叫区隔标签。

        DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。DIV的起始标签（首标签）和结束标签（尾标签）之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。它可以包含段落，表格、图片等不同的内容。它的作用是设定字、画、表格等的摆放位置。

        DIV元素最大的特点是默认没有对元素内的对象进行任何格式化渲染，主要用于应用样式表。

        块区标签语法： <div>内容</div>

        <div> 标签是制作网页常用的一个标签，它的用途是用于网页布局。<div>与</div>之间的“内容”，可以是文字，也可以是图片等内容。在使用块区标签的地方，浏览器会自动地给下面的内容空出一行的空格。

        DIV标签应用于 Style Sheet（式样表）会更显威力，它最终目的是给设计者另一种组织 能力，有 Class ; Style ; title ; ID 等属性。
        在<div>标签 中，可以添加许多属性。添加属性的方式，大部分是以“样式”（style）的方式添加的。现举例如下：

        （1）设置对齐方式：

<div align=”center”>

        （2）设置宽度、高度和背景颜色：

<div style=“width:200px;height:200px;background-color:Black;“>

        （3）设置外边距、宽度、高度和背景颜色：

<div style=“margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;“>

        （4）设置定位方式：position:relative（定位方式：相对定位）

<div style=“position:relative; top:10px;left:10px; width:140px; height:140px;background–color:White;“>

        2、<p>是段落标签

        段落标签语法：<p>内容</p>

        <p>是一个有特定语义的标签，表示段落，是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进，因为行首缩进只是表示段落的方式，并不是一定的或必需的方式。所以在用<P>标签的时候，如果需要可以针对P设定一下行首缩进。

        段落标签常用的属性是对齐方式。即：<p align=”center”>、<p align=”right”>或者<p align=”Left”>

        在使用段落标签的地方，浏览器会自动地给下面的文章空出两行的空格。因此，我们在编撰文字或者图片的时候，如果想让两部分内容之间空出两行空格，就用<p>标签；如果想让两部分内容之间空出一行空格，就用<div>标签。

        3、<span>标签

        <span>语法：<span> 内容</span>_

        <span> 标签被用来组合文档中的行内元素。

        span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

        <span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。

        <span>在CSS定义中属于一个行内元素，而<div>是块级元素。所谓“块元素”，是以另起一行开始渲染的元素，“行内元素”（又叫做“内嵌元素”），在它后边的内容不会换行。我们可以通俗地理解为<div>为大容器，<span>就是小容器。

        4、定位标签与代码

        在制作网页时，我们常常需要给网页中的元素进行定位。定位有水平对齐、垂直对齐、居中标签、绝对定位、相对定位等几种方式。

      （1）水平对齐方式：align=left（左对齐） align=center（居中对齐）align=right（右对齐）

        水平对齐方式常常作为其它标签（例如：表格、段落、块区等标签）的属性使用。

      （2）垂直对齐方式：valign=top（顶部对齐）valign=bottom（底部对齐）middle（中部对齐）

        垂直对齐方式也常常作为其它标签（例如：表格、段落、块区等标签）的属性使用，垂直对齐方式还常常和水平对齐方式配合使用。

      （3）居中标签：居中标签一般是单独使用的，居中标签有尾标签。标签语法：<center>内容</center>

      （4）绝对定位语法：POSITION: absolute（定位：绝对定位）。

        绝对定位是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

        绝对定位举例：style=”LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px”
      （5）相对定位语法：POSITION: relative（定位：相对定位）。
相对定位是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
相对定位举例：style=”LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px”

        5、<strong>强调标签

        标签语法：< strong>内容< /strong>
 strong 意思是着重，这是有语义的，作用也很简单。至于样式，是加粗着重，还是用色彩表明着重，都由你自行选择。

        6、<em>标签

        标签语法：< em>内容< /em>

        < em >标签是表示强调，一般浏览器的默认值是斜体。

        <strong>标签与< em>标签都有强调的意思，但是强调的力度有所不同。strong要比em力度更大一点。如果说em是汉语中的“强调”、“注意”，那么strong就是“再三强调”、“特别注意”。

        7、<br>标签与<wbr>标签

        <br>换行标签。在<br>后面的内容，会显示在下一行。<br>标签是空标签，它没有尾标签。

        wbr 是 Word BReak 的缩写，用来指定软换行（或单词换行）。即使用 <nobr>禁止了换行，使用 <wbr> 仍然可以换行，但是又不是强制换行，这点和 <br> 不一样。换不换行要看浏览器的横幅。

        8、<nobr>标签

        <nobr>：不换行标签。标签语法：<nobr>内容</nobr>

        在一段文字或者几个图片代码的前面输入<nobr>标签，后面输入它的尾标签</nobr>，这些文字和图片就不会换行了。

        作业：

        1、认识上面讲解的这8种标签，理解这些标签各自表示的意义。

        2、熟悉这些标签的表达语法。

        3、自己找一些网页代码，认识这些标签并体会它们的用法。把你认为精彩的标签，设置一个文件夹保存起来。

代码入门教程（7）

 
２０１２年１０月１9 日于北京


“春天没来”欢迎您“春天没来”欢迎您“春天没来”欢迎您“春天没来”欢迎您“春天没来”欢迎您“春天没来”欢迎您
第一章　代码基础知识

第十三节　CSS样式

代码入门教程（7）
 

        本节讲解有关CSS样式的内容。

        CSS是什么？

        CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件样式的计算机语言。 CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

        CSS样式表能为我们做什么?

        CSS样式表的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。
        这是一个没有添加css的普通网页： “没有添加CSS的HTML网页” ，我们不改动网页的HTML代码，只是添加了一些CSS规则，就得到了一个非常美观的网页：“添加了css的网页”。

        这不是CSS作用的全部，CSS可以将格式和结构分离。可以以前所未有的能力控制页面布局。可以制作体积更小下载更快的网页。可以将许多网页同时更新，比以前更快更容易。浏览器将成为你更友好的界面 。

        css的内容
        css的内容是对“层叠样式表”使用方法的讲解。它包括：样式表的基本语法、把样式表加入网页的方式、文字属性的设置、文本属性的设置、背景属性的设置、列表项目的应用、div和span标签、盒子、定位方法、链接方法等内容。

应用css样式标签举例：

        代码1：

<IMG style=”BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 1000px; BORDER-TOP-WIDTH: 0px;

BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 305px; BORDER-LEFT-WIDTH: 0px”

src=”http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg”>

        注释：

        1、上面的图片标签解析：

<图片标签 样式＝“图片右边框宽度：0px；图片外边距宽度：0px；图片宽度：1000px；图片上边框宽度：0px；图片下边框宽度：0px；图片高度：305px；图片右边框宽度：0px” 图片地址＝”http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg”>

        2、说明：

        上面的图片标签中使用了css样式，定义了图片的四个边框的宽度、图片外边距的宽度、图片高度和图片宽度。

        代码2：

<marquee style=”width: 621px; height: 66px; color: rgb(255, 0, 255); font-size: 24pt; font-weight: bold;”

id=”class=” direction=”right” behavior=”alternate” scrollAmount=”1″>

        注释：

        1、上面的移动标签解析：

<移动标签 样式＝屏幕宽度：621px；高度＝66px；颜色：十进制颜色（红色值255，绿色值0，蓝色值255）；文字字号：24px；文本粗细：粗体；序号＝“选择器”＝“移动方向”＝“向右” 移动方式＝“来回走” 移动速度＝“1”>

        2、说明：

        上面的移动标签中使用了css样式，定义了移动屏幕的宽度和高度、文字颜色、文字字号、文本粗细、标签序号（包括移动方向、移动方式和移动速度）

        代码3：

<div style=“position:fixed; top:210px;left:210px; background-color:Navy;width:100px;height:100px;“>
        注释：

        1、上面的块区标签解析：

<块区标签 样式＝定位类型：绝对定位；居顶：210px；居左：210px；背景颜色（设置纯色）：海军蓝；宽度：100px；高度：100px；>

        2、说明：

       上面的块区标签中使用了css样式，定义了定位类型（绝对定位）、居顶距离、居左距离、背景颜色、宽度和高度

。

        编者声明：

        我对CSS不是非常熟悉，在这里只向您介绍这些内容，css的具体内容以及使用方法，请您参阅我收藏的这些文章：

        作业：

        1、认识CSS的作用，初步了解CSS的内容。

        2、阅读有关CSS的文章，学习CSS语法。

        3、应用CSS样式，试着制作几篇文章。
 

 
代码入门教程（7）

 
２０１２年１０月１9 日于北京

代码入门教程（7） 代码入门教程（7） 代码入门教程（7） 代码入门教程（7）

body{CURSOR:url(‘http://pic.51.com/shop/product/sbys/ani/1000400047.ani’);}

行楷入门教程：偏旁部首的写法

想要写好行楷，基础一定要打牢固。01双人旁02竖心旁特别提醒一下，需要注意此偏旁的笔顺哦！03三点水04绞丝旁05示字旁06王字旁07女字旁08牛字旁

行楷字帖入门教程：从笔画到结构学习赵孟頫楷书

赵体寿春堂标准习字帖，包括基本笔画和间架结构两部分，便于初学书法者由浅入深、从笔画到间架结构一以贯之地学习赵孟頫楷书。赵孟頫所书正楷，笔画圆润清秀，结构端正谨严，行书流利娟秀，风格潇洒超逸，秀美易学，非常适合书法初学者。

赞(0) 打赏
未经允许不得转载：微精选 » 代码入门教程（7）
分享到： 更多 (0)
标签：

相关推荐

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

热门文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏