基础 – chang的个人博客 https://www.qiqin-chang.cn Thu, 01 Jan 2026 06:19:01 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.9.1 https://www.qiqin-chang.cn/wp-content/uploads/2025/04/cropped-无背景-圆形-32x32.png 基础 – chang的个人博客 https://www.qiqin-chang.cn 32 32 密码保护：JavaScript https://www.qiqin-chang.cn/javascript/ https://www.qiqin-chang.cn/javascript/#respond Mon, 11 Aug 2025 05:23:15 +0000 http://www.qiqin-chang.cn/?p=540

此内容受密码保护。如需查阅，请在下方输入密码。

]]> https://www.qiqin-chang.cn/javascript/feed/ 0 CSS https://www.qiqin-chang.cn/css/ https://www.qiqin-chang.cn/css/#respond Mon, 11 Aug 2025 05:22:05 +0000 http://www.qiqin-chang.cn/?p=538 # 基础教程：

CSS 语法：

选择器 { 属性: 值; 属性: 值 …}

一套（属性:值）被称为一个声明

p {
  color: red;
  text-align: center;
}

CSS 选择器：

元素选择器：

p {text-align: center;color: red;}

id 选择器：

#para1 {text-align: center;color: red;}

类选择器：

.center {text-align: center;color: red;}

通用选择器：

* {text-align: center;color: blue;}

分组选择器：

h1, h2, p {text-align: center;color: red;}

CSS 使用方式：

外部CSS：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部 CSS：

<head>
<style>
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

行内 CSS：

<h1 style="color:blue;text-align:center;">This is a heading</h1>

CSS 注释：

/* 这是一条单行注释 */

CSS 颜色：

颜色属性：

背景颜色：

<h1 style="background-color:DodgerBlue;">China</h1>

文本颜色：

<h1 style="color:Tomato;">China</h1>

边框颜色：

<h1 style="border:2px solid Tomato;">Hello World</h1>

颜色种类：

种类使用方式
RGB 颜色rgb(red, green, blue)
RGBA 颜色rgba(red, green, blue, alpha)
HEX 颜色#rrggbb
HSL 颜色hsla(hue, saturation, lightness)
HSLA 颜色hsla(hue, saturation, lightness, alpha)

CSS 背景：background

属性描述
background-color指定元素的背景色
background-image指定用作元素背景的图像（图像默认子在水平和垂直上都重复）
background-repeat指定背景图像的重复方式
background-attachment指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
background-position指定背景图像的位置
background-clip规定背景的绘制区域
background-origin规定在何处放置背景图像
background-size规定背景图像的尺寸

实例：

body {
  background-color: lightblue; /*设置背景颜色*/
  background-image: url("paper.gif"); /*添加背景图片*/
  background-repeat: repeat-x; /*水平重复*/
  background-repeat: repeat-y; /*垂直重复*/  
  background-repeat: no-repeat; /*只显示一次图像*/ 
  background-position: right top; /*设置背景图片位置*/
  background-attachment: fixed; /*固定背景图像*/
  background-attachment: scroll; /*背景图像随页面滚动*/
  background: #ffffff url("tree.png") no-repeat right top; /*属性简写*/
}

/*简写顺序
background-color
background-image
background-repeat
background-attachment
background-position
*/

body {
  background-clip: padding-box; /*背景被裁剪到内边距框*/
  background-clip: border-box; /*背景被裁剪到边框盒 默认*/
  background-clip: content-box; /*背景被裁剪到内容框*/
    
  background-origin:padding-box; /*背景图像相对于内边距框来定位 默认*/
  background-origin:border-box; /*背景图像相对于边框盒来定位*/
  background-origin:content-box; /*背景图像相对于内容框来定位*/
}

CSS 边框：border

边框样式：border-style

属性值：

属性值描述
dotted定义点线边框
dashed定义虚线边框
solid定义实线边框
double定义双边框
groove定义 3D 坡口边框。效果取决于 border-color 值
ridge定义 3D 脊线边框。效果取决于 border-color 值
inset定义 3D inset 边框。效果取决于 border-color 值
outset定义 3D outset 边框。效果取决于 border-color 值
none定义无边框
hidden定义隐藏边框

