【Web前端】HTML基础知识详解

1. HTML 简介

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

  • HTML 不是编程语言,而是标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

1.1 HTML 基本结构

以下为HTML基本结构:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
  • <!DOCTYPE html>:声明为 HTML5 文档
  • <html>元素: HTML 页面的根元素
  • <head>元素:头部元素,包含了文档的元数据(meta),标题(title)等
  • <body>元素:包含了可见的页面内容

1.2 HTML 元素

HTML元素基本组成:

  • 开始标签
  • 结束标签
  • 元素内容

注:
1.空标签:只有开始标签,没有结束标签,如<br/> <img>
2.大部分HTML 元素拥有属性

HTML 元素解析示例:

<a href="http://www.baidu.com">百度链接</a>
  • <a>:开始标签
  • </a>:结束标签
  • 百度链接:元素内容
  • href:属性名
  • http://www.baidu.com:属性值

2. HTML 编辑器

推荐使用现在主流的编辑器VS CodeVS Code的安装与使用

2.1 Live Server 插件

下载完VS Code后建议安装插件Live Server,这款插件可以在保存html文件时自动刷新页面,可以省去自己每次手动刷新页面。

注:Live Server,只有通过VS Code打开文件夹时才有用,单独打开这个文件是无效的。

VS Code的使用:
1.新建一个文件夹,右键文件夹 -> 通过Code打开 ->左上角新建一个html文件,如demo.html,编辑demo.html,输入!再按Tab或者回车,会自动生成html基本结构代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.右键Open With Live Server打开浏览器,之后再对demo.html修改保存,网页会自动刷新。

在这里插入图片描述
在这里插入图片描述

2.2 Prettier 插件

建议安装插件Prettier,可以美化代码。

1.打开设置:文件 -> 首选项 -> 设置,搜索设置框输入editor.defaultFormatter,选择Prettier

在这里插入图片描述

2.搜索设置框输入editor.formatOnSave,勾选保存时格式化文件。

在这里插入图片描述

3.设置完以后,再保存文件,会自动美化代码。

3. HTML 标签

3.1 常用标签汇总

1.文本

标签英文释义说明
<h1> - <h6>heading标题
<p>paragraph段落
<br/>break换行
<b>bold加粗
<i>italic斜体
<sub>subscript下标字
<sup>superscript上标字

2.超链接和图像

标签英文释义说明
<a>anchor超链接
<img>image图像

3.表格

标签英文释义说明
<table>table表格
<tr>table row表格的行
<td>table data单元格
<th>table heading表头

4.列表

标签英文释义说明
<ol>ordered list有序列表
<ul>unordered list无序列表
<li>list item列表项
<dl>definition list自定义列表
<dt>definition term自定义列表组
<dd>definition description自定义列表描述

5.块级元素和内联元素

标签英文释义说明
<div>division块级元素,无特定含义
<span>span内联元素,无特定含义

6.表单

标签属性属性说明
formaction服务端的URL路径
method表单的提交方式
inputtext文本框
password密码框
radio单选框
checkbox复选框
submit提交按钮
buttontype按钮类型
onclick点击按钮发生的事件
selectoption下拉列表的选项

7.框架

标签说明
<iframe>当前 HTML文档中嵌入另一个文档

8.头部

标签说明
<title>页面标题
<base>链接的默认URL以及默认打开方式
<link>链接外部资源
<meta>页面描述
<style>样式
<script>脚本

3.2 注释

<!-- -->用于注释。

<!-- 注释 -->

3.3 文本

3.3.1 标题

通过<h1> - <h6>用来定义标题,其中<h1>为最大标题,<h6>为最小标题。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

运行结果:

在这里插入图片描述

3.3.2 段落

<p>用来定义段落,<br/>用来换行。

<p>落霞与孤鹜齐飞,秋水共长天一色。</p>
<p>落霞与孤鹜齐飞,<br/>秋水共长天一色。</p>

运行结果:

在这里插入图片描述

3.3.3 文本格式化

常见的文本格式化如下:<b> 加粗、<i>斜体、<sub>下标字、<sup>上标字。

