一 、元素
(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>