HTML5知识点（第四节）

廖王八

已于 2022-08-18 09:07:03 修改

阅读量111

点赞数 1

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

于 2022-08-17 12:30:59 首次发布

本文链接：https://blog.csdn.net/ljl17880248619/article/details/126363800

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文档介绍了HTML5的基本结构，包括文本和超链接标签、音频和视频标签、列表标签、div和span标签、表格标签以及表单元素。详细讲解了各标签的用法和属性，如标题、段落、图像、链接、音频、视频、列表、表格和表单的创建及验证。

摘要由CSDN通过智能技术生成

HTML5基础

HTML5默认结构
文本和超链接标签
音频和视频标签
列表标签
div标签和span标签
表格标签

表单

表单HTML5默认结构

<!DOCTYPE html>//文档类型声明
<html>//开头
    <head>
        //html文件信息
        <meta charset="utf-8" />//字符编码语言
        <title></title>    //标题
    </head>
    <body>
        //需要呈现的内容
    </body>    
</html>

<h6 > 注意：html标签最好都以小写字母呈现，并且大部分标签都是成对出现的，有一小部分单独存在，他们成为空标签</h2>

文本和超链接标签如下：标题文字标签，段落标签

标题文字标签：h1–h6字号逐渐减小

 <h1></h1>
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h5></h5>
        <h6></h6>

文字对齐方式：align=“”;

  <h1 align="left">左对齐</h1>
        <h2 align="right">右对齐</h2>
        <h3 align="center">居中对齐</h3>

段落标签

<p >段落标签</p>
<br  /> //换行
<hr  /> //水平线
<b></b>//强调标签
<strong></strong>//强调标签
<img />//图片标签
<a />//超链接

属性：

<p align="center" title="看看工具提示" style="color: red; ">段落标签</p>//文字位置，工具提示，样式

<p dir="ltr">段落标签</p>//文字方向

<hr width="1110" size="5" align="left" color="aqua"  /> //水平线
宽度，高度，对齐方式，颜色，去掉水平线阴影

<img src="路径" alt="提示信息" align="对齐方式" border="边框" width="宽度" height="高度"/>

<a href="https://mp.csdn.net/"></a>

音频和视频标签标签

<audio autoplay="是否自动播放" controls="是否显示控件" src="路径" loop="是否循环播放" >
        <source src="music.mp3" />
</audio>


<video poster="是否预加载" loop="是否循环播放" poster="点击前显示按钮"  >
        <source src="媒体文件地址" type="类型"></source>
</video>

列表标签
有序列表

```html
<ul type="项目符号类型">
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>
type取值为：disc：默认，实心圆
            circle：空心圆环
            square：正方形

无序列表

<ol type="序号类型" start="序号起始值">
    <li></li>
    <li></li>
    <li></li>
    ...
</ol>
type取值：1:数字，a：小写英文，A：大写英文，i：小写罗马数字,I：大写罗马数字

定义列表标签

<dl>
    <dt>名词</dt>
    <dd>解释</dd>
    ....
</dl>

div标签和span标签

div标签
<div>
    其他标签或内容
</div>
默认独占一行，默认从上到下依次排列

span文本标签

<span>
        文本
</span>
默认多个span存在一行，默认从左到右依次排列

表格标签

<table width="宽" height="高" bgcolor="背景颜色" background="背景图片" align="对齐方式" border="边框" cellspacing="单元格间距" cellpadding="单元格与内容的间距">
    <caption>标题</caption>
    <th>表头</th>
    <tr>//行
        <td colspan="跨行行数" rowspan="垂直所跨行数">单元格</td>
        <td>单元格</td>
        ...
    </tr>
</table>

</div>

表单标签
表单类型

<form action="提交地址" method="提交方式" name="表单名字">
    <input type="类型" name="名称"  value="值" size="宽度" maxlength="最大字符串" checked="是否选中" readonly="只读" src="路径" />
    type类型：
submit：提交
button：按钮
image：图片
reset：重置
password：密码
search：搜索
text：文本
checkbox：复选框
file：文件域
radio：单元按钮
hidden：隐藏
</form>

下拉框和文本输入

<form action="" method="post">
            <select name="">下拉框
                <option value=""></option>
            </select>
            <textarea name="" rows="" cols=""></textarea>多行文本输入框
</form>

表单验证：

<input value="必填验证" required="required"/>
<input type="email"  value="邮箱" />
<input type="range"  value="限定范围" />
<input type="date"  value="年月日" />
<input type="number"  value="数字" />
<input oninvalid="setCustomValidiy('有问题提示内容')" oninput="setCustomValidiy('无问题提升内容')"  />