web前端学习笔记：第一课-HTML标签元素

时间：2023-01-06 20:05:00

web前端第一课

HTML基本语法规则

  1. XHTML文档的扩展名通常是.html或者.htm
  2. XHTML元素使用XHTML标记定义，每个标记都出现一对尖括号中（<>），第一个标记为开始标记，后一个标记为结束标记（也叫“关闭标记 ”）。在开始标记与结束标记之间的内容叫元素内容。如：
    <p>这是一个段落</p>

定义HTML文档总体结构

所有的XHTML文档都有三个文档级的元素：html、head和body。
一个最小的XHTML文档模板代码如下：
<!DOCTYPE html>




标题部分


正文部分...

  1. html元素的标记之间是XHTML文档的内容，这个元素告诉客户端浏览器文档的开头和结尾；
  2. head元素定义XHTML文档的标题部分；
  3. meta标签声明字符编码集；
  4. body标记定义网页正文部分。

综上所述:在一个XHTML文档中，html、head、body元素必须出现，且head元素中必须包含有title标签。

添加HTML文档正文

一、定义正文标题

XHTML提供了六个标题标签，h1、h2、h3、h4、h5、h6，分别代表六个级别的标题，其重要性依次递减。
代码如下：

<h1>h1标记，表示一级标题</h1>
<h2>h2标记，表示二级标题</h2>
<h3>h3标记，表示三级标题</h3>
<h4>h4标记，表示四级标题</h4>
<h5>h5标记，表示五级标题</h5>
<h6>h6标记，表示六级标题</h6>

显示效果如下：

h1标记，表示一级标题
h2标记，表示二级标题
h3标记，表示三级标题
h4标记，表示四级标题
h5标记，表示五级标题
h6标记，表示六级标题

二、定义一个段落

XHTNL文档中p标签表示一个段落（Paragraph）
示例如下：
<p>这是p标记，它表示一个段落。</p>

显示结果如下：

这是p标记，它表示一个段落。

三、定义引用文本

在XHTML文档中使用blockquote标签界定引用文本块。

四、定义列表

  • 有序列表：用ol标签（Ordered Lis）
  • 无序列表：用ul标签（Unordered List）
  • 定义列表：用dl标签（Defined List）

代码如下：

`<!-- 无序列表 Unordered List -->  
<ul>  
    <li>无序标记，每个列表以小黑点标识</li>  
    <li>无序标记，每个列表以小黑点标识</li>  
    <li>无序标记，每个列表以小黑点标识</li>  
    <li>无序标记，每个列表以小黑点标识</li>  
</ul>  
<!-- 有序列表 Ordered List -->
<ol>  
    <li>有序标记，每个列表以数字形式标识</li>  
    <li>有序标记，每个列表以数字形式标识</li>  
    <li>有序标记，每个列表以数字形式标识</li>  
    <li>有序标记，每个列表以数字形式标识</li>  
</ol>  
<!-- 定义列表 Defined List-->  
<dl>  
    <dt>猫</dt>  
    <dd>一种可爱的动物</dd>  
</dl>`

显示效果如下：
  • 无序标记，每个列表以小黑点标识
  • 无序标记，每个列表以小黑点标识
  • 无序标记，每个列表以小黑点标识
  • 无序标记，每个列表以小黑点标识

  1. 有序标记，每个列表以数字形式标识
  2. 有序标记，每个列表以数字形式标识
  3. 有序标记，每个列表以数字形式标识
  4. 有序标记，每个列表以数字形式标识
  5. 有序标记，每个列表以数字形式标识

猫
一种可爱的动物

五、定义预排文本

在XHTML中有时我们需要保持文本原来的格式，于是我们需要用到pre标签。
代码如下：

<pre>

2.9

+ 1.2

-----------

4.1

</pre>

显示效果如下：
2.9
+ 1.2
-----------
4.1

六、定义分区块文本

div标签---未完待续

七、跨越多个字符

如果需要在正文段落中，对部分字符进行格式化，我们需要用到span标签。
代码如下：
<p>啦啦<span style="color:red;">啦啦啦</span>啦啦</p>
显示效果如下：

啦啦啦啦啦啦啦

八、特殊字符（实体）

常用的实体字符


































实体 含义
&nbsp; 空格
&lt; 小于符号<
&gt; 大于符号>
&copy; 版权符号©
&reg; 已注册符号®
&amp; and符号&
&amp#151; 长破折号

标签：

相关文章