HTML基础

最新推荐文章于 2024-11-11 17:28:03 发布
最新推荐文章于 2024-11-11 17:28:03 发布
阅读量86 收藏
点赞数
文章标签： html css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cling_y/article/details/121177648
版权

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页的基本标签</title>
</head>
<body>
<!--1、标题标签-->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<!--2、段落标签-->
<p>两只老虎    两只老虎</p>
<P>跑得快       跑得快</P>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<!--3、换行标签-->
两只老虎    两只老虎<br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
<!--4、水平线标签-->
<hr/>
<!--5、字体样式标签-->
加粗标签：<strong>加粗</strong><br/>
斜体标签：<em>斜体标签</em><br/>
斜体加粗：<em><strong>斜体加粗</strong></em><br/>
<!--特殊符号：空格、尖括号...-->
空格符号：空&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
</body>
</html>

效果：

在这里插入图片描述

1、图像标签：

<body>
<img src="../resources/images/test.jpg" alt="未加载出来时候显示的文字" title="悬停文字" width="200" height="200">          <!--"../表示的是返回上一级目录"-->
</body>

2、超链接的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>
<body>

<a name="top">目标地址</a><br/>

<!--a标签
    target属性表示是新打开的界面在是新的网页还是原来的网页
-->
<a href="图像标签.html" target="_blank">点击图像标签</a><br/>

<a href="https://www.baidu.com/" target="_self">百度标签</a><br/>

<!--也可以通过点击图片来进行跳转-->
<a href="html_2.html"><img src="../resources/images/test.jpg"
                           alt="没有显示图象是候的文字" title="悬停文字" width="200" height="200"></a><br/>
<hr/>
<!--锚链接
    需要一个锚链接的标记
    a.首先需要在目标的位置设定一个名字
        例如：<a name="top">目标地址</a>
    b.然后在底部使用#加上目标位置的name
        <a href="#top">点击回到顶部</a>
-->
<a href="#top">点击回到顶部</a><br/>
<a href="html_2.html#top2">点击跳转页面</a><br/>       <!--还可以跳转到其他页面的任意位置-->


<hr/>
<!--
    功能性链接：下面是一个联系别人qq的链接
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1784171015&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1784171015:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>
</html>

2.2、 超链接应用效果

在这里插入图片描述

3、行内元素和块元素

		a.行内元素：会独占一行的标签，例如：标题标签、段落标签、行标签...
		b.块元素：可以与其他内容排在一起的标签，例如：加粗标签、斜体标签...

4、列表

4.1、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表（又数字自动表示）：order list-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>linux</li>
    <li>c/c++</li>
</ol>
<hr/>
<!--无序列表(没有数字自动表示)：unordered list-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>linux</li>
    <li>c/c++</li>
</ul>
<hr/>
<!--自定义列表:definition lists-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>pyton</dd>
    <dd>linux</dd>
    <dd>c/c++</dd>
</dl>
</body>
</html>

4.2、效果如图：

在这里插入图片描述

5、表格

5.1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格一</title>
</head>
<body>
<!--border:边框属性。tr:行（table row）。td：列。colspan：跨列。rowspan:跨行。-->
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">cling</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">援军</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

5.2、输出

在这里插入图片描述

6、媒体元素

6.1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--controls属性：控制的进度条。autoplay：自动播放属性-->
<audio src="../resources/audio/music_test.mp3" controls autoplay></audio>
<video src="../resources/vedio/music_test.mp4" controls autoplay></video>
</body>
</html>

7、内联标签

7.1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="https://www.bilibili.com/" frameborder="0"></iframe>
</body>
</html>

7.2、输出：

在这里插入图片描述

8、表单

8.1、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
    form标签来创建表单
    type标签来选择输入的类型
    method中的表单提交方式：get(不安全，提交时候用户名和密码会被看见)
