HTML基础语法回顾

最新推荐文章于 2024-05-21 18:11:13 发布

CoderCXF

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量159

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_42119041/article/details/104663045

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在学习 HTML 的过程中有一个感受就是知识并不困难，但是比较繁琐，需要自己去总结消化，以及适当的记忆才能用好。所以在学习完后就想做一个系统的梳理，于是就有了这篇文章，主要是有两个目的：

自己消化总结梳理知识知识点，主要用于自己学习，如果想更好学习，推荐大家去 W3shool官网学习
方便自己以后复习(毕竟自己的资料才最好接收到)

标题

HTML 的标题是通过 <h1> - <h6> 标签进行定义的：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

段落

HTML 段落是通过 <p> 标签定义的：

<p>我是一个段落</p>

超链

HTML 超链接是通过 <a> 标签进行定义的：

<a href="url">链接显示文本</a>

HTML 标签当然可以嵌套，于是就有将一张图片设置为超链接：

<a href="url"><img src="url" /></a>

图像

HTML 图像是通过 <img> 标签定义的：

<img src="url" width="" height="" />

<img> 标签是一个自闭合标签，其他的标签一定要手动关闭。避免不必要的麻烦。

脚本

<script> 标签是定义插入一段脚本的标签，必需属性是 type,默认值为 type="text/javascript" --表示插入的是一段 javascript 脚本：

<script type="text/javascript">
   document.write("HelloWorld!");
</script>

该脚本会在浏览器输出 HelloWorld!。以后在插入脚本的时候一般都是链接外部脚本文件，所以 script 元素一个经常使用的属性是 src，地址就是外部的脚本文件位置。

表格

HTML 中表格由 <table> 标签定义。每个表格均有若干行(由 <tr> 标签定义)，每行被分割为若干单元格(由 <td> 标签定义)。td 指单元格（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
例如我们要创建一个两行三列的表格：

<table border="1">
    <tr>
        <td>1,1</td>
        <td>1,2</td>
        <td>1,3</td>
    </tr>
        <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
<table>

如果不定义边框属性 border=“1” 的条件下，表格将不显示边框

上述表格在浏览器中显示如下：

1,1	1,2	1,3
2,1	2,2	2,3

<caption> 还可以用来定义表格的标题：

<table border="1">
    <capation>这是一个表格</capation>
    <tr>
        <td>1,1</td>
        <td>1,2</td>
        <td>1,3</td>
    </tr>
        <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
<table>

这是一个表格

1,1	1,2	1,3
2,1	2,2	2,3

<th> 用来定义表格的表头：

<table border="1">
    <caption>人事情况</caption>
    <!--必须要定义一个行-->
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>程序员</td>
    </tr>
        <tr>
        <td>王五</td>
        <td>35</td>
        <td>产品经理</td>
    </tr>
<table>

人事情况
姓名	年龄	职业
张三	25	程序员
王五	35	产品经理

框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。
HTML 框架是通过 <frameset> 标签定义的，可以定义水平框架和垂直框架：
水平框架：

<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html"> <!--框架1(文档1)-->
  <frame src="/example/html/frame_b.html"> <!--框架2(文档2)-->
  <frame src="/example/html/frame_c.html"> <!--框架3(文档3)-->
</frameset>

垂直框架：

<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html"> <!--框架1(文档1)-->
  <frame src="/example/html/frame_b.html"> <!--框架2(文档2)-->
  <frame src="/example/html/frame_c.html"> <!--框架3(文档3)-->
</frameset>

内联框架

<iframe> 用于在网页内显示网页。使用方法：

<iframe src="URL"></iframe> 
<!--其中URL指的是另一个网页的地址(文档).html文件-->

<iframe> 的基本属性宽度和高度：

<iframe src="URL" width="200" height="100"></iframe>

在浏览器中显示如下：(生成一个200*100的框)：

格式化

文本格式化标签

