1.插入图片
<img src="../" alt="" width="100px" align="middle" hspace="200px"
vspace="200px">你们都是祖国的花骨朵儿| alt | 提供图片的替代文字 |
| width | 宽度 |
| align | 内容水平对齐方式 |
| hspace | 水平距 |
| vspace | 上下距 |
2.超链接
<a href="https://www.baidu.com" target="_blank">去百度</a>| -blank | 跳转在新标签页 |
3.锚链接
<a href="#gaige">改革开放时期</a>| # | ID选择 |
4.div标签
<div>详述了红七军、红八军的战斗</div>| <div></div> | 没有任何的具体含义，用来划分页面的区域 块元素 |
5.span标签
<span>我是一个小盒子</span>| <span></span> | 短语内容的通用行内容器，并没有任何特殊语义 行内元素 |
6.视频标签
<video src="../素材/MV/Jewel-Stay Here Forever(高清).mp4" autoplay muted loop width="400px"></video><video>
<source src="../素材/MV/Jewel-Stay Here Forever(高清).mp4">
</video>| autoplay | 自动播放 |
| muted | 静音 |
| loop | 循环次数 |
7.音频标签
<audio src="../素材/Jewel - Stay Here Forever.flac" controls autoplay></audio>| controls | 控制器 |
8.表单
<form action="#">
用户名：<input type="text" name="username" placeholder="请输入您的用户名：">
密码:<input type="password" name="pwd">
性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked>
你在干嘛？ 吃饭<input type="checkbox" name="hobby" id="">
睡觉<input type="checkbox" name="hobby">
<!-- <input type="submit" name="" id="" disabled> -->
<!-- <button>点击提交</button> -->
<!-- <input type="button" name="" id="" value="提交"> -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="city" id="">
<option value="西安">西安</option>
<option value="南京" selected>南京</option>
<option value="上海">上海</option>
</select>
<input type="url">
<input type="time" name="" id="">
<button>提交</button>
</form>| placeholder | 输入框内提示内容 |
| type | 输入框类型 |
| radio | 单选 |
| checkbox | 多选 |
| checked | 选项默认 |
| disabled | 禁止 |
| <textarea></> | 文本框 |
| <select></> | 选择框 |
| <option></> | 选择框选项 |
| submit | 提交 |
| <button></> | 表示一个可点击的按钮 |
| <label></label> | 使选项可点选择 |
9.表格标签
<table border="1px" width="300px" height="200px" cellspacing="0">
<caption>学生信息表</caption>
<thead height="100px" align="right" valign="bottom">
<tr bgcolor="pink">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
</tr>
<tr bgcolor="red">
<td rowspan="2">张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
</tr>
<tr>
<td>男</td>
<td>18</td>
<td>汉</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>| <table></table> | 表格 |
| <caption></caption> | 表名 |
| <thead></thead> | 头部 |
| <tbody></tbody> | 主体 |
| <tfoot></tfoot> | 尾部 |
| valign | 内容上下对齐 |
| <tr></tr> | 行 |
| <th></th> | 行标题 |
| <td></td> | 行内容 |
| rowspan | 列合并 |
| colspan | 行合并 |
| cellspacing | 定义水平和垂直方向上两个单元格之间空间的大小 |
10.iframe框架
<iframe src="https://www.taobao.com" frameborder="1" width="800px"></iframe>| <iframe></iframe> | 能够将另一个 HTML 页面嵌入到当前页面中 |
| frameborder | 框架大小 |
11.其它标签
<dialog>
<form action="#">
用户名：<input type="text" value="">
</form>
</dialog>
<details>
<summary>关于文章</summary>
关于文章的具体信息***88
</details>
<script>
const dia = document.querySelector("dialog")
dia.showModal()
dia.close()
</script>| <dialog></> | 表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器 |
| <details></> | 可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息 |
| <summary></> | 指定了 <details> 元素展开盒子的内容的摘要，标题或图例。 |
| <script></> | 用于嵌入可执行代码或数据 |
12.全局属性
是所有 HTML 元素共有的属性；它们可以用于所有元素，即使属性可能对某些元素不起作用。
<style>
.test {
color: pink;
}
.test2 {
background-color: pink;
}
</style>
</head>
<body>
<!-- class -->
<div class="test" title="我是一个盒子">cdcdc</div>
<div class="test test2">cdcdc</div>
<p class="test">cnkdlckd</p>
<input type="text" name="" id="">
<div tabindex="1" contenteditable="True">参考机动车道</div>
<a href="#">去百度</a>
<div class="nav"></div>
<div class="head">
<div class="aside">
</div>
</div>
<div class="foot"></div>
<header>
</header>
<nav>
</nav>
| class | class 的值是一个以空格分隔的元素的类名列表，它允许 CSS 和 Javascript 通过类选择器 或 DOM 方法来选择和访问特定的元素。 |
| tabindex | 其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航 |
| contenteditable | 一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑 |
13.特殊字符
<p>
你 是祖国的花鼓杜尔
</p>
<
>
©|   | 空 |
| < | <小于 |
| > | >大于 |
| © | © |
14.CSS
<!-- <style>
/* 写css样式 */
/* 选择器{
} */
div {
width: 300px;
height: 200px;
background-color: aqua;
}
</style> -->
<link rel="stylesheet" href="./09-test.css">
</head>
<body>
<!-- <div style="width: 200px; height: 100px; background-color: pink;"></div> -->
<div></div>
</body>《1 分离
<style>
/* 写css样式 */
/* 选择器{
</>
《2标签属性
<div style="width: 200px; height: 100px; background-color: pink;"></div> -->
《3 外部
<link rel="stylesheet" href="./09-test.css">
15.基本选择器
<style>
/* 标签选择器 */
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* 类选择器 */
.box1 {
background-color: aqua;
}
/* id选择器 */
#box1 {
color: aqua;
}
/* 通配符选择器 */
* {
font-size: 30px;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<p id="box1">我是一段文字</p>
<div>盒子二</div>
</body>
16.包含选择器
style>
/* 包含选择器 */
.ul1>li {
background-color: aqua;
}
/* 后代选择器 */
.ul1 li {
background-color: rgb(213, 213, 19);
}
</style>
</head>
<body>
<ul class="ul1">
<li>101</li>
<li>102</li>
<li>103</li>
<ul>
<li>我是内层的</li>
</ul>
<li>104</li>
<li>105</li>
<li>106</li>
<li>107</li>
<li>108</li>
<li>109</li>
<li>1010</li>
</ul>
</body>17.复合选择器
<style>
p,
.box {
color: pink;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div class="box">盒子</div>
</body>18.属性选择器
<style>
/* input[type="url"] {
background-color: aqua;
}
input[name] {
background-color: blue;
} */
input[type^="pa"] {
background-color: aquamarine;
}
input[type$="l"] {
background-color: rgb(22, 26, 25);
}
input[type*="a"] {
background-color: rgb(240, 127, 255);
}
</style>
</head>
<body>
<form action="#">
<input type="password" name="pwd">
<input type="text">
<input type="url">
</form>
</body>19.伪类选择器
<style>
a:hover+div {
width: 100px;
height: 100px;
background-color: pink;
color: pink;
}
a:focus {
color: brown;
}
</style>
</head>
<body>
<a href="#">去百度</a>
<div></div>
</body>20.其他选择器
<style>
ul li:nth-child(4) {
background-color: pink;
}
ul li:first-child {
background-color: blue;
}
ul li:last-child {
background-color: aquamarine;
}
ul li:nth-child(2n-1) {
background-color: chartreuse;
}
ul li:nth-of-type(4) {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
<p>woshiduanluo</p>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>110</li>
</ul>
</body>21.伪元素选择器
<style>
ul li::before {
content: "666";
}
ul li::after {
content: "666";
}
p::selection {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<p>
cdksc;sdkcjsdlkcs;dkjcjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
</p>
扫一扫
5619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
