慕课网

初识HTML(5)+CSS(3)-升级版

最热最新

不羁的将来

html文档结构为下图：

查看全部

0 采集收起来源：听说有新版本了? - html5文档结构
2023-01-08
猫呓

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

查看全部

0 采集收起来源：给元素分个类 - 元素分类
2023-01-05
慕圣4093075
```
<span>文本</span>
```
1. 这个标签是没有语义的,它的作用就是为了设置单独的样式用的。
  比如：字体颜色、字体大小等
查看全部

0 采集收起来源：diy一个标签吧 - 使用<span>标签自定义文字样式
2023-01-04
慕圣4093075
```

```
html 文件注释
查看全部

0 采集收起来源：解释不等于掩饰- html文件注释
2023-01-04
猫呓

placeholder：input中输入框得提示内容属性

input得type：
1.单行输入框< input type=“text”/>
单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength。

2.密码输入框< input type=" password"/>
密码输入框用来输入密码，其内容将以圆点的形式显示。

3.单选按钮< input type=" radio"/>
单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。此外，可以对单选按钮应用 checked属性，指定默认选中项。

4.复选框< input type=" checkbox"/>
复选框常用于多项选择，如选择兴趣、爱好等，可对其应用 checked属性，指定默认选中项。

5.普通按钮< input type=" button"/>
普通按钮常常配合JavaScript脚本语言使用，初学者了解即可。

6.提交按钮< nput type=" 'submit"/>
提交按钮是表单中的核心控件，用户完成信息的输入后一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用 value属性，改变提交按钮上的默认文本。

7.重置按钮< input type=" reset"/>
当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用 value属性，改变重置按钮上的默认文本。

8.图像形式的提交按钮< input type=" image"/>
图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址。

9.隐藏域< input type=" hidden"/>
隐藏域对于用户是不可见的，通常用于后台的程序，初学者了解即可。

10.文件域< input type=“file”/>
当定义文件域时，页面中将出现一个“选择文件”按钮和提示信息文本，用户可以通过单击按钮然后直接选择文件的方式，将文件提交给后台服务器。

11.emai类型< input type=“email”/>

emai类型的标记是一种专门用于输入E-mai地址的文本输入框，用来验证emai输入框的内容是否符合E-mai地址格式;如果不符合，将提示相应的错误信息。

12.url类型 <input type “url”/>
Url类型的< input />标记是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器;如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。

13.tel类型< input type=“tel”/>
tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和 pattern属性配合使用。

14 search类型< input type=" search"/>

search类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，如站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。

15 color类型< input type=" color"/>
color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是# RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击clor类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。

16 number类型< input type=" number/>
number类型的 <input/标记用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内则会出现错误提示。

number类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等。具体属性说明如下。
●vale:指定输入框的初始值
●max:指定输入框可以接受的最大的输入值。
min:指定输入框可以接受的最小的输入值。
●sep:输入域合法的数字间隔，如果不设置，默认值是1。

17 range类型< input type=" range"/>
range类型的<inpu标记用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与 number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。如果想改变mnge的vale值，可以通过直接拖动滑动块或者单击滑动条来改变。

18.Date pickers类型< input type= date， month，week…"/>
Date picker类型是指时间日期类型。HML中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期、具体。
Date：选取日、月、年
Month：选取月、年
Week：选取周、年
Time：选取时间(小时和分钟)
Datetime：选取时间、日、月、年(UTC时间)
datetime-local：选取时间、日、月、年(本地时间)

查看全部

0 采集收起来源：使用重置按钮，重置表单信息
2023-01-04
AliceY

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签的语法</title>
<style type="text/css">

p{
color:red;
}
</style>
</head>
<body>
<h1 >在本教程中，你将学习如何使用 HTML 来创建站点
<p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。</p>
</h1>
</body>
</html>

查看全部

0 采集收起来源：使用说明书 - 标签的语法
2023-01-02
慕莱坞0171608

<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody></table>

查看全部

0 采集收起来源：使用thead、tbody、tfoot定义表格
2022-12-29
qq_慕码人8397582
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
查看全部

0 采集收起来源：不发一张自拍么? - 使用<img>标签为网页添加图片
2022-12-29
慕娘8192169
```
<span>标签是为了设置单独的样式
```
查看全部

0 采集收起来源：diy一个标签吧 - 使用<span>标签自定义文字样式
2022-12-28
Unicorn3368418

起飞咯 - 浮动模型
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div>
效果图
当然你也可以同时设置两个元素右浮动也可以实现一行显示。
div{ width:200px; height:200px; border:2px red solid; float:right; }
效果图
又有小伙伴问了，设置两个元素一左一右可以实现一行显示吗？当然可以：
div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;}
效果图

查看全部

0 采集收起来源：起飞咯 - 浮动模型
2022-12-22
Unicorn3368418

什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

查看全部

0 采集收起来源：我要独占一行 - 块级元素
2022-12-22
Unicorn3368418

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>

查看全部

0 采集收起来源：给元素分个类 - 元素分类
2022-12-22
阿培Kim

用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。 transform: translate(-50%, -50%);

查看全部

0 采集收起来源：面试常考题之宽高不定实现盒子水平垂直居中
2022-12-21
阿培Kim

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
css代码：
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}

</style>
也可以写成：
margin-left:auto;
margin-right:auto;

查看全部

0 采集收起来源：水平居中设置-定宽块状元素
2022-12-21
阿培Kim

技术点的解释：
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。

查看全部

0 采集收起来源：我想占大头 - 给子元素设置flex占比
2022-12-21

首页上一页 62 63 64 65 66 67 68 下一页尾页

0/150

提交

取消

开始学习

课程须知: 没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。

老师告诉你能学到什么？: 本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。