html基础

白鸽_boy

已于 2023-03-27 16:32:40 修改

阅读量2.7k

点赞数 1

分类专栏： HTML 文章标签： html

于 2022-07-06 14:55:24 首次发布

本文链接：https://blog.csdn.net/qq_50452445/article/details/125638479

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

介绍

HTML (HyperText Markup Language)

不是一门编程语言, 而是一种用来告诉浏览器如何组织页面的标记语言。

基本结构

<!DOCTYPE html>
<html>
<head>
    <!-- 网页解码方式 -->
    <meta charset="UTF-8">
    <!-- 网页标题 -->
    <title>Title</title>
</head>
<body>

</body>
</html>

语法

描述: 每个语言都是有自己的语法规则。例如: 按照规范的英语语法编写，对方可以理解明白你所要表达的意思。HTML 也一样，按照规范的语法编写，浏览器可以理解你所要表达的意思。

标签(元素)

<!DOCTYPE html>
<html>
<head>
    <!-- 网页解码方式 -->
    <meta charset="UTF-8">
    <!-- 网页标题 -->
    <title>Title</title>
</head>
<body>
<p>My cat is very grumpy</p>
</body>
</html>

在 HTML 文档中标签也可以叫做元素, 它两表达的是同一个意思。

上面内容在 body 元素里添加了一个 p 元素, 下面让我们来看看这个 p 元素

开始标签（Opening tag）: 包含元素的名称 (本例为p)，被左、右角括号所包围。标识元素从这里开始或开始起作用—— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）: 元素的内容，本例中就是所输入的文本本身。
元素（Element）: 开始标签、结束标签与内容相结合，便是一个完整的元素。

属性

<!DOCTYPE html>
<html>
<head>
    <!-- 网页解码方式 -->
    <meta charset="UTF-8">
    <!-- 网页标题 -->
    <title>Title</title>
</head>
<body>
<p class="editor-note">My cat is very grumpy</p>
</body>
</html>

在元素上也可以添加属性，属性包含元素的额外信息, 这些信息并不会出现在实际的内容中。

属性必须包含如下内容:

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个等于号。
一个属性值，由一对引号“ ”引起来。

注释

描述: 注释的主要目的是给开发者看的。例: 如果你看到很久之前编写代码或者别人编写的代码感到疑惑时。这个时候注释是很有用的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 注释的内容 -->
没有注释的内容
</body>
</html>

基本标签

h

描述: <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
</body>
</html>

p

描述: 定义段落

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>段落</p>
	<p>段落</p>
</body>
</html>

img

描述: 向网页中插入图片

属性:

src: 图片的 URL

alt: 图像显示出错的替代文本

width: 图像宽度

height: 图像高度

注意点:
1. 默认显示图像正常宽高
2. 图像只设置宽度,高度自适应
3. 图像只设置高度,宽度自适应
4. 图像同时设置宽和高, 可能会导致图像变形

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="一张图片">
    <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="一张图片" width="500px;">
    <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="一张图片" height="500px;">
    <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="一张图片" width="100px" height="500px;">
</body>
</html>

a

描述: 定义超链接, 用于从一个页面链接到另一个页面

属性:

href: 链接指向的页面 URL

target: 新页面打开方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#"></a>
    <a href="javascript;"></a>
    <a href="test.html">a标签</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/" target="_self">当前页</a>
    <a href="https://www.baidu.com/" target="_blank">新页面</a>
</body>
</html>

base

描述: 为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

属性:

href: 链接默认的 URL

target: 所有页面打开方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base target="_blank">
</head>
<body>
    <a href="#"></a>
    <a href="javascript;"></a>
    <a href="test.html">a标签</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/" target="_self">当前页</a>
    <a href="https://www.baidu.com/" target="_blank">新页面</a>
</body>
</html>

列表标签

ul

描述: 定义无序列表。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>
</body>
</html>

ol

描述: 定义有序列表。

属性:

type: 列表中使用的标记类型

start: 有序列表的起始值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ol>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ol>
</body>
</html>

dl

描述: 定义定义列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <dl>
        <dt>标题1</dt>
        <dd>内容1</dd>
        <dd>内容1</dd>
        <dt>标题2</dt>
        <dd>内容2</dd>
        <dd>内容2</dd>
    </dl>
</body>
</html>

表格标签

table

描述: 定义 HTML 表格

table 属性:

width: 规定表格的宽度

height: 规定表格的高度

border: 规定表格边框的宽度

cellspacing: 规定单元格之间的空白

cellpadding: 规定单元边沿与其内容之间的空白

tr 属性:

align: 规定表格行的内容对齐方式

valign: 规定表格行中内容的垂直对齐方式

td 属性:

align: 规定表格行的内容对齐方式

valign: 规定表格行中内容的垂直对齐方式

colspan: 规定单元格可横跨的列数

rowspan: 规定单元格可横跨的行数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 表格标签 -->
    <table width="200px" height="300px" border="1" cellspacing="1" cellpadding="0">
        <tr align="char" valign="bottom">
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td align="right" valign="bottom">2.1</td>
            <td>2.2</td>
        </tr>
    </table>

    <!-- 标题表格 -->
    <table border="0" cellspacing="1" bgcolor="#000">
        <tr bgcolor="#909090">
            <th>标题1</th>
            <th>标题2</th>
        </tr>
        <tr bgcolor="white">
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr bgcolor="white">
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>

    <!-- 合并单元格 -->
    <table width="500px" height="300px" bgcolor="black">
        <tr bgcolor="#f0f8ff">
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr bgcolor="#f0f8ff">
            <td></td>
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr bgcolor="#f0f8ff">
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

