0基础学HTML，从快捷方式（IntelliJ IDEA）入手，一步步就能看懂了！
2024-05-20 22:07:32
HTML5
1、基本认识
- HTML：Hyper Text Markup Language(超文本标记语言)
- W3C：World Wide Web Consortium(万维网联盟)
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
2、网页的基本信息
<!-- DOCTYPE:告诉浏览器，使用什么规范 () -->
<!DOCTYPE html><html lang="en"><!-- head:head标签代表网页头部 -->
<head><!-- meta标签：描述网站的一些信息 --><meta charset="UTF-8"><meta name="keywords" content="Feild学HTML"><meta name="description" content="认真学习，做好网站"><!-- 网页标题 --><title>我的第一个网页</title>
</head><!-- body:body标签代表网页主体 -->
<body>
I'm comming!</body>
</html>
3、网页的基本标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body><!-- 标题标签:h*-->
<!--快捷方式：h* + tab-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><!--段落标签:p-->
<!--快捷方式：p + tab-->
<p>不要温顺的走进那个良夜，</p>
<p>激情不能被消沉的暮色淹没，</p>
<p>咆哮吧，咆哮，痛斥那光的退缩。</p>
<p>智者在临终的时候，对黑暗妥协，</p>
<p>是因为它们的语言已黯然失色，</p>
<p>它们不想被夜色迷惑，</p>
<p>咆哮吧，咆哮，痛斥那光的退缩。</p><!--水平线标签：hr-->
<hr/><!--换行标签:br-->
不要温顺的走进那个良夜，<br/>
激情不能被消沉的暮色淹没，<br>
咆哮吧，咆哮，痛斥那光的退缩。<br/>
智者在临终的时候，对黑暗妥协，<br/>
是因为它们的语言已黯然失色，<br/>
它们不想被夜色迷惑，<br/>
咆哮吧，咆哮，痛斥那光的退缩。<br/><hr/>
<!-- 粗体：strong ， 斜体:em -->
<p>粗体：<strong>wisdex</strong></p>
<p>斜体：<em>Feild</em></p><hr/>
<!--特殊符号-->
<!--空格： -->
空 格
空 格 <br/><!--其他&*;类-->
>
< <br/>
©版权所有Feild</body>
</html>
4、图像标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body><!--图像标签
快捷方式：img + tab
src:（必填）图片地址相对地址：通过../ (通过上一级路径来找到具体地址)绝对地址：D:\note\code\HTML\resoures\image\cn.png
alt：（必填）图片备注，在图片无法显示时用
title：鼠标悬停时显示内容
width:图片宽度
height：图片高度
...
-->
<img src="../resoures/image/cn.png" alt="网站logo"title="悬停文字：欢迎你！" width="200" height="200">
<img src="" alt=""></body>
</html>
5、链接标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body><!--锚链接：锚点（标记）：顶部-->
<a name="top">顶部</a><!--链接标签
快捷方式：a + tab
href:(必填) 要跳转到那个页面
可以直接嵌套图片
target:心窗口在哪里打开_blank:在新标签中打开
--><a href="1、我的第一个网页.html" target="_blank">点击跳转到页面1</a><br/>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a><br/>
<a href="1、我的第一个网页.html"><img src="../resoures/image/cn.png" alt="网站logo"title="悬停文字：欢迎你！" width="200" height="200">
</a><br/><!--锚链接：跳转锚点（标记）#锚点名（可以跨页面）
-->
<a href="#top">回到顶部</a><!--功能性链接
邮件链接：mailto：
-->
<a href="mailto:feild@wisdex.cn">联系我</a></body>
</html>
6、列表标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表标签学习</title>
</head>
<body><!--有序列表-->
<!--快捷方式：ol + tab；li + tab-->
<ol><li>java</li><li>html</li><li>css</li><li>vue</li>
</ol><!--无序列表-->
<!--快捷方式：ul + tab；li + tab-->
<ul><li>顺序结构</li><li>选择结构</li><li>循环结构</li>
</ul><!--自定义列表，快捷方式类似
dl：标签
dt：列表名称
dd：列表内容
--><dl><dt>语言</dt><dd>Java</dd><dd>Linux</dd><dd>Python</dd><dd>Go</dd><dt>小工具</dt><dd>Swagger</dd><dd>Json</dd><dd>Ajax</dd>
</dl></body>
</html>
7、表格标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签学习</title>
</head>
<body><!--表格标签
表格：table + tab;加边框:border
行：tr(table row) + tab;跨列：colspan,记得删除占用格
列：td + tab；跨列：rowspan,记得删除占用格
--><table border="1px"><tr><!-- 跨列：colspan（column span） --><td colspan="3">11</td><td>14</td></tr><tr><td rowspan="2">21</td><td>22</td><td>23</td><td>24</td></tr><tr><td>32</td><td>33</td><td>34</td></tr>
</table></body>
</html>
8、媒体元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body><!--音频和视频-->
<!--视频快捷方式：video + tabsrc: 资源路径controls:控制开关autoplay:自动播放
-->
<video src="..//resoures/video/video.MP4"controls autoplay width="1000" height="500"></video><!--音频快捷方式：audio + tabsrc: 资源路径controls:控制开关autoplay:自动播放
--></body>
</html>
9、页面结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面结构分析</title>
</head>
<body><!--网页头部：header + tab-->
<header><h2>网页头部</h2>
</header><!--主体部分-->
<section><h2>网页主体</h2><!-- 独立文章内容 --><article><h3>文章内容</h3></article><!--侧边栏--><aside><ol><li>java</li><li>python</li><li>go</li><li>c++</li></ol><!-- 导航 --><nav>dadf</nav></aside><!-- da -->
</section><!--网页脚部：footer + tab-->
<footer><h2>网页脚部</h2>
</footer></body>
</html>
10、ifame内联框架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iframe内联框架学习</title>
</head>
<body><!--快捷方式：iframe + tab
src：引用页面地址
name：框架标识名
--><iframe frameborder="0" height="200px"src="https://wisdex.cn" width="200px"></iframe><!--跳转到内联框架显示
1、先设置内联框架，并设置标签:name
2、链接跳转到标签
-->
<iframe src="" frameborder="0" name="hello"></iframe>
<a href="https://wisdex.cn" target="hello"height="200px" width="200px">点击跳转</a></body>
</html>
11、表单语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单学习</title>
</head>
<body><h1>注册</h1><!--表单form
action:提交的位置，网站、请求处理地址
method: 提交方式，post：安全，可以传输大文件get：可以在url中看到，不安全--><form action="7、媒体元素.html" method="get"><!-- 表单框快捷方式： p + tab --><!-- 框内属性快捷方式：input + tabtype：制定元素类型:--><!-- 文本输入类型：input type="text" --><!-- value:元素初始值，type是radio时必须制定一个值 --><!-- maxlength:输入的最大字符数 --><!-- size：初始宽度，单位：用密是字符，其他是像素 --><p>名字：<input type="text" name="username" value="值得信" maxlength="8" size="30"></p><!-- 密码框类型：input type="password" --><!-- 表单元素的名称：name --><p>密码：<input type="password" name="pwd"></p><!-- radio：单选中唯一选项的设置方法，通过name来统一组 --><p><input type="radio" value="boy" name="sex">男<input type="radio" value="girl" name="sex">女</p><!-- checkbox：同样关注组的问题checked:默认选中值--><p><input type="checkbox" value="read" name="hobby">看书<input type="checkbox" value="sports" name="hobby" checked>运动<input type="checkbox" value="chat" name="hobby">聊天<input type="checkbox" value="eat" name="hobby">美食<input type="checkbox" value="code" name="hobby">编程</p><p><input type="image" src="../resoures/image/cn.png"></p><hr><!-- 文件域快捷方式:file + tab --><!-- 按钮域快捷方式:button + tab --><p><input type="file" name="files"><input type="button" name="upload" value="上传" ></p><p><!-- 邮件验证 -->邮箱：<input type="email" name="email"></p><p><!-- URL -->URL：<input type="url" name="url"></p><p><!-- 数字 -->商品数量：<input type="number" name="num" max="100" min="0" step="1"></p><p><!-- 滑块 -->音量：<input type="range" name="volume" min="0" max="100" step="2"></p><p><!-- 搜索 -->搜索：<input type="search" name="search"></p><hr><!-- 下拉表单框快捷方式：select + tab表单表单快捷方式：option + tabselected：默认选中值--><p>应聘岗位<select name="jobs" id=""><option value="marketing">市场</option><option value="sales">销售</option><option value="project" selected>实施</option><option value="hr">人力</option><option value="financial">财务</option></select></p><!-- 文本域快捷方式：textarea + tabcols：列数rows：行数--><p><textarea name="textarea" cols="50" rows="10" id="mark">个人补充</textarea></p><p><input type="submit" value="提交"><input type="reset" value="清空表单"></p><!-- 隐藏域：hidden --><!-- 禁用域：disabled --><!-- 只读域：readonly --><!-- 增强鼠标可用性：label -->for:指向制定的位置高亮--> 在id中找对应的<p><label for="mark">有什么说的，进来写点？</label></p><!-- 表单验证placeholder：提示信息required:非空判断pattern:正则表达式(上网搜索)--><p>姓名：<input type="text" placeholder="请输入姓名" ></p><p>密码：
<!-- <input type="password" placeholder="请输入密码" required>--></p><p>邮箱：<input type="email" placeholder="请输入邮箱" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></p></form></body>
</html>
0基础学HTML，从快捷方式（IntelliJ IDEA）入手，一步步就能看懂了！相关推荐
- 0基础学图论！——图论精讲/详细/新手理解概念必看！
并不会有更好的阅读体验 特别特别感谢: lmpplmpplmpp大佬牺牲自己宝贵时间,为我没有脾气的耐心讲解. BeyondHeavenBeyondHeavenBeyondHeaven大佬,无偿帮我康 ...
- 0基础学怎么学习python
Python相对于其他编程语言来说是比较简单的,非常适合零基础的小白学习,想要进入到互联网行业,可以优先选择学习Python,那么下面小编就来为大家详细的介绍一下0基础学怎么学习python? ...
- 0基础学python难吗-0基础学武汉Python开发课程有多难？该怎么入门？
Python语言可谓十分强大,正如它的两个外号所称,一个是"内置电池",另一个是"胶水语言".开源社区和独立开发者长期为Python贡献了丰富大量的第三方库,其 ...
- 0基础学python-0基础学python 全套教程送你参考
我0基础学Python可以吗? 我赞成把Python作为入门语言: 为什么选择python Python可以说是编程语言中罕见的既简单又强大的一门语言,python语言简洁,语言优雅,功能强大,使用p ...
- 0基础学python难吗-0基础学Python有多难？该怎么入门？
0基础学Python有多难?该怎么入门?零基础学Python并不难,因为Python是一门非常适合初学者入门的编程语言.Python语法简单明了,代码可读性很高,容易入门.但Python对代码的要求非 ...
- 0基础学python看什么书-0基础学Python入门书籍应该看什么？
0基础学Python入门书籍应该看什么?Python 对不少人来说是谜一样的东西不知道如何下手.从何处下手,找了很多资源几个月过去了学习陷入换乱,没没能入门Python开发.出现这种情况大多是因为没有 ...
- python难学嘛-终于明白0基础学python难吗
Python语言是一种典型的脚本语言,简洁,语法约束少,接近人类语言.有丰富的数据结构,例如列表.字典.集合等.具有可移植性,支持面向过程和面向对象编程,并且开源.以下是小编为你整理的0基础学pyth ...
- 线上学python哪家好-0基础学python，打算找培训机构，是线上好还是线下好？
谢邀,先不谈讨论线上还是线下更好,这个待会说. 我们先看一下题主的问题,0基础学Python,打算找培训机构,划重点了,这是0基础已经做好决定去培训了,我们就不要一直强调建议自学.自学,答不对题.就我 ...
- list选取多个元素 python_【幼儿园级】0基础学python一本通（上）——AI未来系列1...
在未来面前,每个人都是学生 江海升月明,天涯共此时,关注江时! 引 子 本篇为AI未来系列第一篇.为什么要研究学习python?python是未来屠龙的屠龙宝刀,再辅助以我们的高中数学基础(足够用的屠 ...
- 【python教程入门学习】学python要多久,0基础学python有多难
学python要多久,0基础学python有多难,这是很多想学习python语言同学绕不开的问题,都害怕花完钱最终没有应有的回报!对于毫无经验0基础的同学来说学习python什么最重要,方向选对坚持下 ...
最新文章
- 华为nova3android,华为nova3和3i哪个好 华为nova3i和nova3区别对比
- Juce源代码分析（一）Juce的优势
- colab出现input output error问题
- Java 从业一年的心得体会
- 阿里开源分布式事务解决方案 Fescar
- 自定义常用input表单元素二：纯css实现自定义radio单选按钮
- vim编辑器学习记录
- 了解过Vintage的N种样式？
- 软件测试验收报告知识点
- html中什么字体的英文好看,英语字体有哪些？英语哪种字体最好看
- a标签使用方法和跳转方式
- 计算机技术与软件专业技术资格 (水平) 考试 - 报考指南
- java word 在线编辑图片,_卓正软件 - PageOffice官方网站 - 在线编辑Word、Excel的Office文档控件...
- Ti437x LED裸机程序全解
- python学习笔记（07）---（内置容器-字典）
- 《Kafka系列》Kafka详细教程入门
- Java基础 DAY08
- Python-Django settings置详解
- p2p半分布式开源项目调研：
- Java设计模式--在项目中的应用