边框宽度：border-width

属性值描述
以 px、pt、cm、em 计自定义宽度
thin预定义细
medium预定义中
thick预定义宽

边框颜色：border-color

说明：使用CSS颜色为属性就可以

混合边框：

一个值：四条边都为该属性值

两个值：上下 左右

三个值：上 左右 下

四个值：上 右 下 左

属性简写：

p {
  border: 5px solid red;
  border-left: 6px solid red; /*左边框*/
  border-bottom: 6px solid red; /*底边框*/
}

圆角边框: border-radius

p {
  border-radius: 5px; /*圆角像素值*/
}

其他属性：

属性描述
border简写属性，在一条声明中设置所有边框属性。
border-bottom简写属性，在一条声明中设置所有下边框属性。
border-bottom-color设置下边框的颜色。
border-bottom-style设置下边框的样式。
border-bottom-width设置下边框的宽度。
border-left简写属性，在一条声明中设置所有左边框属性。
border-left-color设置左边框的颜色。
border-left-style设置左边框的样式。
border-left-width设置左边框的宽度。
border-right简写属性，在一条声明中设置所有右边框属性。
border-right-color设置右边框的颜色。
border-right-style设置右边框的样式。
border-right-width设置右边框的宽度。
border-top简写属性，在一条声明中设置所有上边框属性。
border-top-color设置上边框的颜色。
border-top-style设置上边框的样式。
border-top-width设置上边框的宽度。

CSS 边距：padding margin

内边距：padding

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
  padding: 25px 50px 75px 100px; /*混合外边距 上 右 下 左*/
}

外边距：margin

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  margin: 25px 50px 75px 100px; /*混合外边距 上 右 下 左*/
}

CSS 高度、宽度：height width

属性描述
height设置元素的高度。
width设置元素的宽度。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
div {
  height: 200px;
  width: 50%;
  max-width: 500px; /*设置最大宽度*/
}

CSS 轮廓：outline-style

属性描述
outline-style轮廓样式
outline-color
outline-width轮廓宽度
outline-offset
outline

轮廓样式：

轮廓样式描述
dotted定义点状的轮廓
dashed定义虚线的轮廓
solid定义实线的轮廓
double定义双线的轮廓
groove定义 3D 凹槽轮廓
ridge定义 3D 凸槽轮廓
inset定义 3D 凹边轮廓
outset定义 3D 凸边轮廓
none定义无轮廓
hidden定义隐藏的轮廓

轮廓宽度：outline-width

轮廓宽度描述
thin细
medium中
thick宽

轮廓颜色：outline-color

反转颜色：outline-color: invert

轮廓偏移：outline-offset

轮廓简写：

p {
    outline-style: dotted;
    outline-width: 4px;
    outline-color: red;
    outline-color: invert /*颜色反转*/
    outline: thick ridge pink; /*顺序无所为style属性必须要有*/
    outline-offset: 25px; /*轮廓偏移*/
}

CSS 文本：text

文本颜色：color

文本对齐：text-align

属性值描述
center居中对齐
left左对齐
right右对齐
justify拉伸每一行直至每行宽度相等且对齐

垂直对齐：vertical-align

属性值描述
top
middle
bottom

文本方向：direction unicode-bidi

文字装饰：text-decoration

属性值描述
none取消装饰，一般用于取消超链接的下划线
overline上划线
line-through中划线
underline下划线

文本转换：text-transform

属性值描述
uppercase全转为大写
lowercase全转为小写
capitalize首字母大写

文字间距：

文字缩进：text-indent

字母间距：letter-spacing

行高：line-height

字间距：word-spacing

空白：white-space

文本阴影：text-shadow

