HTML初探
1.什么是HTML？
HTML(Hyper Text Markup Language)指超文本标记语言,是用来描述网页的一种语言
a) 超文本：比普通文本更牛逼的文本 不仅仅可以展示文字 可以展示各种媒体内容
b) 一般由前端工作人员来完成,后台研发人员不需要编写
c) 标记：(标签/元素/标记)
标记通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
<html> - 封闭类型标记（也叫双标记），必须成对出现,如
<p></p> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 非封闭类型标记，也叫作空标记，或者单标记，如
<br/>
2.HTML基本结构
注释：给人看的提示，不显示出来的内容，不执行的代码。写法：<!-- 内容 --> 。快捷键：ctrl + shift + /
<html> <!-- 根标签， 所有其他的标签都放入该标签中，根标签有两个一级子标签:head,body -->
<head> <!--头标签，不显示在网页上，但是又比较重要的信息-->
</head>
<body> <!--体标签,显示在页面上的内容 -->
<body>
</html>
3.HTML专业词汇和概念
标签（tag）：
- 分为单标签（如meta）和 双标签（如html head body title）
- 标记(签)是HTML语言的基本部分
- 标签是分层次的；多数标记总是成对出现，包括开始标签和结束标签；
- 根标签是html，包括两个子标签head和body
- 标签不区分大小写。例如
<html>或<HTML>都可以
属性和属性值（attribute）
- 附属于标签，对标签的特征进行设置
- 属性的值可以用双引号引起来（单引号也可以）
- 属性和属性值不区分大小写
- 属性之间无先后次序，属性也可省略（即取默认值）
- 属性都是写在开始标签中
<!--画一条长300像素，粗15像素的深青色直线,居右>
<hr width="300" color="darkcyan" size="15" align ="right"/>
如上例，width,color,size,align为hr标签的属性
文本（text）
-
标签的内容可以是子标签或者普通文本
-
最内层标签的内容称为文本
-
外层标签的内容也可以统称为文本
<!--文本处理标签-->
<font color="green"> 好家伙er </font>
如上例，好家伙er就是文本
元素(element)
- 开始标记+中间内容+结束标记
- HTML文档包括两部分：头部部分和主体部分
- 一个完整的标签我们也称之为为网页上的一个元素
4.HTML标签
4.1 <head></head>标签：
Head标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>。
应该把<head>标签放在文档的开始处，紧跟在<html>后面，并处于 <body>标签之前。
文档的头部经常会包含一些<meta>标签，用来告诉浏览器关于文档的附加信息。
title标签
可定义文档的标题。它显示在浏览器窗口的标题栏或状态栏上。title写和你网页相关的关键词有利于SEO优化
meta标签
META标签用来描述一个HTML网页文档的属性，元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常用属性：
- charset属性：用于定义当前页面的字符集，告诉浏览器以什么字符集解析当前页面
- name属性： 一般用于定义当前网页的一些简单描述 便于在搜索引擎上根据描述搜索到当前网页
- author属性：作者
- description属性：描述 一段陈述文字,描述当前网页
- html 属性值使用单引号或者是双引号 皆可
- http-equiv:相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
code:
<html>
<head>
<meta charset = "utf-8" />
<meta name="keywords" content="关键字1,关键字2"/>
<meta name="author" content="COnY" />
<meta name="description" content="哦我的上帝" />
<!--在多少秒后对网页进行刷新-->
<!--<meta http-equiv="refresh" content="5;https://www.baidu.com" />-->
<title>第一个小网页</title>
</head>
<body>
<body bgcolor="aliceblue"><!--不只有head可以写属性-->
没人比我更懂这个html
</body>
</html>
4.2 标题标签和段落标签
标题标签
<h1></h1>~<h6></h6>：一级标签到六级标题。注意：h7,h8,h9等是无效的
段落标签
<br/>：换行标签
<p>：段落标签 被段落标签包裹的文本就是独立的一个段落，段落内部不换行，段落和段落之间换行
格式化标签
| 标签 | 描述 |
|---|---|
<b> |
定义粗体文本。 |
<big> |
定义大号字。 |
<em> |
义着重文字。 |
<i> |
定义斜体字。 |
<small> |
定义小号字。 |
<strong> |
定义加重语气。 |
<sub> |
定义下标字。 |
<sup> |
定义上标字。 |
<ins> |
定义插入字。 |
<del> |
定义删除字。 |
字符实体
对无法直接显示的字符进行转义 比如若想在网页上显示“<”，就得写<。
特殊符号
如果我想打α，可以使用&Alpha
code:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6><hr />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03 标题标签 格式化标签 字符实体和特殊符号</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6><hr />
<p>美利坚合众国，简称“美国”，是由华盛顿哥伦比亚特区、50
个州和关岛等众多海外领土组成的联邦共和立宪制国家。其
主体部分位于北美洲中部，美国中央情报局《世界概况》19
89年至1996年初始版美国总面积是937.3万平方公里，人口
3.3亿 ，通用英语，是一个移民国家。 </p>
<p>美国原为印第安人的聚居地，15世纪末，西班牙、荷兰、法国<br/>
和英国等相继移民至此。 18世纪前，英国在美国大西洋沿岸<br/>
建立了13个英属北美殖民地。1775年，爆发了美国人民反抗<br/>
大英帝国殖民统治的独立战争。1776年7月4日，在费城召开<br/>
了第二次大陆会议，由乔治·华盛顿任大陆军总司令，发表<br/>
《独立宣言》，宣布美利坚合众国正式成立。 1783年独立<br/>
战争结束，英国承认13个殖民地独立。1787年通过美国宪<br/>
法，成立联邦制国家。</p><hr />
<!--格式化标签-->
<b>我粗了</b> <br />
<big>我大了</big> <br />
<em>我着重了</em> <br />
<i>我斜体了</i> <br />
<small>我小了</small> <br />
<strong>我加重了</strong> <br />
<sub>我是下标字</sub> <br />
<sup>我是上标字</sup> <br />
<ins>我是插入字</ins> <br />
<del>我被删了</del> <br />
<b><big><i>我是样式嵌套</i></big></b> <br /><hr />
<!--字符实体-->
html的根标签是<html> <br /><hr />
<!--特殊符号-->
特殊符号，比如α<br /><hr />
</body>
</html>
4.3 超链接和多媒体标签
超链接标签：
a标签，可以给文字，图片，音乐，其他标签添加超链接功能。
| 属性 | 作用 |
|---|---|
| href | 设置链接地址 * 超链接锚点设置：通过 <a name = '锚点名'>内容</a>设置锚点，使用<a href = '#锚点名'>内容</a>跳转 |
| target | 设置连接打开方式： _blank表示新建标签页，_self是在当前标签页打开 |
多媒体标签
img图片标签
| 属性 | 作用 |
|---|---|
| src | 图片路径 |
| title | 鼠标悬停文字 |
| alt | 图片加载失败时提示的文字 |
图片标签可以作为超链接
audio音频标签
可以的写法：在audio标签下使用source添加音频
| 属性 | 作用 |
|---|---|
| src | 音频路径 |
| controls | 添加控件 |
| loop | 循环播放 |
| autoplay | 自动播放 |
video视频标签
可以的写法：在video标签下使用source添加音频
| 属性 | 作用 |
|---|---|
| src | 视频路径 |
| controls | 添加控件 |
| loop | 循环播放 |
| autoplay | 自动播放 |
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04 超链接标签和多媒体标签</title>
<
最低0.47元/天 解锁文章
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
