Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

html基础

发布于：Dec 24, 2024

html基础

html介绍

html是种超文本标记语言，其使用标记标签来描述网页。
其基本结构如下

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

其中
<!DOCTYPE html>声明为 HTML5 文档
<html>元素是 HTML 页面的根元素
<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为 utf-8。
<title>元素描述了文档的标题
<body>元素包含了可见的页面内容
<h1>元素定义一个大标题
<p>元素定义一个段落

行内元素

行内元素的主要特点有：

  1. 相邻行内元素在一行上，一行可以显示多个。
  2. 高、宽直接设置是无效的。
  3. 默认宽度就是它本身内容的宽度。
  4. 行内元素只能容纳文本或其他行内元素。
    常用的行内元素标签有span,q,em…

span

使用使用 <span> 元素对文本中的一部分进行着色、改变属性…

1
<span style="color:blue">蓝色</span>

效果：
蓝色

a

<a>标签来创建一个超链接。可以可以让我们从一个页面跳转到另一个页面，当前页面的其他位置或下载。

属性 介绍
href 指向链接跳转的目标地址。#id值:跳转至对应的位置;#或者是javascript:;:表空链接。
target 可以用来指定打开链接的位置。
_self:表示在当前窗口中打开（默认值）;
_blank:在新的一个新的页面中打开链接;
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开		 
1
<a href="http://haiyao.site">海瑶的博客</a>

效果：海瑶的博客

q

<q> 标签表示一个封闭的并且是短的行内引用的文本。浏览器通常会在引用周围插入引号。

1
他说<q>今天天气真不错。</q>

效果：
他说今天天气真不错。

em

<em> 标签用于表示一语音语调的个加重,表现为斜体。

1
他说今天<em>天气</em>真不错。

效果：他说今天天气真不错。

strong

<strong>标签表示强调，重要内容，表现为加粗效果。

1
他说今天<strong>天气</strong>真不错。

效果：他说今天天气真不错。

del

<del>标签来表示一个删除的内容。

1
他说今天<del>天气</del>真不错。

效果：他说今天天气真不错。

特殊字符

在HTML中，一些如< >这种特殊字符是不能直接使用，比如空格，大于小于号等，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）。
常用特殊字符

转义字符 含义
&nbsp; 空格
&lt; <
&gt; >
&copy; 版权符号

更多实体：查询。

1
&gt;_&lt;

效果：>_<

块元素

块级元素的特点：

  1. 自己独占一行。
  2. 高度，宽度、外边距以及内边距都可以控制。
  3. 宽度默认是容器（父级宽度）的100%。
  4. 是一个容器及盒子，里面可以放行内或者块级元素。

常用的块元素有：div,h1-h6,p,…..

div

<div>没有任何语义，只用来布局。

h1~h6

h1~h6标题标签 h1-h6字号大小逐级递减

1
2
3
4
5
6
<h1>第一个标题</h1>
<h2>第二个标题</h2>
<h3>第三个标题</h3>
<h4>第四个标题</h4>
<h5>第五个标题</h5>
<h6>第六个标题</h6>

p

<p>段落标签，段落标签用于表示内容中的一个自然段。

1
2
3
<p>
    段落内容
</p>

效果：


段落内容

hgroup

<hgroup>标签用来为标题分组

blockquote

<blockquote>长引用标签。

1
2
3
<blockquote>
    被引用的内容。
</blockquote>

效果：


被引用的内容。

img

<img>标签来向网页中引入一个外部图片。

属性 介绍
src 设置图片的路径
alt 设置在图片不能加载时，对图片的描述
width 修改图片的宽度,一般使用px作为单位
height 修改图片的高度
title 鼠标悬停提示 
1
<img src="图片路径" width="宽度" height="高度" alt="加载失败提醒" title="悬停提示">

列表

列表可以相互嵌套。

有序列表

用<ol>标签创建，<li>表示列表项。
ol也是块元素

属性 介绍
type 用于指定序号的类型。
1:使用阿拉伯数字(默认);
a/A:大小写字母;
i/I:罗马数字作为序号。
start 输入整数，设定初始值 
1
2
3
4
<ol type="1" start="11">
    <li>列表11</li>
    <li>列表12</li>
</ol>

效果：

  1. 列表11
  2. 列表12

