html_Day2

最新推荐文章于 2024-08-12 16:47:32 发布
最新推荐文章于 2024-08-12 16:47:32 发布
阅读量94 收藏
点赞数
文章标签： java 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43899452/article/details/121598175
版权

一、VSCode安装

官网下载：https://code.visualstudio.com/docs/?dv=win

二、快速创建一个新的任务

在窗口输入！+tab键
注意：文件名要以.html结束；要用英文字符
生成如下：
在这里插入图片描述
lang=“en” 使用英文编辑
lang=“zh” 使用中文编辑

三、安装LiveServer

四、尝试通过LiveSever打开网页

设置自动保存，实时更新。
注：
1.网页中编写的多个空格默认情况下会被自动被浏览器解析为一个空格
2.在html中有些时候不能直接书写一些特殊符号，比如，连续的空格，字母两侧的<>
解决办法：
使用转义字符

<p>
    今天&nbsp;天气真不错
</p>

使用“&nbsp；”来代替一个空格，多个空格可以多加几次
其他转义字符见：https://www.w3school.com.cn/html/html_entities.asp

五、meta标签

主要用于设计网页元数据。

  • 设置关键字：
<meta name="keywords" content="html,前端,css3">
  • 网站的描述，显示在搜索引擎的搜索结果中：
<meta name="description" content="网站描述">
  • 定时自动跳转网页功能：(3代表3s后跳转)
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

注：在网页中，html专门负责结构，css负责样式。
tips：用ctrl+回车，可以只让光标下移

六、语义化标签

在这里插入图片描述
h1-h6一共有六级标题
页面中独占一行的元素为块元素。
在这里插入图片描述

  • 块元素：

p标签表示页面中的一个段落。
blockquote表示长引用。
br表示换行。

  • 行内元素：

em标签用于表示语音语调加重。
strong表示强调。
q表示段引用。

在页面中会独占一行的元素叫块元素，不会独占一行的叫行内元素。

七、块元素和行内元素嵌套规则

块元素（block element）
在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
行内元素主要用来包裹文字

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

    浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
        比如：
            标签写在了根元素的外部
            p元素中嵌套了块元素
            根元素中出现了除head和body以外的子元素

八、结构化语义标签

<body>
    <!-- 
        布局标签（结构化语义标签content setioning）
     -->

     <!-- 
        header 表示网页的头部
        main 表示网页的主体部分(一个页面中只会有一个main)
        footer 表示网页的底部
        nav 表示网页中的导航
        aside 和主体相关的其他内容（侧边栏）
        article 表示一个独立的文章
        section 表示一个独立的区块，上边的标签都不能表示时使用section

        div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
        span 行内元素，没有任何的语义，一般用于在网页中选中文字

      -->
     <header></header>
     <main></main>
     <footer></footer>

     <nav></nav>
     <aside></aside>
     <article></article>

     <section></section>

     <div></div>

     <span></span>
</body>

九、列表

在html中也可以创建列表，html列表一共有三种：
1、有序列表
2、无序列表
3、定义列表

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

  • 无序列表，使用ul标签来创建无序列表
    使用li表示列表项

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

列表之间可以互相嵌套

十、超链接

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

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>
  • 属性：

href 指定跳转的目标路径
值可以是一个外部网站的地址
也可以写一个内部页面的地址（需要在同一个路径）

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

  • 注意：

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，相对路径都会使用.或…开头
./
…/
./可以省略不写，如果不写./也不写…/则就相当于写了./
./ 表示当前文件所在的目录
…/ 表示当前文件所在目录的上一级目录
示例：

	<a href="./target.html">超链接1</a> 
    <br><br>
    <a href="../07.列表.html">超链接2</a><!--表示上一级目录中的文件-->
    <br><br>
    <a href="./inner/target2.html">超链接3</a><!--表示当前文件夹中的文件夹中的文件-->
    <br><br>
    <a href="../outer/target3.html">超链接4</a>

