第一章 Web基础
本章作业链接： https://www.nemotte.cn/wordpress/?page_id=1073
HTML基础
本章代码演示链接：https://www.nemotte.cn/wordpress/?page_id=1057
闭合标签和开放标签
HTML的全称为超文本标记语言，基本由闭合标签和开放标签组成。
HTML中大部分标签都是闭合标签，其他少数为开放标签。
典型的闭合标签如：
<!-- 由一对p、h1组成的闭合标签-->
<p class="hi">hello world!</p>
<h1>一级标题</h1>闭合标签一定是成对出现的两个同名标签，其中作为结束的标签前需要加上正向斜杠，和开始标签作出区别。
典型的开放标签如：
<!-- 换行符 -->
<br/>
<img/>在html5中，开放标签的标签名末尾可以加上“/“，也可以不加，两种写法都是可以通过语法的。但是在其他版本的html中则不一定，需要根据使用的版本调整。
HTML页面组成
HTML的页面结构非常简单，整体分为两部分，第一部分为DOCTYPE模块，第二部分为html模块。
其中DOCTYPE模块表示文档的声明，位于页面的首行，告知浏览器使用哪种HTML版本规范方式解析网页，使网页能正常显示。
在html部分中，又分为两小部分，第一部分为head模块，第二部分为body模块。
head属于网页的头部，这部分中描述了HTML文件的各种属性和信息，如网页的标题，字符编码，是否启用缓存，引用的外部脚本和样式等等。head标签里写的内容不会在网页的正文内容中显示。
在head标签中：
- title标签表示网页的标题
- meta标签提供有关页面的元信息，比如针对搜索引擎的关键字、缓存时间、启用浏览器内核等
例如：
<meta name="属性值" content="描述内容"/>
<meta http-equiv="属性值" content="参数"/>常用http-equiv属性值：
- content-type——设定网页字符集
- X-UA-Compatible——用于告知浏览器以什么种版本来渲染页面
- cache-control——设置浏览器如何缓存某个响应以及缓存多长时间
- Set-Cookie——设置cookie设定
body是HTML的主体，网页的文本、超链接、图像、表格、视频等所有在网页上显示的内容都写在这里。
正文
p标签表示正文，class表示此标签所属的类，可以对类在head中进行样式变更。
head中：
<style>
.hi {
color: red;
}
</style>body中：
<p class="hi">hello world!</p>
标题
h标签表示标题，h1代表一级标题，h2代表二级标题，最小标题为五级标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
列表
列表分为无序和有序列表，区别在于表项序号是相同的还是不同的，如字母、数字等能代表先后次序的标识。
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
图片
img标签代表图片，其中通过更改width、height的值缩放图片，也可以只更改其中一项，另一项会自动按照原图比例缩放。
alt值代表图片在不能正确加载时显示的文字。
<img
width="200"
src="./test.png"
alt="logo"
/>字体
超链接的target值为"_blank"，代表在新标签页打开网页。
<!-- 超链接 -->
<a href="https://www.nemotte.cn" target="_blank">Nemotte's Blog</a>
<!-- 斜体 -->
<p>
normal text <em>italic text</em>
</p>
<!-- 粗体 -->
<p>
normal text <strong>bold text</strong>
</p>输入
- 文本输入中，placeholder项代表缺省值
- 复选框中，通过增加label标签，点击文字亦可选中选项，提升交互手感；name值的统一代表选框属于同一选项
- 单选框同复选框
<!-- 输入框 -->
<input type="text" />
<br>
<input type="text" placeholder="请填写文本信息" />
<br>
<!-- 复选框 -->
<label>
<input
type="checkbox"
name="cbox"
id="cbox1-pro"
value="first_checkbox"
/>first_checkbox
</label>
<br>
<label>
<input
type="checkbox"
name="cbox"
id="cbox2-pro"
value="second_checkbox"
/>second_checkbox
</label>
<br>
<!-- 选择文件 -->
<input type="file" />
<br>
<!-- 单选框 -->
<label>
<input type="radio" name="radio1" id="radio1"/>
first_radio
</label>
<br>
<label>
<input type="radio" name="radio1" id="radio2"/>
second_radio
</label>
<br>
<!-- 控制范围 -->
<input type="range">
<br>
<!-- 多行文本编辑 -->
<textarea name="text" rows="5" cols="40"></textarea>
<!-- 提交 -->
<input type="submit">CSS基础
CSS全称是层叠样式表，是为网页添加样式的代码。
添加样式主要有三种方式：
- 标签内更改style
- 内部样式表
- 外部样式表
比如同样是下图红色文字，有三种写法。
标签内更改
<p style="color:red;">hello world!</p>内部样式表
在head中插入style标签，建立样式表即可。
<head>
<style>
p {
color:red;
}
</style>
</head>
<body>
<p>hello world!</p>
</body>外部样式表
即css文件，在head中引用写好的css样式即可。
p{
color:red;
}<head>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<p>hello world!</p>
</body>CSS代码结构
CSS整个结构称为规则集，例如：
p{
color:red;
}其中包含：
- 选择器，选择一个或多个需要添加样式的元素，上例中为p；
- 声明，用来修改添加样式元素的属性，上例中为指定颜色的一行；
-
- 属性，声明中指定元素中要修改的属性，上例中为color；
-
- 值，从指定属性的众多外观中选择一个值，上例中为red.
语法方面要注意：
- 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）；
- 在每个声明里要用冒号（:）将属性与属性值分隔开；
- 在每个规则集里要用分号（;）将各个声明分隔开.
例如修改多种类元素的多个属性：
p {
color: red;
width: 500px;
border: 1px solid black;
}JavaScript基础
对于网页前端，JS的主要功能是添加交互。
JS的引用方法与CSS类似，可以从外部引用脚本，也可以在内部引用脚本。
例如在本次作业中，添加关于按钮的交互，点下按钮，改变文字颜色，是一个比较简单的交互，因此使用内部引用，在head和body标签中添加script标签，内部插入JS代码：
<script type="text/javascript">
function text_to_red() {
document.getElementById("p").style.color = "#ff0000";
}
function undo() {
document.getElementById("p").style.color = "#000000";
}
</script>其中document代表当前html文档的对象，getElementById函数则返回指定的元素的对象，更改其中的color值来改变文字颜色。
而关于button按钮元素，为其中的onclick属性添加JS函数，如：
<button onclick="text_to_red()">变为红色</button>
<button onclick="undo()">复原</button>由此实现点击按钮，改变/还原文字颜色的交互功能。
第二章 Web布局
本章作业链接：
信件Demo
CSS常用布局
CSS的布局包含尺寸和定位。
通过CSS选择器，选择HTML中的元素，控制它们相对普通文档流、周边元素、父容器甚至浏览器窗口的位置。并且能覆盖默认的布局。
普通文档流：元素默认从左到右、从上到下。
元素分类
块级元素
块级元素一般从新的行开始，相邻的块级元素会在不同行显示。
行内元素
多个元素可以排列在同一行，行内元素的宽和高由其内容决定。
行内块级元素
在行内元素的基础上，通过CSS控制其大小。
合理布局的作用
除了美观以外，将CSS和HTML作为两个文件，有助于页面更快加载，因为页面加载是多个文件并行加载的。
flex布局
又称为弹性布局。任何容器的布局都可以指定为flex布局。
flex属性
flex-direction：指定主轴的方向，默认是row。
flex-wrap：指定换行，可以指定每个元素的最小换行行宽。
flex-flow：上面二者的缩写。
例如：
flex-direction: row;
flex-wrap: wrap;替换为：
flex-flow: row wrap;align-items：控制flex项在交叉轴上的位置。
- 默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。
- 使用 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。
justify-content：控制 flex 项在主轴上的位置。
- 默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处，你也可以用 flex-end 来让 flex 项到结尾处。
- center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。而 space-around 会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
- space-between 和 space-around 非常相似，只是它不会在两端留下任何空间。