初学HTML

最新推荐文章于 2024-10-29 14:54:04 发布
最新推荐文章于 2024-10-29 14:54:04 发布
阅读量836 收藏 1
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SuperYjjj/article/details/114380058
版权

HTML

文章目录

  • HTML(Hyper Text Markup Language)超文本标志语言
  • HTML5+CSS3
  • W3C
    • World Wide Web Consortium(万维网联盟)，Web技术领域最权威和具影响力的国际中立性技术标准机
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)
<!--!DOCTYPE使用什么规范-->
<!DOCTYPE html>

<!--总标签-->
<html lang="en">
<!--head网页头部-->
<head>
    <!--meta描述性标签，用来描述网站信息-->
    <!--charset字符编码信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="关键字">
    <meta name="description" content="描述">

    <!--title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body网页主体-->
<body>
HelloWorld!
</body>
</html>

基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签p，换行标签br-->
<h1>静夜思</h1>
<p>
李白 〔唐代〕<br>

床前明月光，疑是地上霜。<br>

举头望明月，低头思故乡。</p>

<!--水平分割线hr-->
<hr>

<!--字体样式-->
<strong>粗体</strong><br>
<em>斜体</em><br>
<!--特殊符号
通过&调用
-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
大于&gt;<br>
小于&lt;<br>
&copy;版权所有yjj<br>


</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址
    相对地址 or 绝对地址
    ../     上一级目录

alt:图片不存在时会显示，作为图片的替代
title:鼠标悬停提示文字

-->
<img src="../resources/image/1.png" alt="图片" title="Muse Dash" width="300" height="300">

</body>
</html>

链接标签

</head>
<body>

<!--锚标记-->
<a name="top">顶部</a>
<a href="#down">回到底部</a>
<br>

<!--a标签超链接
href:跳转页面
target:表示窗口在哪打开
    (_blank:新标签页打开
     _self:在自己网页中打开)
-->
<a href="我的第一个网页.html" target="_blank">我的第一个网页</a>
<br>
<a href="https://www.baidu.com" target="_self">百度</a>
<br>
<a href="https://baike.baidu.com/item/Muse%20Dash/22587569">
    <img src="../resources/image/1.png" alt="图片" title="Muse Dash" width="850" height="500">
</a>
<br>

<img src="../resources/image/2.png" alt="图片" title="Muse Dash" width="850" height="500"><br>
<img src="../resources/image/3.png" alt="图片" title="Muse Dash" width="850" height="500"><br>
<img src="../resources/image/4.png" alt="图片" title="Muse Dash" width="850" height="500"><br>
<img src="../resources/image/5.png" alt="图片" title="Muse Dash" width="850" height="500"><br>
<img src="../resources/image/6.png" alt="图片" title="Muse Dash" width="850" height="500"><br>

<a name="down">底部</a>
<!--锚链接
1、设置锚标记
2、跳转到标记，用#

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

<!--功能性链接
邮件链接：mailto:
-->
<a href="mailto:1660271734@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击加我QQ" title="点击加我QQ"/>
</a>
</body>

</html>

行内元素和块元素

  • 块元素

    • 无论内容多少，该元素独占一行
    • 例如(p段落标签、h1-h6级标签…)

  • 行内元素

    • 内容撑开宽度，左右都是行内元素，可以排在一排
    • 例如(a功能性标签、strong粗体、em斜体…)

简单来说，不会换行的就是行内元素，换行的就是块元素，在CSS里比较重要

列表

  • 有序列表
  • 无序列表
  • 自定义列表
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表    ordered list
应用范围：试卷，问答等
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C/C++</li>
    <li>前端</li>
    <li>GO</li>
</ol>

<!--分割线-->
<hr/>

<!--无序列表    unsorted list
应用范围：导航，侧边栏等
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C/C++</li>
    <li>前端</li>
    <li>GO</li>
</ul>

<!--分割线-->
<hr/>

<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容

应用范围：网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C/C++</dd>
    <dd>前端</dd>
    <dd>GO</dd>

    <dt>位置</dt>

    <dd>中国</dd>
    <dd>广东省</dd>
    <dd>珠海市</dd>
</dl>

</body>
</html>

表格

  • 优点

    • 简单通用
    • 结构稳定

  • 基本结构

    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<!--表格  table
行   tr
列   td

-->

<!--border:表格加边框-->
<table border="1px">

    <tr>
<!--        colspan：跨列-->
        <td colspan="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a1-1</td>
    </tr>
    <!--    一行四列-->
    <tr>
<!--        rowspan：跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>

</table>
</body>
</html>

媒体元素

  • 视频元素

    • video

  • 音频元素

    • audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--controls：控制选项，有这个才能播放
autoplay: 自动播放
-->
<video src="../resources/video/KleeWP.mp4" controls autoplay></video>

