第一章 前端开发基础html
第一章：前端开发基础：html
第二章：前端开发基础：CSS
第三章：前端开发基础：JavaScript
第四章：前端开发基础：jQuery
第五章：前端UI框架 Layui
文章目录
- 网页的组成
-
- 介绍
- 语言
- 页面结构
- HTML介绍
-
- 代码块
- 文本格式化标签
-
- 代码块
- 列表标签
-
- 代码块
- 超链接标签
-
- 格式
- 代码块
-
- 当前页面直接跳转
- 新窗口跳转
- 回到顶部
- 图片标签
-
- 格式
- 准备工作
- 代码块
- 表格标签
-
- 介绍
- 代码块
- 表单标签
-
- 介绍
- 表单标签：\\
- 表单项标签：\
- 下拉列表标签\\
- 下拉列表选项标签\\
- 代码块
- 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>
文本格式化标签
| 标签 | 描述 |
|---|---|
| 换行 | |
~ |
标题，定义标题字体大小，1最大，6最小 |
… |
段落 |
| … | 斜体 |
| 引用 | |
| … | 加粗 |
| … | 强调加粗 |
| 删除线 |
代码块
段落时候是不需要
换行的
DOCTYPE html>
<html lang="en">
<bead>
<meta charset="UTg-8">
<title>演示title>
bead>
<body>
文档的内容
<h1>你好h1>
<h2>你好h2>
<p>段落1p>
<p>段落2p>
<i>斜体i><br>
<b>加粗b><br>
<strong>强调加粗strong><br>
<del>删除线del>
body>
html>
列表标签
| 标签 | 描述 | 参数 |
|---|---|---|
| 无序列表 | type=disc 默认实心圆 square 实心方块 circle 空心圆 |
|
| 有序列表 | type=1 默认数字，其他值：A/a/I/i/1 | |
| 列表项目 | 在有序列表和无序列表中用 |
代码块
DOCTYPE html>
<html lang="en">
<bead>
<meta charset="UTg-8">
<title>演示title>
bead>
<body>
<h1>无序列表h1>
<ul type="disc">
<li>张三li>
<li>李四li>
<li>王五li>
ul>
<ul type="square">
<li>张三li>
<li>李四li>
<li>王五li>
ul>
<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>
超链接标签
格式
| 属性 | 描述 |
|---|---|
| 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>
<ul type="disc">
<li>张三li>
<li>李四li>
<li>王五li>
ul>
<ul type="square">
<li>张三li>
<li>李四li>
<li>王五li>
ul>
<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>
当前页面直接跳转
新窗口跳转
回到顶部
图片标签
格式
| 属性 | 描述 |
|---|---|
| alt | 图片加载失败时的提示信息 |
| title | 文字提示属性 |
准备工作
code是主目录
代码块
DOCTYPE html>
<html lang="en">
<bead>
<meta charset="UTg-8">
<title>演示title>
bead>
<body>
<h1>图片h1>
<img src="img/2222.jpeg" alt="图片加载失败"><br>
<img src="img/tupian.jpeg" alt=""><br>
body>
html>
表格标签
介绍
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>18td> <td>男td> tr> <tr> <td>李四td> <td>20td> <td>女td> tr> tbody> <tfoot> <tr> <td colspan="3">总计td> tr> tfoot> table> body> html>
表单标签
介绍
HTML表单是一个重要的组成部分，主要用于收集用户的输入信息。这些信息可以包括文本、密码、电子邮件、电话号码等等。一个完整的HTML表单通常包含三个基本组成部分：表单标签、表单域和表单按钮。
表单标签是
之间。值得注意的是，表单标签：
属性 描述 action 提交的目标地址(URL) method 提交方式：get(默认)和post enctype 编码类型
• application/x-www-form-urlencoded 默认值，编码字符
• multipart/form-data 传输数据为二进制类型，如提交文件
• text/plain 纯文本的传输表单项标签：
属性 描述 type • text：单行文本框
• password：密码输入框
• checkbox：多选框
• radio：单选框
• file：文件上传选择框
• button：普通按钮
• submit：提交按钮
• reset：重置按钮name 表单项名，用于存储内容值 value 表单项的默认值 disabled 禁用该元素 checked 默认被选中，值也是checked 下拉列表标签
属性 描述 name 下拉列表名称，用于存储下拉值 disabled 禁用该元素 multiple 设置可以选择多个项目 size 指定下拉列表中的可见行数 下拉列表选项标签
属性 描述 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">1option> <option value="2">2option> <option value="3">3option> <br> <input type="submit" name="提交" value="提交"><br> select><br> 下拉列表多选：<br> <select name="" id="" multiple> <option value="1">1option> <option value="2">2option> <option value="3">3option> <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布局标签
介绍
标签用于在HTML文档中定义一个区块。
标签常用于将标签集中起来，然后用样式对它们进行统一排版。代码块
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>devtitle> 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>
你可能感兴趣的:(运维开发实战Web前端开发,html,前端)