CSS,HTML总结
HTML
HTML基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML常见标签
标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
段落标签
<p>这是一个段落</p>
换行标签
<br />
文本格式化标签
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
图像标签(单标签)
<img src="图像URL"/>
表格标签
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<th>表头一</th>
<th>表头二</th>
<th>表头三</th>
<th>表头四</th>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
<td>单元格三</td>
<td>单元格四</td>
</tr>
</table>
无序标签
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序标签
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像 </a>
----------------------------------------------------------------------------------------------------------------------
CSS
行内样式(内联样式)
<p style="color:red;background-color:yellow;font-size: 50px;">
内部样式
<head>
<style>
p {
color:purple;
background-color: pink;
}
</style>
</head>
外部样式
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
基础选择器
标签选择器
使用HTML标签作为选择器的名称
以标签名作为样式应用的依据
类选择器
使用自定义的名称,以 . 号作为前缀,然后再通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用的依据
ID选择器
使用自定义名称,以 # 作为前缀,然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用的依据,一对一的关系
#sky{
color: blue;
}
1
2
3
<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>