【前端入门】HTML5学习入门笔记_01

最新推荐文章于 2024-07-24 14:22:29 发布

WKJavailable.

最新推荐文章于 2024-07-24 14:22:29 发布

阅读量145

点赞数

分类专栏：前端技术学习笔记文章标签： html html5

本文链接：https://blog.csdn.net/weixin_47556302/article/details/112880425

版权

前端技术同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

学习笔记

3 篇文章 0 订阅

订阅专栏

一、基础概念

1.1 网页

网站是网页的集合

网页是网站中的一个页面，通常是HTML格式的文件

网页主要是有图片、文字、多媒体、链接等元素组成，通常以 .htm或者.html后缀结尾的文件，俗称为HTML文件

1.2 什么是HTML

HTML指的是超文本标记语言(Hyper Text Markup Language) 是一种用来描述网页的语言,非编程语言，而是一种标记语言，标记语言是一套标记标签。

超文本:可以加入图片等多媒体(超越文本限制)，可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)

1.3 网页的形成

网页是由网页元素组成，这些元素是由html标签描述，然后通过浏览器解析给用户

前端开发代码 -> 浏览器解析渲染代码 -> 生成最后的web页面

1.4 常用浏览器

FireFox

Chrome

Safari

Opera

浏览器内核: 负责读取网页内容，整理讯息，计算网页显示方式并显示页面

1.5 Web标准

W3C组织指定的一系列标准的集合

构成

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的板式、颜色、大小等外观格式，目前主要指CSS
行为	行为是指网页模型的定义以及交互的编写，现阶段主要学的是javascript

Web标准提出的最佳方案:结构、表现、行为相互分离

理解:结构写到HTML文件中，表现写到CSS文件中，行为写到javascript文件中

二、HTML标签

2.1 语法规范

标签

是由尖括号包围的关键词
通常成对出现，也有特殊的单标签

开始标签/结束标签(双标签)

<html></html>

单标签

<br />

标签关系

包含关系(父子关系)
```
<head>
    <title></title>
</head>
```
并列关系(兄弟关系)
```
<head></head>
<body></body>
```

2.2 基本结构标签

结构标签，也称为骨架标签，页面内容都在基本标签上书写，HTML页面也成为HTML文档

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        光荣是因为平淡，艰巨是因为漫长.
    </body>
</html>

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

HTML文档的后缀名必须是.html或.htm

2.3 VS CODE来写HTML基本操作

双击打开
新建（ctrl+N）
保存(ctrl+s) ,后缀为.html
输入 ! 生成html骨架

三、网页开发工具

3.1 文档类型声明标签

<!DOCTYPE html>
//<!DOCTYPE> 文档类型声明，当前页面采取的是HTML5版本来显示网页
必须写到第一行，但并不属于HTML标签，目的是告诉浏览器用啥版本的文档标签解析

3.2 lang 语言种类

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

<html lang="en">

提示浏览器用什么语言

3.3 字符集

    <meta charset="UTF-8">

必须要写的代码，否则可能引起乱码，一般情况下统一使用UTF-

8编码

四、 HTML常用标签

4.1 标签语义

技巧:记住每个标签的含义，根据标签的语义，在合适的地方给一个合适的标签，可以让页面结构更清晰

4.2 标题标签h1-h6(重要)

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

    <h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

4.3 段落和换行标签(重要)

<p> 包含的文字作为一段 </p>

paragraph 段落标签提示换行

<br/>

break 强制换行标签强制另起一行单标签

4.4 文本格式化标签

粗体

斜体

下划线

    我是<strong>加粗标签</strong>
    我是<b>加粗标签</b>
    我是<em>倾斜标签</em>
    我是<i>倾斜标签</i>
    我是<del>删除线标签</del>
    我是<s>删除线标签</s>
    我是<ins>下划线标签</ins>
    我是<u>下划线标签</u>

推荐使用强语义的标签(复杂一些的那个)

4.5 div和span标签

无语义的标签，用于装内容

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

division 分区分隔

span 跨度跨距

特点

div用于布局一行只能放一个div，大盒子
span用于布局，一行可以多个span，小盒子

4.6 图像标签和路径

1.图像标签

单标签！可以有多个属性写在标签名的后面

<img src = "图像URL" />

