001

    技术2025-10-14  4

    文章目录

    一、初识HTML1、是什么2、文件扩展名3、声明4、🔺万维网联盟 (w3c)5、第一个HTML页面 —— Hello HTML! 二、🔺基本标签三、特殊(实体)符号1、🔺特点2、几种常用特殊字符 四、🔺图片 img五、🔺超链接 a

    一、初识HTML

    1、是什么

    HTML: 超文本标记语言 (HyperText Markup Language),是用来描述网页的一种语言。

    超文本:(超越文本限制) 指页面包含图片、链接,甚至音乐、程序等非文字元素。

    注:HTML不是编程语言,是标记语言。

    2、文件扩展名

    文件扩展名 (后缀名):.html (推荐) 或 .htm

    3、声明

    HTML的声明:<!DOCTYPE html>

    注:加上<!DOCTYPE html>表示代码采用的是HTML5的语法;没加默认采用HTML4.0的语法。

    4、🔺万维网联盟 (w3c)

    1)w3c:World Wide Web Consortium  万维网联盟

    2)万维网之父:Tim Berners-Lee (蒂姆·伯纳斯·李)

    扩展: 万维网联盟_百度百科

    3)HTML是由w3c规定的。

    <!--标准写法:--> <!--双目标签--> <标签>内容</标签> <标签 属性名="属性值" 属性名="属性值" ...> <!--单目标签 (独目标签)--> <标签 />

    4)前端集成开发软件:DreamweaverHBuilderWebStrom (推荐使用) …

    扩展: 网页三剑客:Dreamweaver、Fireworks、Flash 【网页三剑客_百度百科】 世界五大主流浏览器: ① IE浏览器:Internet Explorer,微软旗下 ② Google浏览器:google chrome,谷歌旗下 ③ Firefox浏览器:简称FF,Mozilla旗下 ④ safari浏览器:苹果旗下,已停止对Windows系统的支持 ⑤ opera浏览器:挪威厂商opera旗下 【 世界五大主流浏览器_百度百科】

    5、第一个HTML页面 —— Hello HTML!

    <!--这是HTML的注释--> <!--加上<!DOCTYPE html>表示以下代码采用的是HTML5的语法--> <!--HTML的声明--> <!DOCTYPE html> <!--根--> <html> <!--头--> <head> <!--设置编码方式--> <meta charset="UTF-8" /> <!--HTML标题:<title></title>标签--> <title>这是HTML标题</title> </head> <!--体--> <body> 这里是HTML的主体内容,Hello HTML! </body> </html>

    二、🔺基本标签

    <html> <head> <meta charset="utf-8" /> <title>HTML基本标签</title> </head> <body> <!--标题标签:h标签 h1~h6 标题字从大到小,独占一行--> <h1>标题字1</h1> <h2>标题字2</h2> <h3>标题字3</h3> <h4>标题字4</h4> <h5>标题字5</h5> <h6>标题字6</h6> <!--段落标签:p标签 <p></p>--> <p>鹅鹅鹅,</p> <p>曲项向天歌。</p> <p>白毛浮绿水,</p> <p>红掌拨清波。</p> <!--换行标签:br标签 <br />或<br>是一个独目标签--> 蒂姆·伯纳斯·李 [1] (Tim Berners-Lee),OM,KBE,FRS,FREng,FRSA,(Sir Timothy John "Tim" Berners-Lee,1955年6月8日-),英国计算机科学家。<br /> 他是万维网的发明者,南安普顿大学与麻省理工学院教授。1990年12月25日,罗伯特·卡里奥在CERN和他一起成功通过Internet实现了HTTP代理与服务器的第一次通讯。<br /> 万维网联盟(W3C)是伯纳斯·李为关注万维网发展而创办的组织,并担任万维网联盟的主席。<br /> 2004年,英女皇伊丽莎白二世向伯纳斯·李颁发大英帝国爵级司令勋章。2009年4月,他获选为美国国家科学院外籍院士。在2012年夏季奥林匹克运动会开幕典礼上,他获得了“万维网发明者”的美誉。伯纳斯·李本人也参与了开幕典礼,在一台NeXT计算机前工作。他在Twitter上发表消息说:“这是给所有人的”,体育馆内的LCD光管随即显示出文字来。2017年,他因“发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法”而获得2016年度的图灵奖。 <!--水平线(横线)标签:hr标签 <hr />或<hr>是一个独目标签--> <hr /> <!--color和width都是hr的属性--> <hr color="red" width="50%" /> <!--HTML语法松散--> <hr color='green' width=20%/> <!--加粗标签:b标签或strong标签 <b></b>或<strong></strong>--> <b>粗体字b</b> <br /> <strong>粗体字strong</strong> <br /> <!--加斜标签:i标签或em标签 <i></i>或<em></em>--> <i>斜体字i</i> <br /> <em>斜体字em</em> <br /> <!--删除标签:del标签 <del></del>--> <del>删除字</del> <br /> <!--插入标签:ins标签 <ins></ins>--> <ins>插入字</ins> <br /> <!--上标:(右上角文字标签) sup标签 <sup></sup>--> 10<sup>x</sup> <br /> <!--下标:(右下角文字标签) sub标签 <sub></sub>--> 5<sub>m</sub> <br /> <!--字体标签:font标签 <font></font>--> <font color="blue" size="50">字体标签</font> <!--预留格式:pre标签 <pre></pre>--> <pre> for (int i = 0; i <= 10; i++) { System.out.println(i); } </pre> </body> </html>

    三、特殊(实体)符号

    1、🔺特点

    & 开始,以 ; 结束

    2、几种常用特殊字符

    🔺空格:&nbsp;小于:&lt; (less than) <大于:&gt; (great than) >引号:&quot; "版权:&copy; ©

    四、🔺图片 img

    <img src="(相对)路径" title="鼠标悬浮文字" alt="图片加载失败显示的提示信息" /> <!-- img标签:图片标签 src属性:图片路径 width属性:设置图片宽度 注意:在设置图片的宽度和高度时,只设置宽度,高度会进行等比例缩放。若再设置高度,图片会失真。 title属性:设置鼠标悬浮文字 alt属性:设置图片加载失败时显示的提示信息 --> <!--"栗栗更清晰"--> <img src="img/baidu_logo.png" width="100px" title="我是百度图片哦" alt="图片找不到了呀" />

    五、🔺超链接 a

    <a href="资源地址">内容</a> <!--超链接 (热链接): href:hot references 热引用 href后面一定是某资源的地址(可以是绝对路径,也可以是相对路径) href属性:创建指向另一个文档的链接 name属性:创建文档中的书签 target属性:用来设定目标资源最终显示的目标位置 _blank:新窗口 _self:当前窗口 (默认) _top:顶级窗口 _parent:父窗口 超链接的作用:通过超链接可从浏览器向服务器发送数据 --> <!-- 超链接的分类: 1、普通超链接 a、文字超链接 b、图片超链接 2、锚(máo)超链接 3、功能性超链接 --> <html> <head> <meta charset="UTF-8"> <title>HTML超链接</title> </head> <body> <a name="top">这是顶部</a> <br /><br /><br /> <!--普通超链接--> <!--文字超链接--> <a href="http://www.w3school.com.cn/" target="_self">Visit W3School</a> <br /><br /><br /> <!--图片超链接--> <a href="http://www.hao123.com" target="_blank"><img src="img/hao123_logo.png" /></a> <br /><br /><br /> 此处省略大于1页的文字。。。(用来演示翻页之后点击"置顶",能出现明显回到"这是顶部"的效果) <br /><br /><br /> <!--功能性超链接(电子邮件)--> <a href="mailto:12345678@163.com">发邮件</a> <br /><br /><br /> <!--锚链接:<a href="#name值">内容</a>--> <a href="#top">置顶</a> </body> </html>

    🍅🍅🍅 以往文章 👇

    002_HTML基础入门二【列表 + 表格】 003_用户注册表单【HTML-form表单】

    Processed: 0.015, SQL: 9