2020年2月6日HTML学习笔记

HTML列表

< li >标签的运用

<li></li>可以创建一个列表，需要把每个列表项放在单独的<li>标签中，这说明需要把内容用一个<li>开始和一个</li>结束标记包围起来。与所有HTML标签一样，标记之间的内容由你来定，可以很短，也可以很长，分为多行。

<h2>日期</h2>
	<img src="img/segway2.jpg" />
	<p>
	去过城市的记录
	</p> 
	<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>标签包围列表项，则这些列表项将作为一个有序列表显示，如果使用<ul>，则列表将显示为一个无序列表。下面将列表项包围在一个<ol>标签中。

<h2>日期</h2>
	<img src="img/segway2.jpg" />
	<p>
	去过城市的记录
	</p> 
	<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>

<ol><ul><li>三种标签输入后在网页上都会起到换行的作用，所以都是块标签。

<h2>August 20, 2012</h2>
    <img src="img/segway2.jpg">
    <p>
      Well I made it 1200 miles already, and I passed
      through some interesting places on the way: 
    </p>

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

1、<ol>和<li>（<ul><li>）总是要一起使用。这些标签离开彼此就不会有任何意义。可以理解为这些标签是一组，<li>标签是标识每个元素，<ol>是把他们归纳在一组。
2、嵌套列表
	<body>
		海鲜的种类
		<ol>
			<li>贝壳类</li>
			<li>虾类</li>
			<li>鱼类
			<ul>
				<li>海鱼</li>
				<li>淡水鱼</li>
			</ul>
			</li>
			<li>海菜</li>
		</ol>
	</body>

嵌套

3、定义列表
<dl>
	<dt>兔子</dt>
	<dd>兔子一般指兔。兔（Rabbit）是哺乳类兔形目兔科下属所有的属的总称。俗称兔子。</dd>
	<dt>海兔</dt>
	<dd>海兔，又称海蛞蝓，但海兔既不是兔也不是蛞蝓，属于浅海生活的贝类，是软体动物门，腹足纲，裸腮目的统称，因其头上的两对触角突出如兔耳而得名。</dd>
</dl>

兔子的种类

嵌套的定义

嵌套是掌握HTML最大的难题，理解嵌套关系能够更好的拥有HTML的逻辑。

嵌套的定义：把一个标签放在另一个标签中成为“嵌套”。

字符实体

如果创建一个web页面里面包含HTML标签，如何才能让web页面显示< >里面标签内容呢？

这需要通过字符实体来解决。

例如:
<在HTML代码则是 &lt；
>在HTML代码则是 &gt;
假如你要在web页面输入html标签<h1>
需要用输入 
&lt;h1&gt;

实体字符链接

总结学到HTML标签

<em>斜体文字</em>
<strong>字体加粗</strong>
<a href=https://www.baidu.com>超链接元素</a>
<time>2020.2.6</time>时间标签
<blockquote>长引用会缩进另起一段</blockquote>
<br>换行标签
<li></li>列表标签
<ul></ul>配合li有序列表
<ol></ol>配合li无序列表
<code>和<pre>两个标签都是为了，在浏览器中显示源程序代码。
<code> 标签的功能有：将文本变成等宽字体；还有一个功能就是暗示这段文本是源程序代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能。<pre>标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。所以<code><pre>两者可以嵌套使用的，但是必须注意两者的嵌套顺序。

posted on 2021-02-06 22:54  tallish  阅读(51)  评论(0)    收藏  举报

导航