image 图像 src是必须属性用于放路径，用于指定图像文件的路径和文件名

属性采取k=v的形式,不分顺序

alt 替换属性 :显示不出来的时候提示的文本

title 提示属性:鼠标挪到图片上提示的文本

width:图像的宽度单位是像素

height:图像的高度单位是像素

**border:**给图像设定边框

    <h4>图像标签的使用:</h4>
    <img src="index.png"/>
    <h4>alt:替换文本,图片显示不出来的时候替换的文本</h4>
    <img src="index1.png" alt="图片裂开了"/>
    <h4>title:提示文本，鼠标放到图片上提示的文字</h4>
    <img src="index.png" alt="图片裂开了" title = "html5"/>
    <h4>width:图像的宽度 单位是像素</h4>
    <img src="index.png" alt="图片裂开了" title = "html5" width = "500"/>
    <h4>height:图像的高度 单位是像素</h4>
    <img src="index.png" alt="图片裂开了" title = "html5" height = "100"/>
    <h4>border:给图像设定边框</h4>
    <img src="index.png" alt="图片裂开了" title = "html5" height = "400" border = "15"/>

2. 路径

目录文件夹: 存放页面相关素材的普通文件夹
根目录:目录文件夹的第一层

相对路径:以html文件所在位置为参考而建立的目录路径 /下一级路径 …/上一级路径
绝对路径:通常从盘符开始的完整路径

4.7 超链接标签(重点)

1.语法格式

<a href = "跳转目标" target= "目标窗口跳转方式">文本或图像</a>

anchor 锚

属性	作用
href	指定跳转连接目标的url地址，（必须属性）当为标签应用href属性使，就有了超链接的功能
target	指定链接页面的打开方式，其中self为默认值，blank为在新窗口中打开的方式

2.链接的分类：

外部链接:外部的网站链接 www.baidu.com
内部链接:网站内部的页面相互之间的链接 index.html
空链接:#
下载链接:文件
网页元素链接:比如给图片加链接
锚点链接:定位到页面中的某个位置
- 在链接文本的href属性中设置属性值为#名字的形式，如
```
<a href = "#two">第二集</a>
```
- 找到目标位置的标签，在标签里设置一个id属性 id=名字如:
```
<h3 id = "two">第二集介绍</h3>
```

    <h4>1.外部链接</h4>
    <a href="https://www.tencent.com/zh-cn" target="_blank">腾讯</a>
    target 打开窗口的方式 默认值为_self当前窗口打开页面 _blank新窗口打开页面
    <h4>2.内部链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>
    <h4>3.空链接 #</h4>
    <a href="#" target="_blank">公司地址</a>
    <h4>4.下载地址:地址链接的是文件 </h4>
    <a href="index.zip" target="_blank">下载文件</a>
    <h4>5.网页元素的链接:比如给图片加链接 </h4>
    <a href="http://baidu.com" target="_blank"><img src="index.png"/></a>

4.8 注释标签与特殊字符(转义)

    <!--我是注释 快捷键ctrl+/ -->
    <!-- 啊这 -->

注释，给自己和同事看的，增强可读性

特殊字符

特殊字符	描述	转义代码
	空格	&nbsp；
<	小于	&lt；
>	大于	&gt；
&	和	&amp；
￥	人民币	&yen；
©	版权	&copy；
®	注册商标	&reg；
°	摄氏度	&deg；
±	正负号	&plusmn；
×	乘	&times；
÷	除	&divide；
²	平方	&sup2；
³	立方	&sup3；

重点:空格、大于、小于

WKJavailable.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端入门】HTML5学习入门笔记_01

文章目录一、基础概念1.1 网页1.2 什么是HTML1.3 网页的形成1.4 常用浏览器1.5 Web标准二、HTML标签2.1 语法规范2.2 基本结构标签2.3 VS CODE来写HTML基本操作三、网页开发工具3.1 文档类型声明标签3.2 lang 语言种类3.3 字符集四、 HTML常用标签4.1 标签语义4.2 标题标签h1-h6(重要)4.3 段落和换行标签(重要)4.4 文本格式化标签4.5 div和span标签4.6 图像标签和路径4.7 超链接标签(重点)4.8 注释标签与特
复制链接

扫一扫