一、网页组成
- HTML：网页的具体内容和结构，由N个标签（节点，元素，标记）组成
- CSS：网页的样式，美化网页
- JavaScript：网页的交互效果，比如用户鼠标的点击事件作出响应
二、常见的HTML标签
- 标题：h1、h2、h3、h4........
- 段落：p
<p style = "color: red; background: #00f">你好！好你妹！</p>
- 换行：br
- 容器：div、span（用来容纳其他标签）
- 表格：table、tr、td
- 列表：ul、ol、li
- 图片：img
<img src="q1.jpg">
- 表单：input
<input typr="button" value="这是一个按钮">
- 链接：a
<a href="http://baidu.com" target="_blank" style="font-size: 20px;">
<html>
<head>
<meta charset="utf-8"> /*使用utf-8编码，不然看到的是乱码*/
<link rel="shortcut icon" href="zheshitubiao.ico"> /*网页标题旁边的图标*/
<title>百度一下，你就知道</title> /*网页的标题*/
</head>
<body>
</body>
</html>
三、CSS（Cascading Style Sheets）: 层叠样式表，用来控制HTML标签的样式
1>CSS的三种书写形式：
- 行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
- 页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
- 外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
2>CSS两大核心：选择器+属性
选择器：选择对应的标签，加样式
选择器分类：
- 标签选择器：根据标签名找到标签
div {
color: red;
}
- 类选择器：. 类名
.high {
color: red;
}
<p class="high">第一行</p>
<p>第二行</p>
- id 选择器：#id 只能存在一个
#first {
color: red;
}
<p id="first">第一段文字</p>
- 并列选择器
div, .high {
color: red;
}
<p class="high">第一段文字</p> /*红色*/
<p>第二段文字</p>
<div class="high">div1</div> /*红色*/
<div>div2</div> /*红色*/
- 复合选择器
div.high {
color: red;
}
<p class="high">第一段文字</p>
<div class="high">div1</div> /*只有这一行是红色的*/
<div>div2</div>
- 后代选择器
div p {
color: red;
}
<div>
<p>div里面的p</p> /*红色*/
<span>
<p>div里面的span里面的p</p> /*红色*/
</span>
</div>
<p>外面的p</p>
- 直接后代选择器
div > p {
color: red;
}
<div>
<p>div里面的p</p> /*红色*/
<span>
<p>div里面的span里面的p</p>
</span>
</div>
<p>外面的p</p>
- 相邻兄弟选择器
div+ p {
color: red;
}
<div>
<p>div里面的p</p>
<span>
<p>div里面的span里面的p</p>
</span>
</div>
<p>与div相邻的p</p> /*红色*/
<p>与p相邻的p</p>