HTML&CSS学习总结
<hr><p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>一、 HTML学习总结<ul><li>1.HTML是什么</li><li>2.HTML结构<ul><li>1. 创建一个HTML实例</li><li>2. HTML结构解析</li><li>3. HTML标题</li><li>4. HTML段落</li><li>5. HTML链接</li><li>6. HTML图像</li></ul></li></ul></li><li>二、CSS学习总结<ul><li>1.CSS是什么</li><li>2.CSS基础语法</li><li>3.CSS生效方法</li><li>4.CSS颜色、尺寸、对齐</li><li>5.CSS盒子模型</li><li>6.CSS选择器</li></ul></li></ul></div><p></p>
<hr>
<h1 id="一-html学习总结">一、 HTML学习总结</h1>
<h2 id="1html是什么">1.HTML是什么</h2>
<p>HTML（HyperText Markup Language）是一种用来告知浏览器如何组织页面的标记语言，它由一系列的元素组成，一般我们用它来构建 Web 页面</p>
<h2 id="2html结构">2.HTML结构</h2>
<h3 id="1-创建一个html实例">1. 创建一个HTML实例</h3>
<p>打开vscode，新建一个文件夹，在该文件夹下新建一个 后缀名为html 的文件并输入如下内容</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
</code></pre>
<h3 id="2-html结构解析">2. HTML结构解析</h3>
<p>HTML的大体结构如下图所示</p>
<table>
<thead>
<tr>
<th>标签名</th>
<th>定义</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><html></html></code></td>
<td>标签</td>
</tr>
<tr>
<td><code><head></head></code></td>
<td>头部</td>
</tr>
<tr>
<td><code><title></title></code></td>
<td>标题</td>
</tr>
<tr>
<td><code><body></body></code></td>
<td>主体</td>
</tr>
</tbody>
</table>
<h3 id="3-html标题">3. HTML标题</h3>
<p>HTML 标题（Heading）是通过<code><h1></code> - <code><h6></code> 标签来定义的,语法如下</p>
<blockquote>
<ul>
<li><code><h1></code>这是一级标题<code></h1></code></li>
<li><code><h2></code>这是二级标题<code></h2></code></li>
<li><code><h3></code>这是三级标题<code></h3></code></li>
</ul>
</blockquote>
<h3 id="4-html段落">4. HTML段落</h3>
<p>HTML 段落是通过标签<code><p></code>来定义的,语法如下</p>
<blockquote>
<ul>
<li><code><p></code>这是一个段落。<code></p></code></li>
<li><code><p></code>这是另外一个段落。<code></p></code></li>
</ul>
</blockquote>
<h3 id="5-html链接">5. HTML链接</h3>
<p>HTML 链接是通过标签 <code><a></code> 来定义的,可分为三种，分别是外部链接、锚链接、邮件链接，这里我们简单介绍一下外部链接和锚链接</p>
<p>1.外部链接：即可以连接到外部文件如跳转到百度搜索界面</p>
<blockquote>
<ul>
<li><code><a href="https://www.baidu.com/" target="_blank"></code>百度一下<code></a></code></li>
</ul>
</blockquote>
<p>2.锚链接：是在本页面或者其他页面的的不同位置进行跳转</p>
<p>首先我们要创建一个锚点，使用name属性或者id属性给那个特定的位置起个名字</p>
<blockquote>
<ul>
<li><code><a name=hhh>底部</a></code></li>
</ul>
</blockquote>
<p>然后在底部设置超链接,点击即可跳转到底部</p>
<blockquote>
<ul>
<li><code><a href="#hhh">跳转到底部</a></code></li>
</ul>
</blockquote>
<h3 id="6-html图像">6. HTML图像</h3>
<p>HTML 图像是通过标签 <code><img></code> 来定义的,语法如下</p>
<blockquote>
<ul>
<li><code><img src="图像路径" width="200" height="200"></code></li>
</ul>
</blockquote>
<p>文件路径有相对路径和绝对路径两种。</p>
<p><strong>绝对路径</strong>：<br>
1.本地路径</p>
<blockquote>
<ul>
<li><code><img src="D:\images\1.jpg"></code></li>
</ul>
</blockquote>
<p>2.网络路径路径</p>
<blockquote>
<ul>
<li><code><img src="图片的地址"></code></li>
</ul>
</blockquote>
<p><strong>相对路径</strong>：<br>
通常用 . 和 .. 分表代表当前目录和上一层目录<br>
当前目录</p>
<blockquote>
<ul>
<li><code><img src="1.jpg"></code></li>
<li><code><img src="./1.jpg"></code></li>
</ul>
</blockquote>
<p>上一层目录</p>
<blockquote>
<ul>
<li><code><img src="../1.jpg"></code></li>
</ul>
</blockquote>
<h1 id="二css学习总结">二、CSS学习总结</h1>
<h2 id="1css是什么">1.CSS是什么</h2>
<p>网页的内容是由 HTML的元素构建的，我们通常用CSS来呈现这些元素</p>
<h2 id="2css基础语法">2.CSS基础语法</h2>
<p>CSS 由两个主要的部分构成：选择器，以及一条或多条声明</p>
<blockquote>
<ul>
<li><code>选择器 {声明1; 声明2;}</code></li>
</ul>
</blockquote>
<h2 id="3css生效方法">3.CSS生效方法</h2>
<p>让CSS样式生效一般有三种方法：外部样式表，内部样式表，内联样式</p>
<p>1.外部样式表<br>
首先我么们新建一个HTML文件，在<code><head></head></code>中添加下列代码,然后在同目录新建一个样式表文件mycss.css</p>
<pre><code><link rel="stylesheet" type="text/css" href="mycss.css">
</code></pre>
<p>2.内部样式表<br>
可直接将样式放在HTML文件中的<code><style></style></code>中</p>
<p>3.内联样式表<br>
直接把样式规则直接写到要应用的元素中</p>
<h2 id="4css颜色尺寸对齐">4.CSS颜色、尺寸、对齐</h2>
<p>1.颜色<br>
通常用 background-color 属性为元素设置背景色</p>
<pre><code><h1 style="color:Tomato;">Hello World</h1>
</code></pre>
<p>2.尺寸<br>
通常用 height 和 width 设定元素内容占据的尺寸<br>
例如设置<code><div class="test1"></code>的尺寸</p>
<pre><code>.test1 {
width: 100%;
height: 200px;
}
</code></pre>
<p>3.对齐<br>
通常用text-align设置对齐，它的属性有left, center, right</p>
<h2 id="5css盒子模型">5.CSS盒子模型</h2>
<p>盒子模型：指的是一个HTML元素，由内容content, 内边距 padding, 边框 border, 外边距 margin构成</p>
<p>1.内边距：元素的内边距在边框和内容区之间，控制该区域最简单的属性是 padding 属性，可以使用长度值或百分比值</p>
<p>2.边框：元素的边框就是围绕元素内容和内边据的一条或多条线，每个边框包括宽度、样式，以及颜色</p>
<p>3.外边距：围绕在元素边框的空白区域是外边距，设置外边距会在元素外创建额外的空白，我们通常用 margin 属性来设置外边距</p>
<h2 id="6css选择器">6.CSS选择器</h2>
<p>CSS有很多选择器，如通用选择器、元素选择器、类选择器、ID 选择器、组合选择器等等，这里简单介绍一下组合选择器的后代选择器和子选择器。<br>
1.后代选择器<br>
后代选择器以空格作为分隔，我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用</p>
<p>例如，如果只对 h1 元素中的em元素应用样式：</p>
<blockquote>
<ul>
<li><code>h1 em {color:blue;}</code></li>
</ul>
</blockquote>
<p>因此只有h1元素后代的em元素的文本为蓝色，其他的em元素不会变成蓝色</p>
<p>2.子选择器<br>
子选择器以>作为分隔，如果不希望选择任意的后代元素，而是选择某个元素的子元素的话，我们可以用子选择器</p>
<p>例如，如果选择只作为 h1 元素子元素的 em 元素：</p>
<blockquote>
<ul>
<li><code>h1 > em {color:blue;}</code></li>
</ul>
</blockquote>
<p>因此只有第一个h1下面的两个 em 元素变为蓝色，但是第二个 h1 中的 em 不受影响</p><br><br>
来源：https://www.cnblogs.com/moranwan/p/16381656.html
頁:
[1]