基础内容

基本标签

首先来看这样一段示例：

<!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>

html 标签

整个网页都是从 <html> 开始的，到 </html> 结束的

head 标签

head 标签代表页面的头，定义一些特殊且通常不可见的内容

<title> ：定义网页的标题
<meta> ：定义网页的描述文档内容、属性和其他信息的基本数据，主要是提供给搜索引擎、浏览器和其他应用程序使用
<style> ：定义 css 样式
<link> ：链接外部的 css 文件或者脚本文件
<script> ：定义脚本文件

body 标签

<body> 标记是用于定义文档主体的标记。所有在 <body> 和 </body> 之间的内容都将显示在浏览器中，例如文本、图像、链接、表格、列表等。

段落和文字

段落与文字标签

标签	语义
<h1>~<h6>	标题
<p>	段落
<br>	换行
<div>	块元素
<span>	行内元素

文本格式化标签

标签	说明
<strong>	加粗
<em>	斜体
<cite>	斜体
<sup>	上标
<sub>	下标

块元素和行内元素

块元素

块级元素通常用于表示文档的结构和布局，以独立的块形式呈现，占据一整行，可以包含其他块级元素和行内元素。

常见的块级元素有 <div>、 <p> 、 <h1>-<h6> 、 <ul> 、 <ol>、 <li> 、 <table> 、 <form>

行内元素

行内元素通常用于表示文本的一部分，以行内形式呈现，只占据它需要的宽度，不能包含块级元素

常见的行内元素有 <a> 、 <span> 、 <strong> 、 <em> 、 <img>、 <input> 、 <button>

列表

有序列表

<ol [type=""]>
    <li>1</li>
    <li>2</li>
    <li>3</li>
 </ol>

其中 ol 表示的是 ordered list , type 为可选项：

type="1" 序号：数字1, 2, 3
type="a" 序号：小写英文字母a , b , c
type="A" 序号：大写英文字母A , B , C
type="i" 序号：小写罗马数字i , ii , iii
type="I" 序号：大写罗马数字I , II , III

无序列表

<ul [type=""]>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

其中 ul 表示的是 unordered list , type 为可选项：

type="disc" , 默认值 ●
type="circle" , ○
type="square" , ■

表格

基本标签

标签	说明
table	表格
tr	行
td	单元格

结构标签

标签	说明
thead	表头
tbody	表身
tfoot	表脚
th	表头单元格

合并行和合并列

合并行

合并行会使用 td 标签的 rowspan 属性

语法：<td rowspan="行数的跨度"> , 例：

<table border="1">

    <tr>
        <th>name</th>
        <th>age</th>
    </tr>

    <tr>
        <td>aaa</td>
        <td rowspan="2">18</td>
    </tr>

    <tr>
        <td>bbb</td>            
    </tr>

</table>

效果：

name	age
aaa	18
bbb	18

合并列

合并列会使用 td 标签的 colspan 属性

语法：<td colspan="列数的跨度"> , 例：

<table border="1">

    <tr>
        <th>name</th>
        <th>age</th>
    </tr>

    <tr>
        <td colspan="2">none info</td>
    </tr>

    <tr>
        <td>aaa</td>
        <td>18</td>            
    </tr>

</table>

效果：

name	age
none info
aaa	18

图像

图像标签是用 <img> 来指明的，其为一个自闭和标签，其主要有三个重要的属性：

src ：图像的文件地址，可以为 URL , 绝对/相对路径甚至是 Base64 编码
alt ：图片显示不出来时的提示文字
title ：鼠标移到图片上面的提示文字

主要使用的语法为: <img src="图片地址" alt="图片描述" title="鼠标悬停提示">

链接

链接使用 <a> 标签来定义，其包含一下几个属性：

href : 用于指定链接的 URL 地址，可以是绝对路径、相对路径、锚点或 JavaScript 函数。
target : 用于指定链接在何处打开，常用的取值有 _self （在当前窗口打开）、_blank （在新窗口打开）
title : 用于指定链接的标题，当用户将鼠标悬停在链接上时会显示该标题

下面是一个简单的示例：

1	<a href="https://example.com" target="_blank" title="访问示例网站">示例网站</a>

锚点

锚点是一种用于在同一文档内建立跳转链接的标记。锚点可以将页面中的一部分定义为目标，使用户可以通过点击链接或跳转按钮，直接跳转到页面的指定位置。~~是 goto 确信~~

锚点也是使用 <a> 的链接功能来创建, href 属性中使用 # 符号跳转到指定的锚点标识，例如：

<h2 id="section1">第一部分</h2>
<p>这是第一部分的内容。</p>

<a href="#section1">跳转到第一部分</a>

表单

表单拥有四个基本标签：<input> , <textarea> , <select> 和 <option>

input

语法: <input type="表单类型">

type值	作用	效果
text	单行文本框
password	密码文本框
button	按钮
reset	重置
radio	单选按钮
checkbox	复选框

textarea

多行文本框

语法： <textarea rows="行数" cols="列数">多行文本框内容</textarea>

select 和 option

通常是配合使用，用来实现下拉列表，语法如下：

<select name="color">
    <option value="red">红色</option>
    <option value="green" selected>绿色</option>
    <option value="blue">蓝色</option>
</select>

显示效果

进阶

音视频支持

html5 的音视频标签支持多种音视频格式，包括 MP3 、WAV 、 OGG 、 FLV 、 MP4 、 WebM 等。并且 html5 的音视频标签提供了默认的控制面板，包括播放、暂停、停止、音量调节、全屏等功能，同时也支持自定义控制面板，可以根据需求进行定制。

下面是一个简单使用 html5 视频播放器的代码：

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video element.
</video>

<video> 标签用于定义视频文件的播放器, controls 属性用于显示默认的播放器控制面板, width 和 height属性用于指定视频的宽度和高度。如果浏览器不支持的话，则会显示 Your browser does not support the video element.

web作业--html总结

基础内容

tag

成对的 tag

不成对的标记

基本标签

html 标签

head 标签

body 标签

段落和文字

段落与文字标签

文本格式化标签

块元素和行内元素

块元素

行内元素

列表

有序列表

无序列表

表格

基本标签

结构标签

合并行和合并列

合并行

合并列

图像

链接

锚点

表单

input

textarea

select 和 option

进阶

音视频支持