内容可从W3School中学习
或者笔记地址:Web前端开发之HTML+CSS精英课堂【渡一教育】 https://ke.qq.com/course/231570#term_id=100273162
HTML: 结构
CSS : 样式
JavaScript:行为
<html lang="en">
<head>
<meta charset="utf-8">
<title>我是标题</title>
head里面放的内容类似于“人的思想信息”
</head>
<body>
body里面放的内容就是显示的内容
</body>
href 锚点「超链接」
form 表单标签
表单里面还 含有 各种 输入框, <select> <option></option><select>
</html>
补充:上面的 lang属性是为了让爬虫获取信息的,可以用于SEO优化,html中还有其他SEO优化方式。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190327161818799.png?x-oss-process=imag
CSS
CSS
1.可以在HTML的行间标签中设置
2.可以在head标签中设置
3.可以在head标签中引入
可以在HTML的head标签中通过link标签引入css样式,css文件中可以通过#id的形式找到html中的标签并设置样式。
如下:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="hello.css">
</head>
<body>
<!-- 通过css选择器来对指定的标签进行修饰 -->
<!-- 1.下面通过id 让css文件定位并修身的方式叫做:id选择器 在CSS中表现为: #idName{...}-->
<div id="only1">hinato</div>
<!-- 2.class选择器 在CSS中表现为 .className{...}-->
<div class="demo">class选择器</div>
<!-- 3.标签选择器 直接在css文件中用对应的标签描述即可 在CSS中表现为: div{}-->
<span>123</span>
<div>
<span>321</span>
</div>
<!--4.通配符选择器 在CSS中表现为: *{效果作用与html中所有的标签} -->
</body>
</html>
如下图:
一个标签也可以同时被多个class修饰,之间用空格隔开即可
如下:
CSS选择器优先级【当各类选择器有多个存在时】
1.id选择器
2.class类选择器 [属性选择器 和 class选择器 优先级一样]
3.标签选择器
4.*通配符选择器
行间样式>id选择器【另外当使用 “行间样式” 直接在标签中使用css时,有限级>id选择器】
扩展:上面的权重值并不是十进制,而是 256进制
如 标签选中1 和 通配符权重0, 之间相差256
父子选择器,只要是父子关系即可,标签的包含关系,或者类的包含关系、id的包含关系都可以如下
CSS标签好友一些,需要学习的时候请另行查阅。这里不做补充(其实是我傻逼了,忘记保存笔记了。。。)
在css样式中进行多条件修饰的时候,可以通过 【权重相加】的方式来进行比较,判断。修饰的优先级