什么是Web
- Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。
网页由那几部分组成?
- 文字、图片、视频、音频、超链接 . .
我们看到的网页，背后本质是什么?
- 程序员写的前端代码
前端代码如何转换成用户眼中的网页?
- 通过浏览器转换成用户看到的网页。
- 浏览器对代码进行解析渲染的部分，称为浏览器内核。
Web标准
- Web标准也称网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。
- 三个组成部分：
- HTML：负责网页的结构（页面元素和内容）。
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
- JavaScript：负责网页的行为（交互效果）。
什么是HTML
- HTML（HyperText Markup Language）：超文本标记语言。
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
- 标记语言：由标签 "<标签名>" 构成的语言
- HTML标签都是预定义好的。例如：使用<h1>展示标题，使用<img>展示图片，使用<video>展示视频。
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
什么是CSS
- CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式(表现)。
1.HTML基本骨架标签
2. HTML标签特点
- html标签不区分大小写，建议小写
- html标签的属性值使用单引号/双引号都可以
- html语法结构松散，但是建议规范书写
标题排版
标题标签：<h1> - <h6>
超链接标签：<a href="" target="">...</a>
href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开
标题样式
CSS引入方式：
颜色表示形式：
| 表示方式 | 属性值 | 说明 | 示例 |
|---|---|---|---|
| 关键字 | 颜色英文单词 | red、green、blue | red、green、blue... |
| rgb表示法 | rgb(r,g,b) | 红绿蓝三原色，取值：0-255 | rgb(0,0,0)、rgb(255,0,0) |
| rgba表示法 | rgba(r,g,b,a) | 红绿蓝三原色，a表示透明度，取值：0-1 | rgba(0,0,0,0.3)、rgba(255,0,0,0.5) |
| 十六进制表示法 | #rrggbb | #开头，将数字转换成十六进制表示 | #000000、#ff0000，简写：#000、#f00 |
CSS引入方式
- 行内样式：<h1 style="...">
- 内部样式：<style> … </style>
- 外部样式：xxx.css <link href="...">
颜色表示
- 关键字: red、green . . .
- rgb表示法：rgb(255,0,0)、rgb(134,100,89)
- rgba表示法：rgba(255,0,0,0.5)、rgba(134,100,89,1)
- 十六进制: #ff0000、#cccccc、#f00
颜色属性
- color: 设置文本内容的颜色
CSS选择器是用来选取需要设置样式的元素（标签）的。
| 选择器 | 写法 | 示例 | 示例说明 |
|---|---|---|---|
| 元素选择器 | 元素名称 {...} | h1 {...} | 选择页面上所有的<h1>标签 |
| 类选择器 | .class属性值 {...} | .cls {...} | 选择页面上所有class属性为cls的标签 |
| id选择器 | #id属性值 {...} | #hid {...} | 选择页面上id属性为hid的标签 |
| 分组选择器 | 选择器1,选择器2 {...} | h1,h2 {...} | 选择页面上所有的<h1>和<h2>标签 |
| 属性选择器 | 元素名称[属性] {...} | input[type] {...} | 选择页面上有type属性的<input>标签 |
| 元素名称[属性名="值"] {...} | input[type="text"] {...} | 选择页面上type属性为text的<input>标签 | |
| 后代选择器 | 元素1 元素2 {...} | form input {...} | 选择<form>标签内的所有<input>标签 |
正文排版
| 标签 | 作用 | 属性/说明 |
| <video> | 视频标签 | src：指定视频的url（绝对路径/相对路径） |
| controls：是否显示播放控件 | ||
| width：宽度（像素/相对于父元素百分比） | ||
| height：高度（像素/相对于父元素百分比） | ||
| <img> | 图片标签 | src, width，height |
| <p> | 段落标签 | |
| <b> / <strong> | 加粗 | <strong> 具有强调语义 |
| <u> / <ins> | 下划线 | <ins> 具有强调语义 |
| <i> / <em> | 倾斜 | <em> 具有强调语义 |
| <s> / <del> | 删除线 | <del> 具有强调语义 |
| 字符实体 | 属性/说明 |
| | 空格 |
| < | < |
| > | > |
盒子模型
- 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
- 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
- 布局标签：网页开发中，会大量使用 div 和 span 这两个没有语义的布局标签。
- 特点：
- <div> 标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
- <span> 标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）
案例：
flex布局
- flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。
- 通过给父容器添加flex属性,来控制子元素的位置和排列方式。
| 属性 | 取值 | 含义 |
| display | flex | 使用flex布局 |
| flex-direction（设置主轴） | row | 主轴方向为x轴，水平向右。（默认） |
| column | 主轴方向为y轴，垂直向下。 | |
| justify-content（子元素在主轴上的对齐方式） | flex-start | 从头开始排列 |
| flex-end | 从尾部开始排列 | |
| center | 在主轴居中对齐 | |
| space-around | 平分剩余空间 | |
| space-between | 先两边贴边，再平分剩余空间 |
表单标签
- 标签：<form>
- 表单项：不同类型的 input 元素、下拉列表、文本域等。
- <input>：定义表单项，通过type属性控制输入形式 (text/password/...)
- <button>：按钮，submit、reset、button
- <select>：定义下拉列表
- <textarea>：定义文本域
- 属性：
- action：规定当提交表单时向何处发送表单数据，URL
- method：规定用于发送表单数据的方式。GET、POST
- get：表单数据拼接在url后面，?username=java ,大小有限制
- post：表单数据在请求体中携带，大小没有限制
表格标签：
| 标签 | 描述 |
|---|---|
| <table> | 定义表格整体 |
| <thead> | 用于定义表格头部(可选) |
| <tbody> | 定义表格中的主体部分(可选) |
| <tr> | 表格的行，可以包裹多个 <td> |
| <td> | 表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为 <th> |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias智能学习辅助系统</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ddd;
padding: 10px;
}
header h1 {
font-size: 24px;
margin: 0;
font-weight: bold;
}
header a {
text-decoration: none;
color: #000;
font-size: 16px;
}
section {
margin: 20px;
}
form {
display: flex;
align-items: center;
}
input[type="text"], select {
margin: 0 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 5px 10px;
margin: 0 5px;
border: none;
border-radius: 4px;
background-color: #007BFF;
color: white;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #777;
}
tr:nth-child(odd) {
background-color: #ddd;
}
footer {
background-color: #ddd;
color: #fff;
text-align: center;
padding: 10px;
}
img {
width: 50px;
height: auto;
}
</style>
</head>
<body>
<header>
<h1>Tlias智能学习辅助系统</h1>
<a href="#">退出登录</a>
</header>
<section>
<form action="" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<label for="position">职位：</label>
<select id="position" name="position">
<option value="">请选择</option>
<option value="班主任">班主任</option>
<option value="讲师">讲师</option>
<option value="学工主管">学工主管</option>
<option value="教研主管">教研主管</option>
<option value="咨询师">咨询师</option>
</select>
<button type="submit">查询</button>
<button type="reset">清空</button>
</form>
</section>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 测试数据 -->
<tr>
<td>令狐冲</td>
<td>男</td>
<td><img src="https://via.placeholder.com/50" alt="令狐冲"></td>
<td>讲师</td>
<td>2020-01-01</td>
<td>2024-01-01</td>
<td><button>编辑</button><button>删除</button></td>
</tr>
<tr>
<td>任我行</td>
<td>男</td>
<td><img src="https://via.placeholder.com/50" alt="任我行"></td>
<td>班主任</td>
<td>2019-03-15</td>
<td>2024-03-15</td>
<td><button>编辑</button><button>删除</button></td>
</tr>
<!-- 重复以上结构，填充剩余8条数据 -->
</tbody>
</table>
<footer>
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
</body>
</html>
扫一扫
4782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
