-
6-9 <label>标签单选框、复选框的实现，让用户选择
2021-03-05 15:38:18在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全... -
6-8 使用label为input标签穿上衣服
2021-03-05 15:34:04小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。 label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。 语法： label for="控件id名称" 注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。 例子： f... -
6-7 使用<textarea>标签创建文本域
2021-03-05 15:30:09当用户需要在表单中输入大段文字时，需要用到文本输入域。 语法： textarea rows="行数" cols="列数"文本/textarea 1、textarea标签是成对出现的，以textarea开始，以/textarea结束。 2、cols ：多行输入域的列数。 3、rows ：多行输入域的行数。 4、在textarea/textarea标签之间可以输入默认值。 举例： form method="post" action="save.php" label联系我们/label textarea col... -
6-6 input标签中的邮箱框email类型
2021-03-05 15:25:17我们来学习input标签中的邮箱框email类型，先来看一下邮箱框长什么样子吧。 我们要实现一个邮箱输入框，可以输入以下代码： 技术点的解释： 1、Input的type属性设置为email,则表示该输入框的类型为邮箱。 2、数字框的值必须包含@。 3、数字框的值@之后必须有内容,否则会报错误提示。 是不是很简单呢?... -
6-5 input标签中的网址框url类型
2021-03-05 15:05:47我们来学习input标签中的网址框url类型，先来看一下网址框长什么样子吧。 技术点的解释： 1、input的type属性设置为url,则表示该输入框的类型为网址。 2、数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。... -
6-4 input标签中的数字框number类型
2021-03-05 15:02:40我们来学习input标签中的数字框number类型，先来看一下数字框长什么样子吧。 技术点的解释： 1、input的type属性设置为number,则表示该输入框的类型为数字。 2、数字框只能输入数字，输入其他字符无效。 3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。 是不是很简单呢?... -
6-3 placeholder属性的使用
2021-03-05 14:36:58这一项章节我们来学习input标签中占位符placeholder,属性，有时候需要提示用户输入框需要输入框的内容，那么就会用到我们的占位符，比如下面的效果： 想要实现这样的效果,我们只需要输入以下代码： 技术点的解释： 1、placeholder属性为输入框占位符,里面可以放提示的输入信息。 2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。 3、占位符内容不是输入框真正的内容。 是不是很简单呢？... -
6-2 文本输入框、密码输入框
2021-03-05 14:31:20当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。 语法： form input type="text/password" name="名称" value="文本" //form 1、type： 当type=text时，输入框为文本输入框; 当type=password时, 输入框为密码输入框。 2、name：为文本框命名，以备后台程序ASP 、PHP使用。 3、value：为文本输入框设置默认值。(一般起到提示作用) 举例： form 姓名： input type... -
6-1 使用表格标签<form>创建表单
2021-03-05 14:09:19网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 语法： form method="传送方式" action="服务器文件" 讲解： 1.form ：form标签是成对出现的，以form开始，以/form结束。 2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 3.method ： 数据传送的方式（get/post）。 form method="post" act... -
5-5 使用thead、tbody、tfoot定义表格
2021-03-05 14:02:11在上一章节中,我们已经学习了用table标签家族来定义一个表格,我们使用到了tr标签来定义表格的行,th和td来定义表格的列,那么这一章,我们来学习thead标签定义表格头部,tbody标签来定义表格的内容,tfoot来定义表格的底部,来将我们的表格继续完善吧！ 创建表格的三个区域： thead、tbody、tfoot 我们想实现一个成绩表,各科成绩和总分,效果如下图： 我们表格第一行为表头数据,我们用thead标签包裹,中间的科目和分数为表格的主体内容,我们用tbody标签包裹,最后的总分我们用tfoo... -
5-4 使用table家庭为网页添加表格
2021-03-04 17:37:14有时候我们需要在网页当中添加一些数据,如某公司想展示该公司员工的通信录，如下表： 那我们就需要用到表格标签了, 这一章我们来学习表格标签，那么这些标签有什么特点呢？让我们一起来探索吧。想要在网页中实现以上效果,我们可以使用以下代码： 上面代码解释： 创建表格的四个元素：table、tr、th、td 1、table/table：整个表格以table标记开始、/table标记结束。 2、tr/tr：表格的一行，所以有几对tr 表格就有几行。 3、td/td：表格的一个单元格，一行中包含几对td.../td，说... -
5-3 在新建浏览器窗口中打开链接
2021-03-04 17:27:47我们这一章节来学习a标签中的target属性，可以先看一个例子： 我们要实现这样的效果,可以输入以下代码： 技术点的解释： a标签有的target属性，代表打开网页的方式。可选值为_self和_blank，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。... -
5-2 使用<a>标签为网页添加超链接
2021-03-04 17:21:50使用a标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。 语法： a href="目标网址" title="鼠标滑过显示的文本"链接显示的文本/a 例如： a href="http://www.57zxw.net" title="点击进入57自学网"click here!/a 上面例子作用是单击click here!文字，网页链接到http://www.57zxw.net这个网页。 title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中... -
5-1 使用<img>标签为网页添加图片
2021-03-04 17:20:34在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用 img 标签来插入图片。 语法： img src=图片地址 alt=下载失败时的替换文本 title = 提示文本 举例： img src = myimage.gif alt = My Image title = My Image / 讲解： 1 、src： 标识图像的位置； 2 、alt： 指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本； 3 、title： 提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本... -
4-2 使用<ol><li>标签实现有序列表
2021-03-01 17:02:25如果想在网页中展示 有前后顺序 的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用 ol 标签来制作 有序列表 来展示。 语法： ol li 信息 /li li 信息 /li ...... /ol 举例： 下面是一个热点课程下载排行榜： ol li前端开发面试心法 /li li 零基础学习html /li liJavaScript全攻略/li /ol ol 在网页中显示的默认样式一般为：每项 li 前都自带一个序号，序号默认从 1 开始，如下图所示： 源代码： !DOC... -
4-1 使用<ul><li>标签实现无序列表
2021-03-01 17:02:55在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。 新闻列表 图片列表 这些列表就可以使用ul-li标签来完成。ul-li是 没有前后顺序 的信息列表。 语法： ul li信息/li li信息/li ...... /ul 举例： ul li 精彩少年 /li li 美丽突然出现 /li li 触动心灵的旋律 /li /ul ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示： 源代码： !DOCTYPE htmlhtmlhead meta chars... -
3-3 使用<hr>标签实现水平线标签
2021-03-01 16:38:40在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示： 语法： html4.01版本 hr xhtml1.0版本 hr / 注意： 1. hr / 标签和 br / 标签一样也是一个 空标签 ，所以只有一个开始标签，没有结束标签。 2. hr / 标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。 3.大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本... -
3-2 使用特殊字符 实现空格标签
2021-03-01 16:33:29在上一节的例子，我们已经讲解过在html代码中输入 空格 、 回车 都是没有作用的。要想输入空格，必须写入 nbsp; 。 语法： nbsp; 在html代码中输入空格是不起作用的，如下代码。 在浏览中显示，还是没有空格效果。 输入空格的正确方法： 在浏览器中的显示出来的空格效果。如下图所示。 源代码： !DOCTYPE htmlhtmlhead meta charset="UTF-8" title空格讲解/title/headbody h1感悟梦想/h1 nbsp;nbsp; 来源：作文网作者：为梦想而... -
3-1 使用<br>标签实现换行效果
2021-03-01 14:58:01对于上一小节的例子，我们想让那首诗显示得更美观些，如显示下面效果： 怎么可以让每一句诗词后面加入一个折行呢？那就可以用到 br / 标签了，在需要加回车换行的地方加入br /，br /标签作用相当于word文档中的回车。 上节的代码改为： 语法： xhtml1.0写法： br / html4.01写法： br 大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。 与以前我们学过的标签不一样， br / 标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写... -
2-9 <aside>定义侧边栏区
2021-02-26 16:54:03我们继续我们的快乐代码之旅。这一章节我们来学习aside标签，定义一个侧边栏区域。 例如网站中侧栏部分 那就让我们开始吧 源代码 !DOCTYPE htmlhtmlhead meta charset="UTF-8" titleaside/title/headbody aside我是侧边栏/ aside /body/html... -
2-8 <section>定义区段
2021-02-26 16:53:40这一章节我们来学习section标签，定义一个区域。 那就让我们开始吧 源代码 !DOCTYPE htmlhtmlhead meta charset="UTF-8" titlesection/title/headbody header我是头部标签/header section我是一个区域/section footer我是底部标签/footer/body/html... -
2-7 <footer>标签定义底部区域
2021-02-26 16:39:15这一章节我们来学习footer标签，用来定义底部区域。 例如57自学网底部部分 那就让我们开始吧 源代码： !DOCTYPE htmlhtmlhead meta charset="UTF-8" titlefooter/title/headbody header我是头部标签/header footer我是底部标签/footer/body/html... -
2-6 <header>标签定义头部区域
2021-02-26 16:32:43从这一章节开始,我们来学习html5新增的语义化标签,首先我们来学习header标签，用来定义头部区域。 例如57自学网顶部部分 那就让我们开始学习吧... -
2-5 使用<div>标签自定义块
2021-02-26 16:20:59在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个 div 标签中，这个div标签的作用就相当于一个容器。 语法： div/div 确定逻辑部分： 什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的 栏目版块 ，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用 div 标签作为容器。 源代码： div h2热门课程排行榜/h2 ol li前端开发面试心法 /li li零基础学习html/li lijavascript全攻略/li /ol/di... -
2-4 使用<hx>标签为网页增加标题
2021-02-26 16:12:53文章的段落用p标签，那么文章的标题用什么标签呢？在本节我们将使用hx标签来制作文章的标题。 标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级。 语法： hx标题文本/hx (x为1-6) 文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。 如下图为腾讯网站： 注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：h1腾讯网/...
扫码关注微信公众号获取播放密码
