HTML学习笔记02

霄雨Blog

已于 2022-07-20 07:04:22 修改

阅读量202

点赞数

文章标签： html vscode

于 2022-01-15 01:31:01 首次发布

本文链接：https://blog.csdn.net/weixin_41225951/article/details/122505362

版权

title: HTML02
date: 2022-01-14 14:47:04
tags: HTML

HTML工具

vscode使用

！+tab即可生成html全框架
在这里插入图片描述

配置liveServer

插件liveServer，可以随时更新看到上线效果
在这里插入图片描述

自动保存设置

文件->首选项->设置->常用设置
在这里插入图片描述

简单输入标签

p+tab-><p></p>

HTML语法

实体

网页中编写的多个空格默认情况下会被浏览器解析为一个空格。
在这里插入图片描述

一些情况不能直接写：比如连续空格或者字母两侧的大于和小于号
比如a小于b大于c，a<b>c, 这种情况<b>会被认为是标签。
所以当我们想要表示这些东西时，我们用实体来表示。

实体语法

&实体的名字；

<!--
&nbsp; 空格
&gt;大于号
&lt;小于号
&copy;版权
其他实体可以直接查询W3cschool
-->

在这里插入图片描述

meta标签

meta设置网页的元数据，是一个自结束标签。

The <meta> HTML element represents metadata that cannot be
represented by other HTML meta-related elements, like <base>, <link>, 
<script>, <style> or <title>.

charset 指定网页字符集

name 指定数据名称

content 指定数据的内容

<meta name="keywords" content="html5,前端,CSS3">
<!--设置了一个元数据叫keywords，它的值是hTML5,前端,CSS3。-->

keywords表示了网站的关键字。比如搜索keywords：购物，会出现jd，tmall等购物网站，因为他们设置的keywords为购物。可以设置多个关键字，中间用逗号隔开。

<meta name="description" content="This is a good website">

Description指定网站的描述，会在搜索引擎的搜索结果详情部分显示

标签的内容会作为搜索结果上的文字显示

Eg.
在这里插入图片描述

http-equiv http操作，比如重定向

<meta http-equiv="refresh" content="3;url=http://www.baidu.com">

将页面重定向到另一个网站，3是3s，分号后是跳转网页。

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="html5,前端,CSS3">
    <meta name="description" content="This is a good website">
    <meta http-equiv="refresh" content="3;url=http://www.baidu.com">
    <title>Meta</title>
</head>
<body>
    <p>hahha</p>
</body>
</html>

语义化标签

CSS完成对样式的设定，所以在html中，我们应该关注的是标签的语义而不是它的样式。

标题标签

<h1>-<h6>

六级标题 h1 h2 h3…h6, h1-h6重要性递减，h1的重要性仅次于title，一般情况下一个页面只有一个h1。一般情况下使用h1~h3, h4~h6就很少用了。

在页面中独占一行的元素我们称作块元素，block element。标题标签就是块元素。

<hgroup>
	<h1>回乡偶书二首</h1>
	<h2>其一</h2>
</hgroup>

hgroup用来为标题分组，可以将一组相关标题同时放入到hgroup中

段落标签

<p></p>

p也是各块元素

语音语调加重标签

<p>今天天气<em>真</em>不错</p>

em表语音语调的强调，em不是块元素，是行内元素。

我们将不会独占一行的称为行内元素，inline element。

重要性标签

<!--strong表示内容重要-->
        <p>你今天必须<strong>完成作业</strong>！</p>

strong表示内容重要

引用

blockquote表示引用别人说过的话，长引用会换行,是block element。q是短引用，不换行，是inline element

		<p>
            鲁迅说：
            <blockquote>这句话我从没说过</blockquote>
        </p>
        <p>
            子曰<q>学而时习之</q>

换行

<br>

块元素

在网页中一般用块元素对网页进行布局，就比如京东购物页面，就是一块一块的。行内元素主要用来包裹文字。

一般会在块元素中放行内元素和块元素，不会在行内元素中放块元素。

p元素中不能放任何的块元素。

浏览器在解析网页的时候会自动对网页中不符合规范的内容进行修正。比如标签写在了根元素的外部，p元素中嵌套了块元素，根元素中出现了除head和body以外的子元素。纠正的是写到内存之后的部分。怎么看？点检查->element

