Day_01 HTML

最新推荐文章于 2024-08-12 20:21:42 发布
最新推荐文章于 2024-08-12 20:21:42 发布
阅读量179 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26942049/article/details/121255424
版权
这篇博客介绍了HTML的基础元素和语义，包括DOCTYPE、HTML结构、标题标签、段落、div和span、语义标签、img图片、超链接、base以及锚点的使用。通过实例展示了如何创建网页内容和布局，强调了语义化标签的重要性。
摘要由CSDN通过智能技术生成

由于代码看起来比较方便，就都用代码的形式来总结

1、初识HTML

<!DOCTYPE html>
<html>
    <!--
        DTD 头,是告诉浏览器,当前用的版本
        head : 告诉浏览器一些相关信息
            比如标题,编码,关键字
        body : 主体,给人看的
    -->
    <head>
        <!--设置字符编码-->
        <meta charset="UTF-8" /> 
        <title>HTML初识</title>
    </head>
    <body>
        <center>123</center>
        <h1>标题</h1>
        <h2>标题</h2>
    </body>
</html>

2、标题标签 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    <!-- 平级用 +  h1+h2+h3+h4+h5+h6 -->
    <!-- 嵌套关系 用 >  h1>h2>h3 -->
    <!-- 数量用 *  h1*5 -->
    <!-- 整体 用()  h1>(h2>h3*2)*3 -->
    <h1>壹号标题</h1>
    <h2>二号标题</h2>
    <h3>三号标题</h3>
    <h4>四号标题</h4>
    <h5>五号标题</h5>
    <h6>六号标题</h6>
</body>
</html>

3、段落 

<!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 bgcolor="pink" text="green">

    <h1>刘德华</h1>
    <!-- 属性 = 值 -->
    <hr width="80%" color="red" />
    <h2>基本信息</h2>
    <!-- p 段落标签 -->
    <p>刘德华（Andy Lau），1961年9月27日出生于中国香港，籍贯广东新会，中国香港影视男演员、歌手、制片人、作词人。</p>
    <p>1981年出演电影处女作《彩云曲》。1983年主演的武侠剧《神雕侠侣》在香港取得62点的收视纪录 [1-2] 。1985年发行首张个人专辑《只知道此刻爱你》 [11] 。1990年凭借专辑《可不可以》在歌坛获得关注 [12]
        。1991年创办天幕电影公司 [3] 。1994年获得十大劲歌金曲最受欢迎男歌星奖；同年担任剧情片《天与地》的制片人 [4] 。1995年在央视春晚上演唱其代表作《忘情水》 [13]
        。2000年凭借警匪片《暗战》获得金像奖最佳男主角奖 [5] ；同年被《吉尼斯世界纪录大全》评为获奖最多的香港男歌手 [14] 。</p>
    <p>2004年凭借剧情片《大块头有大智慧》获得金像奖最佳男主角奖 [271] ；同年凭借警匪片《无间道3：终极无间》获得金马奖最佳男主角奖 [6]
        ；同年第六次获得十大劲歌金曲最受欢迎男歌星奖。2005年获得香港UA院线颁发的全港最高累积票房香港男演员奖 [7] 。2006年获得釜山国际电影节亚洲最有贡献电影人奖 [8]
        。2012年凭借剧情片《桃姐》获得金马奖、金像奖最佳男主角奖 [9] ；同年担任第49届台湾电影金马奖评审团主席 [10] 。2015年第5次登上央视春晚并演唱歌曲《回家的路》 [15]
        。2020年发行个人首张数字专辑《演·唱》 [261] 。</p>
    <p>演艺事业外，刘德华关心公益慈善。1994年创立刘德华慈善基金会。2000年被评为世界十大杰出青年 [16] 。2005年发起亚洲新星导计划 [17] 。2008年被委任为香港非官守太平绅士 [18]
        。2010年获得第12届世界杰出华人奖 [19] 。2016年连任中国残疾人福利基金会副理事长 [16] 。</p>
    <!-- br 换行符 -->
    1<br />
    2<br />
    3
</body>

</html>

4、div&span 

<!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>
    你好<br>
    <h1>你好</h1>
    <!-- div 独占一行,适合布局 -->
    <div>你好</div>
    <div>你好</div>
    <div>你好</div>
    <!-- span 在一行内显示,适合做一行内的文字操作 -->
    <span>你好</span>
    <span>你好</span>
    <span>你好</span>
    <span>你好</span>
    1<span >2</span>3
