28节---------3月30日-----H5C3开端

i98.

已于 2022-06-04 11:46:26 修改

阅读量1.2k

点赞数

分类专栏： 33的前端之路文章标签： html5 css3

于 2022-03-29 23:00:30 首次发布

本文链接：https://blog.csdn.net/Z933143298/article/details/123834364

版权

33的前端之路专栏收录该内容

47 篇文章 1 订阅

订阅专栏

2022.3.29开始

k黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

网页

网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成。后缀常为.htm或.html，俗称为html文件。

HTML指的是超文本标记语言，标签语言是一套标记标签。

web标准的构成

结构：对网页元素进行分类整理（HTML）
表现：设置网页元素的板式，颜色，大小等外观（CSS）
行为：网页模型的定义及交互（JavaScript,简称JS）

标签分类

HTML标签都放在<>里，大多是成对出现
双标签：开始标签<html>，结束标签</html>
单标签：<br \>（少见）

标签关系

包含关系,比如:

<head>

<title></title>

</head>

并列关系，比如:

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

HTML基本结构标签

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

HTML页面也叫HTML文档。

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

具体结构例如：

<html>
	<head>
		<title>第一个页面</title>
	</head>
	<body>
		933143298
	</body>
</html>

VSCode

ctrl+n打开文件
输入！选择第一个，ctrl+_可以放大缩小
写内容
ctrl+s保存，注意后缀名html
右键在网页打开

<!DOCTYPE>文档类型声明标签

<!DOCTYPE html>是文本类型声明标签，不是html标签
告诉浏览器用什么版本的html来显示网页
常用形式为<!DOCTYPE html>
必须写到第一行

lang语言类型

用来定义当前文档显示的语言，是给浏览器看的
en 为英语，zh-CN为中文
无论定义什么语言，所有语言都可以使用

字符集（不写会乱码）

字符集是多个字符的集合，以便计算机可以识别和存储各种文字
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
charset常用的值有：GB2312（简体中文）BIG5（繁体中文）,GBK（简中+繁中）,UTF-8（万国码）如：<meta charset=" UTF-8"/>

HTML常用标签

标题标签

共六个等级<h1>--<h6>
h是head的缩写，意为标题
是双标签，如<h1> 我是一级标题 </h1>
标签语义：作为标题使用，并根据重要性递减
加了标题的文字会变的加粗，字号也依次变大
每个标题都独占一行

段落标签

格式例如例如：<p> 我是一个段落标签 </p>
标签语义：把文档分割为若干段落
文本在段落中会根据浏览器的窗口大小自动换行
段落和段落之间保有间隙

换行标签

标签语义将某段文本强制换行
是单标签<br />
br是break的缩写
只是简单地另起一行，与段落不同，不存在类似段落间的缝隙

文本格式化标签

标签语义：突出重要性
加粗 <strong></strong>或<b></b> 推荐使用<strong>
倾斜 <em></em> 或<i></i> 推荐使用<em>
删除线 <del></del>或<s></s> 推荐使用<del>
下划线 <ins></ins>或<u></u> 推荐使用<ins>

<div>和<span>标签

无标签语义，用来装内容
双标签，如：<div>这是头部</div>，<span>今日价格</span>
<div>标签用来布局，独占一行。大盒子
<span>标签用来布局，一行上可以多个<span>。小盒子

图像标签

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

如：<img src="图像的文件名”/>

单词image的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
其他属性如下：

src    图片路径，必须属性
alt    图像不能显示时出现的文字
title    鼠标放到图像上，显示的文字
width                          图像的宽度
height                         图像的高度
border                          图像的边框粗细

可以这样写

<img src="img.jpg" alt=“我是pink老师"/>

注意：

只修改高度或宽度，图片会按比例缩小，但是同时修改宽和高，则不会按照比例，会把图片变形
图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
属性采取键值对的格式，即 key= “value”的格式，属性=“属性值”。

路径

目录文件夹：普通文件夹，里面存放网页制作需要的素材
根目录：打开文件夹的第一层就是根目录
相对路径：以引用文件所在位置为参考基础而建立出的目录路径。即图片相对于html页面的位置。
- 符号用在文件夹和图片中间
- 图像文件位于HTML文件同一级无需符号
- 图像文件位于HTML文件上一级两者之间添加符号"../"
- 图像文件位于HTML文件下一级两者之间添加符号"/"
绝对路径：文件的绝对位置，通常从盘符开始
- 从盘符开始“D:\web\img\logo.gif”
- 完整的网络地址“http://www.itcast.cn/images/logo.gif”

超链接标签

语法格式： <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
两个属性的作用如下:
href 用于指定链接目标的url地址，必须属性
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

链接的分类

外部链接：例如 < a href="http:/ / www.baidu.com">百度</a >。
内部链接：网站内部页面之间的相互链接，不需要加http直接链接内部页面名称即可
- 例如 <a href="index.html">首页</a>。
空链接：如果当时没有确定链接目标时，如：<a href="#">首页</a >。
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接：可以快速定位到页面的某个位置
- 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
- 找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第2集介绍</h3>

i98.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
28节---------3月30日-----H5C3开端

网页网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成。后缀常为.htm或.html，俗称为html文件。HTML指的是超文本标记语言，标签语言是一套标记标签。web标准的构成结构：对网页元素进行分类整理（HTML）表现：设置网页元素的板式，颜色，大小等外观（CSS）行为：网页模型的定义及交互（JavaScript,简称JS）分类HTML标签都放在<>里，大多是成对出现双标签：开始标签<html>，结束标签</html&g
复制链接

扫一扫