表单类型、多媒体与CSS初始

本文介绍了HTML5中新增的表单输入类型,如email、url、number等,以及多媒体元素audio和video的使用,包括 autoplay、controls等属性。此外,还提及了HTML5的书写规范和CSS的基础知识,如CSS的作用、样式表的类型以及字体和外观属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、表单的input输入类型

HTML5新增了表单的输入类型

1、email

输入email格式,email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时,会自动验证 email 域的值是否合法有效:

<form action="demo-form.php">

  E-mail: <input type="email" name="usremail">

  <input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9  及更早 IE 版本不支持 type="email" 。</p>

2、url

只能输入url格式,url 类型用于应该包含 URL 地址的输入域。

在提交表单时,会自动验证 url 域的值。

定义输入URL字段:

<form action="demo-form.php">

  添加你的主页: <input type="url" name="homepage"><br>

  <input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本不支持 type="url" 。</p>

3、number: 只能输入数字

4、search: 搜索框

search 类型用于搜索域,比如站点搜索或 Google 搜索。

定义一个搜索字段 (类似站点搜索或者Google搜索)

<form action="demo-form.php">

  Search Google: <input type="search" name="googlesearch"><br>

  <input type="submit">

</form>

5、、range

范围,可以进行拖动,通过value进行取值

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

定义一个不需要非常精确的数值(类似于滑块控制):

请使用下面的属性来规定对数字类型的限定:

max - 规定允许的最大值,min - 规定允许的最小值,step - 规定合法的数字间隔,value - 规定默认值

<form action="demo-form.php" method="get">

Points: <input type="range" name="points" min="1" max="10">

<input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9 及更早 IE 版本不支持 type="range"。</p>

6、color 

color 类型用在input字段主要用于选取颜色,如下所示:

<form action="/demo-form.php">

  选择你喜欢的颜色: <input type="color" name="favcolor"><br>

  <input type="submit">

</form>

7、time

时间,time 类型允许你选择一个时间。

定义可输入时间控制器(无时区):

<form action="demo-form.php">

  选择时间: <input type="time" name="usr_time">

  <input type="submit">

</form>

8、date

日期 不是绝对的

date 类型允许你从一个日期选择器选择一个日期。

定义一个时间控制器:

<form action="demo-form.php">

  生日: <input type="date" name="bday">

  <input type="submit">

</form>

9、month

 月份,month 类型允许你选择一个月份。

定义月与年 (无时区):

<form action="demo-form.php">

  生日 ( 月和年 ): <input type="month" name="bdaymonth">

  <input type="submit">

</form>

10、week

 星期,week 类型允许你选择周和年。

定义周和年 (无时区):

<form action="demo-form.php">

  选择周: <input type="week" name="year_week">

  <input type="submit">

</form>

二、多媒体

1、audio(音频)

(1)、uotoplay如果出现该属性,则音频在就绪后马上播放。

(2)、controls如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮。

(3)、loop如果出现该属性,则每当音频结束时重新开始播放。

(4)、muted 如果出现该属性,则音频输出为静音

2、Video(视频)

(1)、controls如果出现该属性,则向用户显示控件,比如播放按钮。

(2)、loop如果出现该属性,则当媒介文件完成播放后再次开始播放。

(3)、muted如果出现该属性,视频的音频输出为静音。

(4)、width设置视频播放器的宽度。

三、.HTML5 书写规范

(1)、使用正确的文档类型

文档类型声明位于HTML文档的第一行:

<!doctype html>

(2)、使用小写元素名

文档类型声明位于HTML文档的第一行:HTML5 元素名可以使用大写和小写字母。推荐使用小写字母:混合了大小写的风格是非常糟糕的。开发人员通常使用小写 (类似 XHTML)。小写风格看起来更加清爽。小写字母容易编写。

<section> 
      <p>这是一个段落。</p>
    </section>

(3)、关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素),但我们建议每个元素都要添加关闭标签。

(4)、使用小写属性名

