续:小白WEB前端学习(一)
HTML这篇写完就结束了
6.HTML音频标签
例如: <audio src="./aa.mp3" controls ></audio>
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 规定音频将在准备就绪后立即开始播放。 |
controls | controls | 规定应显示音频控件(例如播放/暂停按钮等)。 |
loop | loop | 规定音频将在每次结束后重新开始。 |
muted | muted | 规定音频输出应静音。 |
preload | autometadatanone | 规定是否以及如何在页面加载时加载音频。 |
src | URL | 规定音频文件的 URL。 |
7.HTML视频标签
例如: <video src="./bb1.mp4" controls ></video>
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 如果出现该属性,视频的音频输出为静音。 |
poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。 |
preload | autometadatanone | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
src | URL | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
在浏览器中想要自动播放必须要有Muted属性
!实体字符
字符实体是一种将特殊字符表示为字符代码的方法。使用字符实体有几个优点:
-
跨浏览器兼容性:字符实体可以确保在不同的浏览器和平台上都能正确显示特殊字符。在某些情况下,直接使用字符可能导致显示问题。
-
可读性和维护性:字符实体更易于阅读和维护,特别是对于不熟悉特殊字符代码的人来说。
实体名称对大小写敏感!
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 |   | ||
< | 小于号 | < | |
> | 大于号 | > | |
& | 和号 | & | |
" | 引号 | " | |
' | 撇号 | (IE不支持) | ' |
¥ | 元(yen) | ¥ | |
© | 版权(copyright) | © | |
® | 注册商标 | ® | |
™ | 商标 | ™ | |
× | 乘号 | × | |
÷ | 除号 | ÷ |
!HTML5规定
H5是超文本语言HTML的第五次修订,2014年10月由万维网联盟(W3C)
完成标准制定,是近几年来Web标准巨大的飞跃。
以往,我们在Web上还只是上网看一些基础文档,但现在,Web是一个内涵非常丰富的平台。和以前版本不同的是,HTML5并非仅仅用来表示Web内容,在这个平台上还能非常方便的加入视频、音频、图象、动画,以及同电脑的交互。
HTML5的意义在于它带来了一个无缝的网络,无论是PC、平板电脑,还是智能手机都能很方便的浏览基于HTML5的各类网站。
新增标签:
figure:用于对元素进行组合。多用于图片与图片描述组合 PS:效果靠的很近
<figure>
<figcaption>xihuanni</figcaption>
</figure>
details:用于描述文档或文档的某个部分的细节,类似于下拉列表
<details>
<section>我的介绍</section>
<p>喜欢你</p>
</details>
总理小结
区别:单标签用于没有内容的元素,双标签用于有内容的元素
扩展知识:网页制作思路:从上到下,先整体再布局
2.嵌套关系的标签
1.HTML列表:
扩展:内容整齐的区域可以用列表,内容分格子使用表格,用户输入内容的地方用表单,都属于嵌套关系,
1.列表分类:
无线列表,有序列表,自定义列表
2.列表的案例:
1.无序列表:
例如:<ul> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul>
注意事项:
一个ul里可以放多个li,li标签特点独占一行,li标签里面可以包裹任何内容
2.有序列表:
例如:<ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol>
type属性
<ol>
的属性type 拥有的选项
1 表示列表项目用数字标号(1,2,3...)
a 表示列表项目用小写字母标号(a,b,c...)
A 表示列表项目用大写字母标号(A,B,C...)
i 表示列表项目用小写罗马数字标号(i,ii,iii...)
I 表示列表项目用大写罗马数字标号(I,II,III...)
3.自定义列表:
例如:<dl> <dt>列表标题</dt> <dd>列表描述/详情</dd> </dl>
注意事项:
dl里面只能包含dt和dd,dl和dd里面可以放任何内容,不是一组相同内容
ul ol dl分别在什么情况下用? 有序列表在列表项目对顺序有要求的时候使用; 无序列表在列表项目对顺序没要求时使用,可以是任何一系列项目; 定义列表在对项目有描述要求时使用。
2.HTML表格:
<table>表格</table>//表格根标签 ,表格内容从左到右依次排列
table hesader 表格头部
table row表格行
table data表格数据
border 边框
1.注意事项:
表格默认是不带边框线的,可以利用 CSS 中的 border属性来设置表格的边框。border-collapse 是“边框塌陷”的意思,当属性值为 collapse 时,可以使表格的双边框变为单边框。
2.表格的案例:
<table border="1"> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> <tr> <td>张三</td> <td>100</td> <td>100</td> <td>100</td> </tr> <tr> <td>李四</td> <td>100</td> <td>100</td> <td>100</td> </tr> </table>
3.合并单元格:
可以合并竖着的也可以是横着的
合并的步骤:
1.明确合并的目标
2.保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
--跨行合并,保留最上单元格,添加属性rowspan
--跨列合并,保留最左单元格,添加属性colspan
3.删除其他单元格
实操:
<table border="1" width="300px" height="300px" align="center"> <tr> <th colspan="2"></th> <th rowspan="2"></th> </tr> <tr> <td rowspan="2"></td> <td></td> </tr> <tr> <td colspan="2"></td> </tr> </table>
结果:
表格属性: <table>表格属性 border:设置表格的边框 width:设置表格的宽度 height:设置表格的高度 align:设置表格的水平对齐方式 cellpadding:设置内容距离边框的距离 cellspacing:设置单元格之间的距离 bgcolor:设置表格背景颜色 bordercolor:设置边框颜色 background:设置背景图片
3.HTML表单
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件
一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮
使用场景:登录页面,注册页面,搜索区域
<form action="url" method="get|post" name="myform"> </form>
属性说明
<form>
(表单)元素用于创建表单,所有表单控件所有元素都放在这里。在form表单里添加控件才能填写内容,action里面填写URL ,设置要将表单提交到何处(默认为当前页面)
input元素
HTML <input>
元素是最重要的表单元素。
<input>
元素有很多形态,根据不同的 type 属性,value显示给用户的值,name自己命名给自己的值
类型 | 描述 |
---|---|
<input type="text"> | 单行文本,输入什么就显示什么 |
<input type="password"> | 单行文本密码字段字符不会明文显示,而是以星号或圆点替代 |
<input type="radio"> | 定义单选按钮输入(选择多个选择之一) |
<input type="checkbox"> | 复选按钮 |
<input type="button"> | 显示可单击的按钮 |
<input type="submit"> | 显示提交按钮(用于提交表单) |
<input type="file"> | 变成按钮的样式,用于上传文件 |
<input type="reset"> | 定义充值按钮,所有表单值为默认值 |
<input type="image" src="a.jpg" /> | 用于创建图形化的提交按钮,即采用图像而非文本形式的提交按钮 |
<input type="email">(HTML5新增) | 定义用于 e-mail 地址的字段(当提交表单时会自动对 email 字段的值进行验证) |
<input type="url">(HTML5新增) | 定义用于输入 URL 的字段 |
<input type="search">(HTML5新增) | 定义搜索字段(比如站内搜索或谷歌搜索等)PS:有X的效果 |
<input type="color">(HTML5新增) | 从拾色器中选取颜色,例如:xxxxxxxxxx |
<input type="number" min="1" max="5">(HTML5新增) | 定义用于输入数字的字段(可以设置可接受数字的限制) |
<input type="date">(HTML5新增) | 定义 date 控件 |
1.input占位文本:placeholder-"提示信息":在代码标签里面写,在浏览器里显示灰色
2.type="radio"单选框radio没有完全的单选功能,靠写多个相同name值,进行实现一组单选
3.check属性是对选择的进行默认选择
4.type="file"如果想要多个文件一起上传,multiple进行多选的属性
Select元素
select下拉菜单:嵌套:<select> <option>.........</option></select>可以有多个option
Textarea元素
多行文本框<textarea>
标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。
可以通过 cols
和 rows
属性来规定 textarea
的尺寸大小,不过更好的办法是使用 CSS
的 height
和 width
属性
PS:像input就是单行的
<textarea name="" id=""></textarea>
label元素
用label标签绑定文字和表单控件的关系,增大表单控件的点击范围(焦点)
label标签增大点击范围表单控件:文本框,密码框,上传文件,单选框,多选框,下拉菜单,文本域等等
<label>所选专业:<input type="text"></label>//当处于父子关系时候,可以忽略for和Id也可以实现增大点击范围的功能,若果0想让并列关系的两个元素绑定,就写for和id
button元素
-
submit: 提交按钮,点击后可以提交数据到后台
-
reset: 重置按钮,点击后将表单中的所有字段重置为它们的初始值。
-
button: 普通按钮,默认没有功能,一般配合JavaScript使用,默认值是"button"。
新增属性(HTML5):
autofocus
属性规定在页面加载时,域自动地获得焦点。
placeholder
属性提供一种提示(hint),描述输入域所期待的值
required
属性规定必须在提交之前填写输入域(不能为空) //oninvalid="setCustomValidity('不能为空')"可以修改,required默认文字
实操:
思路:表格里面嵌套表单 <table border="1" align="center" cellspacing="0" width="500" height="300"> <tr align="center"> <td colspan="4">专业换选</td> </tr> <tr> <td>搜索类型:</td> <td> <form> <select> <option value="title">选择院系:</option> <option value="dianqi">电气工程</option> <option value="jisuanji">计算机工程</option> <option value="waiguoyu">外国语学院</option> </select> </form> </td> <td>学生身份:</td> <td> <form> <select> <option value="title">学生年级:</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </form> </td> </tr> <tr> <td>所在地区:</td> <td> <form> <select> <option value="title">不限</option> <option value="jaingsu">江苏</option> <option value="liaoning">辽宁</option> <option value="shanxi">陕西</option> <option value="guangdong">广东</option> <option value="chongqing">重庆</option> </select> </form> </td> <td>性别</td> <td> <form> <input type="radio" name="sex" value="nan">男 <br> <input type="radio" name="sex" value="nv">女 </form> </td> </tr> <tr> <td> 学习科目: </td> <td colspan="3"> <select> <option value="title">请在下列列表选择:</option> <option value="java">java</option> <option value="python">python</option> <option value="c++">c++</option> <option value="lua语言">lua语言</option> </select> </td> </tr> <tr> <td>学习</td> <td colspan="3"> <form> <input type="text" placeholder="请输入要学习的内容"> </form> </td> </tr> <tr> <td>专业</td> <td colspan="3"> <form> <input type="search" placeholder="请输入要学习的内容"> <input type="submit" value="搜索"> </form> </td> </tr> </table>
结果:
3.元素和属性:
元素(Elements)
-
定义:HTML元素指的是HTML标签,包括开始标签、内容和结束标签。
例如,<p style="background-color: aqua;">aa</p>,
<p>
是开始标签,</p>
是结束标签,它们之间的内容(aa)是元素的文本内容。p是元素,而<p>和</p>是标签,
-
作用:元素用于定义网页的结构和内容。HTML元素可以包含文本、图片、链接、列表、表格、表单等。
-
嵌套:HTML元素可以嵌套在其他元素内部,形成复杂的文档结构。
-
语法:元素使用尖括号
<>
包围,开始标签和结束标签之间可以包含文本内容或其他元素。
HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。
<html>
元素定义了整个 HTML 文档。
<h2 style="background-color:red;">这是一个标题</h2> //html元素
1.☀HTML <div> 元素(盒子装代码的):
是块级元素,块级元素最主要的特点是它们自己独占一行,它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。由于它属于块级元素,当与 CSS 一同使用时,<div> 元素可用于对大的内容块设置样式属性。
2.☀HTML <span> 元素(盒子装代码的):
是内联元素,可用作文本的容器,不换行
<span> 元素也没有特定的含义。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
属性(Attributes)
-
定义:属性是添加到HTML元素中的额外信息,它总是出现在开始标签中,并且总是以名称/值对的形式出现,比如:
color="red"
。 -
作用:属性为HTML元素提供有关元素的额外信息,这些信息不会被显示在网页上,但可以被浏览器或其他软件解析和使用。例如,
<img src="image.jpg" alt="一张图片">
中,src
和alt
就是属性,它们分别提供了图片的来源和替代文本。 -
语法:属性总是写在开始标签中,位于元素名称后面。属性名称和值之间用等号
=
连接,属性值用引号(单引号或双引号)包围。 -
常见属性:HTML元素有很多常见的属性,如
class
(用于CSS样式)、id
(用于唯一标识元素)、href
(用于链接或引用资源)、style(用于样式)等。
HTML 标签中有一些通用的属性,如 id、class、style 等,学到css用到属性的值
HTML 元素可以设置属性,属性名称不区分大小写,属性值区分大小写
1.属性的介绍
基本语法:<开始标签 属性名="属性值"></结束标签>每个HTML元素可以具有不同的属性例:<p id="describe” class="section">这是一个段落标签</p> //id,class为属性属性名称不区分大小写,属性值对大小写敏感,双引号引起来一个属性值
HTML基本属性 | js尽量操作id,css尽量操作class! |
---|---|
class | 为html元素定义一个或多个类名(classname)方便设置样式 |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
总结小结
-
元素是HTML文档的基本构建块,用于定义网页的结构和内容。
-
属性为HTML元素提供额外的信息,这些信息不会显示在网页上,但可以被浏览器或其他软件解析和使用。
简单来说,可以把HTML元素看作是一个容器或盒子,而属性则是这个容器或盒子的标签或描述。
-
HTML 元素以开始标签起始
-
HTML 元素以结束标签终止