Html_Head部分及基本块级标签_Day01

主要总结内容总结如下:

1. <!DOCTYPE>:

Html的文档类型声明。

声明该文件是Html 5文件,

让浏览器按照Html 5准备进行解析显示。

文档声明在Html文件中必须要有,而且必须写在文件最上方。

如:<!DOCTYPE html>

2. 注释:

写给程序员看的,网页不显示。

html中的注释的快捷键是:“Ctrl+/”。

3. <head></head> 头:

用于描述网页的一些关键信息,例如网页的配置、设置、关键字等。。。

这些信息,大多网页的浏览器看不到,但是对网页的解析至关重要!

4. <meat/> 标签用于描述网页的各种信息。

(1)其中:<meta charset="utf-8" />这是网页的编码格式为:UTF-8格式。

常见的中文编码格式有:

GB2312:国标码,简体中文;

GBK:扩展国标码,简体中文;

UTF-8:万国码,兼容各种语言的编码。常用!!!

(2)设置网页的关键字有助于搜索引擎的搜索。

name="keywords"表示这个meta标签设置的是网页的关键字;

content="..."表示关键字的详细信息,多个关键字用英文的逗号分开;

如:<meta name="keywords" content="杰瑞教育,H5周末班,网页开发" />

(3)设置网页的描述信息,搜索引擎搜索的时候,标题下面的一段文字!非常重要!!!

name="description"表示这个meta标签设置的是网页的详细信息;

content="..."表示描述信息的详细内容;

如:<meta name="description" content="这是我在杰瑞教育开发的第一个网页!" />

5. <title></title>:网页的标题,显示在浏览器选项卡上面的文字!

如:<title></title>

6. <link/>:链接网页的小图标:网页选项卡上的小图片!

rel=“icon” 表示当前link的作用是链接网页的图标;

href="img/icon.jpg"href表示图标的地址在什么地方。

如:<link rel="icon" href="img/icon.jpg" />

7. HTML的标签的基本分类:

1.块级标签:显示为块状,独占一行,自动换行。

2.行级标签:在一行中,从左往右依次排列,不会自动换行。

8. h标签:标题标签,显示为黑体加粗!!!

标题标签一共6种:

h1~h6:h1最大,h6最小!

如:<h1>这是H1标签</h1>

<h2>这是H2标签</h2>

<h3>这是H3标签</h3>

<h4>这是H4标签</h4>

<h5>这是H5标签</h5>

<h6>这是H6标签</h6>

9. <hr />标签:表示一条水平线。

如:<hr />

10. <p></p>标签:表示段落标签。相当于文章中的一段文字。

如:<p></p>

11. <br/>标签:

换行符。

注意:在代码中直接换行浏览器是不认识的,必须使用换行符<br/>告诉浏览器

这里要还行。

如:<br/>

12. <pre>标签:

表示预格式标签。会保留代码中的空格、回车等符号,直接在浏览器上显示。

常用于在网页中显示代码,保留代码格式。

如:<pre></pre>

13. <blockquote></blockquote>:块引用标签,表明一段话是从其他网站引用的。

有一个重要属性:cite:""表示这段话的引用来源,常放一个网站的地址。

但浏览器不显示。

如:<blockquote cite="http:www.jredu100.com"></blockquote>

今日练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>唐诗三百首</title>
		<link rel="icon" href="img/icon.jpg" />
	</head>
	<body>
		<h2>
		唐诗三百首
		</h2>
		<hr/>
		<h3>目录</h3>
		<!--<pre>
第一首,静夜思

第二首,忆江南

第三首,长恨歌
		</pre>-->
		<p>第一首,静夜思</p>
		<p>第二首,忆江南</p>
		<p>第三首,长恨歌</p>
		<hr/>
		<h4>静夜思</h4>
		<p>作者:李白</p>
		<p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>
		<!--<pre>
<h4>静夜思</h4>
作者:李白

床前明月光,疑是地上霜。举头望明月,低头思故乡。
		</pre>-->
		<hr/>
		<pre>
<h4>【李白简介】</h4>
李白,字太白,号青莲居士,自称与李堂皇室同宗,祖籍陇西成纪(今甘肃天水附近),生于中亚碎叶。据野史记载,幼时随父迁居绵州昌隆(今四川江油)青莲乡......

 ↑
← ㊣ →
 ↓
		</pre>

	</body>
</html>

运行结果:

总结:学习中遇到了一些小问题,如:p标签的效果没有仔细看,错误的使用了pre标签,导致显示结果有细微的差别。

时间: 2024-11-08 19:00:39

Html_Head部分及基本块级标签_Day01的相关文章

我的javaweb学习之旅--html常用块级标签

html常用块级标签 常用的有p,h1~h6,div,ul 等 1.h1~h6 <body> <h1></h1>   一级标题 ...... <h6></h6>    六级标题 </body> 2.p段落标签 示例: <p>有梦想就有奇迹</p> 3.<hr/>标签  水平线标签 <p>有梦想就有奇迹</p> <hr/> 4.有序列表标签 <ol>开头

块级标签

特点: 1.前后断行显示,默认状态下占据一整行 2.具有一定的宽度和高度,可以通过设置块级标签的width.height属性来控制 3.块级标签常用作容器,即可以再“容纳”其他块级标签或行级标签 行级标签一般用于组织内容,即只能用于“容纳”文字.图片或其他行级标签 区分:页面布局角度 (1.基本的块级标签 1).标题标签<h1>~<h6> 2).段落标签<p>    自动换行 3).水平线标签<hr/> (2.常用于布局的块级标签 1).有序列表标签<

块级标签和行级标签

1.块级标签:一个块级标签独占一行 2.行级标签:

块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签:块标签(block tag)和内联标签(inline tag)

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>块级标签</title> 5 </head> 6 7 <body> 8 9 块级标签 10 就像标题.段落一样,需要在页面上占据一块的位置的标签. 11 <h1> 最大的标题 <h2> - <h6> 大小依次减小的标题 <p> 段落 12 13 <

HTML中的行级标签和块级标签

1.html中的块级标签 显示为“块”状,浏览器会在其前后显示折行.常用的块级元素包括: <p>, <ul>,<table>,<h1~h6>等. 2.html中的行级标签(内联元素) 按行逐一显示,前后不会自动换行: 文本格式化元素: <b>, <td>, <a>, <img>

去除行块级标签之间的默认间距

当两个行块级标签之间有空格,或者换行时,行块级标签之间会有一个默认4px的间距.去除方法如下: 给行块级标签的父级设置:font-size: 0: 在给相应的行块级标签设置需要的 font-size: 如下所示: <style> .parent{ font-size: 0; } .parent span{ display: inline-block; font-size: 14px; } </style> <div class="parent"> &

行内标签 和 块级标签

块级标签 div    ………………块级标签 h1~h6   ………………标题 ul (内含多个li) ol (内含多个li) dl (内含一个dt    多个dd)………………列表 table(内含tr  th  td)……………………表格 p…………………………………………段落 br…………………………………………换行 form……………………………………表单 行级标签 span a……………………超链接 img……………………图片 var……………………变量,显示斜体 strong…………

HTML学习笔记——块级标签、行级标签、图片标签

1>块级标签.行级标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

css基础 display:block 行内标签转为块级标签

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu