HTML入门

最新推荐文章于 2023-05-03 22:19:26 发布
最新推荐文章于 2023-05-03 22:19:26 发布
阅读量221 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cokez/article/details/103713352
版权

什么是HTML

HTML ： Hyper Text MarkUp Language （超文本标记语言）
文本：文字、有格式的文本
超文本：文字，图片，音频，视频，动画、定位…….
标记语言 ： <>

浏览器加载每个HTML代码, 加载各个标签后在网页上产生相应的效果

idea中的配置

删除原有的scr文件夹,重新创建一个新的文件夹
在这里插入图片描述
设置HTML代码写好后选择加载的浏览器,若没有你要用的浏览器,需要找到这个浏览器所在文件夹的.exe文件地址,放在原有的path地址上## 在这里插入图片描述

基础语法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静夜思</title>
</head>
<body>
<h1>静夜思</h1>
<!--h1表示标题,h2,h3等分别表示次标题-->
<em>唐代</em>&nbsp;&nbsp; 作者： <strong>李白</strong> <br/>
<!--&nbsp 空格          strong  加粗字体       em表示斜体-->
<hr/>
<!--hr  插入一条分割线-->
<p>
    <!-- p 表示插入一个新的段落 -->
    床前明月光,<br/>
    疑是地上霜,<br/>
    举头望明月,<br/>
    低头思故乡,<br/>
    <!--br  表示换行-->

</p>

</body>
</html>

效果
在这里插入图片描述

插入图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路飞</title>
</head>
<body>
<img src="../statics/images/路飞.jpg" title="路飞" width="500" height="1000">
</body>
</html>

效果
在这里插入图片描述

超链接

href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
_self : 在自己的窗口打开
_blank： 在新窗口中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<a href="https://www.baidu.com/"target="_self">
    <img src="../statics/images/bd.png">
</a>
</body>
</html>

效果
在这里插入图片描述

锚链接

用于页面中的跳转,也可以在不同页面之间跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>
<a href="#markerA">A</a><br>
<a href="#markerB">B</a><br>
<a href="#markerC">C</a><br>

<hr>
<!--标记A-->
<a name="markerA">A</a>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>

<a name="markerB">B</a>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>

<a name="markerC">C</a>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
</body>
</html>

列表

  • 有序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
<ol>
    <li>热搜1</li>
    <li>热搜2</li>
    <li>热搜3</li>
</ol>
</body>
</html>
  • 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ul>
</body>
</html>
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
<dl>
    <dt>苹果</dt>
    <dd>葡萄</dd>
    <dd>桃子</dd>
    <dd>芒果</dd>
    <dd>香蕉</dd>
    <!--dt表示顶着左端显示
        dd表示空出几个空格-->
</dl>
</body>
</html>

表格

  • 表格 table
  • 行 tr rowspan
  • 列 td colspan
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td rowspan="2">1-1</td>    
        <!--rowspan表示跨行-->
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>

        <td colspan="2">2-2</td>
        <!--colspan表示跨列-->
        
    </tr>
</table>
</body>
</html>
Cokez
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML从入门到精通
cgblpx的博客
06-01 4万+
目录 1 前端技术： 1 1.1 学习方法 1 1.1.1 前端要怎么学？ 1 1.1.2 前端技术栈 5 1.2 HBuilderX 7 1.2.1 介绍 7 1.2.2 安装 7 1.2.3 主题 9 1.2.4 字体 9 1.2.5 去掉px转rem提示 9 1.2.6 备注字体颜色 10 1.2.7 项目结构 11 1.2.8 jQuery语法支持 11 1.3 Web概述 12 1.4 静态页面HTML 13 1.4.1 概念 13 1.4.2 结构 13 1.4.3 入门案例 14 1.4.4
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
js 浏览器写coke
ljq_qx的专栏
05-03 666
/*设置cookie*/ function setCookie(name, value, Days) { if (Days == null || Days == '') { Days = 300; } var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.cook
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
Html入门练习
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
菜鸟教程：零基础HTML入门
weixin_52163352的博客
11-08 2万+
HTML入门 文章目录一、HTML是什么？二、入门实例1.新建html文档2.html常用标签三、属性总结 一、HTML是什么？ HTML全称：Hyper Text Markup Language 中文名：超文本标记语言 HTML是由W3C组织定义的语言标准，是用于描述页面机构的语言。 二、入门实例 1.新建html文档 如图： 每一个html文件开头必须是这个标签，作用是告诉浏览器此文档为html文档。 ：根元素在所有的html文件中这个元素级别最高 网页编码格式，一般为UTF-8 中间内容就是这个h
HTML入门学习笔记+详细案例
Biteht的博客
04-22 1万+
✨HTML入门学习笔记+详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩🤳,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟😋,咋们废话不多说,跟紧步伐,开始学习吧~😊 文章目录1.什么是HTML2.入门实例3.HTML标签详解3.1 标题标签3.2 段落标签3.3 换行标签3.4 格式化标签3.5 链接标签外部链接内部
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
前端学习之HTML入门
肥叔菌的博客
03-30 8774
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
HTML 入门资料Demo
01-23
HTML 入门手册(一)：https://shuaici.blog.csdn.net/article/details/135680716 HTML 入门手册(二)：https://shuaici.blog.csdn.net/article/details/135698613 HTML 英文全称 " HyperText Mark-up Language " , ...
HTML入门学习及笔记.zip
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
html入门教程
01-25
html快速入门教程，简单明了，带源码，适合初学者
聪明人的个人成长史蒂夫·帕弗利纳 （Steve Pavlina）
07-09
本书作者史蒂夫是全球个人成长领域的知名导师，在全球150多个国家及地区拥有读者。本书第一部分介绍个人成长的七个原则，分别是：真实、爱、能量、一体、主导、勇气、清醒自主。第二部分介绍如何将这七个原则运用在生活中的各个方面，包括习惯、职业、金钱、健康、关系以及心灵。本书不仅让你拥有成长的系统理论，还带你切实解决人生遇到的很多重大问题。
r语言数据分析案例开发教程.docx
最新发布
07-09
r语言数据分析案例
javascript\json
07-09
什么是javascript,什么是json,json如何解析，js对象如何生成，本文给你提供详细答案
计算 EEG 信号的平均带宽功率原始数据
07-09
计算 EEG 信号的平均带宽功率原始数据
HTML入门教程
09-03
上述是HTML入门教程的基本内容，希望对大家的学习有所帮助。 HTML是一种初学者可以轻松掌握的标记语言，它的应用非常广泛，不仅在网页制作中大量使用，也在各种应用软件中有所体现。通过学习HTML，可以掌握网页制作...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值