-->
<form action="first_html.html" method="get">
    <p>名字：<input type="text" name="uername" value=:cling![在这里插入图片描述](https://img-blog.csdnimg.cn/5e0261e730394a37af335e8a0dabd12a.png)
></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p
</form>
</body>
</html>

8.2输出：

在这里插入图片描述

在这里插入图片描述

9、单选框和多选框

9.1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    radio：单选时候的属性
    value:初始值
    name:是他们成为同一个组从而实现只能选择一个
-->

<p>单选
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>
<hr/>
<p>多选
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="reading" name="hobby">读书
    <input type="checkbox" value="girl" name="hobby">女孩
</p>
</body>
</html>

9.2、输出：

在这里插入图片描述

10 按钮：

oput type=" button"普通按纽
input type=" Lmage"图像按纽
input type=" submit"提交按纽
input type= "reset"重置

11 下拉框、文本域、文件域

11.1、代码：

    <p>下拉框
    <select name="下拉框" >
        <option value="china" >中国</option>
        <option value="usa">美国</option>
        <option value="Swedish" selected>瑞典</option>
    </select>
    </p>

    <hr/>
    <p>文本域
        <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
    </p>

    <hr/>
    <p>文件域
        <input type="file" name="files">
    </p>

12、各个字符的解释说明

在这里插入图片描述
表单的验证
=

Cling007
关注
html基础教程之HTML 标题
html基础教程
02-03 4536
HTML标题 在 HTML 文档中，标题很重要。 HTML 标题 标题（Heading）是通过 <h1> – <h6> 标签进行定义的. <h1> 定义最大的标题。 <h6> 定义最小的标题。 实例 <h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这...
HTML基础语句
wfr661的博客
08-05 2539
HTML基础语句 1、HTML语句框架 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- ①标签不能交叉嵌套 --> 正确：<p><i>早安，Alex</i></p> 错误：<p&
HTML基础 - HTML表格
热门推荐
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
【HTML基础】HTML的基本结构
ebb29bbe的博客
09-13 6726
HTML基本结构包含html标记，head标记，body标记...
HTML基础知识总结
ss810540895的博客
05-05 8869
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
HTML基础填空题
weixin_45031351
06-05 3679
1.用户列表标签中，添加__target_________属性可以让用户列表文字点击时打开一个新的窗口，使用____锚标记/锚点_______跳转到本页面的指定位置 2.Html的全称_____Hypertext Markup Language______________. 3.在网页上使用___display:none____属性值隐藏HTML标签 4.在网页上使用__标签在网页中添加下划线 5...
Html基础知识点整理
m0_53157173的博客
06-15 1942
Html基础知识点整理基本标签字体标签格式化标签1. < br/ >2. < p > < /p >3. < h1 > < /h1 >4. & nbspHtml的注释图片标签1. < img/ >列表标签1. < ul > < /ul >2. < li > < /li >3. < ol > < /ol >超链接标签< a > < /a &
HTML常用基础标签详解
实泽有之，无泽虚之
03-09 3033
本文通过样例详解HTML常用的基础标签，包括以下标签：html、h1、h2、h3、h4、h5、h6、body、p、a、br、img。
HTML基础知识
田雪艺
02-28 8911
HTML：全称Hyper Text Markup Language超文本标签语言，是网页的源码 其源码解释和执行的工具是浏览器 HTML与C#有一点不同的是不区分大小写，而C#是严格区分大小写的，网页文件格式为：.html或者.htm HTML基本结构： <html> </html> 段落标签：<p></p> 空格标签：&nbsp 标题标签：<h#>:#=1~6 图片标签：<img src="..." />..
HTML基础知识学习
thinking_fioa的博客
01-04 1万+
HTML基础@author 鲁伟林 一直开发后端，现在开始全栈培养自己。 学习html的网址是：http://www.runoob.com/html/html-intro.html gitHub地址: https://github.com/thinkingfioa/Notes/tree/master/front-developer/html1 HTML简介1.1 最简单的基本结构1. &lt;ht...
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2523
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML基础模板
qq_61690596的博客
07-18 2157
HTML基本模板，每个基础元素的内容和作用
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4888
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
认识HTML（简介）
gjgeiugrwhgrewg的博客
11-11 514
只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。在这里，你将掌握一些重要的概念和语法，学习如何将 HTML 用于文本、如何创建超链接以及运用 HTML 去构建一个网页。该部分提供了一些链接，它们指向那些你在构建 Web 页面的过程中最常见的问题的解决方法：如何处理网页标题、添加图片或视频、强调某些内容、建立基本的表单等。这个模块将带领你探索如何使用 HTML 在你的网页中包含多媒体内容，包括通过许多不同的方式嵌入图片，以及如何嵌入视频、音频甚至整个其他网页。
HTML&CSS： 日落卡片
最新发布
weixin_52814911的博客
11-11 532
这段代码创建了一个包含日落图像和文本的美观卡片，使用了现代CSS背景模糊和渐变，以及SVG图形来增强视觉效果。
初识HTML
chestnut_orenge的博客
11-05 1073
什么是HTML呢？HTML是超文本标记语言，HTML代码是由“标签”构成的超文本：文本、声音、图片、视频、表格、链接标记：由许许多多的标签组成HTML页面是运行到浏览器上面的。
一七五、HTML 不同类型的事件及其说明和示例
梅某某
11-07 915
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
HTML基础知识速览：文档结构与常用标签
"该文档是关于HTML基础知识点的总结，主要涵盖了HTML文档的基本结构、标题标签、文字属性、特殊符号、行控制、图片插入以及文字布局等方面的内容。适合初学者学习和参考。" HTML（HyperText Markup Language）是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值