无序列表

无序列表用<ul>标签创建，<li>表示列表项。

属性 介绍
type 用于指定类型。
disc:实心的圆点(默认);
square:实心的方块;
circle:空心的圆。		 
1
2
3
4
5
<ul type="circle">
    <li>卡旺卡</li>
    <li>霸王茶姬</li>
    <li>coco</li>
</ul>

效果：

  • 卡旺卡
  • 霸王茶姬
  • coco

定义列表

使用<dl>来创建一个定义列表,<dt>被定义的内容,<dd>对定义内容的描述。

1
2
3
4
5
6
7
<dl>
    <dt>定义一</dt>
    <dd>定义一的第一条介绍</dd>
    <dd>定义一的第二条介绍</dd>
    <dt>定义二</dt>
    <dd>定义二的介绍</dd>
</dl>

效果：

定义一
定义一的第一条介绍
定义一的第二条介绍
定义二
定义二的介绍

表格

表格由 <table> 定义。
表格行由 <tr> 定义。
每行的表头单元格由 <th> 定义、数据单元格由 <td> 定义。

1
2
3
4
5
6
7
8
<tr>
  <th>属性</th>
  <th>介绍</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
</tr>

表单

<form> 定义用于为接收用户输入表单。
其可以包含以表单元素：
<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>与<output>。

input

<input> 定义输入字段，用户可以在其中输入数据，是最重要的表单元素。
其可以以多种方式显示，具体取决于 type 属性。
<input type="text">
type 可选属性如下：

属性 介绍
button 可点击的按钮。
checkbox 复选框。
color 颜色选择器。
date 日期控件。
datetime-local 日期和时间控件。
email 用于输入电子邮件地址的字段。
file 文件选择字段和浏览按钮。
hidden 隐藏的输入字段。
image 图像作为提交按钮。
month 月份和年份控件。
number 输入数字的字段。
password 密码字段。
radio 单选按钮。
range 范围控件，如滑块控件。
reset 重置按钮。
search 输入搜索字符串的文本字段。
submit 提交按钮。
tel 输入电话号码的字段。
text 默认。定义单行文本字段。
time 输入时间的控件。
url 输入 URL 的字段。
week 周和年控件。

结构标签

用于定义页面的结构方便布局。有以下几种。
<header> 网页的头部。
<main> 网页的主体。
<footer> 网页的底部。
<nav> 网页的导航。
<aside> 和主体相关的内容，侧边栏。
<article> 文章。
<section> 独立区块。

1
2
3
4
5
6
7
8
9
10
<header>
    头部
    <nav>导航</nav>
</header>
<section>
    主体
</section>
<footer>
    底部
</footer>

内联框架

用<iframe>来定义一个内联框架。实现在当前页面绘制其他网页。

属性 介绍
src 资源路径
frameborder 输入绘制网页的边框宽度
width 输入绘制范围宽度
name 用于关联<a>标签中target属性，使绘制网页更新。 
1
2
<iframe src="http://haiyao.site" width="800" height="600" name="iframe_a"></iframe>
<a href="http://haiyao.site/2024/12/24/html基础/" target="iframe_a">点击更新</a>

点击更新会使绘制的网页变为<a>标签中href属性的页面。

音视频

<audio>标签用来向页面中引入一个外部的音频文件。
<video>标签来向页面中引入一个视频文件。
默认情况下不允许用户自己控制播放停止。可以通过属性更改。

属性 介绍
src 资源路径
controls 允许用户控制
autoplay 自动播放
loop 循环播放

资源路径可以通过src属性引入，也可以通过包裹<source>标签来引入

1
2
3
4
5
6
7
8
9
10
<!-- 允许用户控制、自动播放且循环播放的音频 -->
<audio src="资源路径" controls autoplay loop></audio>
<audio controls autoplay loop>
    <source src="资源路径">
</audio>
<!-- 允许用户控制、自动播放且循环播放的视频 -->
<video src="资源路径" controls autoplay loop></video>
<video controls autoplay loop>
    <source src="资源路径" type="video/webm">
</video>

参考资料

面向开发者的 Web 技术 HTML（超文本标记语言）
w3school HTML 标签参考手册

关于本人

HaiYao的博客
Git主页

更新于：Feb 10, 2025

前端

html

评论