前端学习记录 HTML（1）

最新推荐文章于 2024-06-21 16:29:17 发布

Kykneion asma

最新推荐文章于 2024-06-21 16:29:17 发布

阅读量144

点赞数 1

分类专栏：学习记录文章标签： html

本文链接：https://blog.csdn.net/AIszry/article/details/118659199

版权

学习记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

开始记录自己学习前端历程，这是第一个脚印。

暂定的学习路线是从HTML到HTML5、CSS，通过做静态页面巩固基础知识；再学习JS，打好JS的基础，然后接触JQuery，随后通过Ajax了解前后端交互，再进行深度学习，最后学习Vue和React框架，过程中不断以项目实战练习。

1.1 认识网页和HTML

大家都比较熟悉网站，而网站则是由一个个网页组成，网页包括文字、图片、链接、音乐、视频等元素，通常我们看到的网页都是以htm、html结尾的文件，俗称HTML文件。

全拼：HTML(hyper text markup language) HTML：超文本标记语言--(标签语言）

网页由网页元素组成，利用html标签描述出来，通过浏览器解析给用户。

前端人员开发--->浏览器渲染--->用户使用。

1.2 浏览器

工欲善其事必先利其器，浏览器是编程的重要伙伴，一个合格的程序员电脑上都应该有以下几款浏览器：

谷歌（chrome，占用世界上一半的浏览器市场份额），火狐（Firefox），Oprah，edge。

不同浏览器的本质区别在于内核，或者说渲染引擎；

IE - - Trident

Firefox - - Gecko

苹果 - - webkit

chrome/opera - - blink（blink是webkit的分支）

国产浏览器一般用webkit或blink。

1.3 web标准

web标准由万维网（w3C）制定：

浏览器的不同造成排版、文字的差异，需要统一标准；
web标准由结构、表现、行为三部分组成；

结构：对于网页元素进行整理、分类--html；

表现：设置网页元素的外观样式--css；

行为：网页模型的定义与交互--js；

结构、样式、行为相分离。

1.4 标签规范

一、所有标签都包含“<”“>”并且大部分成对出现（双标签）。双标签关系有两种，

1）包含关系(父子关系）：如

<head>

</head>

2）并列关系：如<head> </head>和<body> </body>；

小部分单个出现（单标签）如：<br>。

二、基本结构标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html> 意为：当前页面采用HTML5版本来显示页面。

文档类型声明标签，告诉浏览器使用的是哪一个HTML版本，居于代码最开头，不是HTML标签，而是文档类型声明标签;

<html lang="en"> Lang：定义当前文档显示的语言（不影响显示）‘en’为英语,'zh-CN’为中文,

UTF-8（万国码：基本包括全世界所有需要用到的字符）是字符集的一种。

必须要写，不写会乱码

<html></html> （根标签）

<title></title> （文档标题）

<head></head> (文档头部）

<body></body> （文档主体）

1.5 常用文本标签

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

共有6个等级1-6（由大到小）

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

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

加了标题标签，字体会更粗更大（独占一行）。

2）段落标签<p></p>

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

标签语义：把内容分为不同的段落。

段落中，会根据浏览器窗口大小自动换行，段落与段落中间有较大空隙。

3）换行标签<br />（单标签）

br-->break,换行，换行后空隙较小。

4）粗体

<strong></strong>或<b></b> 更推荐<strong>,语义更强烈

5）斜体

<em></em>或<i></i> 更推荐<em></em>,语义更强烈

~~6）删除线~~

<del></del>或<s></s> 更推荐<del></del>,语义更强烈

7）下划线

<u></u>或<ins></ins> 更推荐<ins></ins,语义更强烈

1.6 <div>与<span>

<div>与<span>没有语义，他们是盒子，用来装内容，

成对出现，<div></div>与<span></span>；

div是division的缩写，意为分割分区；

span意为跨度，跨距。

<div>标签用来布局，但是一行只能放一个（大盒子）；

<span>标签一行可以放多个（小盒子）。

1.7 图像标签

使用<img>标签定义HTML中的图像。

<img src="图形URL"/>

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

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

所谓属性：简单来讲就是这个图像标签的特性。

alt-->替换文本，图像不能显示的文字。

title-->提示文本，鼠标放在图像上显示的文字。

width-->设置图像的宽度。

height-->设置图像的高度。（一般只修改一个，图像会等比例缩放）

border-->设置图像的边框粗细。

图像标签可以拥有多个属性，属性只能写在标签后面。

属性之间不分先后，属性与属性之间用空格分开

属性采取键值对的格式，，即key="value"的格式，属性="属性值"。

第一部分先到这里。

Kykneion asma

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习记录 HTML（1）

开始记录自己学习前端历程，这是第一个脚印。暂定的学习路线是从HTML到HTML5、CSS，通过做静态页面巩固基础知识；再学习JS，打好JS的基础，然后接触JQuery，随后通过Ajax了解前后端交互，再进行深度学习，最后学习Vue和React框架，过程中不断以项目实战练习。1.1 认识网页和HTML 大家都比较熟悉网站，而网站则是由一个个网页组成，网页包括文字、图片、链接、音乐、视频等元素，通常我们看到的网页都是以htm、html结尾的文件，俗称HTML文件。全拼：HTM...
复制链接

扫一扫