VSS 前端开发
1.html
1.1什么是html？
Hyper Text Markup Language 超文本标记语言
-
超文本：有视频、音频、图片等，超越文本
-
标记语言：有一套标签
2.网页的基本结构
网页的web标准：
- 结构 (HTML)
- 样式 (CSS)
- 行为 (JavaScript)
<html>
<head>
</head>
<body>
这是网页的基本结构
</body>
</html>详细：
<!-- 文档的声明 告诉浏览器用HTML5版本来显示网页
位置在html标签前，它不是标签，而是一个声明
-->
<!DOCTYPE html>
<!-- lang设置文档的语言 en 英文 -->
<!-- html 是根元素（根标签） 所有的标签都包含在里面-->
<html lang="en">
<!-- head是html文档的头部 它的内容不会显示在网页，主要用来设置文档的信息，比如标题，编码格式等 -->
<head>
<!-- charset设置文档编码格式 UTF-8使用最广泛，它能更好的兼容中文，避免中文乱码-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 文档的标题 显示在网页选项卡 -->
<title>Document</title>
</head>
<body>
<!-- !+Tab 键或enter键 自动生成网页基本的结构-->
</body>
</html>3.标签
什么是标签？
标签是由<>包裹起来的对象，分为 <单标签> 和 <多标签 开始标签></多标签结束标签>
标签的属性：
- 写在开始标签中，标签名之后，常以属性名="属性值"的形式出现
- 作用是为标签增加附加信息
注意：标签名和属性名之间要有空格，属性名和属性名之间也有空格
标签的关系：
- 包含关系 html和head的关系
- 并列关系 head和body
3.1.标题标签 <h1~6>
- 语义: 内容的标题
- 特点：文字加粗，独占一行
- 等级：h1~h6
3.2.段落标签 <p>
p标签
- 语义：文章的段落
- 特点：独占一行，段与段之间有间隔，一段里的文本会随着浏览器窗口变化，自动换行
3.换行标签
br 标签
语义：换行
特点：换行后，行与行之间没有间隔
4.转义字符
页面显示的特殊字符
| 空格 | |
| < | < |
| > | > |
| 版权符号 © | © |
5.文本格式化标签
| b (bold) strong |
加粗 | b标签只是样式上的加粗效果，strong也有加粗效果，在语义上有强调含义 |
| i(italic) em(emphasized) |
斜体 | 两者都有倾斜字体效果，并不能使li标签的数字也倾斜 |
| s(strikethrough) del(delete) |
二者均为字段中间划横线的删除样 | |
| u(underline) ins(insert text) |
下划线 | 二者均为下划线样式 |
| sup | 上标 | 可以理解为表示数学中的二次方 |
| sub | 下标 | 可以理解为数学中的x1 x2 |
6.标签的类型
块级元素
特点：
- 每一个块级元素都独占一行
- 块级元素里可以包含其它块级元素和行内元素
注意：p元素里不要嵌套块元素
常见的块级元素
div h1 p ... 常用于页面布局
行内元素
特点：
- 不会独占一行，一行里可以有多个行内元素
- 行内元素可以包含行内元素，一般不会包含块元素
常见的
b i u del span 常用于包裹文字，方便设置样式
7.图片标签 img
语义：图像
| 属性 | 作用 |
| src | 图片的路径 |
| alt | 定义无法正常显示图片时的文字，通常就是图片内容的简要说明，比如，这是logo，头像 |
| title | 定义鼠标悬停在图片时显示的文字 |
| height | 定义图片的高度 |
| width | 定义图片的宽度 |
路径src=“”
相当于电子路线，通过它可以找到计算机或网络中的资源
相对路径
以当前文件为基础，寻找其它文件的路线
访问方式
- ./ 表示当前文件所在目录
- ../ 表示当前文件所在目录的上一级目录
- /目录名/图片名 表示图片在当前目录的下一级目录中
绝对路径
- 资源在计算机中的完整地址，通常本地以盘符开头
8.列表标签 li
有序列表
<ol> </ol> order list
列表项 <li> </li>
*=过ol 的type属性可以修改序号样式
- 1 阿拉伯数字（默认）
- A/a 英文字母（大写/小写)
- I/i 罗马数字 （大写/小写)
ol 标签里只能放li标签
无序列表
<ul></ul> unorder list
通过ul 的type属性可以修改项目符号样式
- disc 实心圆（默认）
- square 实心方块
- circle 空心圆
ul 标签里只能放li标签
自定义列表
<dl></dl> definition list
列表项
- dt 术语/小标题
- dd 对术语的说明
dl 标签里只能放dt和dd标签
9.超链接
<a></a>标签
语义：超链接 通过它可以跳转到其他页面或者是本页面的其他位置
属性： href 定义访问资源的路径
属性值：url(统一资源定位符)>>网址、html路径等
注意：href="JavaScript:;" 只是占位，页面不会变化
target 定义跳转的方式
| blank | 在新窗口打开 |
| self | 在本页面打开 |
| parent | 在父页面打开 |
| 指定name | 在某个对应name的iframe中打开 |
锚点
作用：定位 比如 回到顶部/文章目录
设置方法
- a标签的href="#锚点的id属性值"
- 锚点元素设置id属性
10.表格标签 table标签
table 定义一个表格
- tr (table row) 表格的一行
- td (table data cell) 表格一行中的一个单元格
- th (table head cell) 表格标题行中的一格，加粗效果
属性 作用 border 设置边框线 数字 ，如果border为0，内外边框都会消失 cellpadding 设置单元格的内边距 属性值：像素px，百分比 cellspacing 设置单元格与单元格的距离 align 设置整个表格在页面中的位置 center left right width 设置整个表格的宽度
合并单元格
| 属性 | 作用 |
| rowspan="n" | 合并n行 |
| colspan=" y" | 合并y列 |
方法：
1.确定目标单元格——在那个td上写属性
2.判断合并行，还是列——写rowspan or colspan
3.计算合并的单元格数量—— 属性值
4.删除被占用的单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <table border="1" cellpadding="20px" cellspacing="10px" align="center" width="600px">
<tr>
<th>编号</th>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>小明</td>
</tr>
<tr>
<td>2</td>
<td>小红</td>
</tr>
</table> -->
<table border="1" align="center" width="500px">
<tr>
<td rowspan="2">1</td>
<td colspan="2">2</td>
<!-- <td>2</td> -->
</tr>
<tr>
<!-- <td>1</td> -->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">3</td>
<!-- <td>3</td> -->
</tr>
</table>
</body>
</html>
11.表单域 form标签
| 属性 | 作用 |
| action | 设置提交路径 用来指定接受处理表单数据的服务器url地址 |
| name | 设置表单域的名字，用于区分同一页面的多个表单 |
| method | 设置提交方式 |
| get |
表单的数据会显示在地址栏中，有需要保密的数据不能用get |
| post |
表单的数据不会显示在地址栏中，而是封装在表单体里 |
表单元素
- 输入框 input
- 按钮 button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form {
background-color: aquamarine;
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<form action="" name="test1" method="get">
用户名：<input type="text" name="" id="">
密码：<input type="text" name="" id="">
</form>
<form action="" name="test2">
用户名：<input type="text" name="" id="">
密码：<input type="text" name="" id="">
</form>
</body>
</html>
12.input标签
type 属性可以修改input的类型
| text | 文本框 |
| password | 密码框 |
| submit | 提交按钮 把表单的数据提交到服务器 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| reset | 重置按钮 |
| date | 日期选择器 |
| datetime-local | 日期时间选择器 |
| hidden | 隐藏框 |
name属性
定义表单元素的名字，它的值匹配用户输入的值和value中设置的值
*一组单选按钮的name属性应该设置为一样的值
*一组复选框的name属性应该设置为一样的值
value属性
设置表单元素的值
其他属性
| placeholder | 设置输入框的提示信息 |
| required | 设置必填项 |
| readonly | 设置只读 |
label标签
-用于为input设置标注
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="get">
<label for="test" style="color: red;">用户名：</label>
<input type="text" name="user" id="test" placeholder="请输入用户名">
<br>
<label for="">密码：</label>
<input type="password" name="pwd" required> <br>
<input type="submit"> <br>
<input type="radio" value="man" name="sex">男
<input type="radio" name="sex" value="woman">女 <br>
<input type="checkbox" name="box" value="ok">已阅读 <br>
<input type="reset"> <br>
<input type="date" name="date">
<input type="datetime-local" name="datetime" id=""> <br>
<input type="file" name="file"> <br>
<input type="hidden" name="hidden" value="被隐藏了">
<input type="checkbox" name="hobby" value="game" id="">游戏
<input type="checkbox" name="hobby" value="sport" id="">运动
<input type="checkbox" name="hobby" value="reading" id="">阅读
</form>
</body>
</html>
13.select 标签
定义下拉列表
option 标签设置选项
在option设置属性：selected="selected"，默认选择当前选项
name属性和value属性
14.textarea
多行文本框
15.iframe 标签
设置内联框架，在一个页面中嵌入另外的页面
src 默认显示的页面
frameborder 设置内联框架的边框
实现内联框架页面的切换
1.给iframe设置name属性
2.让a标签的target="iframe的name属性值"
注意：a标签的href写要显示的页面地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是父页面</h1>
<a href="05标题标签.html" target="content">标题页面</a><br>
<a href="12列表.html" target="content">列表页面</a><br>
<iframe src="https://news.baidu.com/" frameborder="1" name="content" style="height: 600px;width:600px;"></iframe>
</body>
</html>
html练习：
1.制作工资表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" rowspan="2">人员</td>
<!-- <td>人员</td> -->
<td rowspan="2">考勤</td>
<td rowspan="2">基本工资</td>
<td colspan="2">项目提成</td>
<!-- <td>项目提成</td> -->
</tr>
<tr>
<!-- <td>人员</td> -->
<!-- <td>人员</td> -->
<!-- <td>考勤</td> -->
<!-- <td>基本工资</td> -->
<td>项目1</td>
<td>项目2</td>
</tr>
<tr>
<td rowspan="2">部门1</td>
<td>员工1</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td>部门1</td> -->
<td>员工1</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
2.CSS 样式
什么是CSS
层叠样式表 Cascading Style Sheets
用来设置网页元素的外观样式，比如颜色，背景，间距等等
代码规范
<style>
选择器 {
//样式声明，一个或多个属性
属性名: 属性值;
属性名: 属性值;
}
</style>注：
- 选择器，属性可以是全小写或者全大写，但是推荐小写
- 选择器和括号直接有一个空格
- 冒号和属性值之间有一个空格
1.内部样式
在页面head标签中的style标签里定义
特点
- 可以同时为多个标签定义相同的样式，修改方便
- 只对当前页面起作用，不能跨页面使用
2.外部样式
定义一个独立的.css文件，通过link引入到需要设置样式的HTML文件中
<link rel="stylesheet" href="css文件的地址">
特点
可以跨页面使用
3.行内样式 (内嵌、内联样式)
在元素标签里定义一个style属性，它的属性值就是样式属性键值对
特点
- 只能对当前的一个元素起作用，多个元素需要一个个设置，不方便修改
- 行内样式优先级最高，基本不能通过其他两种方式修改
注：开发时尽量少用
2.相关属性
| 文字属性 | 作用 | 常用 |
| font-family | 设置字体族，字体列表中考前的优先应用，如果计算机中没有前面的字体，才会应用靠后的，如果定义的字体族中，所有字体都没有，则显示默认字体。 | sans-serif 无衬线 monospace 等线 fangsong 仿宋 |
| font-size | 设置字体的大小 | 像素 px em 字体大小的倍数 rem 相对于html字体大小的倍数 |
| font-weight | 定义字体的粗 | normal 默认粗细 bold 加粗 bolder比父元素更粗一点 |
| font-style | 设置字体样式 | italic 倾斜 normal 默认竖直 |
| font | 复合设置字体样式 | 属性顺序 （font-style font-weight) font-size font-family |
| 文本属性 | 作用 | 常用 |
| line-height | 设置行高 行高 = 上间距 + 文本高度（font-size） + 下间距 | 像素px 数字 em... |
| text-indent | 设置文本缩进 | 像素px，em |
| text-align | 设置文本在块级元素中的位置，也可以设置行内元素在块级元素中的位置 | center left right |
| color | 设置文本颜色 | RGB 十进制表示 rgb(red,green,blue,n) 3个部分，取值范围：0~255 值越大，颜色越深，取0颜色消失，n为不透明度，可省略 颜色单词 red blue green等 十六进制 #rrggbb 比如：#8a2be2 取值范围：0~ff #fff 白色 |
| text-transform | 设置文本大小写转换 | uppercase 全大写 lowercase 全小写 capitalize 首字母大写 |
| text-decoration-line | overline 在文本上方 underline 在文本下方(默认) none 没有下划线 text-decoration-style |
solid 实线(默认) dashed 虚线 wavy 波浪线 |
| text-decoration-color | 设置装饰线的颜色 | |
| text-decoration | text-decoration: dashed orange underline; | text-decoration: none; 取消下划线样式 |
应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
line-height: 1.5;
text-indent: 2em;
text-align: center;
}
span {
color: blueviolet;
color: rgb(255, 0, 0);
color: #a272ce;
text-transform: capitalize;
}
h1 {
color: blueviolet;
最低0.47元/天 解锁文章
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
