html4-CSDN博客

本文链接：https://blog.csdn.net/qq_42919799/article/details/113872953

html4

注意：

所有的标签都是由"<>"包裹
元素内容存在于开始标签和结束标签中间的
br标签属于单标签，建议直接在使用时写为 <br/>

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

注意：herf 在定义链接时，在结尾时添加一个正斜杠，若不写，服务器将产生两次请求，由服务器添加尾部的斜杠。

href属性用来定义链接的地址
target 属性用于设置点击链接是否在新窗口中打开

图像 img

<img src="URL" alt="替换文本" height="40" width="40">

src ：定义图像的url地址
alt ：定义一串预备可替换的文本(当图像无法正常显示时，显示 alt 设置的预备信息)
width : 定义图像的长度
height ：定义图像的高度

地图 map

area ：定义图像地图中的可点击区域

文本格式化

b、strong : 加粗
i、em : 斜体
sub ：下标文本
sup ：上标文本
del : 删除的文本
ins ：插入的文本
kbd :键盘输入
pre：预格式化文本
small：更小的文本
bdo：文字方向

head 元素中包含头部标签元素

title ：定义文档的标题
base ：描述基本的链接地址，该标签作为html文档中所有链接标签的默认标签
link ：标签定义了文档与外部资源之间的关系，通常用于链接到样式表
style ：定义html文档的样式文件引用地址，也可以直接添加样式来渲染html文档
meta ：标签提供了元数据，用于指定网页的描述，关键字，作者，网页刷新率
script ：标签用于加载脚本文件

表格 table

<table border="1">
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        <tr>
            <td>表格数据</td>
            <td>表格数据</td>
        </tr>
    </table>

border ：定义边框尺寸
table ：定义表格
th：标签定义表头，粗体居中文本
tr：定义表格的行
td：定义表格单元
caption：定义表格标题
colgroup：定义表格列的组

列表

无序列表
<ul>
  <li>name</li>
  <li>name</li>
</ul>

有序列表
<ol>
  <li>name</li>
  <li>name</li>
</ol>

自定义列表
<dl>
  <dt>name1</dt>
  <dd>name1.1</dd>
  <dt>name2</dt>
  <dd>name2.2</dd>
</dl>

ul：无序
ol：有序
dl>dt>dd：自定义列表
li：定义列表项

块级元素（块级元素在浏览器显示时，会以新行开始或结束）

h1～h6
p
ul
table
div （是块级元素，可以用于组合其他html元素的容器）

内联元素（内联元素在显示时不会以新行开始）

b
td
a
img
span （是内联元素，可用于文本的容器）

表单 form

<form action="demo_form.php" method="post/get">
        <input type="text" name="email" size="40" maxlength="50">
        <input type="password">
        <input type="checkbox" checked="checked">
        <input type="radio" checked="checked">
        <input type="submit" value="Send">
        <input type="reset">
        <input type="hidden">
        <select>
        <option>苹果</option>
        <option selected="selected">香蕉</option>
        <option>樱桃</option>
        </select>
        <textarea name="comment" rows="60" cols="20"></textarea>
</form>

type = “text”:文本域
type = "password"密码字段
type = "radio"单选项选项框
type = "checkbox"复选框
type = “submit” 提交按钮

脚本

script 定义客户端脚本
noscript 定义当不支持脚本的浏览器输出的文本信息

字符实体

&nbsp；空格
<小于号
<大于号
©等同于©

插件

object

<object data="./ts1/img/vg2j58.jpg" type=""></object>

embed

<embed src="./ts1/img/vg2j58.jpg" type="">

音频

插件

<embed height="50" width="100" src="horse.mp3">
<object height="50" width="100" data="horse.mp3"></object>

embed
object

html5

audio

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

注意：解决在不同环境都能播放音频

HTML5 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试元素。

参考链接：https://www.axihe.com/edu/html/edu/sounds.html

视频

videos

<video width="320" height="240" 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>

embed

<embed src="intro.swf" height="200" width="200">

object

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

HTML5元素

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
    您的浏览器不支持 video 标签。
</video>

推荐的方法

<video width="320" height="240" 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>