前端-基本知识

最新推荐文章于 2024-07-15 22:17:25 发布

#camellia#

最新推荐文章于 2024-07-15 22:17:25 发布

阅读量168

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_62619269/article/details/125592889

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

课程了解

–客户端：用户通过客户端来使用软件
–服务器：服务器负责远程处理业务逻辑

W3C标准：

结构（骨头）：HTML用于描述页面的结构
表现（皮肤）：CSS用于控制页面中元素的样式
行为（动作）：JavaScript用于响应用户操作

HTML简介

1：属于超文本标计语言
2：它是网页的三要素之中的结构
3：HTML使用标签的形式来标识网页中的不同组织部分
4：超文本指的是超链接，使用链接可以从一个页面跳转到另一个页面

编写第一个网页

<标签名>内容</标签名>

<h1>:一级标题
<h2>:二级标题
<p>:段落
<html>：根标签，有且只有一个

html子标签：在html内部
<head>:用户无法看见里面的内容
<body>:用户可以看见里面的内容

head子标签：在head内部
<title>

<html>
   <head>
       <title>lxl</title>
   
   </head>
   <body>
       <h1>这是我的第一个网页</h1>
   </body>
</html>

自结束标签和注解

和

只有开始标签，没有结束标签，自己会结束自己

注释格式:注释不可以嵌套

标签中的属性

1,在开始或者自结束标签中，还可以设置属性，属性是一个名值对结构（xyz)
2,属性和标签或者其他属性应该用空格隔开
3,属性名不能乱写

<html>
   <head>
       <title>标签的属性</title>
   
   </head>
   <body>
       <h1>这是我的<font color="red">第二个</font>网页</h1>
	   <input>
	   <!-- 你是谁啊？ -->
   </body>
</html>

文档声明（doctype）

1:文档用来告诉浏览器当前网页的版本
2：html5的声明：<!doctype html>,大小写不区分，写在中

实体

在网页中，编写的多个空格，自动被浏览器解析为一个空格
在html中有些时候不能书写一些特殊符号：比如：多个连续的空格，字母两侧的符号
如果我们需要这些特殊符号，就使用html中的实体（转义字符）
实体的语法：
&实体的名字;

查询网站：https://www.w3school.com.cn–>

<html>
   <head>
       <title>实体</title>
   </head>
   <body>
       <h1>这是我的<font color="blue"  size='8'>第二个</font>网页</h1>
	   <input>
	   <!--
   &实体的名字;
   &nbsp; 空格
   &gt;   大于号
   &lt;   小于号
   &copy; 版权符号-->
       <p>今天&nbsp;&nbsp;&nbsp;天气真不错</p>
       <p>a&gt;b&lt;c</p>
       
   </body>
</html>

meta标签

meta主要用于设置网页中的一些元数据，元数据是不给用户看的
charset:指定网页的字符集
name:指定数据名称
content:指定数据内容
keywords:表示网站的关键字，可以同时使用多个关键字，用逗号隔开
description：用于指定网站的描述
title标签的内容会作为搜索结果的超链接上的文字显示
http-equiv:网页的重定向

<html>
   <head>
       <title>meta标签</title>
   </head>
   <body>
       <h1>这是我的<font color="red"  size='8'>第三个</font>网页</h1>
	   <input>
       <meta name="keywords"  comtent="HTMLS,前端,CSS">
       <meta name="description" content="这是一个不错的网站">
       <meta http-equiv="refresh" content="3;url=https://www.w3school.com.cn">
   </body>
</html>

标签语义化

在网页中html主要来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
标题标签：h1-h6一个有六级标题，重要性递减，h1的重要性仅次于title标签,一般情况下，一个页面只有一个h1

块元素：在页面中独占一行的元素
行内元素：在页面中不会独占一行
p标签：表示页面中的一个段落，p也是一个块元素
hgroup:标签用来标签分组，可以将相关的标题放入到hgroup中
em标签：用于语音语调的加重
Strong标签：表示强调重要内容
blockquote标签：表示长引用
q标签:表示一个短引用，不换行，无缩进
br标签：换行

块元素：在网页中通过块元素来进行布局
行内元素：主要用来包裹文字
一般情况下，会在块元素里面放行内元素
p元素中不能放任何块元素
浏览器在解析网页时，会对不符合规范的内容进行修正

<html>
   <head>
       <title>语义化标签</title>
   </head>
   <body>
       <h1>这是我的<font color="red"  size='8'>第四个</font>网页</h1>
	   <input>
    <hgroup>
        <h1>回乡偶书</h1>
        <h2>其一</h2>
        <p>诗的内容</p>
    </hgroup>

    <p>今天天气<em>真</em>不错！</p>
    <p>你今天必须<strong>写完作业！</strong></p>
    鲁迅说：
    <blockquote>我没有说过这句话！</blockquote>
    孔子曰：
    <q>学而时习之</q>
    <br>我喜欢你
   </body>
</html>

布局标签（结构语义化）
header:表示网页的头部，顶部
main:表示网页的主题部分，一个网页只有一个
footer:表示网页的底部
nav:表示网页中的导航
aside:和主体相关的其他内容（侧边栏）
article：表示独立的文章
div:用来表示一个区块
span:没有任何语义，主要用于网页中选中文字