body {
  /*文本颜色*/
  color: blue;
  /*文本对齐*/
  text-align: center;
  text-align: left;
  text-align: right;
  text-align: justify;
  /*文本逆序*/
  direction: rtl;
  unicode-bidi: bidi-override;
  /*文本对齐*/
  vertical-align: top;
  vertical-align: middle;
  vertical-align: bottom;
  /*文本装饰*/
  text-decoration: none;
  text-decoration: overline;
  text-decoration: line-through;
  text-decoration: underline;
  /*文本转换*/
  text-transform: uppercase;
  text-transform: lowercase;
  text-transform: capitalize;
  /*文字间距*/
  /*文字缩进*/
  text-indent: 50px;
  /*字母间距*/
  letter-spacing: -3px;  
  /*行高*/
  line-height: 0.8;  
  /*字间距*/
  word-spacing: -5px;
  /*空白 以下用于进制文本换行*/
  white-space: nowrap;
  /*文本阴影*/
  text-shadow: 2px 2px 5px red;
}

其他属性：

属性描述
letter-spacing设置字符间距。
text-overflow指定应如何向用户示意未显示的溢出内容。

CSS 字体：font

字体族：font-family

常见字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。
通用字体族字体名称实例
SerifTimes New Roman 、 Georgia、 Garamond
Sans-serifArial、 Verdana、 Helvetica
MonospaceCourier New、 Lucida Console、 Monaco
CursiveBrush Script MT、 Lucida Handwriting
FantasyCopperplate、 Papyrus

字体样式：font-style

属性值描述
normal正常
italic斜体
oblique斜体（支持少）

字体粗细：font-weight

属性值描述
normal正常
lighter细
bold粗
900自定义

字体变体：font-variant

属性值描述
normal正常
small-caps小写字母转为大写字母，但转换后的大写字母小于原本的大写字母

字体大小：font-size

属性简写：font

说明：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

p {
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 40px;
  font: italic small-caps bold 12px/30px Georgia, serif;
}

CSS 列表：list-style-type

列表样式：

无序列表：

ul {
  list-style-type: circle; /*圆形*/
  list-style-type: square; /*方形*/
  list-style-image: url('sqpurple.gif'); /*自定义样式*/
}

有序列表：

ol {
  list-style-type: upper-roman; /*罗马排序*/
  list-style-type: lower-alpha; /*字母排序*/
}

定位列表项标记：

ul {
  list-style-position: outside; /*符号在列表项之外*/
  list-style-position: inside; /*符号在列表项内*/
}

删除默认设置：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

简写属性：

ul {
  list-style: square inside url("sqpurple.gif");
}

CSS 表单：

合并表格边框：

table {
  border-collapse: collapse;
}
]]> https://www.qiqin-chang.cn/css/feed/ 0 HTML https://www.qiqin-chang.cn/html/ https://www.qiqin-chang.cn/html/#respond Mon, 11 Aug 2025 05:21:20 +0000 http://www.qiqin-chang.cn/?p=536 基础教程：

## HTML 标准格式：

文档结构：

  • XHTML DOCTYPE 是强制性的
  • html 中的 XML namespace 属性是强制性的
  • html、head、title 以及 body 也是强制性的

元素语法：

  • XHTML 元素必须正确嵌套
  • XHTML 元素必须始终关闭
  • XHTML 元素必须小写
  • XHTML 文档必须有一个根元素

属性语法：

  • XHTML 属性必须使用小写
  • XHTML 属性值必须用引号包围
  • XHTML 属性最小化也是禁止的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
​
<html xmlns="http://www.w3.org/1999/xhtml">
​
<head>
<title>Title of document</title>
</head>
​
<body>
......
</body>
​
</html>

HTML 声明：

<!--HTML5声明-->
<!DOCTYPE html> 
<!--HTML4.01声明-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--XHTML1.0声明-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 注释:

<!-- This is a comment -->

HTML 基本元素：

标签描述
<html>定义整个 HTML 文档
<head>定义HTML文档的头部
body>定义HTML文档的主体
<h1>–<h6>定义HTML标题
<p>定义HTML段落
<br>定义换行
<hr>定义水平线
<a>定义HTML 链接
<img>定义HTML 图像

HTML 基本属性：

style属性：

HTML 样式实例 – 背景颜色：

<p style="background-color:green">This is a paragraph.</p>

HTML 样式实例 – 字体、颜色和尺寸：

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

