HTML5学习笔记

HTML5学习笔记

概念

网页是构成网站的基本元素；

网站是相关网页的集合；

网页是构成网站的基本元素，他是由图片链接、文字、声音视频等元素组成；通常看到的网页以HTML为后缀，因此俗称HTML文件；

定义：HTML是超文本标记语言Hyper Text Markup Language，他是用来描述网页的一种语言；

HTML不是一种编程语言，而是一种标记语言markup language；

标记语言有一套标记标签markup tag；

超文本有2层含义：

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

2、它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）；

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

Web标准（重点）

主要构成包括3个方面：结构（Structure）、表现（Presentation）行为（Behavior）；

结构	用于对网页元素进行整理和分类，现阶段主要是HTML；
表现	用于设置网页元素的版式颜色、大小等外观样式，主要指CSS；
行为	指网页模型定义及交互，现阶段主要学的是JavaScript；

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

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中；

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

基础

基本语法：

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

HTML标签通常是成对出现的叫双标签；第一个标签是开始标签，第二个是结束标签；

双标签：<head></head>；单标签：<br/>;

标签之间的关系有2种：包含关系（嵌套）、并列关系；

HTML基本框架（骨架标签）：

<html lang=”en”>//HTML标签，页面中最大的标签，也称为根标签

<head>//文档的头部，在head标签中，必须要设置的标签是title

<title>标题</title>//文档的标题，让页面拥有一个属于自己的网页标题

</head>

<body>//文档的主体，包含文档的所有内容，页面内容基本都放到body中

用VSCode创建的第一个HTML页面

</body>

</html>

必写标签：

<!DOCTYPE html>文档类型生命标签，必须位于文档第一行，不属于html；

<html lang=”en”>或者zh-CN，表示文档语言是中文的还是英文的；

语言标签对文档内容本身没有什么作用，但是对浏览器和搜索引擎有指导意义；

标签

标题标签<h1>一级标题</h1>作为标题使用，

一行显示，从h1-h6,重要性递减，大小递减；

段落标签<p></p>全称 paragraph段落间距比较大；

换行标签<br/> 全称 break换行仅仅是另起一样，没有段落那么大的段间距；

文本格式化标签：加粗、倾斜、删除线、下划线；

<strong>加粗</strong><b>加粗</b> 推荐第一个，语义更加强烈

<em>倾斜</em><i>倾斜</i> 推荐第一个，语义更加强烈

<del>删除线</del><s>删除线</s> 推荐第一个，语义更加强烈

<ins>下划线</ins><u>下划线</u> 推荐第一个，语义更加强烈

<div>和<span>是没有语义的，他就是一个盒子，用来装内容，用来布局网页；

div是大盒子，单独占一行；span是小盒子，一行可以放多个；

图像标签（单标签）：<img src=”url”/> img的意思是image

n src属性（img标签必须写一个）；用于指定图片的路径和文件名；

n alt属性表示，图片显示不出来的时候，就显示的替换文本；

n title属性表示，鼠标放到图片上时的提示信息；

n height、width表示图片的高度和宽度（px）；

n border属性表示为图片设定边框；

各个属性之间顺序部分先后，必须用空格隔开；

属性用键值对形式，值必须用双引号；

超链接标签<a href=””></a>，a是anchor锚点；

href属性为必写属性，表示链接的地址；

target表示是在当前窗口打开_self，还是在新窗口打开_blank；

链接分为内部链接（本网站内的其他页面）和外部链接（外部网站）；

#表示空链接；

下载链接：如果链接href是一个文件，就是一个下载链接；

图片链接：将图片标签img放到a标签之间即可；

锚点链接：快速定位到当前页面的特定位置；

<a href=”#two”>锚点链接</a> <h1 id=”two”>要跳转到的位置</h1>

注释标签<!– –>

特殊字符：空格；你好<>¥

表格

table表示表格；

tr表示行row，必须位于table内；

td表示单元格table data必须位于tr内；

th是表头单元格，必须位于tr内；（文字加粗、文字居中）

align =”center”表格的对齐方式left、right、center；

border表格边框1或””;

cellpadding单元格内容和单元格边框间的距离；

cellspacing表示各个单元格之间的举例；

</table>

<thead>表示表头区域，放在table内，将表头行和单元格的内容放入；

<tbody>表示表体区域，放在table内，将表体行和单元格内容放入；

跨行合并：rowspan=”合并单元格数量”，合并代码写到最上面的单元格内；

跨列合并：colspan=”合并单元格数量”，合并代码写到最左侧的单元格内；

前端3大核心技术

要做WEB前端，就需要知道前端到底是什么，需要学习那些知识；前端至少要懂的三个部分：HTML，CSS，JavaScript（简称JS），那首先先明确这三个概念：

HTML负责结构，网页想要表达的内容由html书写；
CSS负责样式，网页的美与丑由它来控制；
JS负责交互，用户和网页产生的互动由它来控制。

本文链接：https://www.cnblogs.com/zhangdezhang/p/17054529.html

HTML5学习笔记

HTML5学习笔记的更多相关文章

随机推荐

热门专题

目录导航