【HTML教程】跟着菜鸟学语言—HTML5个人笔记经验(五)完结

news2024/11/17 1:51:57

HTML学习第五天

PS:牛牛只是每天花了1.5-2小时左右来学习HTML。这也是最后一天,其实HTML只需要1-2天就可以学完!

书接上回

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

尝试一下🏷

插入一段脚本
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>跟着牛牛一起做</title> 
</head>
<body>

<script>
document.write("Hello World!")
</script> 

</body>
</html>
使用<noscript>标签
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>跟着牛牛一起做!</title> 
</head> 
<body>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 &lt;noscript&gt; 元素中定义的内容(文本)来替代。</p>
 
</body>
</html>

HTML <script> 标签

<script> 标签用于定义客户端脚本,比如 JavaScript。

<script>元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!":

实例🏷

<script>
document.write("Hello World!");
</script>

HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时,才会显示 元素中的内容:

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

JavaScript体验

JavaScript实例代码:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>尝试一下吧</title> 
</head>
<body>

<h1>我的第一个 JavaScript </h1>

<p id="demo">
JavaScript 可以触发事件,就像按钮点击。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">点我</button>

</body>
</html>

JavaScript处理 HTML 样式:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>尝试一下吧</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

HTML 脚本标签

标签描述
<script>定义了客户端脚本
<noscript>定义了不支持脚本浏览器输出的文本

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体

在 HTML 中,某些字符是预留的。

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样:

&entity_name;
或
&#entity_number;

如需显示小于号,我们必须这样写:<<<

Remark提示: 使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。

变音符号可以出现字母的上面和下面,或者字母里面,或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

以下是一些实例:

音标符字符Construct输出结果
̀aa&#768;
́aa&#769;
̂aa&#770;
̃aa&#771;
̀OO&#768;
́OO&#769;
̂OO&#770;
̃OO&#771;

HTML字符实体

💡 实体名称对大小写敏感!

显示结果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
撇号&apos; (IE不支持)&#39;
&cent;&#162;
£&pound;&#163;
¥人民币/日元&yen;&#165;
欧元&euro;&#8364;
§小节&sect;&#167;
©版权&copy;&#169;
®注册商标&reg;&#174;
商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

虽然 html 不区分大小写,但实体字符对大小写敏感。

HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。

URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址: 192.68.20.50。大多数人进入网站使用网站域名来访问,因为 名字比数字更容易记住。

URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。

当您点击 HTML 页面中的某个链接时,对应的 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

一个网页地址实例: https://blog.csdn.net/qq_47493625?type=blog 语法规则:


scheme://host.domain:port/path/filename

说明:

  • scheme - 定义因特网服务的类型。最常见的类型是 http
  • host - 定义域主机(http 的默认主机是 www)
  • domain - 定义因特网域名,比如 runoob.com
  • :port - 定义主机上的端口号(http 的默认端口号是 80)
  • path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
  • filename - 定义文档/资源的名称

常见的 URL Scheme

以下是一些URL scheme:

Scheme访问用于…
http超文本传输协议以 http:// 开头的普通网页。不加密。
https安全超文本传输协议安全网页,加密所有信息交换。
ftp文件传输协议用于将文件下载或上传至网站。
file您计算机上的文件。

URL 字符编码

URL 只能使用 ASCII 字符集.

来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。

URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

URL 编码实例

字符URL 编码
%80
£%A3
©%A9
®%AE
À%C0
Á%C1
Â%C2
Ã%C3
Ä%C4
Å%C5

HTML 速查列表👍

HTML 速查列表. 你可以打印它,以备日常使用。

1.HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

2.基本标签(Basic Tags)

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> (换行)
<hr> (水平线)
<!-- 这是注释 -->

3.文本格式化(Formatting)

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> (缩写)
<address> (联系信息)
<bdo> (文字方向)
<blockquote> (从另一个源引用的部分)
<cite> (工作的名称)
<del> (删除的文本)
<ins> (插入的文本)
<sub> (下标文本)
<sup> (上标文本)

4.链接(Links)

普通的链接:<a href="http://www.example.com/">链接文本</a>
图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>
书签:
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

5.图片(Images)

<img src="URL" alt="替换文本" height="42" width="42">

6.样式/区块(Styles/Sections)

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

7.无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

8.有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

9.定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