文本格式化标签有很多，但是文本样式都是通过 css 进行定义，所以真正使用的场景很少，主要有以下这些：

<abbr> --粗体(blod)
<em> --强调(emphasize)，显示为斜体
<i> --斜体(italic)
<strong> --加重语气，也显示为斜体，但是语气更强，一般不使用
<ins> --下划线(insert)
<del> --删除线(delete)
<sup> --上标
<sub> --下标

预格式化标签

因为在格式化的过程中，html 标签中的多次空格和换行默认为只有一次空格和换行，所以要想保留自己的格式，需要使用标签 <pre>。
HTML 预格式化是通过 <pre> 标签定义的：

<pre>
我会       保留  自己的格式


可以显示多次换行以及多个空格

</pre>

最后的输出显示为：

我会       保留  自己的格式


可以显示多次换行以及多个空格

程序代码标签

HTML 中代码是通过 <code> 标签定义的：

<code>
  var result = function sum(num1, num2) {
      return num1+num2;
  }
</code>

但是最后的输出可能超出我们的预料，输出会是下面这样：

var result = function sum(num1, num2){return num1+num2;}

所以要想保留代码风格，还要加上 <pre> 标签进行预格式化：

<pre>
    <code>
    var result = function sum(num1, num2) {
          return num1+num2;
  }
    </code>
</pre>

最后的输出才是我们想要的结果：

    
    var result = function sum(num1, num2) {
          return num1+num2;
  }

引用和术语定义标签

引用和引用块，<q> 和 <blockquote> 分别是引用和块引用的标签：

<p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p>

最后的输出会自动加上双引号;

<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

浏览器一般会对 <blockquote> 标签进行缩进处理，其他没有不同

缩写标签

<abbr> 元素定义缩写或者是首字母缩写。
具体含义看下面的例子：

<p><abbr title="World Health Organization">WHO</abbr></p>

列表

无序列表

<ul> 标签用于定义无序列表，<li> 用于定义列表项：

<ul>
    <li>面包</li>
    <li>牛奶</li>
    <li>沙发</li>
</ul>

最终的输出就是如下所示：

面包
牛奶
沙发

有序列表

<ol> 标签定义有序列表，同样， <li> 用于定义列表项：

<ol>
    <li>面包</li>
    <li>牛奶</li>
    <li>沙发</li>
</ol>

最终输出结果：
1.面包
2.牛奶
3.沙发

自定义列表

除了使用 <ul> 和 <ol> 列表之外，我们还可以自定义列表，使用的标签有：<dl> 、<dt> 和 <dd>：

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

在浏览器显示如下：

Coffee

Black hot drink

Milk

White cold drink

表单

HTML 表单用于搜集不同类型的用户输入。表单并不会显示，可以看做是一个可以容纳表单元素的容器。
HTML 中使用 <form> 标签定义表单。

<form>
    form element(内部定义的是表单元素)...
</form>

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

input元素

<input> 元素是最重要的表单元素。不需要关闭。
根据 type 属性不同，<input> 元素有很多形态。 type 属性是必需属性。
经常使用的值有：text 、password、submit 、radio、checkbox

使用方法就是直接添加值即可：
text值：

<form>
    用户：<input type="text"><br />
    密码：<input type="text">
</form>

浏览器显示如下：

用户：密码：

submit 值：

<form>
    用户：<input type="text"><br />
    密码：<input type="text"><br />
    <input type="submit">
</form>

浏览器中显示如下：

用户：
密码：

radio 值：

<input type="radio">male<br/>
<input type="radio">femal<br/>

在浏览器中显示如下：
male

femal

除了input 元素除了 type 属性外，当然也有其他的属性，比如经常使用的是在type="text"时，添加占位符属性：placeholder;在type=“submit” 时，添加 value 属性，表示的是提交按钮。

button 属性

除了 input 元素之外，还有一些其他的元素，有 <button>、<select> 和 <textarea>
HTML中使用 button 定义按钮：