结构化语义标签布局标签

		<!--网页头部,可以有很多-->
        <header></header>
        <!--网页主体，头部向下，一个页面中只有一个-->
        <main></main>
        <!--网页底部-->
     	<footer></footer>
		<!--导航-->
		<nav></nav>
		<!--和主体相关但不属于主体的部分,主要表示的是侧边栏-->
		<aside></aside>
		<!--文章-->
		<article></article>
		<!--表示一个独立的区块，上面的标签都不合适表示的时候，可以用section表示，比如一个很大的header里面分三个块，块可以用section表示-->
		<section></section>
		<!--表示一个区块，这个最重要.上面的所有都可以用div来表示-->
		<div></div>

行内元素

主要用来包裹文字

	<!--行内元素，没有任何的语义，一般用于在网页中选中文字-->
	<span></span>

主要就是div和span

列表

无序列表

用ul标签来表示列表，用li标签来表示列表项，经常用ul标签来表示导航菜单。

	<ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

有序列表

<ol>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>

定义列表

用dl标签来表示列表，用li标签来表示列表项，经常用dl标签来表示下拉菜单。

	<dl>
        <dt>结构</dt><!--定义列表，下拉菜单-->
        <dd>结构表示网页的结构，结构用来定义网页中哪里是标题</dd>
        <dd>结构表示网页的结构，结构用来定义网页中哪里是标题</dd>
        <dd>结构表示网页的结构，结构用来定义网页中哪里是标题</dd>
        <dd>结构表示网页的结构，结构用来定义网页中哪里是标题</dd>
    </dl>

列表之间可以相互嵌套

 <ul>
        <li>一</li>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </ul>

超链接

可以让我们从一个页面跳转到新的页面或者当前页面某个位置。

使用a标签来进行定义

a标签是行内元素，但是可以嵌套除它自身之外的任何元素，块元素也可以。

超链接属性 href=，指定往哪里跳转。它的值可以是外部网站地址，也可以是内部页面，同一个目录下可以直接写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com">超链接</a>
    <br>
    <a href="http://sylviaxiaoyu.github.io">xiaoyuBlog</a>
    <a href="semantic label02.html">超链接</a>
    <a>超链接</a>
</body>
</html>

相对路径

绝对路径：www.baidu.com或者同一文件夹中的文件

相对路径：当我们跳转到一个服务器内部的页面时，我们一般都会使用相对路径。用“./ …/”表示，如果不写这些符号，会默认就是它。

./表示当前文件所在的目录，当我们用./表示路径的时候，默认会去该html页面所在的目录下寻找，不写默认就是./。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <a href="./meta.html">相对路径跳转</a><!--meta.html在上一级目录里-->
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QWypzhun-1642180704049)(C:\Users\dxymo\AppData\Roaming\Typora\typora-user-images\image-20220114222508409.png)]

<a href="./meta.html">相对路径跳转</a>
    <br>
    <!--父文件夹跳转-->
    <a href="../meta.html">相对路径跳转2</a>
    <br>
    <!--子文件夹跳转-->
    <a href="./2.1/target1.html">相对路径跳转3</a>
    <br>
    <!--兄弟文件夹跳转-->
    <a href="../01/target3.html">相对路径跳转4</a>

点击超链接后，打开新标签页

target属性，用来指定超链接打开位置

_self 默认值，在当前页面

_blank 在一个新的页面中打开超链接，可能会打开过多窗口

<a href="http://www.baidu.com" target="_blank">新标签页跳转</a>

回到顶部

回到顶部 href=“#”

<a href="#">回到顶部</a>

id属性

每一个标签都可以添加一个id属性，是元素的唯一标识。页面中不能出现重复的id。

id必须是数字开头

如果我们想回到底部，可以指定回到顶部的标签为 id=“bottom”。

<a href="#bottom">去到底部</a>
<a id="bottom" href="#">去到顶部</a>

占位符

在开发中可以将#作为超链接路径的占位符使用，如果没确定超链接作用到哪里，可以用#作为占位符。

也可以用”javascript:;“作为占位符，这样点击超链接什么都不会发生。

