关于HTML与CSS的学习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wq1134302142/article/details/52730722

html的介绍

html:hyper transfer markup language –超文本标记语言
我们学习这个主要是为了做页面的。学习html实际上就是学习其中的一些标签以及标签中的一些属性。
1.1 那么问题来了,要学习哪些标签呢?
首先有一点要明确,就是html是由w3c组织维护的,也就是说这种语言肯定是有一套标准的,那么html中的标签都是预先定义好的,所以不能瞎写。
其次html是一种标记语言,都有其默认的扩展名。.html 或者是 .htm
最后明确一点,学习任何一门语言,都会有相应的技术文档,。查看api文档,才能更好的去学习这种语言。
1.2开发工具的介绍
hBuilder开发工具。是基于eclipse做的二次开发。
1.3html的一些具体标签的学习
1.3.1 排版标签
:表示解释说明

: 主要是处理段落之间,为字、画、表格等之间留一空白

换行标志,显示下一行


插入一条水平线
1.3.2 字体标签
:加重语气,产生字体加粗的效果
:粗体标志,字体加粗
:斜体标记,字体出现斜体效果
:加上底线,字体下面加上底线
:下标字。可以进行化学方程式的下标书写
:下标字。指数。可以进行数学公式的幂指数的书写
文字
1.3.3图片和超链接标签:

src:指定要显示的是哪个图片,路径。
width:宽度,单位用px 也可以用百分比
height:高度. 单位用px 也可以用百分比
align:调整位置。
点击< /a>
href:用于指定点击后跳转到哪个页面
target:用于指定打开页面时候,打开的方式,其中,_self —-》默认值在当期页面打开,会覆盖原有页面
_blank—>打开新的页面不会覆盖原有页面。
1.3.4表格标签
< table>是一个容器,就是一张表 表的 大小 距离,颜色等都可以在这个标签里面设置。
< td>:表示一列
< th>:表示一列(里面的文件是粗体)
< tr>:表示一行

CSS的介绍

2.1css概念
css—>cascading style sheet ==层叠样式表 主要用来控制html页面中显示的效果
当css与div结合产生了js技术
div+css —XHTML+CSS技术—js
当html与js技术结合又产生了dhtml技术,使得web开发越来越强大
html+css+js===dhtml技术
2.2css与html的结合方式
2.1.1所有的html的标签都有style的属性,通过这个属性可以去写css代码
< div style=”backgroud-color : black;”>div区域一< /div>
2.1.2将css的代码通过< style 标签提取出来
< style type=”text/css”>

        div{

            background-color: red;
        }

    </style>
</head>
<body>
    <div>
        div区域一
    </div>
    <div>
        div区域二
    </div>
    <div>
        div区域二
    </div>
</body>

`2.1.3通过引入外部写好的css代码来实现控制效果
< link rel=”stylesheet” href=”css/main.css” />
< style>

@import url(“css/div.css”);
< /style>
2.2三种入门选择器
2.2.1标签名选择器
< style type=”text/css”>

        div{

            background-color: red;
        }

    </style>
</head>
<body>
    <div>div区域一</div>
< /body>

2.2.2 class选择器
.odd{

            background-color: antiquewhite;
        }

        .even{

            background-color: aquamarine;
        }


    </style>
</head>
<body>
    <div class="odd">
        div区域一
    </div>
    <div class="even">
        div区域二
    </div>
    <div class="odd">
        div区域三
    </div>
    <div class="even">
        div区域四
    </div>

2.2.3 id选择器 主要针对单独的某个标签而言
#first{
font-family: “微软雅黑”;

        }

    </style>
</head>
<body>
    <div class="odd" id="first">
        div区域一
    </div>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章