HTML

2023-10-03 18:02:40

HTML5的基本结构

<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
主体内容
</body>
</html>

起始标签<元素名> 终止标签</元素名>
标签是否大小写无所谓。

元素

常见元素：块级元素（block）和内联元素（inline）

HTML

空元素：没有内容的html,空元素是在起始标签里面被关闭的，</br>

  • 文档类型声明<!DOCTYPE>

- 根标签<html>

首部标签<head>

可包含 <title>和<meta>等标签，用于声明页面标题、字符集和关键词等

1、网页标题标签<title>

可以省略，但尽量就不要省略了，否则网页标题就会显示为“无网页标题”
2、基础地址标签<base>
这个标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档使用了相对路径时，浏览器会用<base>标签指定的URL进行补全。

<head>
<base herf="http://localhost/images/"/>
</head>

<body>
<img src="sunflower.jap"/>
</body>
  • 元数据标签<meta>
    定义网页上的字符集、关键词、描述、作者等信息。
    1）字符集声明
    2）关键词声明
    格式： <meta name="description" content="HTML5,CSS3,jQuery"/>
    3）页面描述声明
 <meta name="description"content="内容，CSS3，jQuery"/>
  • 样式标签<style>
    这个呢就是可以定义文档中指定区域的字体风格、背景颜色、对齐方式等各类的样式信息。
    eg.
<head>
<style>
p {color: red}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>

先举个例子，以后再说哈

  • 链接标签<link>
    它只出现在首部标签和中，通常用于连接外部样式表。

  • 脚本标签<script>

  • 主体标签<body>

- HTML5文档注释

格式： <!--你要注释的内容-->

html中的多行注释语法，标记内可转行。与c语言里面的/* */,Java里面的/** */， /* */作用一样。类比html中的双标签。 //在c，java等中属于单行注释。不能够在标记内转行。类比html中的单标签。

文档规范

1.文件类型