HTML 样式实例 – 文本对齐：

<h1 style="text-align:center">This is a heading</h1>

id属性：

属性描述
id为HTML 元素指定唯一的 id
class同一个类名可以由多个 HTML 元素使用

HTML 超链接：

链接标签：

标签描述
<a>定义锚

连接属性：

属性描述
target定义被链接的文档在何处显示
namename 属性规定锚（anchor）的名称

锚点跳转：

<!--跳转连接-->
<a href="url">Link text</a>
<!--定义锚点-->
<a name="tips">基本的注意事项 - 有用的提示</a>
<!--指向锚点-->
<a href="#tips">有用的提示</a>
<!--指向其它页面锚点-->
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

HTML 图像：

img 标签：

属性描述
src源属性（源属性的值是图像的 URL 地址）
alt替换文本
<img src="boat.gif" alt="Big Boat">

HTML 块：

标签描述
<div>定义文档中的分区或节（division/section）。
span定义 span，用来组合文档中的行内元素。

HTML 列表:

无序列表:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表:

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

定义列表:

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

列表标签：

标签描述
ol定义有序列表。
ul定义无序列表。
li定义列表项。
dl定义定义列表。
dt定义定义项目。
dd定义定义的描述。

HTML 表格：

表格元素：

标签描述
table定义表格
caption定义表格标题。
th定义表格的表头。
tr定义表格的行。
td定义表格单元。
thead定义表格的页眉。
tbody定义表格的主体。
tfoot定义表格的页脚。
col定义用于表格列的属性。
colgroup定义表格列的组。

表格属性：

属性描述
border定义边框属性
<table border="1">
<colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
</colgroup>
<tr>
	<td>row 1, cell 1</td>
	<td>row 1, cell 2</td>
</tr>
<tr>
	<td>row 2, cell 1</td>
	<td>row 2, cell 2</td>
</tr>
</table>

HTML 表单：

HTML 表单属性：

属性描述
action规定提交表单时将表单数据发送到何处。（URL）（提交页面）
target规定提交表单后在何处显示接收到的响应。（默认：_self）
method规定发送表单数据时要使用的 HTTP 方法。（默认get方法）method=”post”
autocomplete规定表单是否应打开自动完成（填写）功能。（默认：开启）开启：autocomplete=”on”
novalidate规定提交时不应验证表单。novalidate
accept-charset规定用于表单提交的字符编码。
enctype规定将表单数据提交到服务器时应如何编码（默认：url-encoded；仅供 method=”post”）。
name规定表单名称。（对于 DOM 使用：document.forms.name）
rel规定链接资源和当前文档之间的关系。

Target 属性：

值描述
_blank响应显示在新窗口或选项卡中。
_self响应显示在当前窗口中。
_parent响应显示在父框架中。
_top响应显示在窗口的整个 body 中。
framename响应显示在命名的 iframe 中。

HTML 表单元素：

元素描述
input根据不同的type属性，可以变化为多种形态
select定义下拉列表
option定义待选择的选项
textarea定义多行输入字段
button定义可点击的按钮
datalist定义预定义选项的下拉列表（html5）

HTML 输入类型：

input 元素的输入类型：

类型描述
text定义常规文本输入
password定义密码字段
submit定义提交按钮
radio定义单选按钮输入 添加checked属性为默认选择
checkbox定义复选框
button定义按钮

HTML5 输入类型：

类型描述
number用于应该包含数字值的输入字段
date用于应该包含日期的输入字段
color用于应该包含颜色的输入字段
range用于应该包含一定范围内的值的输入字段
month允许用户选择月份和年份
week允许用户选择周和年
datetime允许用户选择日期和时间（有时区）
datetime-local允许用户选择日期和时间（无时区）
email用于应该包含电子邮件地址的输入字段
search用于搜索字段（搜索字段的表现类似常规文本字段）
tel用于应该包含电话号码的输入字段
url用于应该包含 URL 地址的输入字段

HTML 输入属性：

属性描述
value属性规定输入字段的初始值
readonly属性规定输入字段为只读（不能修改）
disabled属性规定输入字段是禁用的
size属性规定输入字段的尺寸（以字符计）
maxlength属性规定输入字段允许的最大长度

