Html5基础小结

最新推荐文章于 2024-04-24 18:49:11 发布

ForeverNagisa

最新推荐文章于 2024-04-24 18:49:11 发布

阅读量247

点赞数

分类专栏： html5 文章标签： html5 编辑器 css3

本文链接：https://blog.csdn.net/ForeverNagisa/article/details/79590067

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如何书写第一行代码?

推荐编辑器: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中的一些样式!

ForeverNagisa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5基础小结

如何书写第一行代码? 推荐编辑器:ATOM 或者 HBuilder基本的H5模板<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <style media="screen"> /* 书写样式 */ </
复制链接

扫一扫