<audio src="../resources/audio/Whiskey.mp3" controls autoplay></audio>
</body>
</html>
SuperYjjj
关注
HTML初学者作业
weixin_53089473的博客
03-02 2391
HTML初学者第一课作业内容： 初学者理解浅薄，有错误在所难免，可以和楼主交流以助于及时改正 结合今天上课所讲内容，完成上传图片页面样式开发 要求如下: 1. 配色，背景图片根据自己喜好，上网查找素材。 header 和footer 地方，可以根据自己想法，设计美化一下 2. banner地方，可以点击跳转，点击后，新开网页跳转到百度吧 3. 表单项目，可以根据自己想法增加项目，元素需要增加2项以上check 4.作业成果物: 提交html资源的源码 遇到的困难： 1.表格table &lt.
前端+HTML+JS+CSS+四大天王+初学html者
05-02
本文将深入探讨“前端+HTML+JS+CSS”，以及所谓的“四大天王”概念，这对于初学HTML者来说是非常重要的基础知识。 首先，前端开发是关于创建网页和应用程序的用户界面，包括布局、交互、视觉设计等。它主要由三个...
初学HTML+CSS练习搭建个人博客笔记
向着太阳迎着光
10-13 2万+
前言 工作需求初学html+css的使用，在网上看视频学着写了一个个人博客 在这边只是做一下自己的学习笔记记录，如果对你有帮助，你就稍微看看，如果没有请忽略！下面上html代码： Document ......
HTML简介与开发工具推荐[初学HTML]（一）
m0_46647730的博客
06-20 1545
HTML简介
初学HTML5——CSS3圆角边框
lxl513513的博客
03-27 3161
border-radius属性 CSS3的圆角边框实际上是矩形的四个角分别做内切圆，然后通过内切圆的半径来控制圆角的弧度 CSS3的圆角边框使用border-radius属性来实现， 1.基本语法如下所示： border-radius：1-4 length|% / 1-4 length|%； 2.属性解释 length：用于设置对象的圆角半径长度，不可为负值。 ...
2021-11-16初学HTML
hnkdjsjYxl的博客
11-16 2823
从今天开始学习HTML。 学习网址：www.w3school.com.cn 1、什么是HTML： （1）HTML 指的是超文本标记语言 (Hyper Text Markup Language) （2）HTML 不是一种编程语言，而是一种标记语言 (markup language) （3）标记语言是一套标记标签 (markup tag) （4）HTML 使用标记标签来描述网页 2、HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 （1）HTML 标签是由尖括号包围的关键词，
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 23万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
初学html和js感悟
Growing墨染轨迹
04-14 3243
什么是html?我就替大家百度一下呵呵。。。 html ： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析 说起来html 大家自然而然就想到了什么div 什么style 什么js 这些都是些什么鬼？都能用来干什么？我相信
html插入图像标签是什么,初学HTML 常见的标签(三) 插入类标签
weixin_42510317的博客
06-21 1903
第三篇博客, 这次说的是插入链接类标签, 我们平常在网页中经常能看到蓝色的链接类标签, 或者是一张图片, 一个电邮, 这些都是插入链接类的标签起的作用.链接标签链接标签可实现超链接, 它在网页中是无处不在的, 只要有链接的地方, 就会有这个标签, 它的语法和其他的标签不太相同, 对于初学者而言, 刚开始学的时候毕竟初学者并不在标签中添加属性等等, 的语法是 链接显示的文本. title这个属性是指...
简单学习HTML图片轮播（初学）
qq_56930981的博客
12-20 1万+
先了解大体结构： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>标题</title> </head> <body> <img id="pic" src="index/pic1.jpg" width="690" height="350"> </body&gt...
初学者用html制作的发射爱心
qq_51191109的博客
02-21 4620
这个图是自己画的，因为当时在学transition就突然间想画了一个小娃娃发射爱心的图，但是可能是后面另一个娃娃脸变红的图不够精细，图太少了导致前面发射心心的过程很清晰，但是另一个娃娃接受心心后脸红的这一部分没有很好的呈现，如果有人使用它的话可以再往后面加几帧。
初学Html 5 + CSS 3 +JS自主编写新年倒计时网页
06-14
初学Html 5 + CSS 3 +JS自主编写新年倒计时网页，可以根据自己的需求来更改里面的内容，适合初学者来借鉴；大神勿喷！！！还请大神们提出宝贵的意见，感谢！
初学HTML 网站源码-自己做的
07-28
本资源“初学HTML 网站源码-自己做的”是一个专门为初学者设计的HTML实践项目，旨在帮助初学者通过实际操作来提升技能。 该源码网站可能包含了一系列的HTML文件，每个文件代表一个网页，例如首页、新闻页面或网址...
html初学者入门教程
05-22
在探讨HTML初学者入门教程之前，我们首先需要理解HTML是什么。HTML，全称为超文本标记语言（Hypertext Markup Language），是一种用来创建网页的标准标记语言。HTML文件是包含文本内容和标记（tags）的特殊文本文件...
Html初学练习.zip
01-01
Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html...
HTML入门教程4：HTML属性
软考鸭
10-29 731
HTML属性是附加在HTML标签上的额外信息，它们以键值对的形式出现，并放置在标签的起始部分内。这些属性为浏览器提供了额外的指令，以更准确地渲染网页内容。通过本文的介绍，相信大家对HTML属性有了更深入的了解。HTML属性是网页开发中的基础且重要的部分，它们能够极大地增强网页的功能和表现力。在实际开发中，我们应该灵活运用HTML属性，结合CSS和JavaScript等技术，创造出更加丰富和动态的网页内容。同时，也希望大家能够在开发过程中不断学习和探索新的HTML属性，以提升自己的网页开发技能。
炫酷的登录框!(附源码)
最新发布
m0_50864141的博客
10-29 1515
【代码】炫酷的登录框!(附源码)
HTML的常用标签
2302_79986066的博客
10-25 747
我是span1 我是span2回到图片
4KB原生html实现table下tr的上下次序自由拖动
易查薪
10-27 360
4KB原生html实现table下tr的上下次序自由拖动
"初学HTML实例网页代码及个人网站设计实践
HTML实例网页代码是一段适合于初学HTML的同学使用的代码。这段代码中包含了CSS的样式设置以及div的样式布局，使得该实例较为全面，对学生的学习有很大的帮助。本文将通过从设计个人网站开始，并将其转换为代码的过程...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值