前端——基础

原创已于 2024-04-01 17:19:08 修改 · 563 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端 #javascript

于 2024-03-01 14:43:14 首次发布

一，内联样式

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

背景颜色：background-color

字体：font-family

字体颜色：color

字体大小：font-size

文字对齐：text-align

二，内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>

<style type="text/css">

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

三，外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

这段代码的作用是引入一个外部样式表文件"mystyle.css"，用来定义文档的样式。

四，HTML 样式标签

五，图片标签

六，表格

<table> 标签

每个表格均有若干行（由 <tr> 标签定义），

每行被分割为若干单元格（由 <td> 标签定义），

表格可以包含标题行（<th>）用于定义列的标题。

<thead > 用于定义表格的标题部分

<tbody > 用于定义表格的主体部分

七，HTML 表格和边框属性

表格的表头使用 <th> 标签进行定义。

border="1"属性表示表格的边框宽度为1个像素。在实际应用中，这个属性可以控制表格的边框粗细。

表格标签

八，列表

无序列表（小黑圆圈标记）

无序列表使用<ul>标签

有序列表（数字标记）

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

自定义列表

（自定义列表不仅仅是一列项目，而是项目及其注释的组合）

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始。

列表标签

九，区块

HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML 区块元素

<h1>,标题标签

<p>,段落标签

<ul>,无序列表标签

<table>，表格标签

HTML 内联元素

<b>,定义粗体文字

<td>,定义表格单元

<a>,定义一个超链接

<img>，定义图片

十，表单

文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）

我们可以使用 <form> 标签来创建表单:

输入元素

输入标签 <input>

输入类型是由 type 属性定义。

文本域（Text Fields）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

密码字段通过标签 <input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单的单选框选项:

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框。

复选框可以选取一个或多个选项：

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮(Submit)

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>