零基础HTML最常用代码讲解,看完保证你能理解!

皮一下超开心 轻工大校园生态 关注 普通会员 初来乍到
发表于生活经验版块

Image


HTML(Hypertext Markup Language)也叫作超文本标记语言,是一种用来结构化 Web 网页及其内容的标记语言,标准通用标记语言下的一个应用,您可以使用 HTML 来建立自己的 WEB 站点。


HTML 是非常容易学习的! 通过本章的学习本教程,相信您能很快学会它! 


HTML常用代码基本结构定义:

<html>
  <head>
    <meta charset="utf-8">
    <title>网页标题</title>
        <style>网页 css样式代码</style>
  </head>
  <body> <!-----所有网页代码编写都在 body标签内------------>
  </body>
</html>

html各种标签具体解释:

文件类型<HTML></HTML> (放在档案的开头与结尾)


文件主题<TITLE></TITLE> (必须放在「文头」区块内)


文头<HEAD></HEAD> (描述性资料,像是「主题」)


文体<BODY></BODY> (文件本体)


标题<H1></H1> (从1[最大]到6,有六层选择)


区分<DIV></DIV>引文区块


特别强调<STRONG></STRONG> (通常会以加粗显示)


与外观相关的标签(作者自订的表现方式)


加粗<B></B>


强调<EM></EM> (通常会以斜体显示)


底线<U></U> (尚有些浏览器不提供)


网页样式标签CSS代码

文本设置

1、font-size: 字号大小 

2、font-style: 字体格式

3、font-weight: 字体粗细

4、颜色属性color: 文本颜色

注意使用网页安全色


超链接设置

text-decoration: 参数

参数取值范围: 

underline:为文字加下划线 

overline:为文字加上划线 

line-through:为文字加删除线 

blink:使文字闪烁 

none:不显示上述任何效果


背景

1、背景颜色

background-color: 设置背景色

2、背景图片

background-image: url(URL)

URL就是背景图片的存放路径,none表示无。

3、背景图片重复

background-repeat: 参数


参数取值范围 :

no-repeat:不重复平铺背景图片

repeat-x:使图片只在水平方向上平铺

repeat-y:使图片只在垂直方向上平铺

如果不指定背景图片重复属性,浏览器默认的是背景图片向水平和垂直两个方向平铺。

4、背景图片固定


background-attachment: 参数


背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力,一般都设为固定。


参数取值范围:

fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动

scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动


div盒子区块

1、单词间距 

word-spacing: 单词间距 

2、字母间距 

letter-spacing: 字母间距

3、文本对齐

text-align: 参数

参数的取值:

left:左对齐

right:右对齐

center:居中对齐

justify:相对左右两端对齐

4、垂直对齐

vertical-align: 参数

top:顶对齐

bottom:底对齐

text-top:相对文本顶对齐

text-bottom:相对文本底对齐

middle:中心对齐

5、文本缩进

text-indent: 2em

em跟px 都是单位格式

7、显示样式 

display: 参数 

参数取值范围: 

block:块级元素,在对象前后都换行 

inline:在对象前后都不换行 

list-item:在对象前后都换行,增加了项目符号 

none:无显示


div盒子模型

1、height 高度

2、width 宽度

3、padding 内边距

4、margin 外边距

5、float(浮动):可以让块级元素在一行中排列,例如横向菜单。 

6、clear 清除浮动


div盒子 边框

1、样式

border-style 参数

边框样式的参数:

none:无边框 

dotted:边框为点线

dashed:边框为长短线

solid:边框为实线

double:边框为双线

3、颜色 border color


列表项目符号

list-style-type:列表样式 由背景图片显示。


list-style:none 不显示黑点项目符号


鼠标

cursor: hand ( 鼠标形状参数 ) 

鼠标形状:CSS代码

style="cursor:hand"      手形

style="cursor:crosshair"   十字形

style="cursor:text"      文本形

style="cursor:wait"      沙漏形

style="cursor:move"     十字箭头形:

style="cursor:help"      问号形


HTML常用代码之:修改页面的实用性HTML代码

贴图:<img src="图片地址">


加入连接:<a href="所要连接的相关地址">写上你想写的字</a>


在新窗口打开连接:<a href="相关地址" target="_blank">写上要写的字</a>


移动字体(走马灯):<marquee>写上你想写的字</marquee>


字体加粗:<b>写上你想写的字</b>


字体斜体:<i>写上你想写的字</i>


字体下划线: <u>写上你想写的字</u>


字体删除线: <s>写上你想写的字</s>


字体加大: <big>写上你想写的字</big>


字体控制大小:<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大,h5最小)


更改字体颜色:<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间


消除连接的下划线:<a href="相关地址" style="text-decoration:none">写上你想写的字</a>


贴音乐:<embed src="音乐地址" width="宽度" height="高度" autostart=false>


贴flash: <embed src="flash地址" width="宽度" height="高度">


贴影视文件:<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>


换行:<br>


段落:<p>段落</p>


原始文字样式:<pre>正文</pre>


换帖子背景:<body background="背景图片地址">


固定帖子背景不随滚动条滚动:<body background="背景图片地址" body bgproperties=fixed>


定制帖子背景颜色:<body bgcolor="red">


帖子背景音乐:<bgsound="背景音乐地址" loop=infinite>


贴网页:<iframe. src="相关地址" width="宽度" height="高度"></iframe>

评论列表 评论
admin 站长可乐 运营团队 高级会员 3#
不错哟!
共0条回复,点击查看回复
发布评论

评论: 零基础HTML最常用代码讲解,看完保证你能理解!

拖动滑块验证
»
已有0次打赏