HTML5 属性：

属性描述
autocomplete自动完成表单。当自动完成开启，浏览器会基于用户之前的输入值自动填写值
novalidate取消数据验证
autofocus自动获得焦点
form设置所属的一个或多个表单
formaction设置提交时处理该输入控件的文件的 URL
formenctype设置提交时的编码格式（仅用于POST请求）
formmethod设置向 action URL 的请求方式
formnovalidate(布尔)设置提交时不在验证
formtarget设置提交表单后在何处显示接收到的响应
height设置input的高度
width设置input的宽度
listlist 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项
min设置输入最小值
max设置输入最大值
multiple允许用户提交多个值
pattern设置正则表达式
placeholder设置提示信息
required设置为必填字段
step设置数字的调整间隔
<!--form-->
<form action="action_page.php" method="GET/POSt">
<input type="text" name="name"> <!---->
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
<input type="submit" value="Submit">
</form>

<form action="/example/html5/demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="提交" />
</form>
<p>下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。</p>
Last name: <input type="text" name="lname" form="form1" />

<!--list-->
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

HTML Input 提交属性:

属性描述
forminput 的 form 属性规定 input 元素所属的表单
formactioninput 的 formaction 属性规定当提交表单时，对输入（数据）进行处理的文件的 URL
formenctypeinput 的 formenctype 属性指定提交时应如何编码表单数据（仅适用于 method=”post” 的表单）
formmethodinput 的 formmethod 属性定义了将表单数据发送到 action URL 的 HTTP 方法
formtargetinput 的 formtarget 属性指定一个名称或关键字，该名称或关键字规定在提交表单后在何处显示收到的响应
formnovalidateinput 的 formnovalidate 属性规定提交时不应验证 input 元素
novalidate如果已设置，novalidate 属性规定在提交时不应验证所有表单数据

HTML 媒体：

媒体格式：

视频格式：

格式文件描述
AVI.aviAVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
WMV.wmvWindows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG.mpg.mpegMPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
QuickTime.movQuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo.rm.ramRealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash.swf.flvFlash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4.mp4Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

音频格式：

式文件描述
MIDI.mid.midiMIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio.rm.ramRealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
Wave.wavWave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
WMA.wmaWMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3.mp3.mpgaMP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

HTML 内联对象：

说明：可以插入任意对象

元素描述
object定义 HTML 文档中的嵌入式对象
embed定义 HTML 文档中的嵌入式对象 （HTML5中允许插入音频）

实例：

<!-- object -->
<object width="100%" height="500px" data="snippet.html"></object>
<!-- embed -->
<embed width="100%" height="500px" src="snippet.html">

HTML 音频:

1.使用 embed 元素:(html5)

<embed height="100" width="100" src="song.mp3" />

2.使用 object 元素:

<object height="100" width="100" data="song.mp3"></object>

3.使用 audio 元素:(html5)

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

4.最好的 HTML 解决方法:

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

5.使用超链接:

<a href="song.mp3">Play the sound</a>

HTML 视频：

1.使用 embed 标签：(html5)

<embed src="movie.swf" height="200" width="200"/> （HTML5 中允许）

2.使用 object 标签:

<object data="movie.swf" height="200" width="200"/>

3.使用 video 标签:(html5)

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

4.最好的 HTML 解决方法:

HTML 5 + object + embed

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

5.使用超链接:

<a href="movie.swf">Play a video file</a>

HTML 框架：

内联框架：

标签描述
iframe用于在网页内显示网页
<iframe src="URL"></iframe>
属性描述
srcURL指向隔离页面的位置
width宽度
height高度
frameborder边框大小
target链接的目标

结构框架：

标签描述
frameset框架结构标签
<html>
	<frameset cols="25%,50%,25%"> <!-- cols为垂直分，rows为水平分 -->
  		<frame src="/example/html/frame_a.html">
  	  	<frame src="/example/html/frame_b.html">
  	  	<frame src="/example/html/frame_c.html">
	
		<noframes> <!-- 如果浏览器不支持则显示以下文本 -->
			<body>您的浏览器无法处理框架！</body>
		</noframes>
	</frameset>