<b>粗体</b>
<i>斜体</i>
<p>f<sub>(x)</sub>=x</p>
<p>x<sup>2</sup>=4</p> 

运行结果:

在这里插入图片描述

3.4 超链接

<a>用来设置超文本链接,其中href属性用于描述链接的地址,target规定在何处打开链接的地址。

1.不加target属性,默认当前页面打开链接
2.target="_blank"代表新窗口打开链接

<a href="http://www.baidu.com" target="_blank">百度链接</a>

运行结果:

在这里插入图片描述
点击该链接后,在新窗口打开百度地址。

3.5 图像

<img>用于页面显示图片:

  • src属性用于描述图片的 URL 地址。
  • alt属性用于图片不能正常显示时出现的文本提示。
  • title属性用于鼠标悬停在图片上的文本提示。
  • width属性为图片的宽度。
  • height属性为图片的高度。
<img src="https://www.baidu.com/img/bdlogo.png" alt="图片未能加载成功" title="百度logo" width="540" height="258">
<img src="bdlogo.png" alt="图片未能加载成功">

运行结果:
在这里插入图片描述

3.6 表格

<table> 用于定义表格:

  • 每个表格有若干行<tr>
  • 每行有若干单元格<td>
  • 表格的表头为<th>,显示为粗体居中的文本。
  • rowspan属性用于跨行合并单元格
  • colspan属性用于跨列合并单元格

1.基础表格

<table border="1">
    <tr>
        <th>姓名</th>
        <th>院系</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>计算机学院</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>软件学院</td>
    </tr>
</table>

运行结果:
在这里插入图片描述

2.跨行、跨列合并单元格的表格

<!-- 跨行合并单元格 -->
<table border="1">
    <tr>
        <th rowspan="2">猫科</th>
        <td>狮子</td>
    </tr>
    <tr>
        <td>老虎</td>
    </tr>
    <tr>
        <th>犬科</th>
        <td></td>
    </tr>
</table>

<br>

<!-- 跨列合并单元格 -->
<table border="1">
    <tr>
        <th colspan="2">猫科</th>
        <th>犬科</th>
    </tr>
    <tr>
        <td>狮子</td>
        <td>老虎</td>
        <td></td>
    </tr>
</table>

运行结果:

在这里插入图片描述

3.7 列表

3.7.1 有序列表

<ol>定义有序列表,<li>为列表项。

<ol>
    <li>咖啡</li>
    <li>牛奶</li>
</ol>

运行结果:

在这里插入图片描述

3.7.2 无序列表

<ul>定义无序列表,<li>为列表项。

<ul>
    <li>咖啡</li>
    <li>牛奶</li>
</ul>

运行结果:

在这里插入图片描述

3.7.3 自定义列表

<dl>为自定义列表,<dt>为自定义列表项,<dd>为自定义列表项的描述。

<dl>
    <dt>咖啡</dt>
    <dd>- 热饮</dd>
    <dt>牛奶</dt>
    <dd>- 冷饮</dd>
</dl>

运行结果:

在这里插入图片描述

3.8 块级元素和内联元素

1.块级元素:块级元素独占一行,常见的块级元素有<div><h1> <p>等。

<div>:该块级元素没有特定的含义;主要用途是文档布局;可以配合CSS 一同使用,用于对大的内容块设置样式属性。

2.内联元素:内联元素不会以新行开始,也称行内元素,常见的内联元素有<span><b><a>等。

<span>:该内联元素没有特定的含义; 可以配合CSS 一同使用,用于为部分文本设置样式属性。

3.9 表单

<form>用于定义表单,表单用于收集用户的输入信息。

表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。

3.9.1 文本框和密码框

<input>:input标签的type属性,决定了输入类型。

  • <input type="text">:文本框
  • <input type="password">:密码框
<form>
    用户名:<input type="text"> <br/>
    密码:<input type="password">
</form>

运行后,在两个输入框内输入内容,结果如下:

在这里插入图片描述

3.9.2 单选框和复选框

  • <input type="radio">:单选框
  • <input type="checkbox">:复选框