图片标签

图片标签的作用是向当前页面中引入一个外部图片。使用img标签来进行引用，img标签是一个自结束标签。

属性：src，src是路径，可以是相对路径也可以是绝对路径

内部：

 <img src="./img/01.jpeg">

外部：

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F2006%2F12%2Fc4%2F213984510_1591923598066_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644765308&t=2e0c751dacba109a2293aa4d1c9ee3fb">

属于替换元素，介于块元素和行内元素之间，具有两种元素的特点

属性：alt，alt是对图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载的时候显示

搜索引擎会根据alt的内容来进行识别，就是说在google图片搜索引擎输入关键词时，会将关键词与图片的alt来进行关联

也有可能会有盲人阅读器用到alt

<img src="./im/01.jpeg" alt="squirrel">

属性：width 宽度（单位是像素）height 高度

如果宽度和高度中，只修改了一个，另一个会等比例缩放

注意一般情况下，在PC端不建议修改图片大小，需要多大的图片就裁多大

在移动端经常需要对图片进行缩放，主要是大图缩小

图片格式

原则：效果一样，用小的。效果不一样，用好的。

jpeg：支持颜色多，不支持透明和动图，一般用来显示照片

gif：支持颜色少，支持简单透明和动图，适合颜色单一的图片和动图

png：支持颜色丰富，支持复杂透明，不支持动图，适合颜色丰富，复杂透明图片（专为网页而生）

webp：是谷歌新推出的专门用来表示网页中图片的格式，具备了其他图片的格式所有优点，而且文件还特别小

缺点：兼容性比较差

base64：将图片使用base64进行编码，这样可以直接将图片转换为字符，以字符形式转换为图片。

场景：需要和网页加载的图片会使用。（因为超链接会再向服务器进行申请）

内联框架

iframe用于向当前页面中引入一个其他页面

<iframe src="http://Slyviaxiaoyu.github.io" width = 1000 hright = "1000" frameborder="0"></iframe>

frameborder是指是否有边框

内联框架不会被搜索引擎检索，所以一般不会使用

音视频播放

音视频引入的时候是不允许用户自己开始停止的，如果让用户操作，需要加一个属性controls

audio

audio 是引入一个音频

controls 是否允许用户控制播放，controls是一个没有值的属性。

autoplay 音频文件是否自动播放，但是目前来讲大部分浏览器都不会让音频文件自动播放

loop 是否循环

<audio src="source/福禄寿FloruitShow - 我用什么把你留住.mp3" controls autoplay loop></audio>

IE8以下的浏览器都不支持

如果我们想要IE8以下的浏览器有提示说不支持该插件，需要升级可以这样写，source写法：
ogg是因为不同的浏览器可能支持不同格式的音频文件。

<audio controls>
	对不起，您的浏览器版本不支持，请进行升级。
	<source src="source/福禄寿FloruitShow - 我用什么把你留住.mp3">
    <source src="source/福禄寿FloruitShow - 我用什么把你留住.ogg" >
    <!--IE8兼容--><embed src="source/福禄寿FloruitShow - 我用什么把你留住.mp3" type="audio/mp3" width="200" height="200">
</audio>

此时，IE8以上版本浏览器识别audio之后会直接读source，忽视“对不起。。。”，IE8以下会读取“对不起。。”

写两个source，会优先读取第一个source，能用就用，之后再看第二个source

如果想要IE8以下浏览器播放，可以用embed标签

vedio

vedio是引入一个视频

代码同audio

非本地视频

分享中的复制代码，直接复制粘贴即可

<iframe height=498 width=510 src='https://player.youku.com/embed/XMzgyMTYxOTk2' frameborder=0 'allowfullscreen'></iframe>

霄雨Blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记02

title: HTML02date: 2022-01-14 14:47:04tags: HTMLHTML工具vscode使用！+tab即可生成html全框架配置liveServer插件liveServer，可以随时更新看到上线效果自动保存设置文件->首选项->设置->常用设置简单输入标签p+tab-><p></p>HTML语法实体网页中编写的多个空格默认情况下会被浏览器解析为一个空格。一些情况不能直接写：比如连续空格或.
复制链接

扫一扫