HTML标签(一)

2016-12-07  本文已影响19人  liuboxx1

1、C/S结构:

client/server:客户机和服务器结构。

B/S结构:

brower/server:浏览器和服务器结构。

2、服务器访问原理

html文件的组成

html由html、css、js,浏览器是翻译官,它把html文件翻译成页面

html全称:hypertext markup language    超文本标记性语言

拓展:在Windows系统里,文件夹里的文件若不显示后缀,则:点击组织->文件夹和搜索选项->查看->去掉隐藏文件后缀名的复选框

注意:文件名不要有中文

           文件存储格式:UTF-8无BOM格式

3、第一个标签

标签

学习标签

(1)主要记功能

(2)写法

对标签:<标签名 属性1="值1" 属性2=“值2” 属性3=“3”>内容</标签名>

独立标签:<标签名 属性1=“值1” 属性2=“值2” 属性3=“值3” />

标签不区分大小写,一般为小写;

标签写的时候应该是英文半角;

标签可以嵌套;标签容错性好,一般不会出错。

4、全局架构标签

<!DOCTYPE HTML>文档类型

<html>根标签

        <head>

                  <title>里面是本网页的标题</title>

                  <meta charset="utf-8" />   //告诉浏览器以制定编码显示html文件

        </head>

        <body>

        </body>

</html>

SEO(search engine optimatization)通过大量堆积关键词,提高搜索排名

body(leftmargin,topmargin,bgcolor,background,text,link,alink,vlink)网页正文,要现实的内容都放在body下

leftmargin:左边距

topmargin:上边距

bgcolor:背景颜色  

text:文字颜色

background:背景图片,会覆盖背景颜色


了解:

link:未点击时超链接颜色

alink:点击时超链接颜色

vlink:点击后超链接颜色

全局属性:class、id、name、style

书写格式:注意缩进

5、重要标签

html特性:

如果单词中间没有空格,不会换行

无论有多少个空格,换行都只显示一个空格

标题:<h1></h1>...<h6></h6>

水平分割线:<hr />(独立标签)

align:对齐方式       left、right、center

width:200  绝对值       50%百分比

段落: 

分段:<p></p>

换行:<br />

不自动换行:<nobr><nobr />

修饰:加粗:<b></b>     <strong></strong>

斜体:<i></i>     <em></em>     <cite></cite>

下划线:<u></u>

中删除线:<del></del>

上标:<sup></sup>

下标:<sub></sub>看圆圈的位置,在上面的上标

保持原来的格式:<pre></pre>

块引用<blockquote></blockquote>

字体:<font></font>(face,size,color)

face  字体名称

size  字体大小   1---7

color字体颜色

实体引用:可以表示html特殊符号,以&开始,以;结束

&nbsp;空格

注释:

<!--注释内容-->

1)方便他人阅读代码

2)方便调试

6、列表标签

有序表: 

<ol>order list</ol>

start  开始的位置,必须是数字

type  显示的类型  :1,a,A,i,I

无序表:

<ul></ul>type(disc,square,cicle)

列表:<dl></dl>

               <dt></dt>条目

                      <dd></dd>内容

7、图片标签

<img src="../image/" title="照片提示" border="1" width="123" />

相对路径:

./当前目录(html文件所在目录)

../当前目录的上级目录

./images/当前目录下级目录

绝对路径

本地文件系统上午绝对路径

以html所在盘符为基准

/代表盘符根目录

站点的绝对路径(了解)

/代表网站根目录

网页的绝对路径

src、title、boder、width、height

上一篇下一篇

猜你喜欢

热点阅读