HTML5+CSS3学习 DAY1

最新推荐文章于 2024-07-24 16:51:29 发布

一丢丢can

最新推荐文章于 2024-07-24 16:51:29 发布

阅读量312

点赞数

分类专栏： Html5+css3 文章标签：学习

本文链接：https://blog.csdn.net/weixin_47527002/article/details/127219790

版权

Html5+css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.HTML简介：网页，常用浏览器，web标准

学习目标：

（1）能够说出网页的基本组成

（2）能够说出什么是HTML

（3）能够说出常用的浏览器

（4）能够说出Web标准的三大组成部分

1.网页

网站：网页的集合

网页：通常是html格式的文件，由图片、链接、文字、声音、视频等元素构成

HTML：超文本语言，不是编程语言，而是一种标记语言

所谓超文本有两层含义：

1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）

2.它可以从一个文件跳转到另一个文件（超级链接文本）

网页的形成：前端人员开发代码------浏览器显示代码-------生成最后的web画面

2.常用浏览器

浏览器是网页显示运行的平台。常用浏览器有：IE、火狐、谷歌（Chrome）、Safari和Opera等

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

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	火狐浏览器
Safari	Webkit	苹果浏览器
chrome/Opera	Blink	chrome/Opera浏览器内核。Blink是WebKit的分支

目前国内浏览器一般使用Webkit/Blink内核，如360，UC，QQ，搜狗等。

3.Web标准

Web标准：一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织

为什么需要web标准？

浏览器不同，他们显示页面或者排版物就有些许差异

web标准的构成：结构、表现、行为

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS
行为	交互效果，现阶段主要学的是Javascript

Web标准提出的最佳体验方案：结构，演示，行为相分离

相比较而言，三者中结构最重要

2.HTML标签

目标：

（1）标签的书写注意规范

（2）HTML骨架标签

（3）超链接标签

（4）图片标签并说出alt和title的区别

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

1.HTML语法规范

HTML标签是由尖括号包围的关键词，通常是成对出现的，成为双标签，有些特殊的标签是单个标签，例如<br />，称为单标签。

双标签关系可以分为两类：包含关系和并列关系

包含关系
<head>
    <title></title>
    <body></body>     兄弟关系
</head>

2.HTML基本结构标签

<html>#根标签
    <head>#文档的头部
         <title>#文档的标题
         </title>
    </head>
    <body>#文档的主体

    </body>
</html>

3.开发工具

VSCode

安装插件

切记一定要重启软件

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

<!DOCTYPE html>//当前页面采取的是HTML5版本来显示网页，声明位于文档的最开始

lang语言种类：en定义语言为英语，zh-CN定义语言为中文

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

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

4.HTML常用标签

标签语义：标签的含义，即这个标签用来干嘛的

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更加清晰。

1.标题标签<h1>-<h6>

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

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

特点：加了标题的文字会变得加粗，字号也会依次变大，一个标题独占一行

2.段落标签和换行标签

<p>标签用于定义段落（paragraph）

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

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

特点：文本在一个段落中会根据浏览器窗口的大小自动换行，段落和段落之间会保有空隙

换行标签<br />

标签语义：强制换行

特点：<br />是个单标签，跟段落不一样，段落之间会插入一些垂直的间距

3.文本格式化标签

粗体，斜体或下划线等效果

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

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