前端学习打卡Day1-2

最新推荐文章于 2024-06-23 03:39:41 发布

Caramel Macchiato*

最新推荐文章于 2024-06-23 03:39:41 发布

阅读量144

点赞数 1

文章标签：学习 html Powered by 金山文档

本文链接：https://blog.csdn.net/m0_74363523/article/details/128632950

版权

学习路线

HTML5基础

主要学习最常见没有兼容性的HTML标签。

CSS3基础

主要学习最常见没有兼容性的CSS样式，利用前面学习的标签完成传统PC端网页布局。

综合案例：传统企业网页制作。

H5C3提高

学习HTML5新增的标签、CSS3样式。有一定的兼容性，可以与未来更好的接轨。

项目-品优购电商网站

综合以前的学习知识点，贴近于实际开发，制作品优购电商网站，完成首页、列表页、注册页制作。

目的：学习网页制作实际开发制作流程规范。

HTML

2.常用浏览器

浏览器是网页显示、运行的平台。

常用浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera，其中谷歌浏览器市场所占份额最多。

浏览器内核（渲染引擎）：读取网页内容，整理讯息，计算网页的显示方式并且显示页面。

IE——Trident Firefox——Gecko Safari——Webkit Chrome/Opera——Blink

（国内浏览器一般采用Webkit/Blink内核）

3.Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

W3C（万维网联盟）是国际最著名的标准化组织

3.1为什么需要Web标准

如果没有Web标准：

不同浏览器显示页面或排版有些许差异。

开发者需要进行多版本开发。

遵循Web标准的优点：

开发人写出的页面更标准统一。

Web的发展前景更加广阔。

内容能被更广泛的设备访问，更容易被搜索引擎搜索。

降低网站流量费用。

使网站易于维护。

提高页面浏览速度。

3.2Web标准的构成

Web标准主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

（身体、外观装饰、行为动作，相比之下结构最重要）

结构：结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。

表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS。

行为：行为指网页模型的定义及交互的编写，现阶段主要学的是Javascript。

Web标准提出的最佳体验方案：结构、样式、行为相分离。

（结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中）

HTML标签

目标

能够说出标签书写的注意事项

能够写出HTML骨架标签

能够写出超链接标签

能够写出图片标签并说出alt和title的区别

能够说出相对路径的三种形式

1.HTML语法规范

1.1标签

HTML标签是由尖括号包围的关键词，例如<html></html>。

大部分HTML标签都是成对出现的，称为双标签（<html>和</html>)。

（标签对中的第一个标签是开始标签，第二个标签是结束标签）

某些特殊的必须是单个的标签称为单标签（<br/>)，但数量极少。

1.2标签关系

双标签关系可分为两类：包含关系与并列关系。

包含关系（嵌套）

<head>
   <title></title>
</head>

并列关系

<head></head>
<body></body>

2.HTML基本结构规范

2.1第一个HTML网页

每一个网页都会有一个基本的结构标签（又称骨架标签），页面的内容在这些基本标签上书写。

PS：HTML页面也称HTML文档，HTML文档的后缀名必须是.html或.htm。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称为根标签
<head></head>	文档的头部	在head标签中我们必须要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档所有内容，文档内容基本都放到body里

<html>
  <head>
     <title>我的第一个页面</title>
  </head>
  <body>
    语言是一种器官
  </body>
</html>

2.2基本结构标签总结

3.网页开发工具

1.工具种类

Dreamweaver CS6

Sublime Text

WebStorm

HBuilder

VSCode（首选）

2.VSCode的使用

之后再点击open in browser即可打开网页

双击打开软件

新建文件（ctrl+N）

保存（ctrl+S），注意要保存为.html文件

Ctrl+加号键，Ctrl+减号键可以放大缩小视图

生成页面骨架结构（输入！+Tab）

单击鼠标右键，在弹出出口中点击“Open In Default Browser”

3.VSCode工具生成骨架标签新增代码

3.1文档类型声明标签（不属于HTML标签）

<!DOCTYPE>文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>

这句代码的意思：当前页面采用HTML5版本来显示网页

3.2lang语言种类

用来定义当前文档显示的语言。

en定义语言为英语

zh-CN定义语言为中文

（在实际的文档显示中，定义为en的文档也可以显示中文，定义为zh-CN的文档也可以显示英文）

3.3字符集

字符集（Character set）是多个字符的集合。以便计算机能识别和储存多种文字。

在<head>标签中，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8"/>

charset常用的值有：GB2312（简体中文）、BIG5（繁体中文）、GBK（简+繁）和UTF-8，其中UTF-8又称万国码，包含世界所有国家需要用到的字符。

PS：上方代码是必须要写的，否则可能引起乱码。一般情况统一使用“UTF-8”。

4.HTML常用标签

4.1标签语义

学习标签的重点在于记住标签的语义，即标签是用来干嘛的。

根据标签的语义，再合适的地方给予一个合适的标签，可以让页面结构更清晰。

4.2标题标签<h1>-<h6>（很重要）

为了使网站更具语义，页面中会用到标题标签。HTML提供了6个等级的网页标题，即<h1>-<h6>

<h1>我是一级标题</h1>

h是head的缩写，意为头部、标题。

标签语义：作为标题使用，并且依据重要性递减。

特点：

加了标题的文字会变粗，字号会变大。

一个标题占一行。

4.3段落和换行标签（重要）

网页中要把文字有条理的显示出来，需要将这些文字分段显示。HTML标签中，<p>标签用于定义段落，可以将网页分为若干段落。

<p>我是一个段落标签<p>

p是单词paragraph的缩写，意为段落。

标签语义：可以把HTML文档分割为若干段落。

特点：

文本在一个段落中会根据浏览器窗口大小自动换行。

段落和段落之间保有空隙。

在HTML中，一个段落的文字会从左往右依次排列，直到浏览器窗口的右端才会自动换行。如果希望某段文本强制执行换行显示，就需要使用换行标签<br/>。

<br/>

单词break的缩写，意为打断、换行。

标签语义：强制执行。

特点：

<br/>是单个标签。

<br/>标签只是简单的开始新的一行，跟段落不不一样，段落之间有垂直间距。

4.4文本格式化标签

网页中有时需要为文字设置粗体、斜体和下划线等效果，这时需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字重要。

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong>标签加粗，语义更强烈
倾斜	<em></em>或者<i></i>	更推荐使用<em>标签加粗，语义更强烈
删除线	<del></del>或者<s></s>	更推荐使用<del>标签加粗，语义更强烈
下划线	<ins></ins>或者<u><u/>	更推荐使用<ins>标签加粗，语义更强烈

4.5<div>和<span>标签

<div>和<span>是没有语义的，是用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

div是division的缩写，表示分割、分区；span表示跨度、跨距。

特点：

<div>标签用来布局，但是一行只能放一个<div>。大盒子（允许自动换行）

<span>标签用来布局，一行上可以多个<span>。小盒子

4.6图像标签和路径（重点）

- 图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。(单标签)

<img src="图像URL"/>

单词image的缩写，意为图像。

src是<img>标签的必须属性，用于指定图像文件的路径和文件名。

（属性：属于这个图像标签的特性）

图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示文字
title	文本	提示文本。鼠标放到图像上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细