如何书写第一行代码?
推荐编辑器:ATOM 或者 HBuilder
基本的H5模板
<!-- 告知浏览器使用最新Html版本解析文档 -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style media="screen">
/* 书写样式 */
</style>
<title></title>
</head>
<!-- 书写页面内容 -->
<body>
</body>
<script type="text/javascript">
// 建议这里书写js语句
</script>
</html>
H5标签(举例)
标签 | 描述 |
---|---|
< a> | 定义超链接 |
< div> | 定义文档中的一个部分。 |
< img> | 一个图片元素 |
< p> | 一个段落 |
< table> | 一个表格 |
CSS基础选择器
CSS 书写的几种方式
1. 在< head >中 书写
2. 外部引入< link rel=”stylesheet” href=”/css/test.css”> 引入一个test.css文件
3. 在标签内写(不推荐)< div style=”border: 1px red solid;”>我是div< /div>
- *全局选择器
*{
/* css */
}
应用于页面上的所有元素
- #Id id选择器
#first{
/* css */
}
<div id="first"></div>
应用于被Id 标记的标签
3. .class 类选择器
.first{
/* css */
}
<div class="first"></div>
应用于被class 标记的标签
4. 标签选择器
div{
/* css */
}
<div></div>
应用于相同名称的所有标签
5.子类选择器
div a{
/* css */
}
<div> <a href="#"></a> </div>
想设置div 中a 的标签 如果用标签选择器的话 不免会对所有的a标签产生影响 这里使用子类选择器就可以单独设置div下面的a标签 不会影响别的a标签
6.伪类选择器
a:hover {
/* css */
}
<a href="#"></a>
通过伪类选择器可以设置 鼠标在链接上悬停时候的状态 伪类选择器的方法有很多种这里不再一一讲述!
7.群组选择器
div, p, a {
/* css */
}
<div>我是div</div>
<p>我是段落</p>
<a href="#">我是超链接</a>
通过群组选择器可以给选中的标签全部加上样式
选择器优先级
行内样式>ID选择器 > 类选择器 > 标签
通过以上的学习 我们 基本掌握了 H5书写的最基本规范和方法了 下一篇博客将重点介绍css中的一些样式!