</html>

HTML head：

头部元素：

元素描述
title标签定义文档的标题
link标签定义文档与外部资源之间的关系
meta标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的
base标签为页面上的所有链接规定默认地址或默认目标
style标签用于为 HTML 文档定义样式信息
script标签用于定义客户端脚本，比如 JavaScript
<!DOCTYPE html>
<html>
    <head>
    <title>Title of the document</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css" />
        <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
        <base href="http://www.w3school.com.cn/images/" />
        <base target="_blank" />
        <style type="text/css">
        	p {color:blue}
        </style>
        <script>
        	document.getElementById("demo").innerHTML = "Hello JavaScript!";
    	</script>
    </head>

    <body>
        The content of the document......
    </body>

</html>

字符集：

<meta charset="UTF-8">

HTML CSS样式:

外部样式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表：

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式：

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

样式标签：

标签描述
style定义样式定义
link定义资源引用。
div定义文档中的节或区域（块级）
span定义文档中的行内的小块或区域。

HTML JavaScript：

标签描述
script定义客户端脚本。
noscript为不支持客户端脚本的用户定义替代内容。

HTML body：

标签描述
body定义了整个 HTML 文档

body标签属性：

背景属性：

属性描述
bgcolor背景颜色
background背景图片
<body bgcolor="#000000">
<body background="clouds.gif">

其他：

HTML 文本格式：

基础文本：

标签描述
b定义粗体文本。
big定义大号字。
em定义着重文字。
i定义斜体字。
small定义小号字。
strong定义加重语气。
sub定义下标字。
sup定义上标字。
ins定义插入字。
del定义删除字。

计算机输出文本：

标签描述
code定义计算机代码。
kbd定义键盘码。
samp定义计算机代码样本。
tt定义打字机代码。
var定义变量。
pre定义预格式文本。

引用文本：

标签描述
abbr定义缩写。
acronym定义首字母缩写。
address定义地址。
bdo定义文字方向。
blockquote定义长的引用。
q定义短的引用语。
cite定义引用、引证。
dfn定义一个定义项目。

HTML 文件路径：

路径描述
<img src="picture.jpg">picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg">picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg">picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg">picture.jpg 位于当前文件夹的上一级文件夹中

HTML5 语义元素:

说明：语义元素是拥有语义的元素

标签描述
article定义文章。
aside定义页面内容以外的内容。
details定义用户能够查看或隐藏的额外细节。
figcaption定义 figure 元素的标题。
figure规定自包含内容，比如图示、图表、照片、代码清单等。
footer定义文档或节的页脚。
header规定文档或节的页眉。
main规定文档的主内容。
mark定义重要的或强调的文本。
nav定义导航链接。
section定义文档中的节。
summary定义 details 元素的可见标题。
time定义日期/时间。

URL：

URL：统一资源定位器用于定位万维网上的文档（或其他数据）

网址格式：

  • scheme – 定义因特网服务的类型。最常见的类型是 http
  • host – 定义域主机（http 的默认主机是 www）
  • domain – 定义因特网域名，比如 w3school.com.cn
  • :port – 定义主机上的端口号（http 的默认端口号是 80）
  • path – 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  • filename – 定义文档/资源的名称
Scheme访问用于…
http超文本传输协议普通网页，不加密。
https安全超文本传输协议安全网页，加密所有信息交换。

HTML 字符实体：

说明：使用时前加&符号

显示结果描述实体名称实体编号
空格nbsp;#160;
<小于号lt;#60;
>大于号gt;#62;
&和号amp;#38;
“引号quot;“
‘撇号‘ (IE不支持)‘
￠分（cent）cent;¢
£镑（pound）pound;£
¥元（yen）yen;¥
€欧元（euro）euro;€
§小节sect;§
©版权（copyright）copy;©
®注册商标reg;®
™商标trade;™
×乘号times;×
÷除号divide;÷
]]> https://www.qiqin-chang.cn/html/feed/ 0