10.表格(Tables)

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

11.框架(Iframe)

<iframe src="demo_iframe.htm"></iframe>

12.表单(Forms)

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

13.实体(Entities)

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

HTML 标签简写及全称

下表列出了 HTML 标签简写及全称:

标签英文全称中文说明
aAnchor
abbrAbbreviation缩写词
acronymAcronym取首字母的缩写词
addressAddress地址
altalter替用(一般是图片显示不出的提示)
bBold粗体(文本)
bdoBi-Directional Override文本显示方向
bigBig变大(文本)
blockquoteBlock Quotation区块引用语
brBreak换行
cellcell
cellpaddingcellpadding巢补白
cellspacingcellspacing巢空间
centerCentered居中(文本)
citeCitation引用
codeCode源代码(文本)
ddDefinition Description定义描述
delDeleted删除(的文本)
dfnDefines a Definition Term定义定义条目
divDivision分隔
dlDefinition List定义列表
dtDefinition Term定义术语
emEmphasized加重(文本)
fontFont字体
h1~h6Header 1 to Header 6标题1到标题6
hrHorizontal Rule水平尺
hrefhypertext reference超文本引用
iItalic斜体(文本)
iframeInline frame定义内联框架
insInserted插入(的文本)
kbdKeyboard键盘(文本)
liList Item列表项目
nlnavigation lists导航列表
olOrdered List排序列表
optgroupOption group定义选项组
pParagraph段落
prePreformatted预定义格式(文本 )
qQuotation引用语
relReload加载
s/ strikeStrikethrough删除线
sampSample示例(文本
smallSmall变小(文本)
spanSpan范围
srcSource源文件链接
strongStrong加重(文本)
subSubscripted下标(文本)
supSuperscripted上标(文本)
tdtable data cell表格中的一个单元格
thtable header cell表格中的表头
trtable row表格中的一行
ttTeletype打印机(文本)
uUnderlined下划线(文本)
ulUnordered List不排序列表
varVariable变量(文本)

HTML 总结

本教程已教你如何使用 HTML 创建站点。

HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。

HTML 的关键是标签,其作用是指示将出现的内容。

现在,你已学完HTML,接下来该学习什么呢?

学习 CSS

CSS被用来同时控制多重网页的样式和布局。

通过使用 CSS,所有的格式化均可从 HTML 中剥离出来,并存储于一个独立的文件中。

学习 JavaScript

JavaScript 可以让你的网页更加生动。

如果你只想展示内容,静态网站是很好的展示形象,如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。

JavaScript是互联网上最流行的脚本语言,目前所有主流浏览器都支持Javascript。

站点服务器

在自己的服务器上托管网站始终是一个选项。有几点需要考虑:

硬件支出

如果要运行"真正"的网站,您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的(一天 24 小时)高速连接。

软件支出

请记住,服务器授权通常比客户端授权更昂贵。同时请注意,服务器授权也许有用户数量限制。

人工费

不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒,以确保您的服务器时刻正常地运行于一个"任何事都可能发生"的环境中。

使用因特网服务提供商(ISP)

从 ISP 租用服务器也很常见。

大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点:

连接速度

大多数 ISP 都拥有连接因特网的高速连接。

强大的硬件

ISP 的 web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡,以及必要的备份服务器。

安全性和可靠性

ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间,最新的软件补丁,以及最好的病毒防护。

选择 ISP 时的注意事项

24 小时支持

确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地,同时还必须等待第二个工作日。如果您不希望支付长途电话费,那么免费电话服务也是必要的。

每日备份

确保 ISP 会执行每日备份的例行工作,否则您有可能损失有价值的数据。

流量

研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量,那么您要确保不会因此支付额外费用。

带宽或内容限制

研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频,请确保您有此权限。

E-mail 功能

请确保 ISP 支持您需要的 e-mail 功能。

数据库访问

如果您计划使用网站数据库中的数据,那么请确保您的 ISP 支持您需要的数据库访问。

个人总结

完结撒花🎉🎉🎉

🆗的,我们也是快速的过了一遍HTML,对HTML也是有一定的了解,甚至领悟能力比较强的几乎搞明白了,毕竟这也不是很难的。还是给自己点个赞。接下来,我们不着急去学习新的语言,有重点的去复习还是很有必要的(个人看法)。那么接下来我们可以去做什么呢?不着急去做一个个人网站,是的,毕竟这还是需要一些其他语言基础和能力的,我们可以网搜索尝试使用HTML搭建一个静态的页面。这也算是一次对自己的考核!然后再去进行其他语言的学习或者其他之类的学习任务。

ok的啊。不管怎么样,我们也是花费时间和精力去学习了新的知识!给自己点个赞👍!

牛牛在之前就说过自己对语言的理解其实算不上好,甚至挺差的。所以这几篇学习经验笔记就完全根据相关知识网站的提供学习路径和案例来学习。算不上有多高深,也请各位看官手下留情。也欢迎给位看官讨论交流学习!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1419897.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言菜鸟入门·判断语句(if语句、if...else语句、嵌套if语句)详细介绍

目录 1. if语句 2. if...else语句 3. if...else if...else 语句 4. 嵌套if语句 C 语言把任何非零和非空的值假定为 true&#xff0c;把零或 null 假定为 false。 语句描述if语句一个 if 语句 由一个布尔表达式后跟一个或多个语句组成。if...else语句一个 if 语句 后可跟…

Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库

Flutter应用服务 主题、暗黑、国际化、本地化-app_service库 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/det…

FullStack之Django(1)开发环境配置

FullStack之Django(1)开发环境配置 author: Once Day date&#xff1a;2022年2月11日/2024年1月27日 漫漫长路&#xff0c;才刚刚开始… 全系列文档请查看专栏: FullStack开发_Once_day的博客-CSDN博客Django开发_Once_day的博客-CSDN博客 具体参考文档: The web framewor…

从比亚迪的整车智能战略,看王传福的前瞻市场布局

众所周知&#xff0c;作为中国新能源汽车的代表企业&#xff0c;比亚迪在中国乃至全球的新能源汽车市场一直都扮演着引领者的角色。2024年新年伊始&#xff0c;比亚迪又为新能源汽车带来了一项重磅发布。 整车智能才是真智能 近日&#xff0c;在“2024比亚迪梦想日”上&#xf…

微服务-微服务Alibaba-Nacos 源码分析(上)

Nacos&Ribbon&Feign核心微服务架构图 架构原理 1、微服务系统在启动时将自己注册到服务注册中心&#xff0c;同时外发布 Http 接口供其它系统调用(一般都是基于Spring MVC) 2、服务消费者基于 Feign 调用服务提供者对外发布的接口&#xff0c;先对调用的本地接口加上…

Java强训day11(选择题编程题)

选择题 编程题 题目1 import java.util.Scanner;public class Main {public static String TentoTwo(int n) {StringBuffer sum new StringBuffer();while (n ! 0) {sum.append(n % 2);n / 2;}return sum.reverse().toString();}public static void main(String[] args) {S…

大模型日报-20240130

500行代码构建对话搜索引擎&#xff0c;贾扬清被内涵的Lepton Search真开源了 来了&#xff0c;贾扬清承诺的 Lepton Search 开源代码来了。前天&#xff0c;贾扬清在 Twitter 上公布了 Lepton Search 的开源项目链接&#xff0c;并表示任何人、任何公司都可以自由使用开源代码…

【STM32F103单片机】利用ST-LINK V2烧录程序 面包板的使用

1、ST‐LINK V2安装 参考&#xff1a; http://t.csdnimg.cn/Ulhhq 成功&#xff1a; 2、烧录器接线 背后有标识的引脚对应&#xff1a; 3、烧录成功 烧录成功后&#xff0c;按下核心板的RESET键复位&#xff01;&#xff01;&#xff01;即可成功&#xff01; 4、面包板的…

如何改变音频的频率教程

这是一篇教你如何通过一些工具改变音频频率的教学文章。全程所用的软件都是免费的。 本文用到的软件&#xff1a; AIX智能下载器 用于抓取任何视频网站资源的插件 格式工厂 将mp4转化为mp3 Audacity 改变音频频率的软件 如果你已备好mp3或其他格式的音频&#xff0c;那么直接看…

AI工具【OCR 01】Java可使用的OCR工具Tess4J使用举例(身份证信息识别核心代码及信息提前方法分享)

Java可使用的OCR工具Tess4J使用举例 1.简介1.1 简单介绍1.2 官方说明 2.使用举例2.1 依赖及语言数据包2.2 核心代码2.3 识别身份证信息2.3.1 核心代码2.3.2 截取指定字符2.3.3 去掉字符串里的非中文字符2.3.4 提取出生日期&#xff08;待优化&#xff09;2.3.5 实测 3.总结 1.简…

谷歌人工智能视频生成器-LUMIERE(未开源)

Google重磅发布视频生成模型Lumiere 据说后续会开源 亮点1.支持文本到视频与图像到视频 亮点2.画风迁移 亮点3.运动蒙版 亮点4.视频编辑 亮点5.视频修复 谷歌视频模型可以生成80帧的片段&#xff01;不仅画质好、质量高&#xff0c;而且时长更长。 视频局部编辑 这项功能可以…

Python进阶(4) | 创建Python库的模板工程 Python-lib-starter

Python进阶(4) | 创建Python库的模板工程 Python-lib-starter 文章目录 Python进阶(4) | 创建Python库的模板工程 Python-lib-starter1. 目的2. Python-lib-starter 目录结构浅析2.1 关键目录和文件2.2 非关键目录和文件 3. moelib 目录分析3.1 __init__.py延迟评估类型注解的意…

flink cdc,standalone模式下,任务运行一段时间taskmanager挂掉

在使用flink cdc&#xff0c;配置任务运行&#xff0c;过了几天后&#xff0c;任务无故取消&#xff0c;超时&#xff0c;导致taskmanager挂掉&#xff0c;相关异常如下&#xff1a; 异常1&#xff1a; did not react to cancelling signal interrupting; it is stuck for 30 s…

最新详细eclipse下载、安装、汉化教程

一、下载eclipse安装包 首先进入 eclipse官网 如下&#xff1a; 这里面有很多版本&#xff1b;我们小白一般选择第二个&#xff0c;向下滑动&#xff1b; 点击符合自己系统的版本。 这里我们切换镜像下载&#xff0c;一般选择离你最近的地址下载。 我建议选择大连东软信息学…

Python 数据分析实战——社交游戏的用户流失?酒卷隆治_案例2

# 什么样的顾客会选择离开 # 数据集 DAU : 每天至少来访问一次的用户数据 数据内容 数据类型 字段名 访问时间 string&#xff08;字符串&#xff09; log_data 应用名称 string&#xff08;字符串&#xff09; app_name 用户 ID int&#xff08;数值&#xff09; user_id…

项目经理,如何管理好自己的情绪?

在现代社会中&#xff0c;压力无处不在。对于项目经理来说&#xff0c;压力更是来自各个方面&#xff0c;如项目进度、团队管理、客户需求等。当压力过大时&#xff0c;情绪就容易受到影响&#xff0c;如果无法控制自己的情绪&#xff0c;不仅会影响自己的工作效率&#xff0c;…

uniapp对接微信APP支付返回requestPayment:fail [payment微信:-1]General errors错误-全网总结详解

一、问题描述 uniapp对接微信APP支付&#xff0c;本来是很简单的一件事&#xff0c;后端本来就是好的&#xff0c;只要填一些参数就行了&#xff0c;搞了我一晚上&#xff0c;主要卡在uniapp这边&#xff0c;拉起支付的时候&#xff0c;一直提示以下错误&#xff1a; {"er…

Celery基础用法

Celery概述 Celery是一个分布式任务调度模块&#xff0c;用于在Python中处理异步任务。它允许你创建任务&#xff0c;并发送给工作节点执行。 Celery常常用于我们说的脏活&#xff0c;累活&#xff0c;处理耗时的操作&#xff0c;如发送电子邮件、处理数据、执行计算等。 上手非…

pytorch安装教程(Anaconda + GPU)

可以去nvidia官网更新驱动 获取下载pytorch的命令地址&#xff1a;Start Locally | PyTorch 在这里可以找到旧版本的cuda的命令&#xff1a;Previous PyTorch Versions | PyTorch 如果使用conda没有安装成功的话&#xff0c;就使用pip&#xff1a;

pytorch 实现中文文本分类

&#x1f368; 本文为[&#x1f517;365天深度学习训练营学习记录博客&#x1f366; 参考文章&#xff1a;365天深度学习训练营&#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制]\n&#x1f680; 文章来源&#xff1a;[K同学的学习圈子](https://www.yuque.com/mi…