一、HTML简介
HTML是超文本标记语言(HyperText Markup Language)的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
在我看来相当于Web的框架。需要与之后学习的CSS(起到修饰作用),JS(内部行为)共同构建我们所说的网页。
我们可以将这些内容跟上传到互联网,然后让它和别人创建的相链接。
二、环境配置
Chrome浏览器
VS Code:微软推出的开源文本编辑器,异常的强大
插件:
Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense fo CSS、Material Icon、Open HTML in Browser、Path Intelligence等
三、HTML的文档结构
HTML文档结构一般包括包括标记(Html)、头部(Head)、主体(Body)三部分。
标记< html>:说明该文件是用超文本标记语言来描述的,它是文件的开头,而则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。
头部:表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。
主体:网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>第一个Web页面</h1>
<p>welcome to HTML</p>
</body>
</html>
相关的一些练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="./images/ICO.svg" type="image/x-icon" />
<title>LEE</title>
</head>
<body>
<h2><mark>这是我的第一次练习</mark></h2>
<h4>现在开始了:)</h4>
</body>
</html>
HTML元素
HTML 使用"标记"(markup)来注明文本、图片和其他内容,以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如<:head>,<title>,<body>,<header>,<footer>,<article>
等
检查我们刚创建的 HTML 文档你会发现,整个 HTML 就由一个个元素组成(可以嵌套),而元素则一般由一对标签(tag)构成。
注释:ctrl+/
空元素
元素都拥有开始标签,内容,结束标签。但有一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如<br>, <hr>, <input>, <img>, <a>
等等。我们称其为空元素,如下:
br:换行
input:输入框
元素的属性
元素是可以有相关属性的。属性包含元素的额外信息,这些信息不会在浏览器中显示出来。
<p><br /><br /><mark>元素属性</mark><br /><br /></p>
<p title="这是title的属性">鼠标放置显示</p>
<input title="请输入用户名" type="text" />
<input title="密码" type="password" />
**一个属性必须包含如下内容:**
一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
属性名称,后面跟着一个 = 号。
一个属性值,由一对引号 “” 引起来。
文本格式
①HTML使用标签来对输出的文件进行格式输出,但是使用比较少,如果需要进行美化,会使用CSS来进行。
②常见文本格式标签:
<em> 着重文字
<i> 斜体字
<small> 小号字
<strong>加重语气
<sub> 下标字
<sup> 上标字
<ins> 插入字
<del> 删除字
超链接
①HTML 使用超级链接与网络上的另一个文档相连,点击即可跳转。
②超链接可以是字、词、图像等。
③语法:<a href="url">链接文本</a>
说明:href即为要跳转去的地址 URL;
说明:
href
即为要跳转去的地址 URL(Uniform Resorce Locator )
target
属性为_blank
表示在新的页面打开超链接(默认是在当前页面打开即_self
)
超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的
④例:
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
href即为要跳转去的地址 URL;target属性为_blank表示在新的页面打开超链接;超链接标签包含的内容,供用户点击。
⑤锚点:也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。
⑥说明:使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可,元素的id值必须是唯一的,也即页面不能再有其它元素的id值为C4,超链接中的地址需要有#符号。
图片
①在网页中显示图像,图像由<img>
标签定义。
②语法:<img src="url" alt="some_text">
③说明:src属性为要显示图片文件的位置 URL,图片文件的路径;alt属性当获取图片出现问题时显示的文字(占位符)。
④ 对于小尺寸的图片,现在可采用 base64 编码进行,可提高页面加载速度。
文件路径
为获取图片文件,我们需要指定该文件位于何处,这称为文件路径。文件路径有相对路径和绝对路径两种。
为获取图片文件,我们需要指定该文件位于何处,这称为文件路径。文件路径有相对路径和绝对路径两种。
上面图片的例子即为绝对路径。下面是相对路径的例子:
`<img src="picture.jpg">` 该图片文件与当前文档在同一目录中
<imgsrc="./images/picture.jpg">该图片文件在当前目录下的images目录中
`<img src="../picture.jpg">` 该图片文件在上一级目录中
== 一般推荐使用相对路径 ==
表格
①将表格在网页中呈现,使用相应的标签即可。
②例:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<tr>
表示行, <td>
表示行中的单元, <th>
是表头的单元.
③表格标签:
列表
①HTML 支持有序和无序还有自定义列表。
②无序列表:一个项目的列表,此列项目使用粗体圆点进行标记。
③有序列表:一列项目,列表项目使用数字进行标记。 有序列表始于
标签,每个列表项始于
标签。
④自定义列表:自定义列表以 <dl>
标签开始。每个自定义列表项以 <dt>
开始。每个自定义列表项的定义以 <dd>
开始。
表单
①HTML 表单用于收集不同类型的用户输入。
②表单是一个包含表单元素的区域。
③文本域
④密码字段
⑤单选按钮
⑥复选框
⑦提交按钮
补充
①HTML 的元素可以以称为区块 或 内联的方式进行显示。
②区块元素:区块元素在浏览器显示时,通常会以新行来开始(和结束)。
③内联元素:内联元素相反,他们总是一个接一个进行显示,不会新起一行。