<html>
   <head>
       <title>语义化标签</title>
   </head>
   <body>
       <h1>这是我的<font color="red"  size='8'>第五个</font>网页</h1>
	   <input>
    <head></head>
    <main></main>
    <footer></footer>
    <nav></nav>
    <aside></aside>
    <article></article>
    <div></div>
   </body>
</html>

列表

列表（list）
在html中也可以创建列表，一共有三种
1：有序列表–ul标签来创建有序列表，li表示列表项
2：无序列表–ol标签来创建无序列表，li表示列表项
3：定义列表–dl标签来创建一个定义列表，dt来表示定义的内容，dd来对内容进行解释
列表之间可以相互嵌套

<html>
   <head>
       <title>列表</title>
   </head>
   <body>
       <h1>这是我的<font color="red"  size='8'>第六个</font>网页</h1>
	   <input>
    <ul>
    <li>结构</li>
    <li>表现</li>
    <li>图像</li>
    </ul>
    
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>图像</li>
    </ol>

    <dl>
        <dt>结构</dt>
        <dd>网页的结构</dd>
    </dl>
    </body>
</html>

超链接

超链接：可以从一个页面跳转到一个新的页面，或者当前页面的其他页面
使用a标签(行内元素)来定义超链接，a里面可以嵌套任何标签，除了自身
属性：
href:指定跳转的目标路径
当我们需要跳转到项目内部的时候，一般使用相对路径，会使用…开头
./：表示当前文件所在的目录
…/：表示当前目录的上一级
可以省略不写

<html>
   <head>
       <title>超链接</title>
   </head>
   <body>
       <h1>这是我的<font color="red"  size='8'>第七个</font>网页</h1>
	   <input>
       <br>
    <a href="https://www.baidu.com">百度</a>
    <br>
    <a href="https://www.cdusec.com">工作室</a>
    <br>
    <a href="http://127.0.0.1:5500/2.html">内部</a>
    </body>
</html>

target属性：用来指定超链打开的位置
_self 默认值，在当前页面打开超链接
_blank 在新的页面中打开超链接

 <a href="https://www.baidu.com"  target="_self">百度</a>
 <a href="https://www.cdusec.com" target="_blank">工作室</a>

超链接回到顶部：可以将超链接的herf属性设置为m,这样点击超链接之后，页面不会发生它跳转，而是回到顶部的位置
超链接回到底部：id属性（唯一不重复的）每一个标签可以添加一个id属性，id属性就是元素的唯一标识，在同一页面中不能出现重复的id属性

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

// 可以跳转到页面指定位置，只需要将herf属性设置为 #目标元素的id值
<a href="#bottom">回到底部</a>
<a id="bottom" href="#">回到底部</a>

在开发中，可以将#作为超链接的占位符使用

<a href="#"> 这是一个新的超链接</a>

创作一个没有任何作用的超链接，类似于占位符吧

<a href="javascript:;"> 这是一个新的超链接</a>

图片标签

在当前页面引入外部图片，使用img标签，是一个自结束标签

属性：src–指定外部图片的路径（路径规则和超链接一样）
alt–图片的描述，默认情况下不会显示，有些浏览器在无法加载时显示用处：搜索引擎会根据alt的内容识别图片
width:图片的宽度（单位是像素）
height:图片的高度
img这种元素属于替换元素，介于块元素和行内元素之间，显示的不是img本身，而是一个引入的外部资源

<html>
   <head>
       <title>图片标签</title>
   </head>
   <body>
       <h1>这是我的<font color="red"  size='8'>第八个</font>网页</h1>
	   <input>
      <img width="200" src="./image/2.png" alt="模特">
      <img width="300" src="https://img1.baidu.com/it/u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" >

    </body>
</html>

图片的格式
1jpeg(jpg):支持颜色比较丰富，不支持透明效果，不支持动图,一般用来显示照片
2png:支持颜色丰富，支持简答透明，不支持动图，专为网页而生
3gif:支持颜色比较少，支持简答透明，支持动图，颜色单一，动图
4webp:它具备图片格式的所有优点，而且文件也比较小，兼容性不好
5base64编码

内联框架

内联框架：在当前页面中引入一个其他页面
src:指定要引入的网页路径
frameborder:内联框架的边框，0表示没有 1表示有

<html>
   <head>
       <title>内联框架</title>
   </head>
   <body>
       <h1>这是我的<font color="red"  size='8'>第九个</font>网页</h1>
	   <input>
    <iframe src="https://www.qq.com" width="800" height="600"frameborder="0"></iframe>

    </body>
</html>

音视频播放

audio:在页面引入一个外部的音频文件,音视频引入默认情况下，不允许用户自己控制
属性：controls–是否允许用户控制播放
autoplay–音频文件是否自动播放(大部分浏览器不支持)
loop:音乐是不是循环播放
video:在页面引入一个视频文件

<html>
   <head>
       <title>视频播放</title>
   </head>
   <body>
       <h1>这是我的<font color="red"  size='8'>第十个</font>网页</h1>
	   <input>
     <audio src="./source/1.mp4" controls autoplay loop></audio>
     <embed src="./source/1.mp4" type="" width="800" height="800">
     <video src="./source/1.mp4"></video>
    </body>
</html>