前端--HTML部分

最新推荐文章于 2024-10-03 22:12:17 发布

m0_62465762

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量51

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_62465762/article/details/129306838

版权

本文介绍了HTML的基本架构，包括文档声明、标题、字符集设置以及标签属性。强调了语义化标签的重要性，如标题、段落和列表的使用。还涵盖了超链接、图片引入、内联框架和音视频播放的相关知识，提供了网页内容展示和交互的基础。

摘要由CSDN通过智能技术生成

文章目录

前端

前端

概述

HTML 结构
CCS 表现
JavaScript 行为

1. HTML

超文本标记语言

使用标签的形式来标识网页中不同组成部分

在使用html标签时，要关注的是标签的语义，而不是样式

1.1 基本架构

文档声明用来告诉浏览器当前网页的版本（html5的声明）

head 内容不会出现在网页中

title 搜索结果的超链接上的文字显示，搜索引擎根据title判断网页内容

body 是网页主体

在VS中，有Preview on web server插件后，可以用ctrl+shift+v开启预览

<!--完整结构-->
<!doctype html>                    <!--网页声明-->
<html lang="en">                             <!--根标签-->
    <head>                         <!--子标签-->
        <meta charset="utf-8">     <!--字符集-->
        <meta name="keyword" content="HTML,前端,CSS3">
        <title>                    <!--后代（网页标题）-->          
        </title>
    </head>
    
    <body>                         <!--子标签-->
        <h1>  <\h1>                <!--标题名（一级，共六级）-->
		<p>   <\p>                 <!--段落名-->
    </body>
</html>

<!--自结束标签-->
<img>
<img />
<input>
<input />
<br>          <!--换行标签-->

1.2 标签基本属性（不建议用）

可以在标签中（开始标签或自结束标签）设置属性，属性是一个名值对结构，用来设置标签中内容如何显示

不能在结束标签中设置属性

<!--用<font>-->
<h1>这是<font color="red" size="4">第一个</font>网页</h1>

1.3 meta标签（字符集）

meta标签用于设置网页中的一些元数据，元数据不是给用户看的

属性charset 指定网页的字符集
属性name 指定数据的名称
- 值keyword表示网站关键字，可以同时指定多个关键字，各关键字之间用英文逗号隔开
- 值description 用于指定网站的描述，会显示在搜索引擎的搜索结果中
属性content 指定数据内容
- content后跟的数字表示多少秒后跳转页面，url后的地址表示要跳转到的网站地址

在开发时，我们使用的字符集都是UTF-8，用meta标签设置网页字符集，避免乱码

<meta charset="utf-8">
<meta name="keywords" content="HTML,前端,CSS3">
<meta name="description" content="这门课程很好的讲述了前端的基本架构。。。。。。">

<!--将页面重定向到另一个网站-->
<meta http-equiv="refresh" content="10;url=https://www.csdn.net/">

1.4 实体（转义）

在HTML中，有时候不能直接书写一些特殊符号：

在编写网页中编写多个空格，浏览器会解析成一个空格
字母两侧大于小于

注意结尾有分号";"

<!--
语法：&实体的名字
eg:
转义空格：&nbsp;
转义大于号：&gt;
转移小于号：&lt;
-->

1.5 语义化标签

再次强调！关注标签的语义，而不是样式

块元素：在页面中独占一行的元素

在网页中进行布局

标题标签：一共有六级（h1~h6），一般情况下，一个网页只有一个一级标签
- 有相连关系的标题标签可以放进hgroup中进行分组
段落标签：p
引用标签：blockquote，表示一个长引用

行内元素：在页面中不会独占一行的元素

主要用于包裹文字

em标签：表示语音语音的加重
strong标签：表示强调重要内容
q标签：短引用

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

块元素与行内元素使用规则：

一般情况下，会在块元素内放行内元素，而不会在行内元素中放块元素
块元素中基本什么都能放
p元素中不能放块元素

布局标签（结构化语义标签）

加入css查看效果

header 表示网页头部
main 表示网页主体（一个网页只有一个）
footer 表示网页底部
nav 网页的导航
aside 和主体相关的其他内容（侧边栏）
article 表示独立的一个文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，是主要的布局元素（可以代替上面所有）
span 行内元素，没有语义，一般用于在网页中选中文字

1.6 列表

列表分为无序列表、有序列表、定义列表

列表之间可以互相嵌套

1.6.1 无序列表（常用）

ul标签创建无序列表，li标签表示列表项

<ul>
    <li>第一个无序列表项</li>
    <li>第二个无序列表项</li>
    <li>第三个无序列表项</li>
</ul>

1.6.2 有序列表

ol创建有序列表，li标签表示列表项

<ol>
    <li>第一个有序列表项</li>
    <li>第二个有序列表项</li>
    <li>第三个有序列表项</li>
</ol>

