简单网页设计模板html html制作电影网站代码

上一篇文章中我分享了一段图文标签,这篇文章主要给大家详细解释一下这些代码的作用和意义,以及编写网页代码的格式与思路 。
下面我贴上html代码:
<!--HTML--><div><h2>这是我的第一个网页</h2><p>BODY标签表示网页主体元素的容器,它包含了网页所有的html标签如:文本、图片、列表等等 。以后我们编写的网页标签都需要放在这里面,这里我写了一段文字,它就会在浏览器里显示出来 。这些就构成了我们网页的基本格式,大家也不需要去背 , 知道表示什么意思就行 , 需要的时候直接拿来用 。</p><p><img src="https://tpt360.com/tuimg/yan.png"></p></div>从代码当中可以发现 , 所有的标签内容都被一个div标签所包含着 , div属于组合块级元素 , 常用来区分不同的区域或模块,它可以是独立的 , 可分割的,它有自动换行的属性,但你可以通过使用css来给它定义样式或布局 。
h2属于标题标签 , 从h1到h6都可以自定义,一般网页的标题或者需要着重表现的都可以用,p标签表示段落或者一段文字介绍,img标签表示页面中的图像 , 你可以直接引入图片地址,注意 , 它是一个单标记 。
那么知道了这些标签的意义,我们就可以根据自己实际的需求给这段html代码定义css样式,
首先 , 我想给整个区域限制一个高度和宽度,那么我们就应该这样写:
<style type="text/css">div { width: 300px; /*这里给个300像素的宽度*/}... /*未完待续*/</style>【简单网页设计模板html html制作电影网站代码】如果想加入其他的样式可以继续定义 , 如:添加一个背景颜色,添加一个内边距或外边距 。
div { width: 300px; /*这里给个300像素的宽度*/ background: #f2f2f2; /*这里给一个灰色的背景*/ padding: 20px; /*这里给一个20像素的内边距*/ margin: 20px; /*这里给一个20像素的外边距*/ }注意:内边距的意思就是一个独立的区块或者标签往内部扩展距离,外边距就是往外部扩展距离,新入门的同学这里容易搞混 。
接下我们定义标题,标题比较简单,比如,给它一个20像素的大小,标题颜色为红色,需要让它居中,那么就应该这样写:
h2 { font-size: 20px; /*这里给个20像素的字体大小*/ color: #ff0000; /*这里给一个红色的字体颜色*/ text-align: center; /*让它居中*/}```文字介绍和标题差不多,就是字体小一点,注意的是需要给段落定义一个行高,调整段落之间的间隔 。
p { font-size: 14px; /*这里给个14像素的字体大小*/ color: #333; /*这里给一个黑色的字体颜色*/ line-height: 24px; /*这里给一个24像素的行高*/}最后图片就更简单了,直接让它自适应宽度,跟随div,设置一个100% 。
img { width: 100%;}一个简单的网页代码和设计思路就这样完成了,如果你懂了这些代码的作用和意义,那么恭喜你,你就基本入门了,因为所有的网页代码基本都是按照这种格式和思路编写的 。下一篇给大家继续介绍其他常用的html+css标签以及实战演示,谢谢观看?。。?


    以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!

    「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助: