第一章 前端开发基础html

第一章:前端开发基础:html

第二章:前端开发基础:CSS

第三章:前端开发基础:JavaScript

第四章:前端开发基础:jQuery

第五章:前端UI框架 Layui


文章目录


网页的组成

介绍

网页主要由导航栏栏目、及正文内容这三大要素组成。网页结构的创建、网页内容布局的规划实际也是围绕这三大组成要素展开的。

HTML、CSS 和 JavaScript 是构成网页的三大部分

如果把网页比作一个人的话:

HTML 相当于骨架

JavaScript 相当于肌肉

CSS 相当于皮肤

语言

  1. HTML标记语言:用于创建网页结构,定义网页中的各种元素和内容。

  2. CSS样式语言:用于控制网页的外观和布局,包括字体、颜色、大小、位置等。

  3. JavaScript程式语言:一种脚本语言,用于为网页添加交互性和动态效果,使网页更加生动有趣。

  4. Jquery程式语言:基于JavaScript的一种库,简化了JavaScript编写过程,提供了丰富的API和插件,方便开发者快速开发网页

页面结构

这是一个基本的HTML页面结构,包括了头部(head)和主体(body)部分。在头部部分,定义了一些元数据,如字符集、标题、关键词和描述等。同时,还引入了一个外部的CSS样式表(main.css)。在主体部分,可以添加各种内容,如文本、图片、链接等。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="" Keywords content="关键字">
    <meta name="Description" content="简介、描述">
    <link rel="stylesheet" href="./css/main.css">
    <style>
        /* css代码(网页的样式) */
    </style>
    <script type="text/javascript">
        // js代码
    </script>
</head>

<body>
    <!-- 内容(网页的内容) -->
</body>
<style>
    /* css代码 */
</style>
<script type="text/javascript" src="./js/main.js"></script>

</html>

HTML介绍

  • HTML,是一种用来结构化网络文档的HTML,全称为超文本标记语言(HyperText Markup Language),是一种用来结构化网络文档的标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

  • HTML不是一种编程语言,而是一种标记语言。标记语言是一套标记标签 (markup tag),HTML使用标记标签来描述网页。这些标签可以说明文字、图形、动画、声音、表格等内容

  • HTML是由标签和内容构成

代码块

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <bead>
        <meta charset="UTg-8">
        <title>演示</title>
    </bead>
    <body>
        文档的内容<br>
        你好html
    </body>
</html>

文本格式化标签

标签 描述
<br> 换行
<h1>~</h1> 标题,定义标题字体大小,1最大,6最小
<p>...</p> 段落
<i>...</i> 斜体
<cite></cite> 引用
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<del></del> 删除线

代码块

段落时候是不需要 <br>换行的

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <bead>
        <meta charset="UTg-8">
        <title>演示</title>
    </bead>
    <body>
        文档的内容
        <h1>你好</h1>
        <h2>你好</h2>
        <p>段落1</p>
        <p>段落2</p>
        <i>斜体</i><br>
        <b>加粗</b><br>
        <strong>强调加粗</strong><br>
        <del>删除线</del>
    </body>
</html>

列表标签

标签 描述 参数
<ul></ul> 无序列表 type=disc 默认实心圆 square 实心方块 circle 空心圆
<ol></ol> 有序列表 type=1 默认数字,其他值:A/a/I/i/1
<li></li> 列表项目 在有序列表和无序列表中用

代码块

html 复制代码
<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTg-8">
    <title>演示</title>
</bead>

<body>
    <h1>无序列表</h1>
    <!-- <h2>实心圆</h2> -->
    <ul type="disc">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <!-- <h2>实心方块</h2> -->
    <ul type="square">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <!-- <h2>空心圆</h2> -->
    <ul type="circle">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <h1>有序列表</h1>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="i">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="A">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

</html>

超链接标签

格式

超链接标签:<a href="网址" ></a>

属性 描述
href 指定链接跳转方式
target 链接打开方式,常用值:_blank打开新窗口
title 文字提示属性
name 定义锚点

代码块

html 复制代码
<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTg-8">
    <title>演示</title>
</bead>

<body>
    <a name="miaodian"></a>
    <h1>无序列表</h1>
    <!-- <h2>实心圆</h2> -->
    <ul type="disc">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <!-- <h2>实心方块</h2> -->
    <ul type="square">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <!-- <h2>空心圆</h2> -->
    <ul type="circle">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <h1>有序列表</h1>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="i">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="A">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <h1>跳转</h1>
    <ul type="disc">
        <a href="http://www.baidu.com"><li>当前界面直接跳转</li></a>
        <a href="http://www.baidu.com" target="_blank"><li>新窗口跳转</li></a>
    </ul>
<a href="#miaodian">回到顶部</a>
</body>
</html>

当前页面直接跳转

新窗口跳转

