发表于： 2020-03-09 16:05:11
3 1199
<!--领到任务1已经有很多天了，但是直到今天才算是完成。一个呢，是因为时间上，毕竟平时还是要上课的，同时也还在准备日语的N2考试；另一个就是我自身的原因了，作为一个真正0基础的小白，我暂时还适应不了直接拿一个不是特别详细的任务开干这样的模式（当然，完成特别详细的任务对于我们确实没啥用），所以我选择了以补基础（看书，head first的html与css）为主，做任务为辅的方式进行学习-->
收获：
1 初步了解html：HTML 全称 HyperText Markup Language ，在书（上文提到的html与css）中，先介绍了ML即Markup Language，确立了html的基础定义，它是一种标记语言（即负责描述文档语义的语言），然后介绍HT，HyperText，即这才是web的基础，以此摆脱单页面的束缚，链接到其他的页面。
2 初步了解css：html算是描述网页的结构，那么css就能够为网页增添更多的样式。
3 html的历史及常用的html：从HTML2.0/3.2......到HTML5，中间存在着XHTML，相较HTML更加严格、纯净。
4 HTML里有很多缩进和空格，但在浏览器上并看不见：浏览器会忽略HTML中的制表符、回车符和大部分空格；在我们编辑的时候会插入一些回车、空格等，是为了方便我们人眼进行阅读。
5 实际上，用《记事本》也可以直接编写HTML（我废了很多时间去尝试各种各样的编辑工具......）。
6 通常HTML都会使用UTF-8编码（在后面的实践中我体会到了，如果不在HTML里面表明使用的是UTF-8编码的话，在谷歌浏览器里面没什么，但是在IE浏览器里面，我的标题变成了一堆乱码）。
7 HTML的结构：声明/head/body。
8 HTML的编写规范：所有标记不能交叉嵌套；所有标记必须小写；所有标记必须关闭；所有属性的值必须加引号（而且必须是双引号，我在有的人视频里面看见他使用了单引号，可能是因为编辑工具不同？）；既然写出了属性，就必须写出它的值。
!9 XHTML文档开头必须要有DTD文档类型定义（暂时没搞懂啥意思）。
10 新建HTML时两种自动生成的代码（XHTML和HTML5）
XHTML:
HTML5：
11 <head>部分的标签：
<title>:如名，就是指网页标题。
<base>:为页面上的所有链接规标题栏显示的内容定默认地址或默认目标（这个有点不懂，但似乎可以用target属性设置新链接打开的方式）。
<meta>：提供有关页面的基本信息。
<link>：定义文档与外部资源的关系（比如定样式的css文档）。
*12 一个有意思的meta标签：<meta http-equiv="refresh" content="3;http://www.baidu.com">该标签意思是“3秒后自动跳转至百度页面”。
13 <meta>示例：<meta name="Keyword" content="电影，西餐，傍晚，跑步，头发"/>（关键词和页面描述都可以用这样的方法来定义）
14 <body>标签的属性：bgcolor:背景颜色 backgroud:背景图片 text: 文本颜色 leftmargin:页面左边距（IE浏览器默认8px）还有topmargin、rightmargin、bottommargin（当然，还有在点击超链接的时候的一些小属性，link属性：属性值代表超链接的颜色；alink属性：属性值代表鼠标点击超链接但还未松开时的颜色；vlink属性：属性值表示点击完成后的颜色）。
15 可以通过在<head>里放入<style>来增加样式（当然，后面我是通过在文件夹里放入一个css文件并链接到css文件来增加样式）
（eg:<style type="text/css">...</style>）
16 标签分类：文本级标签：p、span、a、b、i（斜体标记）、u（下划线标记）、em（斜体标记）。其中只能放文字、图片、表单。
容器级标签：div、h系列、li、dt、dd。啥都能放。
17 <span>和<div>的区别：
18 h系列：可以对标题进行定义（指显示在文中的标题），<h1>定义最大的标题，<h6>定义最小的标题，具有align属性（left、center、right）。
19 转义字符系列： /空格（non-breaking spacing） </小于号<（less than） >/大于号>（greater than） ©/版权©
（eg：你需要在页面上展示<p>，但如果你在html里直接写<p>，那么就直接算作是一个没有封闭的段落标签，你要写成< p >）。
20 上标和下标：上标：<sup>（就是数学里平方的那个2） 下标：<sub>（就是化学里过氧化氢的那个2）
21 外部链接：文本级标签<a>,英文anchor，“锚”；缩写href，全称hypertext reference，“超文本地址”
（eg：<a href="02页面.html">点击进入另一个页面</a>）
22 （比较复杂，直接上图）
23 超链接属性：href/目标URL ; title/鼠标停留在超链接上时的悬停文本； name/主要用于设置一个锚点的名称（详见22）；
target/以什么方式打开网页/属性值：_self/在同一个网页中显示；_blank/在新窗口中打开；_parent/在父窗口中显示；_top/在顶级窗口中显示
24 链接时的注意事项：
25 <img>：单标签，自封闭标签。能够插入的图片类型：jpg（jpeg）、gif、png、bmp;不能插入的图片类型：psd、ai。
26 <img>的src属性：指图片的路径。
相对路径：相对于当前页面所在的路径。（href同理）
当前目录的表示方法：<img src="saber.jpg">或者<img src="./saber.jpg">;上一级目录的表示方法：<img src="../saber.jpg">
还有一种情况：
绝对路径：一.以盘符开始的绝对路径；二.网络路径。
27 <img>的其他属性：width/宽度；height/高度；align/“letf.center.right”;title/悬停文本；border/加边框（像素单位）（黑）；hspace/左右边距；vspace/上下边距。
28 CSS：全称Cascading Style Sheets，是用来表示HTML和XML文件样式的一种新语言。
29 CSS属性：例如任务1中用到的margin、padding、background、border-radius（圆角）等
（附CSS属性大全：https://www.runoob.com/cssref/css-reference.html）
30 CSS选择器：这需要看你前面的div用的什么属性，如果用的class（可以同名），那么在CSS 文件里就要用(.class的属性值）开头，如果用的id（不能同名），那么在CSS文件里就要用（#id的属性值开头）
（附CSS选择器大全：https://www.runoob.com/cssref/css-selectors.html）
31 CSS单位：我做九宫格的时候直接用的%，感觉还挺好用的...然后看了其他师兄们的日报，觉得的确需要把vh和vw提出来说：
vh（viewpoint height，视窗高度，1vh就是1%视窗高度）vw（viewpoint width，视窗宽度，1vw就是1%视窗宽度）
（附CSS 单位大全：https://www.runoob.com/cssref/css-units.html）
32 CSS box model（CSS盒子模型）：如图，
！33 参照一篇文章中的一句话：padding-bottom 值和宽度一致， 就生成一个宽高1比1的容器 。（由此做出的九宫格，使用padding-left或者right发现，整个页面成了空白，每一个小盒子都呈空白的扁形长方形；直接使用padding，就成了九个重叠的盒子）（这个稍微有点不懂）
34 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
图像和文本之间的浮动：eg：如果图像是右浮动，那么文本会环绕在它左边。
彼此相邻的浮动元素：eg：如果把几个浮动的元素放在一起，如果有空间的话，它们将彼此相邻。（比如九宫格模型）
清除浮动使用clear
（浮动相关参考链接：https://www.runoob.com/css/css-float.html）
35 viewport ：即用户网页的可视区域。在这次的九宫格中，我采用了网上所说的一个常用的针对移动网页优化过的页面的 viewport meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">。
36 使用Chrome模拟手机访问网页：直接F12就行了，这个还比较简单。
37 使用了师兄们给的那个用IP查看的方式，也比较简单。
！当然NGINX也弄好了，感觉像是和Chrome模拟手机访问网页是一样的...（具体是不是不知道...）
没想到写了这么久，一下午加一晚上，感觉像是又全部学了一遍......
最后，因为还没有学会怎么上传，就直接截图了
返回列表
评论