Web前端页面基本元素

2024-7-05 9:24

|

22

|

PHP

455 字

|

4 分钟

阅读量： 22

Web前端页面基本元素

一、HTML页面的构成要素

HTML：超文本标记语言，由一系列实现约定好的标签来描述一个页面的构成，HTML不是编程语言，只是标记语言。HTML主要由三个部分构成：标记、属性、内容
- 文本：设置字体、颜色、大小等
- 图片：设置边框、大小、位置等
- 超链接：图片、文本等
- 表格：行列构成的结构化数据可以用表格展示，可以设置大小、背景，表格里面可以放所有元素
- 表单：文本框、下拉框、单选框、复选框、按钮、文本域等
- 多媒体：视频、音频等
CSS：层叠样式表，用于对页面元素进行布局和美化。
JavaScript：在浏览器中运行的解释型编程语言，用于进行页面的交互（前后端交互、用户之间的交互）。

二、HTML基本元素的使用

1.文本

通常，为了让文本图片等元素能够通过CSS调整布局，不会使用font标签，而是都被放置在容器中，如表格、DIV
使用DIV报过一段文本，被style属性指定的是CSS样式

<font color="red">欢迎光临</fontfont> <br/>

<div style="color:orchid; font-size:30px;">欢迎光临</div>

2.图片

<img src="image/code.jpg" width="500" />

3.超链接

使用target=_blank可以打开新的标签页

<a href="http://baidu.com" target="_blank">这是百度</a>

4.表格

有行和列构成，主要使用三个标签\
定义表格属性，\

定义一行，\

指定一列

<table width="500" height="300" border="1">
    <tr>
        <td width="250">第一行第一列</td>
        <td width="20%">第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

5.表单

<input type="text" value="123456" />
<input type="text" placeholder="请输出你的用户名"/>
<input type="password" placeholder="请输出你的密码"/>
<input type="button" value="点击登录" />

<slelect>
    <option>选项一</option>
    <option selected>选项二</option>
    <option>选项三</option>
    <option>选项四</option>
</slelect>

<button>点我</button>

PHP