ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML

2022-02-21 08:32:45  阅读:204  来源: 互联网

标签:斜体字 换行 标签 空格 HTML 粗体 使用


HTML5的基本结构

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

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

元素

常见元素:块级元素(block)和内联元素(inline)

在这里插入图片描述

空元素:没有内容的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中不可以使用比如>,<,连续空格,等;这些被称为字符实体
格式 : &实体名称; &#实体数字;
以&开头 ;结尾
具体可以看看下面哈
在这里插入图片描述

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="类型值“>

在这里插入图片描述

2.无序列表标签<ul>

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

在这里插入图片描述

3.定义列表标签<dl>

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

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

图像标签<img>

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

(hr,br)也一样不需要结束标签。

标签有两个常用属性: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"/>

标签:斜体字,换行,标签,空格,HTML,粗体,使用
来源: https://www.cnblogs.com/missSherry/p/15917349.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有