1.6.3 定义列表

dl标签创建一个定义列表，dt表示定义内容·，dd表示对内容进行解释说明

<dl>
    <dt>定义列表</dt>
    <dd>对定义列表进行解释说明</dd>
</dl>

1.7 超链接

超链接可以让我们从一个页面跳转到另一个页面，或者是当前页面的其他位置

用a标签来定义超链接，是行内元素，可以嵌套除它自身外任何元素

以下是实现跳转到另一个页面的功能

属性href 指定跳转的目标路径
- 值可以是外部网站的一个地址
- 也可以写一个内部页面的地址（相对路径需要在一个文件夹内）

<a href="https://www.csdn.net/">超链接外部网站</a>
<br>
<br>
<a href="index6.html">超链接内部网站</a>

属性target 指定超链接打开的位置
- 可选值_self 默认值，在当前页面中打开链接
- 可选值_blank 在一个新的页面中打开超链接

<a href="index5.html" target="_blank">超链接</a>

以下是实现跳转到当前页面的其他位置功能

属性herf
- 值为#时，表示回到页面顶部
  - 在开发中，如果不确定要跳到那个网站，可以先用将herf的属性设为#，当作占位符
- 值为#加上id时，表示跳转到标签id为该id的位置
- 值为javascript:;时，此时点击这个超链接什么也不会发生

当我们想要去到页面中的任意一个位置时，我们需要为目的位置的标签做标记（利用id属性坐标记）

属性id（唯一不重复的）
- 区分大小写，不以数字开头

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

*补充相对路径：

1.8 图片标签

图片标签用于向当前页面引入一个外部图片

用img标签引入外部照片，img标签时一个自结束标签

属性src 指定的是图片（内部或外部）路径
属性alt 对图片的描述，默认情况下不会显示，图片没加载出来时显示，搜索引擎会根据alt的内容来识别图片
属性width 图片宽度（单位是像素）
属性height 图片高度
- 如果宽度和高度只修改了一个，则另一个会等比例改变

一般在pc端，不建议修改图片大小；移动端经常需要对图片进行缩放

<!-- 引入内部图片 -->
<img src="./img/前端例子1.png" alt="前端" width="300" height="280">

<!-- 引入外部图片 -->
<img src="https://img1.baidu.com/it/u=299707723,491113869&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="钢铁侠">

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

图片格式：

jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 显示颜色单一的图片、动图
png
- 支持的的颜色丰富，支持复杂透明，不支持动图
- 专为网页而生
webp
- 具备其他格式所有优点，并且文件还特别小（缺点：兼容性差）
- 谷歌推出的专门用于网页中的图片的一种格式
base64
- 将图片使用base64进行编码，这样可以直接将图片转换为字符形式来引入图片
- 用的场景不多，一般都是一些需要和网页一起加载的图片才会使用

效果一样，用小的，效果不一样，用效果好的

1.9 内联框架（全是替换元素）

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

用iframe标签创建

属性src 指定要引入的网页的链接
属性frameborder 指定内联框架的边框

<iframe src="https://www.csdn.net/" width="800" height="500" frameborder="0"></iframe>

1.10 音视频播放

用audio用来向页面引入一个外部的音频文件的替换元素

音视频文件引入时，默认情况下不允许用户自己控制播放停止

属性src 文件路径
属性controls 是否允许用户控制播放（是不用给值的）
属性autoplay 音频文件是否自动播放（是不用给值的），但是大部分浏览器不会自动播放音乐
属性loop 是否循环播放（是不用给值的）

<audio src="./source/left-right.mp3" controls autopaly loop></audio>

除了用src来指定外部文件路径，还可以通过source来指定文件（同时可以指定多个文件）

当浏览器不能播放时，会显示“对不起，您的浏览器不支持播放”；若可以播放，则不显示

<audio controls>
    对不起，您的浏览器不支持播放
    <source src="source\keyL.mp3">
    <source src="source\keyL.ogg">
</audio>

为兼容老版本，还可以选择用embed标签

<audio controls>
    <source src="source\keyL.mp3">
    <source src="source\keyL.ogg">
    <embed src="source\keyL.mp3" type="audio/mp3" width="300" height="500">
</audio>

用video用来向页面引入一个外部的视频文件的替换元素

使用方式与audio基本一样

<video controls>
    <source src="./source/v1.mp4" >
    <embed src="./source/v1.mp4" type="audio/mp4">
</video>

<audio controls>
    <source src="source\keyL.mp3">
    <source src="source\keyL.ogg">
    <embed src="source\keyL.mp3" type="audio/mp3" width="300" height="500">
</audio>

用video用来向页面引入一个外部的视频文件的替换元素

使用方式与audio基本一样

<video controls>
    <source src="./source/v1.mp4" >
    <embed src="./source/v1.mp4" type="audio/mp4">
</video>

m0_62465762

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