2021-07-31

2021-07-31 21:05:07 阅读：140 来源： 互联网

标签：浏览器 07 标签 31 定义列表青春引用 2021

第一章 HTML基本认识及常见标签

一、HTML基本认识

HTML是超文本标记语言，用来建立网页的结构。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

<html>标签告诉浏览器文本结构是怎样的。通常用成对的标签包围页面内容。（元素=开始标签+内容+结束标签 eg:<h1>My Happy Day</h1>）

<head>标签包含了web页面的有关信息，如<title>网页标题</title>

<body>页面主体，包含web页面所有的内容和结构，浏览器显示的部分

二、常见标签

标题标签一共有六个<h1>~<h6>,<img>图片标签，src属性来指定img标记显示的图片文件名

段落标签<p></p>,是一个块元素（独占一行）。超链接标签<a></a>，通过href属性告诉浏览器链接的目标文件。

<body>
		<h1>青春</h1>
		<img src="../images/young.JPEG" width="200px" height="200px"/>
		<p>吾愿吾亲爱之青年，生于青春死于青春，</p>

		<p>生于少年死于少年也。</p>	

		<p>	进前而勿顾后，背黑暗而向光明，</p>

		<p>为世界进文明，为人类造幸福。</p>	

		<p>以青春之我，创建青春之家庭，</p>	

		<p>青春之国家，青春之民族，</p>	

		<p>青春之人类，青春之地球，</p>	

		<p>	青春之宇宙，资以乐其无涯之生。</p>
		<a href="http://www.baidu.com">更多</a>
	
	</body>

有序列表:<ol>定义一个有序列表, <li>定义一个列表项

<body>
		<h1>青春</h1>
		<img src="../images/young.JPEG" width="200px" height="200px"/>
		<ol>
			<li>吾愿吾亲爱之青年，生于青春死于青春，</li>
			<li>生于少年死于少年也。</li>
			<li>进前而勿顾后，背黑暗而向光明，</li>
			<li>为世界进文明，为人类造幸福。</li>
			<li>以青春之我，创建青春之家庭，</li>
			<li>青春之国家，青春之民族，</li>
			<li>青春之人类，青春之地球，</li>
			<li>青春之宇宙，资以乐其无涯之生。</li>		
		</ol>
	</body>

无序列表：<ul>定义一个无序列表，<li>定义一个列表项

<body>
		<h1>青春</h1>
		<img src="../images/young.JPEG" width="200px" height="200px"/>
		<ul>
			<li>吾愿吾亲爱之青年，生于青春死于青春，</li>
			<li>生于少年死于少年也。</li>
			<li>进前而勿顾后，背黑暗而向光明，</li>
			<li>为世界进文明，为人类造幸福。</li>
			<li>以青春之我，创建青春之家庭，</li>
			<li>青春之国家，青春之民族，</li>
			<li>青春之人类，青春之地球，</li>
			<li>青春之宇宙，资以乐其无涯之生。</li>		
		</ul>
	</body>

定义列表：dl定义一个定义列表，dt定义一个列表项，dd对标题的说明和解释。

dt与dd是同级，一个dt可以用多个dd来解释，dd是解释上面最近的一个dt。

<body>
		<h2>定义列表</h2>
		<dl>
			<dt>脱贫攻坚精神</dt>
			<dd>上下同心、尽锐出战</dd>
			<dd>精准务实、开拓创新、攻坚克难、不负人民</dd>
			<dt>乡村振兴</dt>
			<dd>乡村振兴一般指乡村振兴战略</dd>
		</ol>
	</body>

<q>引用标签，用于短引用作为段落的一部分。<blockquote>元素用于长引用，作为一大段文字来强调的内容。<br>是一个void元素，用来换行,<em>使用这个元素来标记不同方式展示的文本。

<body>
		<h2>引用</h2>
		<p>老师在课堂上经常说到:<q>明日复明日，明日何其多，我生待明日，万事成蹉跎
        </q></p>
        <p>李大钊先生在《青春》一文中写到</p>
	    <blockquote> <em>吾愿吾亲爱之青年，生于青春死于青春，</em>

					生于少年死于少年也。

					进前而勿顾后，背黑暗而向光明，

					为世界进文明，为人类造幸福。<br>

					以青春之我，创建青春之家庭，

					青春之国家，青春之民族，

					青春之人类，青春之地球，

					青春之宇宙，资以乐其无涯之生。
			
         </blockquote>
	</body>

总结：<q><q/>引用标签，为什么不直接加“ ” ？在没有添加<q>标签之前，浏览器知识认为这是一个文本段落，其中添加了“ ”符号。但如果加入<q>标签，浏览器就知道这是一个引用，意义：1. 对有视力障碍的人，可通过网页播音提示引用部分。2. 搜索引擎搜索引用内容时，可以搜索到包含引用的网页。3.方便对引用内容添加样式

<blockquote>也是引用标签。不过<blockquote>元素用于较长的引用，需要单独显示。<q>用于短引用，作为现有段落的一部分。<blockquote>会自成一个段落并且首行缩进两个字符。<blockquote>可以包含<q>元素。

另：如果在文章内容中提到<html>标签，为了让浏览器读取不产生混乱，>字符缩写>，<字符的缩写是<。还有在HTML内容中出现一个&，可以使用字符实体&amp,而不要直接使用字符。更多特殊字符写法查询：http://w3schools.com/tage/ref_entities.asp

标签：浏览器,07,标签,31,定义,列表,青春,引用,2021
来源： https://blog.csdn.net/m0_49524888/article/details/119279784

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-07-31

第一章 HTML基本认识及常见标签

目录

一、HTML基本认识

二、常见标签