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

Bub_ble___

已于 2023-03-31 17:39:42 修改

阅读量65

点赞数

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

于 2023-03-30 10:45:05 首次发布

本文链接：https://blog.csdn.net/Bub_ble___/article/details/129853027

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、表单的input输入类型()

1.email

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

2.url

在提交表单时，会自动验证 url 域的值。（要求输入完整网址:协议、域名、（端口）、地址）

3.number

只能输入数字,其他内容如字母输入不进去。PC端右边按钮可以上下调整数字大小，用手机会弹出数字输入框

(如输入验证码时弹出)

注：用手机打开电脑上的网页

1.在vscode中添加插件：Live Server

2.手机和电脑连接同一个wifi

3.选择：Open with Live Server

4.会跳转到：

5.将上述IP换成自己电脑的IP，这个软件InletexEMCFree_crxz_com.exe点第一个窗口查看IP。将换IP之后的链接用手机打开，就可以查看这个网页。

4.search

搜索框，左边叉号可以清空搜索框

5.range

显示为滑动条

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

6.color

用于选取颜色

7. time

选择一个时间

8.date

选择一个日期

9.month

选择一个月份

10.week

选择周和年

二、多媒体：Audio、Video

见上一篇笔记：https://mp.csdn.net/mp_blog/creation/editor/129830798

三、HTML5 书写规范

1.不区分大小写，但尽量符合常用方式

2.文档类型声明位于HTML文档的第一行：

<!DOCTYPE html？>

3.小写元素名、属性名

4.建议每个元素都要添加关闭标签。即<p></p>而不是<p>

5.图片通常使用 alt 属性。在图片不能显示时，它能替代图片显示。要设置图片宽高，防止图片加载不出来时，页面布局混乱。

四、CSS样式表

1.CSS( Style Sheets)

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

2.内部样式表

内嵌式一般是将CSS代码集中写在HTML文档的head标签中title标签之后，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS"> //type="text/CSS" 在html5中可以省略
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

3.行内样式表

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

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

4.外部样式表

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

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

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

5、三种样式表总结

五、CSS字体属性

1.font-size:字号大小

2. font-family:字体

网页中常用的字体有宋体、微软雅黑、黑体等，例：

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

可以同时指定多个字体，中间以逗号（英文）隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。尽量使用偶数的数字字号，尽量使用系统默认字体。中文字体需要加英文状态下的引号，英文字体一般不需要加引号。英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

3.font-weight:字体粗细

normal、bold、bolder、lighter、100~900（100的整数倍）（数字更常用）。

其中100、200、300都为细，400、500、600都为普通，700、800、900都为粗，故常用100、400、700这三个。

4.font-style:字体风格

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

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

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

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

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

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

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

2. 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性。

六、CSS外观属性

1.color:文本颜色

取值方式有如下3种：

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

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

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。//取值为0时也不能省略百分号

进制转换：进制之间的相互转换（超详细）_进制转换_次太郎的二次元空间的博客-CSDN博客

2.line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，一般称为行高。line-height常用的属性值单位分别为像素px（最常用），相对值em和百分比%。

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

3.text-align:水平对齐方式

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

left：左对齐（默认值）right：右对齐center：居中对齐

4.text-indent:首行缩进

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

1em 就是一个字的宽度。一般1em=16px(不绝对)

5.text-decoration 文本的装饰

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

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