2020-5-21：出于制作tcpip课程的目的，学点网页制作的知识。顺带想把整个前端的都学习一下。找了黑马的视频课程，内容很多，估计有200多个小时。不知道能不能坚持全看完。
思想挺好的，结构、样式和行为三种分离，分别用三种不同类型的文件来控制。
HTML：通过大量的标记将内容结构化，从而赋予其不同的含义。比如添加<h1>就将特定的文字标记为标题。
CSS：额外的样式化文件，控制特定标记应该怎样显式。即便没有CSS，内容也是可以阅读的。
JS：提供了交互功能。
概述
全栈：既能写前端又能写后端。名词很高大上，其实就是能完成独立产品开发的。
WEB三种组成
通过HTML+CSS+JS，实现了3种不同方面的分离。不必再像很早以前那样，HTML标记中添加属性来控制显示样式，非常的丑。
- 结构(HTML-身体结构)，原本显示样式，相当于人的素颜
- 表现：CSS-外表打扮，对人外观额外的打扮
- 行为(动作-人的行为动作)
HTML文档主体结构：
- <doctype html>：使用哪种HTML版本。用什么样的方式去解释这个HTML文件。现在使用html代表html5。
-
<html>：描述这是一个HTML文档。lang=en/ zh-CN，HTML文档内容的语言类型。主要是给浏览器和搜索引擎使用，对程序无影响。
90F24BA9-D429-45DD-BF65-0B2E132DE8EB.png
- <head>：描述文档的头部，包含文档本身的相关元信息及描述。不含具体的内容。
-
<body>：文档主体，内部具体的内容。
F828E35B-6C60-4211-8862-790FCC76F40A.png
两种标签类型：
- 双标签：<body></body>
- 单标签：<br />
字符编码<meta charset=“UTF-8” />
通知浏览器以何种编码方式进行解析，需进行正确设置，以避免出现乱码。
D0667C00-6209-43DC-A2F4-48D4797752C0.png
使用UTF-8，而不是utf8,utf-8。
注意：设置必须与文档本身实际的编码方式要一致。
HTML语义化
未加标记的文字，全部都是同一层次。加了标记后，不同内容间就有了区分和含义。
先确定HTML内容结构，再确定样式。
通过各种标签来实现，使得文档内容组织成特定的结构。
就像校园，全是人。然后添加标签，老师、学生、班级，将所有人按特定结构组织起来。
所有的标记所关联的文字，浏览器在解析时都会用其缺省的样式进行解析。如要改变样式，就需要使用CSS加以控制。
排版标签
<h?>：用于指定标签，可用范围：<h1>...<h6>。表示不同的等级。语义效果同word中的文档一级、二级、三级标题，有个嵌套关系在里边。
<p>段落：表示内容为一个段
<hr />：表示一条水平线
<br />：换行，不等同于段落，仅仅是换行。
<div>：没有语义，表示一个盒子，用来装元素。块级
<span>：同上，但是内联，一行可放多个。
文本格式化标签
只设置文本的样式。
<b>加粗，没有特殊语义，只是表示加粗。
<strong>强调，推荐使用，语义更强烈更明显
斜体：<i>、<em>，推荐使用em
删除线：<s>、<del>，推荐使用del
下划线：<u>、<ins>，推荐使用ins
标签属性<p></p>
标签可有属性，用于给属性添加一些配置数据，如<tag attr="v1", attr2="v2"></tag>
图像标签<img src="" />
src：图像源
alt: 加载失败时，显示的文本,并不是所有浏览器都支持，如safaix
title: 鼠标停留时显示的文本，
width/height:图片大小，设置像素
链接标签
href：打开的目标。#:空链接，可点击，但无任何动作，表示暂时为空链接。可链接html文档、视频、图片等
target：在哪里打开目标。_self/_blank/_parent -- 默认为self
注释标签：
路径
相对路径：
绝对路径：可以相对于根目录的路径。
锚点定位
用于实现在当前页面内跳转。跳转到指定的标签
实现两步：
1、给标签添加一个唯一的id
2、在href指定跳转目标为#id。（加#是为了将id转换为标签的id，而不是普通的文件名目录，以处理识别错误的问题）。
base标签
用于给所有的URL提供缺省的基本路径、打开(target=?）方式。
适用于：<a>、<img>、<link>、<form>等
即提供缺省值，以减少代码编写量。如果不想用缺省的，就需要用代码明确指定具体值。
pre标签
预格式化文本，按照原来的写法，保留其中的空格和换行符，而不是自动跳过。
用得较少。
网友评论