<button type="button" onclick="alert('Hello World!')">点击我！</button>

浏览器中的显示效果是：
点击我！

select元素

select 元素定义下拉列表：

<p>班级：</p>
<select>
    <option value="1班">1班</option>
    <option value="2班">2班</option>
    <option value="3班">3班</option>
    <option value="4班">4班</option>
</select>

浏览器中显示：

班级

1班 2班 3班 4班

textarea元素

textarea 元素定义文本域:

<textarea rows="10" cols="20">  <!--注意定义行数和列数，否则显示不出来-->
    The cat was playing in the garden.
<textarea>

浏览器中显示如下：

The cat was playing in the garden.

在 HTML5 中还添加了一些较新的类型，这里我们不过多的讨论，具体的会放在 HTML5 中讲解，其实也很简单，只要分清使用的场景即可!

音频/视频

首先要明白，音频和视频文件目前没有较好的使用方法，因为各个浏览器的兼容性问题，但是在 HTML5 之后，我们找到了一种比较好的方法，但也不是完美的。
在HTML5 之前，插入音频和视频主要使用两个标签(元素)：<embed> 和<object>

插入音频文件

1 使用 <embed> 标签：

<embed src="url" height="100" width="100" />

其中 src属性是自己插入音频资源位置；
问题：

标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

2 使用 <object> 标签：

<object src="url" height="" width="" />

其中 src属性是自己插入音频资源位置；
问题：

不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

3 <audio> 元素
<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>

<audio> 元素有几个常用的属性：

control: 是否允许用户控制暂停、播放、调节音量等操作，一般都要加上；
autoplay:是否允许资源自动播放，一般是不会的，会对带来不好的用户体验；
loop: 是否循环播放，一般也不设置，看具体的场合，需要设置的场合很少。

4 最好的音频解决方法

<audio controls="controls" width="100" height="100">
   <source src="song.mp3" type="audio/mps" />
   <source src="song.ogg" type="audio/ogg" />
   <embed src="song.mp3" width="100" height="100" />
   Your bowser is not support audio element!
</audio>

插入视频文件

视频和音频的方法是一样的，都有三个标签进行插入：<embed>、object 和 <video>
1 使用 <embed> 标签：

<embed src="url" height="100" width="100" />

其中 src属性是自己插入视频资源位置；
问题：

标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对视频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该视频。
如果用户的计算机未安装插件，无法播放视频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

2 使用 <object> 标签：

<object data="url" height="" width="" />

其中 src属性是需要插入视频资源位置；
问题：

不同的浏览器对视频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该视频。
如果用户的计算机未安装插件，无法播放视频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

3 <video> 元素
<video> 是 HTML5 元素，使用例如：

<video controls="controls" width="300" height="200">
  <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 this video format.
</video>

<video> 元素有几个常用的属性：

control: 是否允许用户控制暂停、播放、调节音量等操作，一般都要加上；
autoplay:是否允许资源自动播放，一般是不会的，会对带来不好的用户体验；
loop: 是否循环播放，一般也不设置，看具体的场合，需要设置的场合很少。

4 最好的解决方案

<video controls="controls" width="300" height="200">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <embed src="song.mp3" width="300" height="200" />
Your browser does not support this video format.
</video>

这就是 HTML 中所有的基本的元素，HTML5 略有涉及，有关 HTML5 详细的学习见下一篇文章。

参考：

[1] W3school官网

CoderCXF

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础语法回顾

文章目录标题段落超链图像脚本表格框架内联框架格式化文本格式化标签预格式化标签程序代码标签引用和术语定义标签缩写标签列表无序列表有序列表自定义列表表单input元素button 属性select元素textarea元素音频/视频插入音频文件插入视频文件在学习 HTML 的过程中有一个感受就是知识并不困难，但是比较繁琐，需要自己去总结消化，以及适当的记忆才能用好。所以在学习完后就想做一个系统的梳理，...
复制链接

扫一扫