Tips:本学习笔记基于菜鸟教程,且前端语言学习笔记会继续更新~
基础框架:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML基础:
1.标题:<h1>这是一个标题</h1>;<h2>这是一个标题</h2>;<h3>这是一个标题</h3>
(从1到6,标题的字符大小依次减小)
2.段落:<p>这是一个段落。</p>;<p>这是另外一个段落。</p>
3.链接:<a href="https://www.runoob.com">这是一个链接</a>
"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
链接的target属性之在新窗口打开链接:<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
4.图像:<img loading="lazy" src="/images/logo.png" width="258" height="39" />
水平线、注释、折行:
1.水平线:另起一行写入<hr>
2.注释:<!-- 这是一个注释 -->
3.折行:<p>这个<br>段落<br>演示了分行的效果</p>
文本格式化:
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
HTML CSS:
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性;
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS;
外部引用 - 使用外部 CSS 文件。
图像:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
(要在页面上显示图像,你需要使用源属性(src);alt 属性用来为图像定义一串预备的可替换的文本)
表格:
列表:
1.无序列表: 2.有序列表:
3.自定义列表:
区块:
(此外,<div>与<span>也是HTML的布局标签)
布局:
可以使用<div>元素或表格。
表单:
以下是几种常用表单形式:
1.文本域:
2.密码字段:
3.单选按钮:
4.复选框:
5.提交按钮:
框架:
iframe语法:<iframe src="URL"></iframe> 该URL指向不同的网页
1.iframe设置高度与宽度:<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
2.iframe移除边框:
3.iframe显示目标链接页面:
颜色:
HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。
RGBA 的意思是(Red-Green-Blue-Alpha)它是在 RGB 上扩展包括了 “alpha” 通道,运行对颜色值设置透明度。
HTML 颜色名 | 菜鸟教程(是目前所有浏览器所支持的颜色)
脚本:
JavaScript 使 HTML 页面具有更强的动态和交互性。
1.<script>标签:
<script> 标签用于定义客户端脚本,比如 JavaScript。
<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
2.<noscript>标签:
只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容。
字符实体:
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
统一资源定位器(Uniform Resource Locators)URL:
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
(实例如下)
HTML的速查列表:
HTML 速查列表 | 菜鸟教程
标签:颜色,语言,URL,菜鸟,笔记,HTML,文本,链接 来源: https://blog.csdn.net/Joyce_lzy/article/details/122513018
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。