回到顶部

图片标签

格式

<img src="图片文件路径"alt="图片提示">

属性 描述
alt 图片加载失败时的提示信息
title 文字提示属性

准备工作

code是主目录

代码块

html 复制代码
<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTg-8">
    <title>演示</title>
</bead>

<body>
    <h1>图片</h1>
    <!-- 没有2222.jpeg -->
    <img src="img/2222.jpeg" alt="图片加载失败"><br>
    <img src="img/tupian.jpeg" alt=""><br>
</body>

</html>

表格标签

介绍

HTML表格标签用于在网页中创建表格。常用的表格标签有:

  1. <table>:定义表格。
  2. <tr>:定义表格行。
  3. <td>:定义表格单元格。
  4. <th>:定义表头单元格。
  5. <thead>:定义表格的页眉。
  6. <tbody>:定义表格的主体。
  7. <tfoot>:定义表格的页脚。
  8. <caption>:定义表格标题。
  9. <colgroup>:定义表格列组。
  10. <col>:定义表格列的属性。
  11. <rowgroup>:定义表格行组。

代码块

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML表格示例</title>
</head>

<body>

    <table border="1">
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">总计</td>
            </tr>
        </tfoot>
    </table>

</body>

</html>

表单标签

介绍

HTML表单是一个重要的组成部分,主要用于收集用户的输入信息。这些信息可以包括文本、密码、电子邮件、电话号码等等。一个完整的HTML表单通常包含三个基本组成部分:表单标签、表单域和表单按钮。

表单标签是<form>标签本身,它定义了一个包含表单元素的区域。所有的表单控件(如文本字段、复选框、单选框、提交按钮等)都需要放在<form>和</form>之间。值得注意的是,<form>元素是一个块级元素,它会在前后产生换行。

表单域是<form>标签中用来收集用户输入的部分,每一项通常用input标签来定义。input标签具有不同的类型,以适应用户的不同数据输入需求,例如文本域、下拉列表、单选框和复选框等。

此外,根据设备和用户代理的不同,HTML表单可以使用各种类型的输入数据和控件,因此它是目前HTML中最强大、最复杂的元素之一。

表单标签:<form></form>

属性 描述
action 提交的目标地址(URL)
method 提交方式:get(默认)和post
enctype 编码类型 • application/x-www-form-urlencoded 默认值,编码字符 • multipart/form-data 传输数据为二进制类型,如提交文件 • text/plain 纯文本的传输

表单项标签:<input>

属性 描述
type • text:单行文本框 • password:密码输入框 • checkbox:多选框 • radio:单选框 • file:文件上传选择框 • button:普通按钮 • submit:提交按钮 • reset:重置按钮
name 表单项名,用于存储内容值
value 表单项的默认值
disabled 禁用该元素
checked 默认被选中,值也是checked

下拉列表标签<select></select>

属性 描述
name 下拉列表名称,用于存储下拉值
disabled 禁用该元素
multiple 设置可以选择多个项目
size 指定下拉列表中的可见行数

下拉列表选项标签<option></option>

属性 描述
value 选项值
name 默认下拉项

代码块

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单标签</title>
</head>

<body>
    <form action="" method="post">
        文本框:<br><input type="text"><br>
        <input type="submit" value="提交"><br>

        密码:<br><input type="password"><br>
        <input type="submit" value="登录"><br>

        多选框:<br>
        <input type="checkbox" value="选项1"> 选项1 <br>
        <input type="checkbox" value="选项2">选项2<br>
        <input type="checkbox" value="选项3">选项3<br>
        <input type="submit" name="提交" value="提交"><br>

        单选框:<br>
        <input type="radio" value="选项1"> 选项1 <br>
        <input type="radio" value="选项2">选项2<br>
        <input type="radio" value="选项3">选项3<br>
        <input type="submit" name="提交" value="提交"><br>

        文件上传:<br>
        <input type="file" name="file"><br>
        <input type="submit" name="提交" value="提交"><br>

        下拉列表:<br>
        <select name="" id="">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <br>
            <input type="submit" name="提交" value="提交"><br>
        </select><br>
        下拉列表多选:<br>
        <select name="" id="" multiple>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <input type="submit" name="提交" value="提交"><br>
        </select>
        <button type="submit">提交</button><br>
        <button type="button">普通</button><br>
        <button type="reset">重置</button><br>
    </form>

</body>

</html>

div布局标签

介绍

<div>标签用于在HTML文档中定义一个区块。

<div>标签常用于将标签集中起来,然后用样式对它们进行统一排版。

代码块

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>dev</title>
</head>

<body>
    <div style="height: 200px;width: 200px;background-color:rebeccapurple;">
        <p style="background-color: brown;">一段落</p>
        <p style="color: burlywood;">二段落</p>
    </div>
</body>

</html>
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css