网页建设常用html和css语法总结
_TS_ 2021.07.30
前言：此篇是我在建站过程中使用过的html和css语法总结，以供本人回顾和新手参考，后续会有更新和修正。
1.html(超文本标记语言)的结构
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
2.常用字符
" " 代表 "空格"
" " 代表 "双空格"
"<br />" 代表 "换行"
""" 代表 "英文双引号"
"&" 代表 "&"
"<" 代表 "<"
">" 代表 ">"
"×" 代表 "×"
'÷" 代表 "÷"
3.在网页中插入超链接
公式1：<a href="url">Link text</a>
说明：url是目的网页的网址（网址需以http://或https://开头）；Link text是自定义的文本信息；除了文本，超链接也能以图片、视频等形式存在。
公式2：<a href="url" style="color:#113355" target="_blank" title="tip">Link text</a>
说明：设置超链接的字体颜色和打开方式。target="_blank"设置在新窗口打开超链接，不写则默认在原有窗口打开超链接；title="tip"作用是在鼠标悬浮在超链接上时会显示tip文字内容作为提示信息。
公式3：<a href="target_url"><img src="image_url"></a>
说明：对图片设置超链接。target_url是目标网址；image_url是图片的网络地址；
公式4：<a href="url" download="name">Link text</a>
说明：用于下载文件。url是文件的网络地址；name是下载的文件名；
3.在网页中插入图片
公式：<img src="url" title="text1" alt="text2">
说明：title属性为设置该属性的元素提供建议性的信息，大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息。[1] alt属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，浏览器将显示这个替代性的文本。[2]
4.在网页中插入音频 [3]
公式1：插入ogg格式的音频，并设置为循环播放(loop)
<audio controls="controls" loop="loop">
<source src="url.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
公式2：插入mp3格式的音频，并设置为自动播放(autoplay)
<audio controls="controls" autoplay="autoplay">
<source src="url.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
说明：根据音频格式和具体需求选择相应代码，具体例子可参考tosho.icu
4.在网页中插入视频
<video controls="controls" poster="image_url" width="500" height="290">
<source src="url.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
说明：video标签一共支持三种格式： Ogg、MPEG4、WebM，三种格式对于主流浏览器的兼容性各不相同。[3]
video标签的可选属性：
width/height: 视频窗口的宽度/高度
controls: controls，显示播放按钮进度条之类的控件。
autoplay: autoplay，视频在准备就绪后马上播放。
loop: loop，循环播放
muted: muted，静音播放
poster: url(图片地址)，指定视频没有加载完成时显示的图像，一直到视频开始播放为止。poster引用的图片名称是中文时可能会导致图片无法加载。
有空会继续写……
——END——