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>