HTML基础知识

宋小羽 • 2022年6月29日 am11:46 • HTML+CSS • 416 阅读

认知

五大浏览器

名称	内核
IE、Edge	Trident
Opera（欧朋）	最初是Presto，后来是Webkit，现在是Blink
Safari（苹果）	Webkit
Firefox（火狐）	Gecko
Chrome（谷歌）	之前是Webkit，现在是Blink

定义

HTML（HyperText Markup Language）是用来描述网页的一种超文本标记语言。浏览器不会显示标签，而是使用标签来解释页面的内容。

<!-- 声明为HTML5文档 -->
<!DOCTYPE html>
<!-- html是页面根元素，且定义页面语言类型 -->
<html lang="zh-CN">

  <!-- head包含了文档的元数据 -->
  <head>
    <!-- 定义网页编码格式 -->
    <meta charset="UTF-8">
    <!-- 描述网页标题内容 -->
    <title>html基础学习</title>
  </head>
  <!-- body包含了页面的课件内容 -->

  <body>
    <!-- 定义一个超链接 -->
    <a href="https://bysjb.cn">这是一个链接</a>
  </body>

</html>

元素

HTML元素指的是从开始标签到结束标签的所有代码。

<p>Hello World</p>

上面代码中，<p>表示开始标签（start tag），</p>表示结束标签（end tag）。<p>Hello World</p>内容整体则表示HTMl元素。

属性

属性为HTML元素提供附加信息。属性名建议使用小写，且使用双引号包含。

<a href="https://bysjb.cn">这是一个链接</a>

上面代码中，a链接使用了href属性，用于指定链接跳转的地址。

排版标签

标题

通过<h1> - <h6>等标签进行定义的。

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
<h7>Hello World</h7>

搜索引擎使用标题为网页的结构和内容编制索引，所以不能乱用标题标签。浏览器会自动地在标题的前后添加空行。

段落

使用<p></p>标签表示。

<p>这是一个段落</p>

浏览器会自动在段落的前后添加空行。

文本格式化

不强调

 <!-- 加粗、倾斜、下划线、删除线 -->
    <b>加粗文字1</b>
    <i>倾斜文字1</i>
    <u>下划线文字1</u>
    <s>删除下文字1</s>

强调

<!-- 加粗、倾斜、下划线、删除线 -->
    <strong>加粗文字1</strong>
    <em>倾斜文字1</em>
    <ins>下划线文字1</ins>
    <del>删除下文字1</del>

换行

使用<br />进行换行

分割线

使用<hr />进行横线分割

媒体标签

图片

使用<img />标签表示。img是一个单标签，作用是显示一张图片。

属性名	作用
src	图片的路径位置
alt	替换文本，图片不显示时显示的文字
title	提示文本，鼠标悬浮在图片上显示的文字
width/height	设置图片的宽度/高度，后面主要使用css进行修饰

<img src="../../static/img/1.png" alt="错误时显示" width="300" title="这是一张图片">

音频

使用<audio></audio> 标签表示。audio是一个音频标签，作用是播放音频。

属性名	作用
src	文件路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

<audio src="../../static/media/audio.mp3" controls loop></audio>

视频

使用<video></video> 标签表示。audio是一个视频标签，作用是播放视频。

属性名	作用
src	文件路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

<video src="../../static/media/video.mov" controls loop width="300"></video>

超链接

定义一个超链接，可用于从一个页面跳转到另一个页面。使用<a href="链接地址">链接文本</a>表示。

<a href="https://www.baidu.com">百度搜索</a>

上面代码中，“百度搜索”表示链接文本，链接文本不一定是文本，可以是图像或者其他HTML元素；https://www.baidu.com表示链接地址，点击链接文本后则会跳转到这个链接地址。

属性名	作用
href	跳转的链接地址
target	控制页面打开的形式
	`_blank` 新窗口打开
	`_self` 本窗口打开（默认）

锚点的使用实例

<!-- 创建一个名为img的锚点 -->
<a href="#img">跳转图片</a>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
<h7>Hello World</h7>
<p>这是一个段落</p>

<img src="../images/1.png" alt="" id="img">
<a href="https://www.baidu.com" name="img">百度搜索</a>

上面代码中，首先创建了一个名为img的锚点，底部两个代码则是定义了锚点的跳转位置。当img图片未添加id="img"属性时，点击锚点会跳转到设置name="img"的a链接处，否则会跳转到img图片。锚点跳转到其他标签，只需要设置对应名称的id属性即可。

列表标签

以行的方式整齐的展示数据

无序列表

使用<ul><li></li></ul>表示。

ul中li标签每行默认有一个小圆点

每一项是没有顺序的
ul标签中只能有li标签
li标签中可以有其他任意标签

<ul>
  <p>测试</p>
  <li>无序列表1</li>
  <li>
  <p>测试无序列表</p>
  </li>
  <li>无序列表2</li>
  <li>无序列表3</li>
</ul>

有序列表

使用<ol><li></li></ol>表示。

ol中每一项前面有默认的序号

每一项是有顺序的
ol标签中只能放li标签
li标签中可以放其他任意标签

<ol>
  <li>有序列表1</li>
  <li>有序列表2</li>
  <li>有序列表3</li>
</ol>

自定义列表

使用<dl><dd></dd></dl>表示。

dl整体包裹，dt是小标题，dd是每一项

