HTML笔记——hyper text markup language
2024-04-15 02:45:01
HTML笔记——hyper text markup language
（ 超文本标记语言）超文本包括：文字、图片、音频、视频、动画等
IDEA官网下载
<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们网站的一些信息-->
<!--meta一般用来做SEO--><meta charset="UTF-8"><meta name="keywords" content="关键词"><meta name="description" content="描述信息"><!-- title网页标题 --><title>我的第一个网页</title>
</head>
<!--body标签代表网页主题-->
<body>
今天是2022年8月27日星期六
</body>
</html>
注释快捷键Ctrl+/
P按住Tab生成段落标签
<!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><!--水平线标签-->
<hr/><!--段落标签-->
<p> 一段</p>
<p> 二段 </p>
<p> 三段 </p>
<p> 四段 </p><!--换行标签-->
换行标签<br/>
换行标签换行标签换行标签<br/>
换行标签<br/><!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong>
斜体： <em>i love you</em>
<br/>
<!--特殊符号-->
空 格：
空 格：
<!--
特殊符号记忆方式
& ;
-->
&g
</body>
</html>
Tab自动闭合补齐Ctrl+C复制Ctrl+D粘贴光标段Ctrl+V复制所选
图像标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址（必填）相对地址，绝对地址../ --上一级目录alt:图片名字（必填）--><img src="resources/image/1.jpg" alt="图片名称" title="悬停文字" width="400" height="400"></body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签学习
href :必填，表示要跳转到那个页面
target :表示窗口在哪里打开_blank 在新标签中打开_self 在自己的网页中打开
-->
<a href="跳转网页地址">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_blank " >点击我跳转到百度</a><!--锚链接
1.需要一个锚标记
2.跳转到标记 跳转名称前加#，和markdown语法一样
-->
<a href="#top">回到顶部</a><!--功能性链接
邮件链接 ：mailto;
QQ链接 ：百度QQ推广
-->
<a href="mailto:308679108@11.com">点击联系我</a><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=308679108&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:308679108:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a></body>
</html>
反复复习理解a标签
列表标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围 ：试卷，问答...
orderlist简称ol大标签，小标签li;Tab自动补全
-->
<ol><li>Java</li><li>python</li><li>运维</li><li>前端</li><li>C/c++</li>
</ol>
<hr/>
<!--无序列表
应用范围： 导航， 侧边栏
-->
<ul><li>Java</li><li>python</li><li>运维</li><li>前端</li><li>C/c++</li>
</ul>
<!--自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
公司网站底部
-->
<dl><dt>学科</dt><dd>Java</dd><dd>python</dd><dd>linux</dd><dd>C</dd><dt>位置</dt><dd>西安</dd><dd>重庆</dd><dd>四川</dd>
</dl></body>
</html>
列表标签总结：orderlist简称ol大标签，小标签li,无序列表ul,自定义dl,dt列表名称，dd列表内容。Tab自动补全！
表格标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格学习</title>
</head>
<body>
<!--表格table
行 tr table rows
列 dr
border="1px" 边框1个像素-->
<table border="1px"><tr>
<!--colspan 跨列--><td colspan="4">1-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>
表格标签总结：table表格，tr行，dr列，border边框，colspan跨列,rowspan跨行
媒体元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body><!--音频和视频
src: 资源路径
controls: 控制条
autoplay： 自动播放--><video src="../resources/video/111.mp4" controls autoplay ></video><audio src="http://localhost:63342/HTML/resources/audio/mp3.mp3?_ijt=6arlj2g66nf6o6sa25brc015h2&_ij_reload=RELOAD_ON_SAVE" controls autoplay></audio></body>
</html>
src: 资源路径
controls: 控制条
autoplay： 自动播放
第二种路径可以先用浏览器打开本地文件后转换播放路径
页面结构分析
header头,footer脚,section区,article文,aside边,nav导
内链框架
a,tab自动补全a标签=
表单语法
tab向后缩进，shift+tab向前缩进
表单元素格式
placeholder提示信息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body><h1>注册</h1><!--表单formaction : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method : post,get, 提交方式get方式提交：我们可以在url中看到我们提交的信息，不安全，高效post: 比较安全，传输大文件
--><form action="第一个网页.html" method="get"><!--文本输入框 ：input type="text"value="我好厉害" 默认初始值maxlength="8" 最长能写几个字符size="30" 文本框的长度--><p>名字：<input type="text" name="username" placeholder="请输入用户名" required> </p><!--密码框：input type="password"--><p>密码：<input type="password" name="pwd" hidden value="123456"> </p><!--单选框标签input type="radio"value ；单选框的值name ； 表示组--><p>性别：<input type="radio" value="man" name="sex" checked disabled/>男<input type="radio" value="women" name="sex"/>女</p><!--多选框input type="checkbox"--><p>爱好：<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="code" name="hobby" checked>敲代码<input type="checkbox" value="chat" name="hobby">聊天<input type="checkbox" value="game" name="hobby">游戏</p><!--按钮input type="button" 普通按钮input type="image" 图像按钮input type="submit" 提交按钮input type="reset" 重置--><p>按钮：<input type="button" name="btn1" value="点击变长"><input type="image" src="../resources/image/1.jpg"></p><!--下拉框，列表框--><p>国家 ：<select name="列表名称" ><option value="china">中国</option><option value="usa">美国</option><option value="japan" selected>日本</option><option value="korea">韩国</option></select></p><!--文本域text area : 文本区域--><p>反馈：<textarea name="textarea" cols="90" rows="10"></textarea></p><!--文件域input type="file" name="files"--><p><input type="file" name="files"><input type="button" value="上传" name="upload"></p><!--邮件验证--><p> 邮箱：<input type="email" name="email"></p><!--URL--><p> URL：<input type="url" name="url"></p><!--数字--><p> 数字：<input type="number" name="number" max="100" min="0" step="1"></p><!--滑块input type="range"--><p>音量 :<input type="range" name="voice" min="0" max="100"></p><!--搜索框--><p>搜索 :<input type="search" name="search" ></p><p><!--增强鼠标可用性--><label for="mark">你点我试试</label><input type="text" id="mark"></p><p>自定义邮箱:<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></p><p><input type="submit"><input type="reset" value="清空表单"></p></form>
</body>
</html>
正则表达式速查表_脚本之家 (jb51.net)
自定义邮箱pattern
HTML总结
net)](https://www.jb51.net/tools/regexsc.htm)
HTML总结
[外链图片转存中…(img-q36wht9G-1661844318653)]
HTML笔记——hyper text markup language相关推荐
- HTML - 超文本标记语言 (Hyper Text Markup Language)
HTML - 超文本标记语言 (Hyper Text Markup Language) HTML是建设网站/网页制作主要语言. HTML是一种易于学习的标记语言. HTML使用像 <p> ...
- html文件是一种使用超文本标记语言,超文本标记语言HTML HTML(Hyper Text Markup Language,.ppt...
超文本标记语言HTML HTML(Hyper Text Markup Language, 5)链接到多媒体对象 如果将标记的href属性的值指定为其它文件,那么就可以连接到指定的其它类型的文件.例如使 ...
- HTML Hyper Text Markup Language（超文本标记语言） 基础知识汇总3
表单 语法 <form method="post" action="result.html"><p> 名字:<input name ...
- HTML(Hyper Text Markup Language)
HTML 结构 认识 HTML 标签 HTML 代码是由 "标签" 构成的. 形如: <body>hello</body> 标签名 (body) 放到 &l ...
- Hyper Text Markup Language 超文本标记语言
超文本: 比普通文本功能更加强大,可以添加各种样式 标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行 ##### HTML的主要作用: 设计网页的基础,H ...
- HTML （Hyper Text Markup Language）超文本标记语言
1.它是一种标志性的语言,非编程语言,不能使用逻辑运算以及函数调用等功能. 2.它更像是一种人为规范的文档,使分散的网络进行统一. 3.超文本:是一种组织信息的方式,通过超级链接将多种媒介(文字图片m ...
- Coursera课程Python for everyone：Quiz: eXtensible Markup Language
eXtensible Markup Language 10 试题 1. What is "serialization" when we are talking about web ...
- java 解析标记语言_Java XML可扩展标记语言（eXtensible Markup Language）
一.XMl 1.1.XML简介: XML指可扩展标记语言(eXtensible Markup Language),它是一种很像HTML的标记语言.XML的设计宗旨是传输数据,焦点是数据的内容,而HTM ...
- 超文本标记语言（英语：HyperText Markup Language，简称：HTML）
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上 ...
最新文章
- 网站服务器部署注意事项,服务器部署改云部署注意事项
- layui如何存在多个弹窗_layui常见弹窗使用方法
- .NET设计模式（19）：观察者模式（Observer Pattern）
- VTK：二次抽取用法实战
- 安卓手机突然很卡_你的安卓手机越来越卡？教你4招轻松解决问题！
- oracle安装，未找到文件 F:\app\Administrator\product\11.2.0\dbhome_2\owb\external\oc4j_ap
- 手机里的html文档是什么,华为手机中后面带HTML的文档能删除吗？
- 开着开着，Model S天窗飞了！特斯拉回应...
- Python使用装饰器捕获异常
- 华为ARP代理的三种方式
- 并联串联混合的电压和电流_16.2 串、并联电路中电压的规律
- centos7 mysql dump还原_CentOS 7.6使用mysqldump备份恢复MariaDB
- 正则表达式，和python re模块
- Sublime Text 3---＞中文乱码的解决方法
- 2021 广东省程序设计竞赛（GDCPC）
- 股票技术图形怎么看？一文给你分析透！
- 我拼命买的学区房，现在可能要凉了
- ETH2.0 要来了，要不要参与质押？
- 网页版电子病历初步完成
- arcgis制作瓦片地图_【转】ArcGIS地图缓存制作简介