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

最新推荐文章于 2022-07-19 13:14:04 发布

人间人间啊

最新推荐文章于 2022-07-19 13:14:04 发布

阅读量108

点赞数

文章标签： html css3 vscode

本文链接：https://blog.youkuaiyun.com/weixin_61650602/article/details/121441772

版权

表单的input输入类

email

验证邮箱<input type="email">
    <!--邮箱也可以不输入-->
    <br>

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

url

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

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

 验证url必须是http或者https开头
    <input type="url">

number：只能输入数字

验证数字
    <!--后面有箭头，可以增减-->
    <input type="number">

验证搜索：提供一键删除功能
    <input type="search">

range 滚动条

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

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

 进度条
     <input type="range">
     <input type="range" value="10" maxlength="100">
     <br>
     取色器
     <input type="color">
     <br>
     时间
     <input type="time">
     日期
     <input type="date">
     月份
     <input type="month">
     星期
     <input type="week">

    <input type="submit">

2.多媒体

(1)、Audio(音频)

如需在 HTML5 中播放音频，你需要使用以下代码：

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

Video(视频)

如需在 HTML5 中播放视频，你需要使用以下代码：

<video width="320" height="240" controls> 
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> 
您的浏览器不支持Video标签。 
</video>

CSS初识

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

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

(1)、内部样式表

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

（2）、

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

行内样式表

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式

(3)、外部样式表

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

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

link是个单标签。

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

CSS字体属性

font-size:字号大小

font-family:字体

font-weight:字体粗细

font-style:字体风格

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

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

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

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

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

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

CSS外观属性

color:文本颜色

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

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

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

line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高

text-align:水平对齐方式

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

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

2em

text-decoration 文本的装饰

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

letter-spacing 文字间距

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

基础选择器

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

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

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

特点：

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

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

(2)、类选择器

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

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

(3)、多类名选择器

<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; }

类选择器(class)好比人的名字，可以多次重复使用的，比如：张伟、王伟、李伟、李娜。

id选择器好比人的身份证号码，全中国是唯一的，不得重复。

id选择器和类选择器最大的不同在于使用次数上。

(5)、通配符选择器

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