1、实现超链接
用<a></a>标签
<a href="" target="_black">内容</a>
target="_black"指的是打开一个新网页
2、部分标签含义
<b></b>:粗体标签
<em></em>：斜体标签
<u></u>:下划线
<s></s>:中间画横线
<br>：换行符
3、表格元素
<table><tr><td> //tr表示一行，td表示单元格
示例
<table border="1px"(宽度为1px) align="center"(使文章内容居中)>
<tr>
<th>用户名</th>
<th>性别</th> //th相对于th多了一个居中功能
</tr>
<tr>
<td>quan9i</td>
<td>男</td>
</tr>
扩充
<td colspan="2">aaaa</td>//一行合并两个单元格
<td rowspan="2">aaaa</td>//一列合并两个单元格
4、排序输出（自起名）
<ol>
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
输出结果为
1.a
2.a
3.a
若为<ol reversed>，则表示逆序
若为<ul>则变为无序，原先的排序数字将会变成点.
5、html表单
<form>(用于为用户输入创建html表单)
<input type="text">//单行文本框
<input type="text" value="quan9i">//占位符
<input type="text" placeholder="quan9i">//不占文本框
<input type="text" placeholder="quan9i" maxlength="8">//最大能输出字符为8
<input type="text" placeholder="quan9i" radonly>//只读，无法编写
<input type="password" placeholder="密码">//看似无法看出，但实际是以明文输出的，可以在服务器端查看
<input type="submit" value="按钮">
<textarea rows="20">内容</textarea>//可以滑动
<input type="email">//验证电子邮件地址
<input type="tel">//验证电话号码
<input type="url">//验证url完整度
<input type="date">//获取时间
<input type="color">//获取颜色
<input type="search">//搜索框
<input type="hidden" value="123">//123被隐藏，但服务器端可见
<input type="image" src="文件名.png" width="80px">//导入图片，需要提前将图片导入文件夹
<input type="file">//上传文件
注：type input元素的类型
value input元素的值
注：按钮有三种
1、<input type="button" value="按钮">
2、<button>按钮</button>
3、<input type="submit" value="提交">
6、range函数
<input type="range" min="-100" max="500" step="100" value="-100">//输出结果为一条x轴，最左端为-100，最右端为500，一步移动100，起始值为-100
注：将range换成number则变成框
<input type="checkbox">选择1//与记住密码类似
<input type="radio"> 选择2//选择后不可取消
<input type="radio" name="a" name="a" name="a">//限制其只能在三个中选一个
<input type="radio" name="a" name="a" name="a" checked>//默认勾选第一个
示例
<select>
<option>苹果</option>
<option>西瓜</option>
<option>香蕉</option>
</select>
注：结果只能选以上三种
<input type="text" list="datalist">
<datalist id="quan9i">
<select>
<option>苹果</option>
<option>西瓜</option>
<option>香蕉</option>
</select>
</datalist>
注：此时输出结果可自己编写，也可选以上三种
7、嵌入图片
<img src="图片名.png" width="128px" alt="下载">//alt是图片名字写错是输出的
<area href="time.html" shape="rect" coords="38,62,175,200" target="_black">//rect也可换成circle，四点为左，上，右，下，当为circle时候输出三个点，分别是左边距圆心的距离，右边距圆心的距离以及半径
8、嵌入背景图片
<body background="插入颜色或者从网上搜背景图复制链接.jpg" >
9、插入视频
<video>
<src>视频地址（来源）width:设置视频宽度 height:设置视频长度
<autoplay>：自动播放
<controls>:出现长度条和音量键
<preload>:预先下载
<preload="Metadata">只载入第一帧
loop:视频循环播放
poster:视频载入时显示图片
Muted:视频静音
10、插入音频
<aduio>
<audio src="音乐名字.mp3" controls>
11、style元素
<a style="font-size":40px;color:blue>内容</a>//元素内嵌样式表
<link rel="stylesheet" type="text/css" href="a.css">//a是一个自己定义好大小和颜色的文件（文档内嵌样式表）
<head>
<meta charset="utf-8">
<style type="text/css">
a{
font-size:40px;
color：#345cff
</style>
</head>
<body>
<a>内容</a>
<a>内容</a>
</body>
//标签a全部被上面要求更改，将{前的a换成*表示全部，也可将a换成.class1，再将<a>内容</a>换成<a class="class1">内容</a>（外部样式表）
12、控制边框和背景
（1）边框
border—width
border—style
border—color
简写属性
border：5px solid red
（2）背景
background-image：url（图片名字.jpeg）;
background-repeat:no-repeat;//不重复
background-size：contain（平铺全局）
background-radius：cover（只有一张）
border-radius：20px/15px(示例)//一个椭圆的圆角效果，设定了四个圆角，圆心距边框20px，距上下15px;
13 、css
（1）对齐文本（使内容居中）
法1：.class1{
text-align:center(left/right)
}
法2：<p align="center">内容</p>
（2）设置字体间距
.class1{
letter-spacing:100px(每个字之间间距100px)
word-spacing：100px（每个单词之间间距100px，注意不是字母）
（3）首行缩进
line-height：100px（行高）
text-indent：50px（缩进50px，即空格50px）
text-decoration：underline（下划线）//overline为上划线
（4）文本大小写转换
text-transform：capitalize(每个单词首字母大写)
uppercase（全部大写）
lowercase（全部小写）
（5）字体
字体名称font-family：
字体大小：font-size：
字体样式：font-style：
小型大写：font-variant：small-caps
字体加粗：font-weight
字体加阴影：text-shadow 10px 10px 1px red；//水平偏移，垂直偏移，模糊程度，颜色
（6）使用过渡
直接过渡
示例：
<style type="text/css">
p{
width；100px；
height：100px;
background-color：antiquewhite
opacity：1// 不透明度
}
p：hover{
width；200px；
height：200px;
background-color：#ffad2a；
transition-delay:100ms;//延迟100ms
transition-duration：500ms；//渐变
transition-property:background- color//大小突变,颜色渐变
transition-property:width//宽度渐变，颜色渐变
transiition-timing-function:ease-in(ease-out/in-out/linear)
（7）css动画
p：hover{
width；200px；
height：200px;
margin-top：130px；//距顶130px
animation-duration:500ms
animation-delay:200ms
animation-name:quan9i
animation-iteration-count:infinite//重复无数次
animation-direction；alternative//二次时以反方向运行
animatiion-fill-mode:forwards;//使动画停留在最后一帧
@keyframes quan9i{
from{
width：150px；
height：150px；
background-color:#ffec32;
}
to{
width:200px;
height:200px;
background-color:#ffad2a;
}
}
（8）css使用变换
p{
width；100px；
height：100px;
background-color：antiquewhite
opacity：1// 不透明度
}
p:hover{
tarnsform:scale(1.5)//全方面扩大1.5倍
transform：rotate（45deg）//选择45度
transform-origin;20px 40px;//以（20px，40px）为中心
（9）css盒子
示例：
.class1{
border:1px solid black;
background-color:antiquewhite;
(有框) padding:100px 80px 50px 30px //上 右 下 左
background-clip:content-box
（无框）margin-top：100px
14、js
示例
<script>
quan9i="quan"
alert(quan9i)；
</script>
注：输出结果为quan
var name=prompt（你的名字是："",""）
document.write("<h1>"+name+"</h1>")
（2）js数组
<script>
var num = new Array()//严格区分大小写当在array中写入一个数字时，系统理解为可以存储数字个数值，而当输出多个数字时，被理解为在其中的数值
num[0]=100;
num[1]=80;
document.write(num[1])
</script>
(3)js多维数组
<script>
var person;
person=new Array();
person[0]=new Array();
person[0][0]="quan9i"
person[0][1]="男"
person[0][2]="ctfer"；
document.write("姓名："+person[0][0]+"<br>");
document.wriet("性别："+person[0][1]+"<br>");
document.write("职业："+person[0][2]+"<br>");
</script>
实战示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>信息安全工作室招新 </title>
</head>
<style type="text/css">
.class1{
font-size:20px;
color:blue;
}
*{
background-repeat:no-repeat;
background-size:cover;
font-family:微软雅黑;
}
p:hover{
background-color:#ffad2a;
animation-duration:500ms;
animation-delay:200ms;
animation-name:quan9i;
animation-fill-mode:forwards;
animation-direcation:alternate;
}
@keyframes quan9i{
from{
width:100px;
height:150px;
background-color:antiquewhite;
}
to{
width:200px;
height:200px;
background-color:#ffad2a;
}
}
</style>
<body background="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic23.nipic.com%2F20120814%2F5143523_163214153169_2.jpg&refer=http%3A%2F%2Fpic23.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637556662&t=a5fec3552511991b54d2a4f6311f6597.jpg">
<p>欢迎大家来到招新界面，信息安全工作室随时欢迎你们，以下是一些关于工作室的信息</p>
<a href=http://usafe.club/ target="_blank">网安工作室网站 <br></a>
信息安全工作室成立于1997年，其拥有较多的资料和经验，我们会分享一些网络安全技术，
资料，工具等方便大家交流技术，实现一些人心中的“黑客梦”，同时想进一步发展网络安全，
也可以来面试我们工作室进行面试，我们会进行实战靶场训练，承接各种公司项目，以及参加ctf比赛等。
主要学习的有两个方向
<table border="5px">
<tr >
<th>方向一</th>
<th>方向二</th>
</tr>
<tr class="class1">
<td>web</td>
<td>二进制</td>
</tr>
</table>
想进入信息安全工作室，有以下几个条件
<ol>
<li >对计算机有兴趣并且能够坚持下去</li>
<li>学会在空余时间学习计算机知识</li>
<li>会自己去寻找问题答案，而不是一直问学长</li>
</ol>
要求简写即为
<form>
<input type="text" value="努力" >
<input type="text" value="坚持">
</form>
<em>下面是一些关于本工作室的图片和视频，大家可以了解一下<br></em>
<img src="C:\Users\xxx\Pictures\Saved Pictures\3.jpg" width=256px height=256px>
<audio src="D:\CloudMusic\2.mp3" autoplay controls></audio>
<video width="400" height="300" controls="controls" >
<source src="D:\FFOutput\2.mp4" type="video/mp4" />
</video>
</body>
</html>
css补充：当用到css时，可在标签中添加id=xx，然后在编写css时，写入#xx即可。
扫一扫
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