</body>
</html>

5、语义标签 

<!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>
    常规字体<br>
    <b>粗体字</b> <strong>粗体字</strong><br>
    <i>斜体字</i> <em>斜体字</em><br>
    <u>下划线</u> <ins>下划线</ins><br>
    <s>删除线</s><del>删除线</del>
</body>
</html>

6、img图片 

<!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>
    <!--src 图像源,图片的地址-->
    <!--网络路径-->
    <!-- width : 设置图片的宽度
        height : 设置图片的高度
        如果宽高只设置一个,另一个等比例缩放
    -->
    <img  width="300" height="300" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F060421091316%2F210604091316-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639122120&t=2af3f353b02c253946eee4a8e15ddbd7">
    <!-- 相对路径 -->
    <!-- title : 鼠标悬停在图片上提示的文字 
        border ： 图片的边框
    -->
    <img title="美女" border=10 width="300"  src="./images/1.jpg" alt="">
    <!-- alt 找不到图片的时候 显示的文字 -->
    <img src="D:/1.jpg" alt="走丢啦">
</body>
</html>

7、超链接 

<!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>
    <!-- href : 目的地 -->
    <a href="http://www.baidu.com">百度一下,你就知道</a>
    <!-- target : 规定打开的方式,默认是当前窗口打开
            _self : 当前窗口打开
            _blank : 新窗口打开
    -->
    <a href="2" title="买买买!" target="_blank">淘宝</a>

    <!-- 点击图片,跳转淘宝 -->
    <a href="http://www.taobao.com" >
        <img src="./images/1.jpg" width="100" alt="">
    </a>

    <!-- 注意事项 必须有href属性,否则不能点击,检查是否拼错 -->
    <a herf="http://www.taobao.com">百度</a>
</body>
</html>

8、base 

<!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>
    <!-- 设置页面中所有的连接都在新窗口打开 -->
    <base target="_blank">
</head>
<body>
    <a href="1" >11111</a>
    <a href="2">22222</a>
    <a href="3">33333</a>
    <a href="4">44444</a>
    <a href="5">5555</a>
</body>
</html>

9、锚点 

<!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>
    <h1 id="top">目录</h1>
    <a href="#a1">个人生活</a>
    <a href="#a2">演艺经历</a>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <h3 id="a1">个人经历</h3>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <h3 id="a2">演艺经历</h3>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <a href="#top">回到顶端</a>
</body>

</html>

Cenobite961
关注
  • 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' ...