<form>
    <input type="radio" name="sex" value="male"><input type="radio" name="sex" value="female"><br/>
    <input type="checkbox" name="animal" value="cat"><input type="checkbox" name="animal" value="dog"><input type="checkbox" name="animal" value="hamster">仓鼠
</form>

运行结果:

在这里插入图片描述

3.9.3 自定义按钮和提交按钮

  • <button type="button"></button>:自定义按钮
  • <input type="submit">:提交按钮

区别:在<button> 元素内部,可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

1.自定义按钮

  • type属性有buttonresetsubmit,为按钮的类型

  • onclick属性为点击按钮发生的事件

<button type="button" onclick="alert('Hello World!')">点击一下</button>

运行后,点击按钮,出现弹框如下:

在这里插入图片描述

2.提交按钮

当用户单击确认按钮时,表单的内容会被传送到服务器。

  • action属性定义了服务端的URL路径。
  • method属性定义了表单数据的提交方式,属性值有getpost
    • get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ?作为分隔符,一般用于不敏感信息,如分页等。例如:http://127.0.0.1:5500/test.php?username=123456,这里的username=123456 就是 get 方法提交的数据。
    • post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。
<form name="input" action="test.php" method="get">
    用户名: <input type="text" name="username">
    <input type="submit" value="提交">
</form>

运行后,输入123456,点击提交按钮:
在这里插入图片描述

提交后结果如下:

在这里插入图片描述

因为 test.php文件路径不存在,所以报错了

3.9.4 下拉列表

<select>定义下拉列表,<option>定义下拉列表的选项。

<select name="animal">
    <option value="cat"></option>
    <option value="dog"></option>
    <option value="hamster">仓鼠</option>
</select>

运行结果:

在这里插入图片描述

3.10 框架

<iframe>用于定义框架,通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。

1.原demo.html文件,内容如下:

<iframe src="test.html" width="200" height="200"></iframe>

2.在demo.html同级目录下新建test.html,内容如下:

<p>
    丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。<br>

    明月几时有?把酒问青天。不知天上宫阙,今夕是何年。我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间。<br>
    
    转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婵娟。
</p>

3.运行demo.html文件,结果如下:

在这里插入图片描述

3.11 头部

<head> 元素包含了所有的头部标签元素。

头部区域的元素标签如下:

  • <title>:定义了页面的标题
  • <base>:规定页面上所有链接的默认URL和链接的默认打开方式
  • <link>: 标签定义了文档与外部资源之间的关系,常用于链接到样式表
  • <meta>:元数据,通常用于指定网页的描述,关键词、文件的最后修改时间、作者等
  • <style>:用于添加样式来渲染 HTML 文档
  • <script>:用于加载脚本文

1.<title>标签

  • 在所有 HTML 文档中是必需的
  • 定义了网页标题
  • 网页添加到收藏夹时,显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题
<title>HTML教程</title>

运行后,并收藏该页面,结果如下:
在这里插入图片描述
2. <base>标签

  • href:默认URL
  • target:默认链接打开方式
<head>
    <base href="https://www.baidu.com/img/" target="_blank">
</head>
        
<body>
    <img src="bdlogo.png" alt="图片无法加载">
    <a href="https://www.baidu.com/">百度链接</a>
</body>

注:

  1. bdlogo.png为相对路径,加上前面base的路径,得到的路径是src="https://www.baidu.com/img/bdlogo.png"
  2. a·的target属性没有设置,则默认为base中的target="_blank",点击百度链接在新窗口打开百度首页。

运行结果:
在这里插入图片描述

3.<link>标签

  • rel:此属性必需填写,定义了当前文件与被链接文件之间的关系
  • type:规定被链接文件的 MIME 类型
  • href:文件URL
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>

4.<meta>标签

常用属性如下:

  • charset="UTF-8":定义文档的字符编码
  • name="author":定义网页作者
  • name="description":定义网页描述
  • name="keywords":为搜索引擎定义关键词
<meta charset="UTF-8">
<meta name="author" content="张三"> 
<meta name="description" content="Web前端基础教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">

5.<style><script>标签

  • 8
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值