HTML5 属性名允许使用大写和小写字母。我们推荐使用小写字母属性名:同时使用大小写是非常不好的习惯。开发人员通常使用小写 (类似 XHTML)。小写风格看起来更加清爽。小写字母容易编写。

(5)、图片属性

图片通常使用 alt 属性。 在图片不能显示时,它能替代图片显示。

四、 CSS初识

(1)、CSS的发展历程

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

(2)、CSS 网页的美容师

CSS的出现,拯救了混乱的HTML,当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。 

CSS的最大贡献就是: 让 HTML 从样式中解脱苦海, 实现了 HTML 专注去做 结构呈现。 

(3)、CSS初识

CSS(    Style Sheets) 主要用于美化样式。

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

五、. 样式表

(1)、内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

(2)、行内样式表

内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

(3)、外部样式表

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

三种样式表总结(位置)

样式表

优点

缺点

使用情况

控制范围

行内样式表

书写方便,权重高

没有实现样式和结构相分离

较少

控制一个标签(少)

内部样式表

部分结构和样式相分离

没有彻底分离

较多

控制一个页面(中)

外部样式表

完全实现结构和样式相分离

需要引入

最多,强烈推荐

控制整个站点(多)

(4)、CSS样式规则

使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下: 

在上面的样式规则中:

1.选择器用于指定CSS样式的HTML对象,花括号内是对该对象设置的具体样式。

2.属性和属性值以“键值对”的形式出现。

3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。

4.属性和属性值之间用英文“:”连接。

5.多个“键值对”之间用英文“;”进行区分。

可以用段落和表格的对齐的演示。

六、. CSS字体属性

(1)、font-size:字号大小

font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:

(2)、font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:

p{ font-family:"微软雅黑";}

(3)、font-weight:字体粗细

字体加粗除了用b和strong标签之外,可以使用CSS 来实现,但CSS是没有语义的。

font-weight属性用于定义字体的粗细,其可用属性值:

normal、bold、bolder、lighter、100~900(100的整数倍)。

小技巧:

数字400等价于normal,而700等价于bold。但是我们更喜欢用数字来表示。  

(4)、font-style:字体风格

字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。

font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

normal:默认值,浏览器会显示标准的字体样式。

italic:浏览器会显示斜体的字体样式。

oblique:浏览器会显示倾斜的字体样式。

小技巧:

平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。

font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置,其基本语法格式如下:

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

注意:

1. 使用font属性时,必须按上面语法格式中顺序书写,不能更换顺序,各属性以空格隔开。

2. 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

七、. CSS外观属性

(1)、color:文本颜色

color属性用于定义文本的颜色,其取值方式有如下3种:

预定义的颜色值,如red,green,blue等。

十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。

RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。

(2)、line-height:行间距

line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px

一般情况下,行距比字号大7.8像素左右就可以了。

(3)、text-align:水平对齐方式    

text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。其可用属性值如下:

left:左对齐(默认值)

right:右对齐

center:居中对齐

(4)、text-indent:首行缩进

text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度。如果是汉字的段落,1em就是一个汉字的宽度

(5)、text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

描述

none

默认。定义标准的文本。

underline

定义文本下的一条线。下划线 也是我们链接自带的

overline

定义文本上的一条线。

line-through

定义穿过文本下的一条线。

(6)、letter-spacing 文字间距

设置每个文字之间的距离,单位是像素px

八、. 基础选择器

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

(1)、标签选择器(元素选择器)

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者

元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

特点:

1. 标签选择器能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

2. 标签选择器可以把某一类标签全部选择出来。 

(2)、类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用的时候用class=“类名”即可。

类选择器的优势:

1. 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

小技巧:

1.长名称或词组可以使用中横线来为选择器命名。
    2.不建议使用“_”下划线来命名CSS选择器。
    3.不要纯数字、中文等命名,尽量使用英文字母来表示。

(3)、多类名选择器

我们可以给标签指定多个类名,从而达到更多的选择目的。

注意:

1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,与CSS样式书写的上下顺序有关。

2. 各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下,还是较多使用的。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

(4)、id选择器

id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。用法基本和类选择器相同。

(5)、通配符选择器

通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

* {

margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值