dl中只能放dt和dd
dt和dd可以放任意标签

<dl>
  <dt>
    <p>自定义列表1</p>
  </dt>
  <dd>自定义列表2</dd>
  <dd>自定义列表3</dd>
</dl>

表格标签

使用<table></table>标签表示。以表格整齐的形式展示数据。

基本标签

table 整体
tr 行
td 块

属性

border 边框
width 宽度
height 高度

其他标签

caption 表格的说明文字
th 替换td标签，表格一列的标题
结构标签包裹tr标签，描述表格的结构
- thead
- tbody
- tfoot

合并单元格

上下合并保留上边，左右合并保留左边，删除其他

rowspan 合并行
colspan 合并列

<table border width="300" height="300">
  <caption>表格标签</caption>
  <thead>
    <tr>
      <th>这是一个单元格</th>
      <th>这是一个单元格</th>
      <th>这是一个单元格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">这是一个单元格2</td>
      <td colspan="2">这是一个单元格2</td>
      <!-- <td>这是一个单元格2</td> -->
    </tr>
    <tr>
      <!-- <td>这是一个单元4</td> -->
      <td>这是一个单元4</td>
      <td>这是一个单元4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>这是一个单元格3</td>
      <td>这是一个单元格3</td>
      <td>这是一个单元格3</td>
    </tr>
  </tfoot>
</table>

表单标签

使用<form></form>标签标识。收集用户数据，如登陆页、注册页等。

input标签

type 属性值不同，显示不同的类型

类型	描述
text	文本框
	name 提交后台数据标识符
	value 用户输入的数据，若设置则为默认值
	placholder 占位符
password	密码框
	name 提交后台数据标识符
	value 用户输入的数据，若设置则为默认值
	placholder 占位符
radio	定义单选按钮
	name 提交后台数据标识符，相同name属性值的单选框为一组，一组中只能同时有一个被选中
	value 用户选择的数据
	checked 默认选中，一组只能设置一个
checkbox	定义复选框，允许多选
	name 提交后台数据标识符
	value 用户选择的数据
	checked 默认选中
file	定义普通按钮
	name 提交后台数据标识符
	multiple 多文件选择
表单按钮	需要配合form标签一起使用，将form标签包裹在最外层（value 设置按钮文字）
	submit 提交数据
	reset 让表单恢复默认值
	button 普通按钮

<!-- 1.1 文本框 -->
<input type="text" value="tom" name="name" placeholder="请填入姓名">
<br>
<!-- 1.2 密码框 -->
<input type="password" value="hello" name="pwd" placeholder="请填入密码">
<br>
<!-- 1.3 单选框 -->
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman" checked>女
<br>
<!-- 1.4 多选框 -->
<input type="checkbox" name="hobby" value="read" checked>看书
<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="tv" checked>追剧
<br>
<!-- 1.5 文件选择框 -->
<input type="file" name="file" multiple>
<br>
<!-- 1.6 表单按钮 -->
<form action="">
  <input type="text">
  <input type="submit">
  <input type="reset">
  <button>点击</button>
</form>

表单属性

属性	描述
action	规定提交表单时将表单数据发送到何处
target	规定提交表单后在何处显示，默认为_self（在当前窗口）
method	规定提交表单时要使用的HTTP方法
name	规定表单提交的名称

<form action="/" method="get" target="_blank">
  姓名 <input type="text" name="name"><br />
  性别 <input type="radio" name="sex" value="男">男
  <input type="radio" name="sex" value="女">女<br>
  <input type="submit" value="提交">
</form>

button标签

一个可以点击的按钮

属性名	作用
submit	提交数据
reset	让表单恢复默认值
button	普通按钮

<form action="">
  <input type="text" name="name" value="tom" placeholder="请填写姓名">
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">提交2</button>
</form>

下拉菜单

使用<select><option></option></select>表示。select下拉选择框，option为每个选择项。

name 提交后台数据标识符
value 用户选择的数据
selected 默认选择

<select name="province">
  <option value="jiangsu">江苏省</option>
  <option value="zhejiang" selected>浙江省</option>
</select>

文本域标签

使用<textarea></textarea>表示，用于输入大量文字。

<textarea name="text" id="" cols="30" rows="10" placeholder="请输入文字"></textarea>

label标签

使用<label></label>表示，用于绑定表单和文本。用法如下：

直接使用label标签把文本和表单标签包裹起来，但是label标签不能有for属性
使用label标签将文本和表单标签包裹后，在表单标签上添加id属性，并且在label标签的for属性设置id属性值

<label>
   <input type="radio" name="sex" value="man" id="">男
</label>
<br>

<label for="read">
  <input type="checkbox" name="hobby" id="read">读书
</label>
<label for="travel">
  <input type="checkbox" name="hobby" id="travel">旅游
</label>

语义化标签

div	span
块状标签	行内标签
独占一行	一行可以显示多个
宽度默认占满一行，高度默认由内容撑开	宽度和高度默认都由内容撑开

字符实体

常见的字符实体

名称	作用
`&`nbsp;	空格
`&`gt;	大于号
`&`lt;	小于号

这些信息可能会帮助到你：关于我们 | 饿了么返钱 | 捐赠支持

文章名称：HTML基础知识
文章链接：https://www.bysjb.cn/html.html

THE END

二维码

打赏

前端开发常用网站推荐

< <上一篇

CSS基础知识

下一篇>>