Day25——HTML学习笔记

最新推荐文章于 2024-06-26 09:35:57 发布

fenglgC

最新推荐文章于 2024-06-26 09:35:57 发布

阅读量491

点赞数 1

本文链接：https://blog.csdn.net/u013583756/article/details/103554045

版权

这篇博客详细介绍了HTML的基础知识，包括HTML的定义、发展史、W3C标准、常用标签和元素，如标题、段落、图像、超链接、表格、音频、媒体元素等。还讨论了HTML的学习方式，强调了模仿和规范的重要性，并提到了常用的前端开发工具。

摘要由CSDN通过智能技术生成

HTML

页面

网页排版
图像标签，图文并茂
超链接

1.1 什么是HTML

Hyper Text MarkUp Language(超文本标记语言)
本文：文字、有格式的文本

超文本：文字、图片、音频、动画、定位。。。

标记语言：<>

1.网页的组成

2.标签的作用

3.浏览器打开后，页面时怎么加载渲染的的

浏览器（IDE）==加载并读取HTML代码—》解析每个标签—》产生对应效果
在这里插入图片描述

1.2 发展史、优势

HTML 1993年
HTML2.0 1995年
HYML3.2 1996年（W3C推荐标准）
HTML 4.0
HTML4.01（微小改进）
HTML1.0 2000年
HTML2.0 （由于改动过大，学习成本高，胎死腹中）
HTML5 2004年，2007年正式纳入新成立的HTML工作团队
HTML5.1草案 2013年

优势：
所有知名浏览器厂商都支持
- 微软
- Google
- 苹果
- OPera
- Mozilla firefox
- 很多杂的浏览器，并不支持HTML
市场需求
- 市场需要一个同一的标准：技术的本质：赚钱（发展）
- web兼容性问题，修改bug都需要大量时间
跨平台（浏览器）B/S
- 天然存在的。因为是B/S开发 PC、移动站…所有设备天然支持

1.3 W3C标准

万维网联盟，是Web技术领域最具权威和影响力的国际中立性技术标准机构
.com 国际的 .cn中国 .org开源的

W3C标准

结构化标准（XHTML、HTML）
表现标准（CSS）
行为标准（DOM、ECMAScript标准）
- 很多浏览器费停留在ES5规范上，但是开发人员使用的是ES6标准，需要在IDEA中setting中找到Javascript language version 选择ES6

案例1：

网页上打印一首《静夜思》

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静夜思</title>
</head>
<body>

<h1>静夜思</h1>

<em>朝代：唐代</em> &nbsp;&nbsp;&nbsp; 作者： <strong>李白</strong> <br/>

<hr/>

<p>
    床前明月光, <br/>
    疑是地上霜, <br/>
    举头望明月, <br/>
    低头思故乡。<br/>
</p>

</body>
</html>

常见的前端开发工具

记事本
Notepad++
sublime
Vscode（前端专业）
WebStorm（前端专业）IDEA
HBuilder （专业）
等等。。
没有最好的，只有最合适的工具

1.4学习方式

模仿
养成规范
参考：菜鸟教程、W3cSchool

HTML的基本结构

所有的HTML标签，都以 <> 开始；</> 结尾
正常网页的所有内容都要放在< body>标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <!--自闭合标签-->
    <meta charset="UTF-8">
    <!--正常的标签都是需要成对出现的-->
    <title>Title</title>
</head>
<body>

</body>
</html>

DocTYPE文档类型，默认声明，表示这个浏览器是用什么规范，默认使用HTML5
Title标签，就是网站的小标题
meta：描述信息。SEO：网站搜索优化
统一编码UTF-8！ GB2312包含所有中文字符

<!--建议规范编码，统一使用UTF-8（全世界） GB2312：包含了所有的中文字符-->    
<meta charset="UTF-8">
<!--网站关键字描述-->
<meta name="keywords" content="welcome to learn HTML">
<!--网站的描述-->
<meta name="description" content="learning HTML">

1.5网站的基本标签

1、标题标签< h1> < /h1>

<!--标题标签  h1 + tab键 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在这里插入图片描述

2、段落标签< p> < /p>

<!--p：段落标签-->
<p>
床前明月光，疑是地上霜，举头望明月，低头思故乡。
</p>
床前明月光，疑是地上霜，举头望明月，低头思故乡。
<p>
床前明月光，疑是地上霜，举头望明月，低头思故乡。
</p>

在这里插入图片描述

3、换行标签 < br>(自闭合)

<br/>

4、水平线标签< hr>(自闭合)

<hr/>

5、字体样式标签

< em> < /em>
< strong> < /strong>

<!--字体样式-->
<strong>周杰伦</strong>
<p>
    <em>周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，毕业于淡江中学</em> <br>
    <em>中国台湾流行乐男歌手、音乐人、演员、导演、编剧等。</em>  <br>
    <em>....</em>  <br>
</p>

在这里插入图片描述

6、特殊符号标签 &nbsp(空格)

以&开头，；分号结尾
大于小于号**&gt**，&gl
版权符号 &copy

<!--空格 &-->
<p>Welcome to learn HTML</p>
<p>Welcome     to     learn      HTML</p>
<p>Welcome to&nbsp;&nbsp;&nbsp;learn HTML</p>
<!--大于小于号-->
&gt;
&lt;
<!--版权符号-->
&copy; 版权所有

<!--万能的公式  &  ;-->
&phone;

在这里插入图片描述

1.6图像标签

常见图片格式：png、jpg、、、

一般使用jpg，gif

良好习惯：图片为静态资源，statics 单独存放

statics/images

相对路径与绝对路径

标签中带有参数的 Key=value
src：资源图片：图片的路径
Alt：图片加载失败，表示图片的问题，即图片描述
title：鼠标放在图片上的显示信息
width：宽
height：高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    
<img src="../statics/images/1.JPG" alt="榜单"