html基础学习第五节-回顾第一节到第四节

为什么回顾第一节到第四节?

因为第一节和第四节是我一开始很早之前学的,后期有一段时间忙网站,现在开始从新复习,发现有必要发一文说明一下前面的一些内容

基础的格式

大家还清楚第一节我的内容吗?第一节我就开始介绍了html的基础定义,我不喜欢像别人一样开场白废话一堆的,我这人就是一针见血,现在回顾一下代码

<html>

<head>

<title>网站标题</title>

<head>

<body>

网站内容

</body>

</html>

基本格式定义

好,我们看到了上面这个代码,我什么我不说源码?html算不上一种编程语言,只是一种标记语言罢了,所以,学html不能说难,只能说你愿不愿意学,我们看到上面一段代码了吧?这一段代码中<head>定义了头部文件,头部文件以后CSS用的时候大家会明白,头部文件不仅仅是定义<title>的标题标签,还有其他的样式定义这里我们先不做介绍,<body>定义的是网站主题内容,也就是我们看到的网页。那么,基础的一个网页就这么形成了,但是,网页需要有段落和换行,好比如下面

<p>段落</p>

换行<br />

换行并不能满足日常写文章需求u,比如我们文章不要靠近两边,进行两边空出一点位置,而且标题要居中,副标题靠左对齐,最下面靠右对齐,那么,如下:

<center>标题</center>

<blockquote>文章摘要<blockquote><!--这里注意,我引入了一个新标签,间距标签,大家可以自己测试-->

<p align="left">靠左对齐</p><!--这里说明下,p是定义标签,一个段落,align是属性标签,left是属性的值

<p align="right">靠右对齐</p>

<p align="center">居中对齐的另一种方法</p>

<align="justify">左右边缘对齐</p><!--和上面那个blockquote一样以前我没提到的标签-->

规范化的写法

好,我们上面了解了颜色对齐方式,但是我们要知道如何用粗体等啊,这里我不详细介绍,详见本站html学习分类下的html基础学习第三节!颜色的粗体斜体定义我们运用后还是觉得不够满足对吧,其实前面的四节课讲的都基本说了排版的,当然还有没有说完的这里我继续补充,所以为什么是回顾前面就是这一节的原因,我们来看看标签的套用

上面我们回顾了一些标签,可是有的人不会套用,或者没去尝试,下面我们列举几个代码

<p><b><i>加粗加斜</i></b></p>

<p><b><i>加粗倾斜</b></i></p>

上两个标签套用,虽然在html里面是可以的,但是记住,真正的规范中,那个是不规范的,我学东西喜欢规矩一点,因为单纯学html是没用的,我们要学的是CSS和其他的,就算是XHTML里面,这也是不行的,标签的套用,必须有个开头有个结尾,1开头了2开头了,那就2先结尾然后1结尾,不能乱来,所以上面的标签,如果你还看不出哪一组是对的,请把这句话重复看几遍,要不回帖问我,好,标签的套用我只是讲个例子,大家举一反三,还有下面也是错误的

<p>段落<!--没有结束标签-->

换行<br><!--标签没有封闭-->

<P>段落</P><!--标签定义必须小写-->

<h1><p>第一段</p></h1><!--这两个不可以套用-->

<img src=123.jpg /><!--属性的值没有用双引号括起来-->

以上这些都是错误的,暂时想到这么多,至于大家会犯错误到哪种程度我不好想象所以只是举例,错误的地方看<!---->中间的注释,为什么这里一开始我就讲那么严格?因为怕大家以后养成一个习惯,标签不封闭,套用顺序不对,没有双引号等等错误,大家要严格要求自己不写错误代码!当然html里面写错真的不影响,但是这种习惯带到以后的学习中或者生活中,甚至工作中都是不好的,所以我定义为错误的写法!而不叫普通的不规范写法!

链接和图片的使用方法若干

链接和图片样式看下面的代码,大家就明白了,其中,a标签的意思是可以点击的链接,href定义链接的属性是一个地址,img,src定义图片和图片地址

<a href="http://www.baidu.com" target="_blank">百度,新窗口中打开</a>

<img src="123.jpg" alt="html基础学习第五节-回顾第一节到第四节" />

这里我说明下,上面的代码中的target定义了一个属性,就是链接以新窗口中打开,target除了定义blank这个值之外还有"_parent","_self","_top",大家课后自己琢磨下,以后会讲到用途,然后这个123.jpg和链接地址可以是绝对地址和相对地址,下一节课我们一节课时间讲下这个绝对地址和相对地址,因为怕不明白,如果不明白以后的学习会很受影响,虽然很容易掌握,但也很容易混淆,图片带地址,方法如下

<a href="http://www.baidu.com"><img src="123.jpg" alt="html基础学习第五节-回顾第一节到第四节" /></a>

好,回顾到此结束,写这些全部都是手工编写代码写出来的效果,为了美观,可视化编辑的不是那么好,所以大家尊重下劳动成果,留言支持下

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:1   其中:访客  0   博主  0   引用   1

评论加载中...

来自外部的引用: 1

  • SDT技术网文章索引-二月份 | yumanutong blog

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情