HTML基本认识及常见标签

最新推荐文章于 2024-09-14 12:37:34 发布

小狐狸不吃鱼

最新推荐文章于 2024-09-14 12:37:34 发布

阅读量213

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/m0_49524888/article/details/119279784

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第一章 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