HTML学习第三章

怎么啥都不会

于 2021-05-04 13:44:51 发布

阅读量169

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_40794404/article/details/116398614

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

HTML学习第三章：

教材：Head First HTML与CSS

学习内容：

引用

在给元素添加属性时，双引号和单引号作用一样。
通过<q>元素，可以告诉浏览器这些文本来自于引用，浏览器会以引用的方式表示它，比如加双引号。
对于精练简短的引用使用<q>, 一个段落等整段文字则使用块引用<blockquote>,块引用要在段落结束后插入，会创建一段单独的文字，并且含有缩进。

<h2>July 14, 2005</h2>
    <p>
      I saw some Burma Shave style signs on the side of the
      road today:</p>
	<blockquote>
		Passing cars, 
		When you can't see, 
		May get you, 
		A glimpse, 
		Of eternity.
	</blockquote>
    <p>I definitely won't be passing 
      any cars.
    </p>

在这里插入图片描述

不同的浏览器对于引用的显示方式可能会有所不同。块引用的缩进效果在不同浏览器显示也可能不同。

块元素与内联元素

<blockquote>元素是块元素(block element)，<q>元素是内联元素(inline element)。块元素前后都有换行符，而内联元素总是在网页中随着文字流出现在"行内"。
标题和段落都是块元素，链接是内联元素。
块元素特立独行，内联元素随波逐流
HTML中的换行元素 ，在句尾加入该元素可实现换行。该元素没有任何内容，只进行换行操作。
当元素设计为没有任何实际内容时，被称为空元素，使用缩写(不写结束标记)，<img>元素也属于这一类。

<blockquote>
	Passing cars, <br>
	When you can't see,<br> 
	May get you, <br>
	A glimpse, <br>
	Of eternity.
	</blockquote>

在这里插入图片描述

列表元素

在HTML中加入列表元素。用元素也可以实现一些列表功能，但终究从表现格式上来说没有专门的列表元素让浏览器显示更自然。

步骤：

将每个列表项目都放进一个<li>元素中，用开始标记<li>和结束标记</li>来包围该项目。
用<ol>或者<ul>来封装所有列表元素。<ol>代表有序列表(ordered list)，会在每一项前加入数字表示顺序；<ul>代表无序列表(unordered list)，会加入一个标识符。所有列表项放在<ol>或者<ul>元素中间，作为<ol>或者<ul>元素的内容。

<ol>
	<li>Walla Walla,WA</li>
	<li>Magic City, ID</li>
	<li>Bountiful, UT</li> 
	<li>Last Chance, CO</li>
    <li>Why, AZ</li> 
	<li>Truth or Consequences, NM</li>
</ol>

效果如下：
在这里插入图片描述

<ul>和 <ol>元素中不能添加其他文字或元素，只是用来配合<li>元素一起工作。
<ul> ，<ol>，<li>都是块元素，独立显示，文本前后有空行。
列表中可以嵌套列表，可以将一个作为某个列表元素<li>的内容。

在这里插入图片描述

HTML还有一种列表类型：自定义列表<dl>。
自定义列表中每个项目都有一个项限<dt>和一个描述<dd>。
测试一下：

<html>
	<head>
		<title>测试一下自定义列表</title>
	</head>
	<body>
		<h1>测试一下自定义列表</h1>
		<p>下面测试一下自定义列表<br>
			我今天吃过的东西：</p>
		<dl>
			<dt> bread</dt>
			<dd> 吃了一半左右</dd>
			<dt> water</dt>
			<dd>人还是要多喝水</dd>
			<dt>tea</dd>
			<dd>昨天剩的茶</dd>
		</dl>
	</body>
</html>

结果：
在这里插入图片描述

<ol>元素的start属性可以规定有序列表的开始点。即不一定从1开始计数。

<ol start=10>
	<li>Walla Walla,WA</li>
	<li>Magic City, ID</li>
	<li>Bountiful, UT</li> 
	<li>Last Chance, CO</li>
      	<li>Why, AZ</li> 
	<li>Truth or Consequences, NM</li>
</ol>

结果：
在这里插入图片描述

<li>元素的value属性可以指定该列表项的排序值，并使后续列表项顺延该值。

<ol>
	<li>Walla Walla,WA</li>
	<li>Magic City, ID</li>
	<li>Bountiful, UT</li> 
	<li value=2>Last Chance, CO</li>
    <li>Why, AZ</li> 
	<li>Truth or Consequences, NM</li>
</ol>