十一、超链接的其他用法

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

    <a href="07.列表.html" target="_blank">超链接</a>

跳转到页面顶部和底部。
可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置
可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
id属性（唯一不重复的）
每一个标签都可以添加一个id属性
id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性，区分大小写
示例：

	<a href="07.列表.html" target="_blank">超链接</a>
    <br><br>
    <a href="#bottom">去底部</a>
    <br><br>
    <a href="#p3">去第三个自然段</a>

    <br><br>
    <p>在我的后园。</p>
    <p>在我的后园。</p>
    <p id="p3">在我的后园。</p>
    <p>在我的后园。</p>
    <p>在我的后园。</p>
    <p>在我的后园。</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quasi numquam quam molestias cumque eveniet ab nobis doloribus dolores. Nesciunt, distinctio tempore similique consequuntur nulla dolorem sapiente minus praesentium impedit.</p>

    <!-- 在开发中可以将#作为超链接的路径的**展位符**使用 -->
    <a href="#">这是一个新的超链接</a>

    <br><br>

    <!-- 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 -->
    <a href="javascript:;">这是一个新的超链接</a>
    <br><br>

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

十二、图片标签

图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

  • 属性：

src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

width 图片的宽度 (单位是像素)
height 图片的高度
宽度和高度中如果只修改了一个，则另一个会等比例缩放

  • 注意：

             一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
         但是在移动端，经常需要对图片进行缩放（大图缩小）

  • 示例：

引入内部图片

<img src="./img/1.gif" alt="松鼠">

引入外部图片

<img src="https://p3.ssl.qhimgs1.com/sdr/400__/t017cd003035787bb43.jpg" alt="钢铁侠">

右键点击复制图片地址，再复制过来即可。
img是替换元素。

补充：关键字width和height，单位是像素。
使用方式：

<img width="400" src="https://p3.ssl.qhimgs1.com/sdr/400__/t017cd003035787bb43.jpg" alt="钢铁侠">

十三、图片格式

jpg（jpeg）
支持颜色比较丰富，不支持透明效果，不支持动图
gif
支持颜色比较少，支持简单透明，支持动图
png
支持颜色丰富，支持复杂透明度，不支持动图
webp
这是谷歌新推出的，专门用于网页使用，具有以上的优点，文件小。缺点是兼容性不好
base64
将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
一般都是一些需要和网页一起加载的图片才会使用base64

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

十四、内联框架

内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

十五、音视频播放

audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止

<audio src="./source/audio.mp3" controls></audio>
<audio src="./source/audio.mp3" controls autoplay loop></audio>

关键字 conrols 控制播放
关键字 autoplay 代表自动播放；但是大部分浏览器不会进行播放。
关键字 loop 表示循环播放

那如果对于不支持播放的浏览器可以使用如下代码：

<audio controls>
        对不起，您的浏览器不支持播放音频！请升级浏览器！
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
    </audio>

如果不支持的话，显示那行字，如果支持的话，忽略汉字，用于提示使用者更换浏览器。

但是针对于IE8（几乎对所有浏览器都支持）也可以播放，使用如下方法：

<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">

播放视频的关键字和音频相似。

<video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4"><!--不支持webm的时候使用mp4-->
        <embed src="./source/flower.mp4" type="video/mp4">
