【学习】HTML基础(二)
HTML CSS
什么是CSS
- 层叠样式表,从HTML4.0之后的样式都建议从html文档中剥离样式,写到css文件中
- 例如描述文字大小、颜色、位置等的信息都写到css文件中去
- 在Chrome浏览器上按F12可以看到页面的源码
-
源码一般都是把样式剥离出来了
-
层叠样式表,从HTML4.0之后的样式都建议从html文档中剥离样式,写到css文件中
- 例如描述文字大小、颜色、位置等的信息都写到css文件中去
- 在Chrome浏览器上按F12可以看到页面的源码
-
源码一般都是把样式剥离出来了
1.外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 推荐使用外部样式表,在每一个页面的html中都可以使用css里面的样式
- 前面的rel规定当前文档与被链接文档之间的关系,stylesheet表示样式表
-
mystyle.css表示样式表和当前html在同一个目录下
2.内部样式表
- 在head标签里定义style标签,可以在本html文档中将css文件里的样式做继承
-
不建议使用
3.内联样式表
- 在某一个标签内部加入style,单独改变这个标签
- 不建议使用,建议全部采用外部样式表
(后面会对css进行专门的学习)
基本元素
- 链接
<a herf="www.baidu.com">nihao</a>
链接里面也可以插入标签
<a herf="www.baidu.com"><img src="apple.jpg"></a>
链接不仅仅只能指向其他的网页,也可以指向本网页的其他的地方(锚
)
就像百度百科前面的目录一样
<a name="miao">miao</a>
<a herf="#miao">miao</a>
把name替换成id也可以
<a herf="www.baidu.com" target="_blank">nihao</a>
在新窗口打开target=”_blank”
从根目录寻找网页target=”_top”
- 图片
<img src="/img/p.jpg">
body 可以加上background=”background.jpg”
width属性调整宽度
height属性调整高度
- 表格
<table>
<tr>
<th>表头</th>
</tr>
<tr>
<td>第一行第一列</td>
</tr>
</table>
- 列表
1.无序列表
<ul>
<li>nihao</li>
<li>zaijian</li>
</ul>
2.有序列表
<ol>
<li>nihao</li>
<li>zaijian</li>
</ol>
- 块级元素
<div>
</div>
- 内联元素
将文本分块
<span></span>
- 类
在css文件或者head中的style里
之后就可以在块中加入class=“left”
.left{
text-align: left
}
或者可以对已有的表现设置内部的类
然后在之后的p标签内部可以加入class=“left”
p.left{
text-align: left
}
- 布局
在css文件中用井号开头,在html的div中id=“”
- 响应式设计
这个要求有点高,有时间我再看
- 头部标签
<title>题目 必须要有
<base target="_blank" />新窗口打开
<meta>关键字 作者 描述
<link rel="stylesheet" type="text/css" href="mystyle.css" />链接外部资源
}