第一章 前端开发基础html
第一章:前端开发基础:html
第二章:前端开发基础:CSS
第三章:前端开发基础:JavaScript
第四章:前端开发基础:jQuery
第五章:前端UI框架 Layui
文章目录
- 网页的组成
- 介绍
- 语言
- 页面结构
- HTML介绍
- 代码块
- 文本格式化标签
- 代码块
- 列表标签
- 代码块
- 超链接标签
- 格式
- 代码块
- 当前页面直接跳转
- 新窗口跳转
- 回到顶部
- 图片标签
- 格式
- 准备工作
- 代码块
- 表格标签
- 介绍
- 代码块
- 表单标签
- 介绍
- 表单标签:\\
- 表单项标签:\<input>
- 下拉列表标签\\
- 下拉列表选项标签\\
- 代码块
- div布局标签
- 介绍
- 代码块
网页的组成
介绍
网页主要由导航栏
、栏目
、及正文内容
这三大要素组成。网页结构的创建、网页内容布局的规划实际也是围绕这三大组成要素展开的。
HTML、CSS 和 JavaScript 是构成网页的三大部分
如果把网页比作一个人的话:
HTML
相当于骨架
JavaScript
相当于肌肉
CSS
相当于皮肤
语言
-
HTML标记语言:用于创建网页结构,定义网页中的各种元素和内容。
-
CSS样式语言:用于控制网页的外观和布局,包括字体、颜色、大小、位置等。
-
JavaScript程式语言:一种脚本语言,用于为网页添加交互性和动态效果,使网页更加生动有趣。
-
Jquery程式语言:基于JavaScript的一种库,简化了JavaScript编写过程,提供了丰富的API和插件,方便开发者快速开发网页
页面结构
这是一个基本的HTML页面结构,包括了头部(head)和主体(body)部分。在头部部分,定义了一些元数据,如字符集、标题、关键词和描述等。同时,还引入了一个外部的CSS样式表(main.css)。在主体部分,可以添加各种内容,如文本、图片、链接等。
<!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是由标签和内容构成
代码块
<!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>换行的
<!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> | 列表项目 | 在有序列表和无序列表中用 |
代码块
<!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 | 定义锚点 |
代码块
<!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是主目录
代码块
<!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表格标签用于在网页中创建表格。常用的表格标签有:
<table>
:定义表格。<tr>
:定义表格行。<td>
:定义表格单元格。<th>
:定义表头单元格。<thead>
:定义表格的页眉。<tbody>
:定义表格的主体。<tfoot>
:定义表格的页脚。<caption>
:定义表格标题。<colgroup>
:定义表格列组。<col>
:定义表格列的属性。<rowgroup>
:定义表格行组。
代码块
<!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 | 默认下拉项 |
代码块
<!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>标签常用于将标签集中起来,然后用样式对它们进行统一排版。
代码块
<!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>