表单标签

form

描述: 为用户输入创建 HTML 表单。

form 属性:

action: 规定当提交表单时向何处发送表单数据

input 属性:

type: 规定 input 元素的类型

name: 定义 input 元素的名称

value: 规定 input 元素的值

checked: 规定此 input 元素首次加载时应当被选中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--表单标签-->
    <form action="http://www.baidu.com">
        <!-- 明文输入框 -->
        <input type="text" name="user">
        <!-- 暗文输入框 -->
        <input type="password" name="pwd">
        <!-- 单选框 -->
        <input type="radio" name="sex" value="man" checked>男
        <input type="radio" name="sex" value="woman">女
        <!-- 多选框 -->
        <input type="checkbox" checked>多选一
        <input type="checkbox" checked>多选二
        <input type="checkbox">多选三
        <!-- 按钮 -->
        <input type="button" value="按钮">
        <input type="image" src="images/register.jpg">
        <input type="reset">
        <input type="submit">
        <input type="hidden" name="hid" value="123">
    </form>
</body>
</html>

label

描述: 为 input 元素定义标注

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 写法一 -->
    <label for="text">账号:</label>
    <input id="text" type="text">
    <br>
    <label for="paw">密码:</label>
    <input id="paw" type="password">
    <br>
    
    <!--写法二-->
    <label>
        账号:
        <input id="text" type="text">
    </label>
    <br>
    <label>
        密码:
        <input id="paw" type="password">
    </label>
</body>
</html>

select

描述: 可创建单选或多选菜单。

属性:

selected: 规定选项（在首次显示在列表中时）表现为选中状态

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <select>
        <optgroup label="标题1">
            <option value="1">1</option>
            <option value="3">3</option>
            <option value="5">5</option>
        </optgroup>
        <optgroup label="标题2">
            <option value="2">2</option>
            <option value="4">4</option>
            <option value="6">6</option>
        </optgroup>
    </select>
</body>
</html>

textarea

描述: 多行的文本输入控件。

属性:

cols: 规定文本区内的可见宽度

rows: 规定文本区内的可见行数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <textarea cols="10" rows="5">我来到你的城市</textarea>
</body>
</html>

媒体标签

video

描述: 定义视频，比如电影片段或其他视频流。

属性:

width: 设置视频播放器的宽度

height: 设置视频播放器的高度

src: 要播放的视频的 URL

controls: 如果出现该属性，则向用户显示控件，比如播放按钮

autoplay: 如果出现该属性，则视频在就绪后马上播放

muted: 规定视频的音频输出应该被静音

poster: 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

preload: 如果出现该属性，则视频在页面加载时进行加载，并预备播放

loop: 如果出现该属性，则当媒介文件完成播放后再次开始播放

注意点:

由于谷歌浏览器限制, 自动播放需要静音
使用 autoplay, preload 会失效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 写法一 -->
    <video src="./images/test.webm" autoplay muted controls loop poster="./images/test.jpg" preload></video>

    <!-- 写法二(兼容写法) -->
    <video controls>
        <source src="images/test.webm" type="video/webm">
        <source src="images/test.ogg" type="video/ogg">
        <source src="images/test.mp4" type="video/mp4">
    </video>
</body>
</html>

audio

描述: 定义声音，比如音乐或其他音频流。

属性:

src: 要播放的音频的 URL

autoplay: 如果出现该属性，则向用户显示控件，比如播放按钮

loop: 如果出现该属性，则每当音频结束时重新开始播放

preload: 如果出现该属性，则音频在页面加载时进行加载，并预备播放

muted: 规定视频输出应该被静音

注意点:

使用 autoplay, preload 会失效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 写法一 -->
    <audio src="./images/test.mp3" controls autoplay loop></audio>

    <!-- 写法二(兼容写法) -->
    <audio controls>
        <source src="./images/test.mp3" type="audio/mp3" />
    </audio>
</body>
</html>

其它标签

div

描述：用于配合 css 完成网页的基本布局。

注意点：

会独占一行

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <p>我是段落2</p>
            <p>我是段落2</p>
        </div>
    </body>
</html>

span

描述：用于配合css修改网页中的一些局部信息

注意点：

不会独占一行

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <span>我是文本</span>
        <span>我是文本</span>
    </body>
</html>

字符实体

HTML中有的字符是有特殊含义的, 不能直接再浏览器中显示出来的, 想要显示则需要用到字符实体

注意点:

浏览器会把多个空格和多个回车认为一个空格
浏览器 < > 有特殊含义, 不能直接显示出来,需要使用字符实体转义

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    我&nbsp;&nbsp;爱&nbsp;你
    &lt;
    &gt;
    &copy;
</body>
</html>

常用字符:

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

版权声明

参考来自于

https://developer.mozilla.org/zh-CN/docs/Web/Tutorials
https://www.it666.com/

如有侵权，请联系删除

白鸽_boy

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html基础

HTML 的全称为超文本标记语言, 是一种标记语言。主要用来为文本添加语义。注释基本标签hpimgsrc: “图片的 URL”alt: “图像显示出错的替代文本”width: “图像宽度”height: “图像高度”注意点: 1.默认显示图像正常宽高 2.图像只设置宽度,高度自适应 3.图像只设置高度,宽度自适应 4.图像同时设置宽和高, 可能会导致图像变形ahref: “链接指向的页面 URL”target: “新页面打开方式”basetarget: “所有页面打开方
复制链接

扫一扫