文件后缀名：.html 或者 .htm (兼容）
2.元素标签格式
除了 DOCTYPE大写 以外都要小写
标签一般都是成双存在，但是换行标签<br>和水平线标签<hr>
是可以成单存在的。
3.字符实体的使用
有些字符在HTML中不可以使用比如>，<，连续空格，等；这些被称为字符实体
格式 ： &实体名称； &#实体数字；
以&开头 ；结尾
具体可以看看下面哈
HTML

4.图像文件的使用

JPEG，GIF，PNG,图像格式一般有这些
1）JPEG格式
后缀 .jap .JPG

  • 支持高级压缩
  • 弹性压缩比
  • 广泛支持互联网标准
    2）GIF 格式
    后缀 .gif .GIF
    3）PNG格式
    后缀 .png .PNG
  • 文件体积小
  • 最后一点呢就是将4.01转换为5.0

HTML5保留的常用标签

基础标签

1.段落标签<p>

<p>和</p>用于形成一个新的段落

2.标题标签<h1>~<h6>

HTML5
使用<hn>和</hn>来标记文本中的标题，其中n需要替换成数字。从1~6共有6级。数字越小，标签所标记的字体越大。

标签标题的默认状态为左对齐显示的黑体字。

3. 水平线标签<hr>

水平线标签<hr>用于在网页上画一条水平线，从而在视觉上将文本分段。<hr>标签没有结束标签！！！！

默认情况下是一条宽度为1像素的黑色水平线

4.换行标签<br>

这个标签呢是用于在当前位置产生一个换行，相当于一次回车键所产生的效果。该标签单独使用

（提示 <hr>也是）

建议使用该标签代替回车键，因为回车键所产生的多个连续换行会被浏览器自动忽略。

每次只能换一行，如果需要多次换行，必须写多个
标签
tips：若需要保留换行，tab，空格等格式，可以将p标签改为pre标签。（换行 - hr标签，空格 - ）

文本格式标签

1.斜体字标签<i>

用于将其首尾标签之间的文本内容显示为斜体字型效果。

2.粗体字标签<b>和<strong>

粗体字标签<b>和<strong>均可以将首尾标签之间的文本内容显示为粗体字型效果。区别在于使用<strong>标签的文本内容被认为是重要的内容

3.上标标签<sup>和下标标签<sub>

<sup>和</sup>之间显示的是上标的样式； <sub>和</sub>之间显示的是下标的样式。

4.修订标签<del>和<ins>的简单应用

del删除线
ins下划线

5.预格式化标签<pre>

预格式化标签<pre>和</pre>可以将所标记的文本内容在显示时
保留换行与空格的排版效果。在没有使用标签的普通情况下，浏览器将多次使用回车键形成的换行默认为一次换行，并且把多次空格键形成的连续空格默认为单个空格，在段落开头的连续空格甚至会被忽略。当需要多次使用<br>和&nbsp;符号分别进行换行和空格时，可以考虑使用此标签提高效率。

<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>预格式化的简单应用</title>
</head>
<body>
<!--使用预格式化标签<pre>的使用效果-->
<h3>预格式化标签的用法</h3>
<hr/>
## 文本格式标签
## 1.斜体字标签`<i>`

> <i>用于将其首尾标签之间的文本内容显示为斜体字型效果。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>斜体字体的简单应用</title>
</head>
<body>
<h3>斜体字标签的简单用法</h3>
<hr>
我是非斜体字
<br>
<i>我是斜体字</i>
</body>
</html>

2.粗体字标签<b>和<strong>

粗体字标签<b>和<strong>均可以将首尾标签之间的文本内容显示为粗体字型效果。区别在于使用<strong>标签的文本内容被认为是重要的内容

<DOCTYPE html>
<html>
<head>
<title>粗体字标签的简单应用</title>
</head>
<body>
<h3>粗体字标签的用法</h3>
<hr>
我是非粗体字
<br/>
<br/>
<b>我是粗体字（使用了b标签）</b>
<br/>
<br/>
<strong>使用了strong标签</strong>
</body>
<html>

3.上标标签<sup>和下标标签<sub>

<sup>和</sup>之间显示的是上标的样式； <sub>和</sub>之间显示的是下标的样式。

<DOPCTYPE html>
<html>
<head>
<title>上标与下标标签的简单应用</title>
</head>
<body>
<!--使用上标标签<sup>与下标标签<sub>的效果-->
<h3>上标标签与下标标签的简单应用</h3>
<hr/>
上标标签的用法；2<sup>10</sup>=1024<br/><br/>
下标标签的用法；二氧化碳的缩写为CO<sub>2</sub>
</body>
<html>

4.修订标签<del>和<ins>的简单应用

del删除线
ins下划线

5.预格式化标签<pre>

预格式化标签<pre>和</pre>可以将所标记的文本内容在显示时
保留换行与空格的排版效果。在没有使用标签的普通情况下，浏览器将多次使用回车键形成的换行默认为一次换行，并且把多次空格键形成的连续空格默认为单个空格，在段落开头的连续空格甚至会被忽略。当需要多次使用<br>和&nbsp;符号分别进行换行和空格时，可以考虑使用此标签提高效率。

列表标签

1.有序列表标签<ol>

ordered list

有序列表标签<ol>和</ol>用来定义带有编号的有序列表，需要和列表项目标签<li>配合使用。
列表项目标签<li>标记在每个表项的开头，默认为缩进显示效果。

通俗来说，就是<ol>标签要和<li>标签一起使用

有序列表默认的起始数值是1

  • 可用start属性重新定义编号起始值，格式为：<ol start="n">
    其中n需要替换为指定的编号数值，写成几就代表从几开始编号。
    默认的编号样式是阿拉伯数字，如果需要使用其他的，需要用type属性进行声明。
<ol type="类型值“>

HTML

2.无序列表标签<ul>

<ul>和</ul>用于定义不带编号的无序列表,也需要和 li 标签配合使用。

HTML

3.定义列表标签<dl>

用于进行词条定义的特殊列表，每条表项需要结合下面两个标签一起使用

词条标签<dt>，需要标记在每个词条的开头
定义标签<dd>，需要标记在每个定义部分的开头，默认为全文缩进显示

图像标签<img>

<img>用于在网页中嵌入图片，该标签不需要结束标签，可单独使用。

（hr,br）也一样不需要结束标签。

HTML标签有两个常用属性：src属性和alt属性。src(source)用于指明图像的存储路径，通常是URL形式。alt(alternative)用于无法找到图像时显示替代文本，该属性可省略不写。

基本格式<img src="图像文件 URL" />
其中“图像文件 URL"替换为图片储存的路径，例如，图片文件为111.jap,并存放在本地的222文件夹中，则可以写为

<img src="http://localhost/222/111.jap"/>

如果图片和网页文件在同一个目录中，则直接写图片名称即可。

<img src="111.jap"/>
上一篇：jsx编程思维


下一篇：html怎么进行圣杯布局