HTML的基础知识（1）

来源：互联网发布：mac不能播放视频编辑：程序博客网时间：2024/05/23 21:49

一、元素

（1）元素的语法：

html元素以该是标签起始，以结束标签终止；元素的内容是开始标签和结束标签之间的内容；
注：没有内容的元素是空元素“br、hr”

（2）属性：

html元素可以设置属性，属性可以在元素中添加附加信息。一般描述于开始标签，并且属性总是以名称/值对的形式出现。name=“value”

二、html常用的标签介绍

（1）标题

  <h1></h1>    <h2></h2>    <h3></h3>    <h4></h4>    <h5></h5>    <h6></h6>

应该将h1用于主标题、其后是h2、再其次是h3,一次类推。

使用说明：标题标签常常使用在一个网页中唯一标题、重要栏目、重要标题等情形下；针对搜索引擎来说是告诉了不同标签下代表不同的重要级别内容。如果你在一个网页中使用了h1和h2标签中都含有一个相同的关键字，搜索引擎也会格外注重你所关注的关键字与内容。切记不能滥用。

（2）段落

<p><p/>

浏览器会自动地在段落的前后添加空行

折行 br如果想不产生一个段落，只进行换行时使用。强制换行作用

br和p的区别和相同

相同：br和p都是有换行的属性；

不同：
1、段落标签p与换行br标签，使用上的区别，p是一对个标签，br是一个单独标签；

2、br是一个小换行，p是大换行；当然我们也可以通过CSS去改变这个换行的间距;

 p{        margin: 0;        padding: 0;     }

3、段落p标签将让上下段文字有一定的距离，大概是两倍line-height行高距离；
区别于p段落标签，br标签我们用于文段换行排版。换行后上下行文字距离是按line-height行高实现间距的。通常同等初始化下网页里，要实现上下文字间隔相同，2个br换行标枪相当于使用p段落标签

对输出的提醒：
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格

（3）文本格式化

1、文本的加粗和斜体：

加粗：b或者strong

斜体：i或者em

通常会使用strong替换b.使用em替换i
因为 b和i定义了粗体和斜体，但是strong和em意味着你要呈现的文本是重要的，所以要突出显示。

strong和b在加粗上没有太大的区别，只是strong在语义上有加强语气的作用。

2、字号的大小

big定义大号字 small定义小号字。

3、上标和下标

<div>  文本的下标<sub>下标</sub>   文本的上标<sup>上标</sup>       </div>

4、预处理格式文本

  <pre>对空格和空行进行控制    <pre>        预处理格式    会保留        输入时的格式   空格  换行        都是原来的样式输出    </pre>

5、计算机标签常用语显示计算机/编程代码

  <code>计算机输出</code>    <br/>    <kbd>键盘输入</kbd>    <br/>    <tt>打字机文本</tt>    <br/>    <samp>计算机代码样本</samp>     <br/>     <var>计算机变量，输出是斜体</var>

这些都在语义化上有表现的地方，在输出样式上没有多大的区别。

6、地址

 <address>     写信人：<br/>     收信人：<br/>     日期：<br/>  </address>

输出的是斜体的

7.缩写和首字母缩写

abbr 缩写
acronym首字母缩写

8.文字的方向

bdo 调整文字的方向使用的属性是
dir=“ltr” 正常的从左到右
dir=“rtl” 反向的从右到左
执行结果：

块引用
(1)块引用

<q>包裹这的是一个带有引号的块引用。 <p>WWF's goal is to:        <q>Build a future where people live in harmony with nature.</q>        We hope they succeed.        </p>WWF's goal is to: “Build a future where people live in harmony with nature.” We hope they succeed.

(2)定义一个长引用：blockquote

(3)定义一个引用印证，比如一个作品的名字cite会出现斜体
在html5中 cite标签定义作品的标题
在html4中cite定义一个引用

(4)定义一个项目 dfn

10、删除字效果和插入字效果

删除字使用：del 会有一个中划线的效果
插入字：ins 会有一个下划线的效果

三、头部

1、title定义了HTML文档的标题
title定义文档的标题，它是head部分中唯一必须的元素。
title的作用：定义了浏览器工具栏的标题，当网页添加到收藏夹的时候，显示在收藏夹中的标题；显示在搜索引擎结果页面的标题。

2、base定义了所有连接的URL。使用base定义页面中所有链接默认的链接目标地址。

3、meta使用meta提供了元数据，这些元数据不会显示在页面上，但是会被浏览器解析
元素来描述HTML文档的描述，关键词，作者，字符集
通过name设置关键字；name=“keywords”;content=“设置作者的信息”；

   <!-- 每30秒钟刷新当前界面 -->    <meta http-equiv="refresh" content="30" />    <!-- 定义作者 -->    <meta name="author" content="Hege Refsnes" />    <!-- 为网页定义描述内容 -->    <meta name="description" content="Free Web tutorials on HTML and CSS" />    <!-- 搜索引擎定义关键词 -->    <meta charset="utf-8" name="keywords" content="HTML,CSS,XML,XHTML,JavaScript" />

meta的属性

（a)
charset(属性名)
character_set （属性值）
定义文档的字符编码（描述）
（b)
content (属性名)
text （属性值）
定义与http-equiv或name属性相关的元信息

（c)
http-equiv (属性名)
content-type（属性值）, default-style,refresh
把content属性关联到HTTP头部
(d)
name (属性名)
application-name,author,description ,generator ,keywords（属性值）
把content属性关联到一个名称

4、head用于定义文档的头部，它是所有头部元素的容器。在head中可以使用的元素base，link，meta，script，style和title

link通常定义文档与外部资源之间的关系。链接外部资源；
style元素中需要制定杨慧文件渲染HTML文档

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>CSS创建</title>    <base href="//www/runoob.com/images/" target="_blank"></base>   </head><body>     <img src="log.png">注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://www.runoob.com/images/logo.png"     <a href="//www.runoob.com">菜鸟教程</a>- 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。</body></html>

0 0