图片标签
<img src="../" width="300px" height="300px" align="---">
src="---"——指向图片位置
alt="---"——在图像无法显示时的替代文本
title="---"——悬停在图像上时显示的文字
align=”left”——左边对齐
align=”center”——中间
align=”right”——右边对齐
valign=”top”——上边对齐
valign=”middle”——中间
valign=”bottom”——下边对齐
hspace="--px"——控制图片和文字的水平距离
vspace="--px"——控制图片和文字的垂直距离
超链接
<a href="https://www.baidu.com" target="---">去百度</a>
<a>---<a>——定义超链接，用于从一张页面链接到另一张页面
href——指示链接的目标
target——规定在何处打开链接文档
target="_blank"——浏览器总在一个新打开、未命名的窗口中载入目标文档
target="_self"——目标文档载入并显示在相同的框架或者窗口中作为源文档
target="_parent"——文档载入父窗口或者包含超链接引用的框架的框架集
target="_top"——文档载入包含这个超链接的窗口(清除所有被包含的框架并将文档载入整个浏览器窗口)
锚链接（跳转）
<a href="#gaige">改革开放</a>
<h1 id="gaige">改革</h1>
div标签
<div>---</div>——用来划分页面的区域
span标签
<span>---</span>——对文档中的行内元素进行组合（局部编辑）
视频标签
<video src="../" controls autoplay muted></video>
controls——视频控件（如播放、暂停、倍速）
autoplay——加载完成后随即播放视频
muted——视频静音
（autoplay muted 配合使用）
<video>
<source src="../">
</video>
<source/>——媒介元素
音频标签
<audio src="../" controls></audio> 一般不会自动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>今日搜索热词</h1>
<hr/>
<h2>1、阿卡贝拉</h2>
阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：<a href="./音频.html"> 阿卡贝拉《千与千寻》</a>
<h2>2、翻唱</h2>
“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： <a href="./视频.html">有一种悲伤（翻唱）-《A Kind of Sorrow》</a>
</body>
</html>表单标签
<form action="---"></form>——action="#"数据交给#处理
<input type="text">——文本域
<input type="password">——不会明文显示，以 * 或 . 替代
<input type="radio">——单选框
<input type="checkbox">——复选框
<input type="submit">——提交按钮
<input type="time">——时间
<button>---</button>——按钮
<textarea rows="--" cols="--"></textarea>——文本框
<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性
<select name="---" id="---">
<option value="---">---</option>
</select>——下拉列表
checked与 <input type="checkbox"> 或 <input type="radio"> 配合使用，选定
<option value="---" selscted>---</option>
disabled——禁用一个input元素
placeholder——提示，输入字段时消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<div id="box1"><h1>青春不常在，抓紧谈恋爱</h1></div><br/>
昵称：<input type="text" name="username" placeholder="请输入你的昵称"><br/>
性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex"><br/>
所在城市：<select name="city" id="">
<option value="西安">西安</option>
<option value="上海" selscted>上海</option>
<option value="南京">南京</option><br/>
婚姻状况：未婚<input type="radio" name="sex"> 已婚<input type="radio" name="sex"> 保密<input type="radio" name="sex"><br/>
喜欢的类型：可爱<input type="checkbox" name="hobby" checked> 性感<input type="checkbox" name="hobby" checked> 御姐<input type="checkbox" name="hobby"> 萝莉<input type="checkbox" name="hobby"> 小鲜肉<input type="checkbox" name="hobby"> 大叔<input type="checkbox" name="hobby"><br/>
个人介绍：<input type="url"><br/>
<h2>我承诺</h2>
<ul>
<li>年满18岁</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox" name="hobby">我同意所有条款<br/>
<button>免费注册</button> <button>重置</button>
</body>
</html>
表格标签
| <table> | 定义表格 | <tfoot> | 定义表格页脚 | <td> | 定义表格单元 | cellspacing | 边框间距离 | bgcolor="-" | 背景颜色 |
| <thead> | 定义表格页眉 | <tr> | 定义表格行 | <caption> | 定义表格标题 | colspan="-" | 跨列 | <label> | 点击文本也可触发控件 |
| <tbody> | 定义表格主体 | <th> | 定义表格表头 | border | 表格边框 | rowspan="-" | 跨行 |
<label><input type="radio" name="sex" id="">男</label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label>
iframe框架
<iframe src="---" frameborder="0"></iframe>——页面嵌套
frameborder——是否显示框架周围的边框（值为1时显示，0则不显示）
可以跟<a></a>连用，需要加target,name
其他标签
<dialog>---</dialog>——对话框元素（需要加open才可见）
<details>---</details>——详细信息展现元素
<summary>---</summary>——描述有关文档或文档片段的详细信息
（details和summary一起使用）
<script>---</script>——定义客户端脚本
全局属性
一个标签可以有多个class名
Title也是全局属性
<div tabindex="1" contenteditable="True">参考机动车道</div>——<div tabindex="1">使其可选择，后面可以使其被修改
特殊字符
——空格
<——<
>——>
©——©
css
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>——内部样式 style——定义文本样式
<link rel="stylesheet" href="./test.css">——外部样式 link——定义资源引用地址
基本选择器——选择所有元素
<style>
/* 标签选择器 */
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* 类选择器 */
.box1 {
background-color: aqua;
}
/* id选择器 */
#box1 {
color: aqua;
}
/* 通配符选择器 */
* {
font-size: 30px;
}
</style>包含选择器
<style>
/* 子代选择器 */
.ul1>li {
background-color: aqua;
}
/* 后代选择器 */
.ul1 li {
background-color: rgb(213, 213, 19);
}
</style>复合选择器——标签+，
<style>
p,
.box {
color: pink;
}
</style>
属性选择器——input
标签名+^=——以……开头
+$=——以……结尾
+*=——包含……
<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>伪类选择器
<style>
a:hover+div {
width: 100px;
height: 100px;
background-color: pink;
color: pink;
}
a:focus {
color: brown;
}
</style>其他选择器
<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>伪元素选择器
<style>
ul li::before {
content: "666";
}
ul li::after {
content: "666";
}
p::selection {
background-color: pink;
}
</style>
495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