</video>
太累，耍一天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mysql interval 3 day_Mysql之INTERVAL与DATE_SUB与EXTRACT函数的使用
weixin_34283265的博客
01-19 1460
1. INTERVALINTERVAL代表的是时间间隔MySQL中的时间间隔类型有如下几种:1.1 利用INTERVAL做时间的加减法示例：加法:SQL>SELECT DATE '2018-11-01' INTERVAL '10 11' DAY_HOUR;结果:2018-11-11 11:00:00减法：SQL> select date '2018-11-11 11:00:00' ...
练习day2
weixin_46328119的博客
11-25 2159
一、创建剧本config_nginx.yml完成以下功能： 1、安装nginx 2、提供默认主页 3、启动并开机自启服 [student@workstation ansible]$ cat config_nginx.yml --- - hosts: servera tasks: - name: install nginx yum: name: nginx - name: index.html copy: content: 'thi
MySQL "java.lang.IllegalArgumentException: HOUR_OF_DAY: 2 -> 3" 问题解析
dianjun2454的博客
08-24 6224
抛出异常截图： 异常原因 系统时区原因。 解决办法 在数据库连接串加上&serverTimezone=Asia/Shanghai即可~ conn_str="jdbc:mysql://${hostname}/${db_name}?useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavio...
mysql数据驱动问题hour_day_of 0 -＞1
热门推荐
Boyce_Eagle的博客
04-25 1万+
报错hour_day_of 0 ->1 1.问题 因为采用jdbc6以上的版本，在查询封装数据的时候偶尔回出现hour_day_of 0 ->1 这种错误，意思是天数没有等于0的，日期错误； 2.原因 jdbc6以上的版本在写驱动连接字符串的时候要设置时区即：severTimezone;一般地，国内设置为Asia/Shanghai 即上海时区，就可以解决问题，但有时候还是会碰到...
CISCN2019_华北赛区_Day1_Web2]ikun_1通关手册
No_1_is_me的博客
11-14 1942
CISCN2019_华北赛区_Day1_Web2]ikun_1通关手册
C++ 20 std::chrono 库使用 | std::chrono::year_month_day |std::chrono::hh_mm_ss 使用
锐龙处理器
11-29 2524
mark 一下 C++20 怎么获取日期和时间（cppreference 对 year_month_day 的没有例子，我一开始没搞清楚
SAP函数 LAST_DAY_OF_MONTHS 获取月末最后一天日期
weixin_30446197的博客
03-21 1552
DATA LAST_DATE TYPE SY-DATUM. CALL FUNCTION 'LAST_DAY_OF_MONTHS' EXPORTING day_in = sy-datum IMPORTING last_day_of_month = last_date EXCEPTIONS day_in_no_date ...
mysql 事件 day hour_Mysql 事件（定时任务）
weixin_28716181的博客
02-27 1218
mysql 创建任务(事件)1、检查数据库事件是否开启，如果 event_scheduler 等于 NO表示开启SELECT @@event_scheduler;SHOW VARIABLES LIKE 'event_scheduler';SELECT @@event_scheduler;2、开启任务(事件)a、set global event_scheduler=1;b、SET GLOBAL ev...
Calendar中的DAY_OF_WEEK
言程序
11-20 1044
java.util.Date类中的很多方法已经过时   原作者 http://blog.sina.com.cn/s/blog_45c06e600100pm77.html  Java中对日期的处理需要用到Calendar类，其中有几个方法在使用时需要新手注意。 1. 在获取月份时，Calendar.MONTH + 1 的原因Java中的月份遵循了罗马历中的规则：当时一年中的月份数量是不固定...
[CISCN2019 华北赛区 Day2 Web1]Hack World
沐目的博客
10-21 9071
1.测试过滤 我想到到了： 联合注入：unin被过滤 报错注入：and、or、updatexml被过滤 bool注入和time注入：and、or被过滤 可以通过fuzz测试（模糊测试），发现哪些字符被过滤了。length为482的，全都是被过滤的。 然后就在网上学了一些技巧： 利用/*!union*/可以绕过对union的过滤，虽然这题不能用，但是记一下吧。 2.异或 这东西和那个堆叠注入一样...
community_day2
02-15
在"community_day2"的活动中，可能涉及到了这些HTML技术的实际应用和深入学习，包括最佳实践、新特性以及如何与其他技术（如CSS和JavaScript）协同工作来创建高效、互动且美观的社区平台。通过这样的项目实践，...
HTML5_day01
08-05
HTML5_day01:主要记录了sublime的信息以及安装，和Package Control的插件管理器，和Emmet插件的简略使用
girls_day
03-15
2. **styles.css**：这是CSS（Cascading Style Sheets）文件，用于定义HTML元素的样式，如颜色、字体、布局等。你可以在这里定制地图的视觉样式，使其更具吸引力。 3. **images/**：可能包含用于地图的图像文件，如...
Work_Day_Scheduler
08-04
file:///Users/AP/UR-Bootcamp/Work_Day_Scheduler_AlexPalmer/index.html 使用技巧： 使用这个简单的日历来安排您的工作日。 用你在那一小时的待办事项填写文本区域。 单击保存按钮将文本保存到本地存储以供...
springboot民办高校科研项目管理系统-计算机毕业设计源码54009
VX_DZbishe的博客
08-11 297
论文主要是对基于springboot的民办高校科研项目管理系统进行了介绍，包括研究的现状，还有涉及的开发背景，然后还对系统的设计目标进行了论述，还有系统的需求以及整个的设计方案，对系统的设计以及实现，也都论述的比较细致，最后对基于springboot的民办高校科研项目管理系统进行了一些具体测试。本次报告，首先分析了研究的背景、作用、意义，为研究工作的合理性打下了基础。
SpringBoot快速入门（手动创建）
m0_74124657的博客
08-11 274
代码如下//引导类项目的入口//注解添加导入进来你可以浏览器中查看自己编写的代码，看是否正确localhost：你命名的端口号（默认是8080。后面你也可以在配置文件修改）
集合（1）
supercool7的博客
08-12 437
表示不同的类型集合，Collection、Map、List、Set、Queue、Deque等，以及辅助性质的接口Iterator、LinkIterator、Comparator、Comparable这些接口是为迭代和比较元素而准备。对接口的具体实现，主要常用的有：ArrayList、LinkedList、HashMap、HashSet、TreeMap等等。理解Java集合体系可以从三个层次：最上层的接口、中间的抽象类、最后的实现类。是所有集合框架的根接口，包含了对集合进行基本操作的方法。
软件测试需要具备的基础知识【功能测试】---后端知识（三）
最新发布
yang_xs的博客
08-12 697
为了更好的学习软件测试的相关技能，需要具备一定的基础知识。需要学习的基础知识包括：1、计算机基础2、前端知识3、后端知识4、软件测试理论后期分四篇文章进行编写，这是第三篇CS架构BS架构效率：c/s效率高，某些内容已经安装在系统中了，b/s每次都要加载最新的数据升级：b/s无缝升级；c/s删除老版本再安装新版本安全：c/s更安全，需要安装、注册、登录；b/s有浏览器即可使用，安全程度低开发成本：b/s成本低；c/s需要不同的系统要不同的开发人员，成本高。
Spring Boot 3.x Rest API最佳实践之API设计
felix_alone2012的博客
08-08 976
本系列教程将会以企业中API基础功能封装为目标，用最新的Spring Boot 3.x版本来逐步搭建和完善Rest API项目基础架构，并结合实际电商项目中API的实现需求来进行最佳实践。如果觉得对你有帮助，记得点赞收藏，关注小卷，后续更精彩！
反射和注解
supercool7的博客
08-08 270
反射的基本步骤包括获取Class对象、获取类的信息（构造函数、方法、字段等），然后通过Constructor、Method、Field等类的实例进行具体的操作。注解以@符号开头，通常紧跟着一个标识符，后面可以跟一些参数，用于给类、方法、字段等添加元数据信息，这些信息可以在编译时、运行时被读取和处理。通过Class类，可以获取类的构造函数、方法、字段等信息，而不需要在编译时确定这些信息。Spring、SpringBoot、Mybatis等框架中都大量使用了反射机制。此外，开发者还可以定义自己的注解，通过。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值