HTML+CSS(一)
这段时间内学习了HTML+CSS的基础内容,对其的简单使用有所了解,下面我将对近期的学习内容做简单的总结。
一、HTML
1.HTML的简单介绍
HTML即超文本标识语言,是用于创建web文档的标识语言。由于其简易性,在internet领域被广泛应用。
2.HTML的基本结构
<html>
<head>...</head>
<body>...</body>
</html>
(1)<html>称为根标签,所有的网页都在其中;
(2)<head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。
(3) 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
通常用到的标签还有<p>、<span>、<img>、<a>、
、<div>、<ol>、<ul>等标签。
二、CSS
css是为了给页面内容添加样式,比如改变字体大小,颜色,背景颜色,以及文本行间距等。
在这里重点讲css盒模型,了解盒模型对整个页面的布局,以及添加其他成分有很大帮助,在讲盒模型之前,先说一下元素的分类。总的来说分为三个部分:1.块状元素;2.内联元素;3.内联块状元素。
1.块状元素(<div>、 <p>、<h1>、<form>、<ul> )
(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行;
(2)元素的高度、宽度、行高以及顶和底边距都可设置;
(3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
2.内联元素(<span>、<a>、<label>、 <strong> )
(1)和其他元素都在一行上;
(2)元素的高度、宽度及顶部和底部边距不可设置;
(3)元素的宽度就是它包含的文字或图片的宽度,不可改变。
3.内联块状元素内联块状元素同时具备以上两种元素的特点。
我们所说的块状元素都满足盒模型的特点。
[图片上传失败...(image-91143e-1511666008378)]
可以把盒模型比喻成一个快递包裹,里面的内容为我们想要的东西,填充(padding)即是为了使里面的东西不被破坏而放的隔离层,而边框(border)即为快递最外面的包装,两个快递包裹之间的距离也就是我们这里的边界(margin)。
【1】内容可以是文字、图片,任何我们想要显示的东西,可以通过改变宽度(width)高度(height)来改变它的大小。
【2】padding、border、margin分别有上(top)右(right)下(bottom)左(left),我们可以通过任意改变四个方向的大小来达到我们想要的效果。
此外边框我们可以将它设置为实线(soild)、虚线(dashed)、点线(dotted)。例如我们想要设置一个红色实线的边框:(border:soild red)
三、Javascript
JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言。可以使网页显示出动态的效果。
如果说HTML是躯干部分,CSS是衣服及其他装饰品,那么js就是会动的手和脚。
在下一节的更新中将会主要介绍js的内容。
由于是第一次写,只是简单介绍了HTML+CSS的基本内容,可能还不够全面,在后面更新中将会不断补充。