第一章 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 非常相似,只是它不会在两端留下任何空间。