微信小程序day01
hssf_xxy的博客
12-19 7751
1、微信公众平台： 微信公众平台是由腾讯提供的，基于腾讯的微信服务器，为广大的企业组织或个人提供用户管理或咨询服务的平台。 2、微信公众号平台提供的账号类型有 服务号：给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。 详细说明链接：https://kf.qq.com/faq/120911VrYVrA150918fMZ77R.html?scene_id=kf3386 订阅号：为媒体和个人提供的一种新的信息传播方式，构建与读者之间更好的沟通与管理模式 详细说明链接：htt
Calendar.DAY_OF_MONTH存放什么数据
evilcry2012的专栏
07-20 1487
Calendar.DAY_OF_MONTH存放什么数据 [问题点数：20分]             不显示删除回复           显示所有回复            显示星级回复           显示得分回复            只显示楼主          收藏 关注 csiyou 陈思有 本版等级： 结
SAP函数 LAST_DAY_OF_MONTHS 获取月末最后一天日期
weixin_30446197的博客
03-21 1553
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 ...
字节青训营 day01前端与html
enhenglhm的博客
01-16 8597
前端技术栈 前端需要关注方面 前端的边界（很广，越来大前端，但是技术在不断更新，需要不断学习） 开发工具 html概念 htm语法 常见内容布局结构 语义化是什么（面试可能会问） 为什么要语义化？ 首先了解谁在使用： ...
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 即上海时区，就可以解决问题，但有时候还是会碰到...
# Day01-Java基础
Java厂长
07-25 7961
Day01-Java 1、Java主要特点 简单性、跨平台性、分布性、安全性、健壮性、平台独立与可移植性、多线程、动态性、面向对象的编程语言、支持垃圾自动收集处理等，可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用等多个系统中。 2、计算机的高级汇编语言类型： 编译型——c语言 解释型——html 编译型和解释型的结合——java java运行原理源程序进行编译形成字节码文件在一台电脑进行解释程序 java最核心的部分就是虚拟机JVM 3、JVM（Java Visual Machine)
已解决无法加载文件 E:\day_01\Scripts\activate.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?Li
努力让自己发光，对的人才能迎着光而来
12-21 7917
已解决无法加载文件 E:\day_01\Scripts\activate.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的about_Execution_Policies。 + CategoryInfo: SecurityError: （:） [ ]. ParentContainsErrorRecordException + FullyQualifiedErrorId : UnauthorizedAcc
关于Calendar获取指定月份的第一天和最后一天的处理方案
大雷
10-18 3408
背景 项目应用后期特此纪要！ 问题 Calendar如何获取指定月份的第一天和最后一天的日期？ 说明 主要利用DAY_OF_MONTH的-1位来获取。 纪要 下面是一则随笔的Demo用例，以供参考： package com.company.date; import java.util.Calendar; import java.util.Date; /** * 关于Calendar获取指定月份的第一天和最后一天的处理方案。...
edusrc0day挖掘技巧
热门推荐
weixin_50464560的博客
05-05 1万+
网瑞达web资源管理系统0dayps： 作为在edusrc的小白，经常看见大师傅们的刷屏，我也很向往能像大师们一样有一次刷屏的机会，于是有了这一次的渗透之旅。思路：要想刷屏上分，就得找系统来挖掘，对于不会审计的我来说只有做一些黑盒测试（会审计大佬可以忽略这一点）首先我们利用fofa找一些与edu有关的系统​ 语法：“系统” && org=“China Education and Research Network Center”其中可以在前面加一些：阅卷系统、评分系统、直播系统、录播系统。（我
HTML5_day01
08-05
HTML5_day01:主要记录了sublime的信息以及安装，和Package Control的插件管理器，和Emmet插件的简略使用
day_45_bookstore.rar_day_45_bookstore
09-24
【标题】：Day 45 Bookstore - MVC结构与Java在线书库系统 【描述】：这个项目是一个基于MVC（Model-View-Controller）设计模式的Java编程实践，它实现了一个在线书库系统，具备书籍上传和下载功能。在这个系统中，...
day01-HTML附件
07-23
在这个"day01-HTML附件"的学习资料中，我们将深入探讨HTML的基本概念、元素、属性以及如何在实践中运用它们。 1. **HTML基础**: HTML由一系列元素组成，这些元素以开始标签和结束标签的形式出现，如`<p>`和`</p>`，...
Day01_HTML基本标记.zip
09-15
在"Day01_HTML基本标记.zip"这个压缩包中，我们将会探索HTML的基本元素和结构，这是学习网页设计的第一步。 首先，HTML文档由一系列的元素组成，每个元素都是通过标签来定义的。例如，`<html>`标签是整个文档的根...
springmvc_day01_01_start.zip
12-29
本教程以"springmvc_day01_01_start.zip"为起点，旨在帮助初学者快速掌握SpringMVC的基本概念和使用方法。我们将通过一个简单的示例，演示如何利用SpringMVC实现一个超链接请求到控制器（Servlet），从而完成页面的...
html--前端
m0_60274660的博客
08-07 381
只有body中的标签的内容才会输出到中断；如果要看script标签中的javascript代码的输出，需要按F12,点击Console查看。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1625
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
HtmlUnit：探索Web自动化的强大工具
最新发布
Aaron_945的博客
08-12 604
HtmlUnit 是一个开源的“无头”（headless）浏览器，它模拟了浏览器环境，允许开发者在不需要实际浏览器界面的情况下执行JavaScript、CSS、DOM操作以及HTTP请求。它模拟了浏览器的许多方面，包括DOM操作、CSS选择器、AJAX请求等，使得开发者可以在服务器端或无需图形界面的环境中执行Web应用程序的自动化测试。通过模拟浏览器的行为，HtmlUnit使得开发者能够在无需实际浏览器界面的情况下执行复杂的Web操作。对于AJAX请求，HtmlUnit提供了。
HTML - 简易版打字练习
Lushengshi的博客
08-09 746
纯html实现打字软件练习效果
JavaWeb-01(Java进阶内容详解，Html、CSS、JS)
泰勒今天想展开的博客
08-08 913
Chinese (Simplified) (简体中文) Language Pack for Visual Studio CodeCode Spell Checker检查单词错误VueHelperBeautifyVetur。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值