<!DOCTYPE html>
<!--文档类型声明标签 不是一个 HTML 标签 -->
<html lang="en">
<!-- 语言种类 en为英语 zh-CN为中文 -->
<head>
<!-- 头部 -->
<meta charset="UTF-8" />
<!-- 字符集 UTF-8万国码 GB2312简体中文 BIG5繁体中文-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 指定网页的兼容性模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 视口标签 理想视口 初始缩放比 -->
<title>Document</title>
<!-- 文档标题 -->
<!-- 文档标题前加logo -->
<link rel="shortcut icon" href="../img/男.png" type="image/x-icon" />
</head>
<body>
<!-- 网页主体部分 -->
<!--*语义化结构标签 -->
<header>头部标签</header>
<nav>导航标签</nav>
<article>内容标签</article>
<section>区域标签</section>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>
<!-- *无语义布局标签 -->
<div>大盒子</div>
<span>小盒子</span>
<!-- *特殊字符 -->
空格 <小于号 >大于号 ©版权号 ®R注册商标 ™TM商标 ¥人民币
±正负号 °摄氏度 ²平方  半个汉字大小空格  1个汉字大小空格
<!-- *文本格式化 -->
<b>加粗</b> <strong>加粗推荐</strong> <i>倾斜</i> <em>倾斜推荐</em>
<s>删除线</s> <del>删除线推荐</del> <u>下划线</u> <ins>下划线推荐</ins>
<sup>上标</sup> <sub>下标</sub>
<!-- *标题标签 -->
<h1>一级标题&logo<img src="../img/cc.png" /></h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- *段落标签p，水平线hr 换行标签br -->
<hr />
<p>
文本在一个段落之中 <br />
会根据浏览器窗口的大小进行自动换行<br />
段落和段落之间保有空隙
</p>
<!-- *图片标签 -->
<img
src="../img/cc.png"
title="本地图片"
alt="替换文本"
width="100px"
/>
<img
src="https://jianghu.res.netease.com/pc/fab/20211217150206/img/icon1_e4de46e.png"
title="网上图片"
alt="图片损坏"
/>
<!-- *多媒体标签 -->
<audio src="../source/zhoujie.mp3" controls autoplay loop></audio>
<video src="../source/movie.mp4"
controls muted autoplay loop poster="../img/bg1.jpg" width="800px"></video>
<!-- *超链接标签 -->
<a href="#" title="提示文本">空链接，给文字加链接，会刷新网页</a>
<a href="#"><img src="../img/cc.png">给图片加链接</a>
<a href="https://www.baidu.com/" target="self">外部链接,当前窗口打开</a>
<a href="../0204太阳加载中.html" target="blank">内部链接，新窗口打开</a>
<a href="../img/cc.png">下载链接放入文件地址</a>
<a href="#img1">锚点链接,对应锚点处id</a>
<a href="a.html#test">跳转其他页面锚点</a>
<a href="javascript:;">取消链接跳转</a>
<a href="javascript:alert('点我干啥')">JS点击事件</a>
<!-- *表格标签 table tr td-->
<table border="1" width="400" height="200" cellspacing="0" cellpadding="0">
<caption>表格大标题，只能有一个</caption>
<thead> <!-- 表格头部 -->
<tr> <!-- row行 -->
<th>姓名</th> <!-- 表头标题 -->
<th>性别</th>
</tr>
</thead>
<tbody> <!-- 表格主体 可以有多个tbody -->
<tr align="center">
<td>张三</td> <!-- 单元格 -->
<td>男</td>
</tr>
<tr valign="bottom">
<td>李思</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>尾部</td>
<td>表格尾部</td>
</tr>
</tfoot>
</table>
<!-- 表格合并 -->
<table>
<tr>
<td colspan="2">跨列合并</td>
<!-- <td>跨列合并注释</td> -->
</tr>
<tr>
<td rowspan="2">跨行合并</td>
<td></td>
</tr>
<tr>
<!-- <td>跨行合并注释</td> -->
<td></td>
</tr>
</table>
<!-- *无序列表 -->
<ul type="circle">
<li>无序列表只能放li</li>
<li><a href="#">li可以放其他</a></li>
<li>新闻列表，产品列表，导航、分页、选项卡</li>
</ul>
<!-- *有序列表 -->
<ol type="A">
<li>有序列表只能放li</li>
<li><a href="#">li可以放其他</a></li>
<li>排行榜，食谱步骤，面包屑导航，指路方向</li>
</ol>
<!-- *自定义列表 -->
<dl>
<dt>定义术语</dt>
<dd>解释1</dd>
<dd>描述2</dd>
<dt>多条项目定义与描述</dt>
<dd>应用：名词解释、分类 </dd>
<dd>键-值对列表</dd>
</dl>
<!-- *表单 -->
<form action="服务器url地址" method="get或post" name="表单名称">
<input type="text">输入表单
<select>下拉表单</select>
<textarea>文本域</textarea>
<button>按钮</button>
</form>
<form action=""> <!-- input类型 -->
文本框<input type="text">
密码框<input type="password" name="" id="">
单选框<input type="radio" name="" id="">
复选框<input type="checkbox" name="" id="">
按钮 <input type="button" value="按钮">
提交按钮<input type="submit" value="提交">
重置按钮<input type="reset" value="重置">
图形提交按钮<input type="image" src="../../img/button.png" alt="开始游戏">
文件上传<input type="file" name="" id="">
<hr>
数字 <input type="number" name="" id="">
手机 <input type="number" name="" id="">
邮箱 <input type="email" name="" id="">
搜索框<input type="search" name="" id="">
地址 <input type="url" name="" id="">
时间 <input type="time" name="" id="">
日期 <input type="date" name="" id="">
月份 <input type="month" name="" id="">
周 <input type="week" name="" id="">
颜色 <input type="color" name="" id="">
</form>
<form action=""><!-- 表单属性 -->
<input type="checkbox" checked>默认选中
<input type="text" value="默认显示的值" required>必填
<input type="text" placeholder="提示文本">
<input type="text" maxlength="10">最多输入10字符
<input type="text" autofocus>自动聚焦
<input type="text" autocomplete="off">历史记录关闭
<input type="file" multiple>可多文件提交
<input type="text" disabled>禁用
<input type="button" value="禁用" disabled>按钮禁用
<button disabled>禁用按钮</button>
<input type="text" value="只能读不能修改" readonly>
<label for="idd">点我会聚焦#idd的表单</label>
<input type="text" id="idd">
</form>
<form action=""> <!-- 下拉列表与文本域 -->
<select size="3"> <!-- 列表可见选项的数目，整个下拉列表的大小 -->
<option>第一项</option>
<option selected>默认显示</option>
<option>第三项</option>
</select>
<textarea cols="30" rows="10" style="resize: none;">
文本域，识别换行的空格,禁止拖拽重置文本域大小
</textarea>
</form>
</body>
</html>
<!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>
* {
/* 通配符选择器 */
margin: 0; /* 清除默认内外边距 */
padding: 0;
}
p {
/* 标签选择器 */
font: italic 700 16px/1.5 "Microsoft YaHei";
/* 合写必须保留 font-size 和 font-family 属性 */
font-style: italic; /* 斜体 normal*/
font-weight: bold; /* 粗体bold 700 400——900 */
font-size: 22px; /* 字号 最小12px 默认16px */
line-height: 20px; /* 行高 16px/1.5 1.5倍行高 */
font-family: "Courier New", Courier, monospace;
color: #000; /* 字体颜色 transparent*/
text-align: center; /* 水平对齐 justify两端对齐 left、right*/
height: 40px;
line-height: 40px; /* 垂直对齐 line-height=height*/
letter-spacing: 15px; /* 字间距 */
text-indent: 2em; /* 文本缩进 */
text-decoration: line-through;
/* 删除线line-through，下划线underline，上划线overline */
white-space: nowrap; /* 强制一行内显示文本 */
text-overflow: ellipsis; /*文字用省略号替代超出的部分*/
overflow: hidden; /*超出的部分隐藏*/
word-break: break-all; /* 强制让连续的字母数字换行 */
text-transform: uppercase; /* 转换英文字母大小写lowercase */
-webkit-text-stroke: 2px plum; /* 文字描边 粗细 颜色 */
/* -webkit-background-clip: text; 将背景裁切至文本 */
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 文字阴影 */
box-shadow: 0 0 10px skyblue; /* 盒子阴影 */
}
/* * {
通配符选择器，通常用于清除内外边距
}
ul li a {
标签选择器，后代选择器
}
.wrap>#btn{
类选择器，id选择器，亲儿子选择器
}
h1+p {
相邻兄弟选择器，紧挨着h1的后面的p
}
h1~p {
后面兄弟选择器，h1后面的所有的p
}
p.text {
交集选择器，类名为text的p
}
.box1,.box2,.box3 {
并集选择器，相同样式集体声明
}
li:first-child {
结构伪类选择器/last-child
}
li:nth-child(-n+2) {
结构伪类选择器，n为所有孩子排序
}
p:nth-of-type(3) {
结构伪类选择器，n为同类型的孩子排序
} */
/* li:not(:last-child) {
选择除了not()里指定的元素之外的所有元素
} */
/* .box::before {
content: '';必填
伪元素选择器，行内元素/after
} */
/* a:hover {
链接伪类选择器，鼠标悬停
link未访问，visited访问后，active点下未抬起
} */
/* input:focus {
表单伪类选择器，获得焦点时
} */
/* li:nth-child(2):hover+li {
color: red;
} */
/* div[index] {
具有index属性的div
}
div[index='1'] {
属性index=1的div
}
div[index^='item'] {
属性值以item开头的div /$item结尾、*含有item
} */
/* 双伪元素清除浮动 */
/* .clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
} */
/* 盒子模型 */
.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;/* dotted/dashed/double */
border-right: 3px dotted skyblue;/* groove、ridge、inset、outset */
border-radius: 50%; /* 圆角 */
padding: 10px 20px 30px;/* 上 右 下 左 */
margin: 10px auto; /* 上下 左右 */
/* 父元素overflow:hidden;外边距塌陷合并解决 */
}
</style>
</head>
<body>
<p>大阿尔卡纳avb</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="box"></div>
</body>
</html>
2889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
