HTML学习笔记

最新推荐文章于 2024-08-23 06:12:23 发布

Just Yoghurt

最新推荐文章于 2024-08-23 06:12:23 发布

阅读量271

点赞数 2

文章标签： html 学习 elementui

本文链接：https://blog.csdn.net/qq_37852350/article/details/125260316

版权

1、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>
    
</body>
</html>

2、HTML实体

<p>
     a&lt;b&gt;c
</p>
<p>
     a&nbsp;&nbsp;&nbsp;&nbsp;c
</p>

上述代码的输出结果为：

3、meta标签，设置网页中的元数据

<!-- 指定网页的字符集 -->
<meta charset="UTF-8">
<!-- 表示3s后重定向到百度页面 -->
<meta http-equiv="refresh" content="3,https://www.baidu.com">  
<!-- 这个网页的关键词-->
<meta name="keywords" content="shopping,cd,clothes">
<!-- 这个网页的描述信息-->
<meta name="description" content="this is a good web">
<!-- 这个网页的主题-->
<title>Document</title>

4、语义化标签

<br> 表示换行

<headers> 表示网页的头部

<main>表示网页的主体部分

<footer> 表示网页的底部

<nav>表示网页的导航

<aside>表示和主题相关的内容（网页中表现为侧边栏）

<article>表示一个独立的文章

<section> 表示一个独立的区块，上面的标签都不能表示时使用section

<div> 没有语义，表示一个区块

<span> 行内元素，没有语义，一般用于在网页中选中文字

5、列表

（1）无序列表：使用ul标签来创建无序列表，使用li表示列表项

<ul>
     <li>元素1</li>
     <li>元素2</li>
     <li>元素3</li>
</ul>

（2）有序列表，使用ol标签来创建有序列表，使用li表示列表项

（3）定义列表，使用dl标签来创建定义列表，使用dt表示定义的内容，使用dd对内容解释说明。

6、超链接

是一个行内元素，在a标签内可以嵌套除它自己外的任何元素。

属性：href 指定跳转的目标路径。(可以跳转到外部网站地址，也可以跳转到内部页面地址)

 <a href="https://www.baidu.com.cn">超链接</a>

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

_self:默认值，在当前页面打开超链接

_blank：在一个新的页面打开超链接

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

将超链接的href属性设置为#，可以直接跳转到文档顶部。

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

可以跳转到页面的指定位置，将href属性设置为#目标元素的id属性值。

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

<a href="javascript:;">点击这个超链接什么也不会发生</a>

7、图片标签

使用img标签（替换元素）向当前页面引入一个外部图片，此标签是一个自结束标签。

属性：

src: 引入图片的路径

alt: 搜素引擎根据alt的值识别图片

width：图片的宽度（像素）

height：图片的高度（像素）

<img src="./img/20220609191029.jpg" alt="头像">

8、内联框架

iframe:将其他页面当做一个窗口引入当前页面

属性：

src:引入网页的地址

frameborder:指定内联框架的边框取值为0：去掉边框；1：保留边框

<iframe src="https://www.w3school.com.cn/html/html_iframe.asp" width="1000" height="1000" frameborder="0"></iframe>

9、插入音视频

audio标签（替换元素）：向页面引入一个外部的音频文件

属性：

src:引入音频的地址

controls:是否允许用户控制视频的播放；此属性不需要给值，根据属性有没有判断。

autoplay:音频文件是否自动播放；此属性不需要给值

loop:音乐是否循环播放；此属性不需要给值

   <!-- 通过src属性引入音频文件 -->
    <audio src="./xxx.mp3" controls autoplay loop></audio>

    <!-- 通过source标签引入外部音频，可以解决浏览器不兼容问题，支持哪种类型文件播放哪种-->
    <audio controls>
        <source src="./xxx.mp3">
        <source src="./xxx.ogg">
        <embed src="./xxx.mp3" type="audio/mp3" width="200" height="300" > 
    </audio>

10、插入视频文件

video标签：向页面引入一个外部的视频文件

    <video controls>
        <source src="./xxx.webm">
        <source src="./xxx.mp4">
        <!-- IE8使用embed标签 -->
        <embed src="./xxx.mp4" type="video/mp4">
    </video>

Just Yoghurt

关注

2
点赞
踩
0

收藏

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

1、HTML结构2、HTML实体上述代码的输出结果为：3、meta标签，设置网页中的元数据4、语义化标签表示换行表示网页的头部表示网页的主体部分表示网页的底部表示网页的导航表示和主题相关的内容（网页中表现为侧边栏）表示一个独立的文章表示一个独立的区块，上面的标签都不能表示时使用section 没有语义，表示一个区块行内元素，没有语义，一般用于在网...
复制链接

扫一扫