HTML5基础，列表，表格，媒体元素，表单-优快云博客

本文链接：https://blog.youkuaiyun.com/lhjava1234/article/details/126955263

一：HTML5

HTML：超文本标记语言（Hyper Text Markup Language）

HTML不是一种编程语言，而是一种标记语言，描述网页的语言

HTML使用标签描述网页中图片、文本、音乐、视频、超链接等

二，网页结构

三，基本标签

图像标签：

链接标签

<a href="制作李清照简介.html">连接一下</a>
<a href="https://baidu.com/">百度一下</a>
<a href ="#mar">2</a>
<a name = "mar">2</a>
<a href="制作李清照简介.html">F1</a>

二，列表，表格，媒体元素

一，列表

什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以

便浏览者能更快捷地获得相应的信息

列表的分类

无序列表：

<ul>
    <li>范冰冰演藏族女孩</li>
    <li>撞死两个人后自拍</li>
    <li>诗隆甜蜜出游</li>
    <li>一线城市楼市退烧</li>
</ul>

有序列表:

<ol type = ‘a’>
      <li>范冰冰演藏族女孩</li>
      <li>撞死两个人后自拍</li>
      <li>诗隆甜蜜出游</li>
      <li>一线城市楼市退烧</li>
 </ol>

定义列表：

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

二，表格

<table border = 1>
    <tr> 行标签
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
</table>

表格跨行(rowspan)，跨列（colspan）

……
<tr>
        <td colspan="3">学生成绩</td>----------->所夸列数
</tr>
<tr>
        <td rowspan="2">张三</td>-------------->所夸行数
        <td>语文</td>
        <td>98</td>
</tr>
……

三，媒体元素

视频（video）

<video src="视频路径"  controls></video>

controls :提供控件




<video controls>
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
</video>




<video autoplay>
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
</video>

autoplay ：自动播放

提音频（audio）供播放、暂提供播放、暂停和音量的控件停和音量的控件提

<audio src="音频路径" controls></audio>

controls ：提供播放、暂停和音量的控件



<audio controls>
    <source src="music/music.mp3" type="audio/mpeg"/>
    <source src="music/music.ogg" type="audio/ogg"/>
</audio>

放提供放、暂停和音量的控件、暂停和音

三，表单

<form  method="post"（规定如何发送表单数据常用post，get） action="表单1.html">（发送到哪里）
   




</form>

表单元素

文本框：

复选框：checkbox

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

邮箱：email

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>

网址：url

<p>请输入你的网址:<input type="url"  name="userURL"/></p>
<input type="submit"/>

数字：number

<p>请输入数字:<input type="number"  min="0" max="100" step="10“ name=“num”/></p>
<input type="submit"/>

滑块 range

<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>

下拉列表

    <select name="列表名称">
        <option value="选项的值" selected="selected">…</option >
        <option value="选项的值">…1111</option >
        <option value="选项的值">…2222</option >
        <option value="选项的值">…3333</option >
        <option value="选项的值">…44444</option >
        <option value="选项的值">…55555</option >
        <option value="选项的值">…66666</option >
    </select>

一，表单高级应用

标注的作用

1，增强鼠标的可用性

2，自动对焦

	<p>
				性别：
				<input type="radio" id="boy" checked name="gender" value="男"/><label for="boy">男</label>
				<input type="radio" id="girl" name="gender" value="女"/><label for="girl">女</label>
			</p>