您的位置:首页 > 健康 > 养生 > html5静态模板_网站服务器租用平台_东莞网_网站竞价推广都有哪些

html5静态模板_网站服务器租用平台_东莞网_网站竞价推广都有哪些

2025/3/17 9:11:07 来源:https://blog.csdn.net/NaZiMeKiY/article/details/142209532  浏览:    关键词:html5静态模板_网站服务器租用平台_东莞网_网站竞价推广都有哪些
html5静态模板_网站服务器租用平台_东莞网_网站竞价推广都有哪些

一.列表

1.作用:

布局内容排列整齐的区域

2.列表分类:

无序列表,有序列表,定义列表

其中无序列表主要用于布局排列整齐的不需要规定区域的区域

标签为:

<ul><li>一</li><li>二</li><li>三</li>...
</ul>

其中ul嵌套li,ul是无序列表,li是列表条目

有序列表的作用为布局排列整齐的需要规定顺序的区域

标签为:

<ol><li>一</li><li>二</li><li>三</li>...
</ol>

定义列表的标签为:

<dl><dt>列表标题</dt><dd>列表描述/详情</dd>...
</dl>

二.表格

1.作用:

与Excel表格类似,用来展示数据

2.标签的使用方式:

table(表格)标签嵌套tr(行)标签,tr标签嵌套td(内容单元格)/th(表头单元格)标签

<table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>张三</td><td>100</td><td>100</td><td>100</td></tr>
</table>

注意:在网页中表格默认没有边缘线,使用border属性才可以为表格添加边缘线

三.合并单元格

1.作用:

将多个单元格合并成一个单元格,以合并同类信息

2.合并单元格的步骤:

(1).明确合并目标

(2).保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)

跨行合并:保留最上单元格,添加属性rowspan

跨列合并:保留最左单元格,添加属性colspan

3.删除其他单元格

合并单元格前:

<body><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>100</td></tr><tr><td>李四</td><td>99</td><td>100</td><td>100</td></tr><tr><td>总结</td><td>全班第一</td><td>全班第一</td><td>全班第一</td></tr></table>
</body>

跨行合并后:

跨列合并后:

<body><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>100</td></tr><tr><td>李四</td><td>99</td><!-- <td>100</td> --><td>100</td></tr><tr><td>总结</td><td colspan="3">全班第一</td><!-- <td>全班第一</td><td>全班第一</td> --></tr></table>
</body>

三.表单

1.作用:

收集用户信息

2.使用场景:

(1).登陆页面,(2).注册页面,(3).搜索页面

3.input标签基本使用:

input标签基于type属性值不同,则功能不同

<input type="...">

type属性值包括但不限于:

(1).text:

文本框,用于输入单行文本

(2).password:

密码框

(3).radio:

单选框

(4).checkbox:

多选框

(5).file:

上传文件

input标签中的占位文本:

占位文本的作用:提示信息

使用占位文本之前是这样的:

使用占位文本之后则是这样的:

而要添加占位文本也很简单,只需要使用到placeholder属性即可:

由:

<input type="text">

变为:

<input type="text" placeholder="文本框中的提示信息">

4.单选框radio

(1).常用属性:

name:控件名称

checked:默认选中

<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女

5.上传文件file

默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能

6.多选框checkbox

其中最常使用的属性就是checked默认选中了

<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">排球
<input type="checkbox" checked>台球

四.下拉菜单

1.标签:

select嵌套option,select是下拉菜单整体,option是下拉菜单的每一项

其中的常用属性为selected,表现为默认的属性值

<select><option>篮球</option><option>足球</option><option>排球</option><option>网球</option><option selected>台球</option>
</select>

五.文本域

1.作用:

多行输入文本的表单控件

2.标签:

textarea(双标签)

<textarea>提示文字</textarea>

注意:在文本域的右下角有拖拽功能,本来都会禁用的,直到后面使用CSS设置尺寸

六.label标签

1.作用:

在网页中作为某个标签的说明文本存在,我们也可以用label标签绑定文字和表单控件的关系,增大表单控件的点击范围

2.label标签的两种写法:

(1).label标签只包裹内容,不包裹表单控件,同时设置label标签的for属性值和表单控件的id属性值相同

(2).使用label标签包裹文字和表单控件,不需要属性

<input type="radio" id="man">
<label for="man">男</label><label><input type="radio">女</label>

七.按钮button标签

1.button标签的写法

<button type="">提示文字</button>

2.type标签的属性值

submit:提交按钮,点击后将数据提交到后台

reset:重置按钮,点击后将表单控件恢复默认值

button:普通按钮,默认没有功能,会配合JavaScript使用

八.布局标签

1.作用:

对网页进行布局,便于划分网页区域,摆放内容

2.div:

独占一行

3.span:

不换行

注意:div和span都为双标签,内容只需要放到两个标签之间即可

4.字符实体

作用:在网页中显示预留字符(因为直接输入这些字符是不会显示的)

(1).&nbsp:空格( )

(2).&lt:小于符号(<)

(3).&gt:大于符号(>)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com