前端三剑客之html基础笔记

最新推荐文章于 2024-07-25 14:44:54 发布
昕楠
最新推荐文章于 2024-07-25 14:44:54 发布
阅读量141
点赞数
分类专栏：笔记前端文章标签：前端 html javascript
本文链接：https://blog.csdn.net/qq_35595164/article/details/124878532
版权
笔记同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
前端
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="keywords" content="HTML,前端，CSS3"> <!-- 网站关键字 -->
	<meta name="description" content="这是一个不错的网站"> <!-- 网站描述，显示在搜索结果中 -->
	<!-- <meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> 将网页重定向到另一个网站  -->
	<title>实体</title> <!-- 作为搜索结果的超链接上的文字显示 -->
</head>

<body>
	<!-- <p>今天&nbsp;天气正不错</p>
	周杰伦说:
	<blockquote>
		奶茶真好喝！
	</blockquote>
	老子说：<q>天天上了！</q> -->

	<!-- 
		块元素
		head 网页头部
		main 网页主体
		footer 网页底部
		nav 网页导航
		aside 侧边栏
		article 独立文章

		section 独立区块，上面的标签都不能使用时使用section

		div 没有语义，用来表示一个区块，目前主要使用的布局元素
		span 行内元素，没有任何语义，一般用在网页中选中文字

	 -->

	<!-- <header></header> 
	<main></main>
	<footer></footer>

	<nav></nav>
	<aside></aside>
	<article></article>

	<div></div>
	<span></span> -->

	<!-- 列表
		有序列表，无序列表，定义列表

		有序列表 ol创建 li表示列表项
		无序列表 ul创建 li表示列表项
		定义列表 dl创建 dt表示定义内容，dd对其解释说明

		列表可相互嵌套
	-->

	<!-- <ul>
		<li>结构</li>
		<li>表现</li>
		<li>行为</li>
	</ul>

	<ol>
		<li>结构</li>
		<li>表现</li>
		<li>行为</li>
	</ol>
	
	<dl>
		<dt>结构</dt>
		<dd>结构是什么？</dd>
	</dl> -->

	<!--
		超链接

		a标签定义  href 指定目标路径，可以是外部网站地址，也可以是内部地址

		超链接是一个行内元素，在a标签中可嵌套除它自身的任何元素

		相对路径 ../ 或 ./
		
		./ 当前文件所在目录
		../ 当前文件上一级目录

		target属性，指定超链接打开位置
		可选择：
			_self 默认值 在当前页面中打开超链接
			_blank 在一个新的网页打开超链接
	    
		href # 回到顶部
		href javascript:; 作为href属性，此时点击超链接无任何发生
		href 可以跳转到页面指定位置，只需要href属性设置 #目标元素id

		id属性（唯一不重复的）
		每一个标签可以加一个id属性，是元素的唯一标识，同一个页面不能出现重复的id属性
	-->
	<!-- <a href="http://www.baidu.com" target="_blank">超链接</a>
	<br><br>
	<a href="#bottom">去底部</a>
	<br><br>
	<a href="#p3">去第三个段</a>

	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p id="p3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem error odio porro, tempore sequi tenetur beatae, amet libero provident distinctio eius similique animi sapiente, rerum consectetur reiciendis in quidem. Aperiam.</p>
	<a id="bottom" href="#">回到顶部</a> -->

	<!--
		图片标签用于向当前页面中引入一个外部图片
		img 标签是自结束标签
		    src 属性指定的是外部图片的路径
		    img属于替换元素（基于块和行内元素之间）
		    alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
	            搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
			width 图片的宽度（单位是像素）
			height 图片的高度
			    -宽度和高度中如果只修改了一个，则另一个会等比例缩放
			
			注意：一般情况下在pc端，不建议修改图片的大小，需要多大的图片就裁多大
	    
		图片的格式：
		    jpeg(jpg)-支持颜色比较丰富，不支持透明效果，不支持动图
			gif-支持的颜色比较少，支持简单透明，支持动图
			png-支持的颜色丰富，支持复杂透明，不支持动图
            webp-具备上面所有的优点，缺点兼容性不好
		    base64-将图片使用base64进行编码,一般是需要和网页一起加载的图片才使用base64

		效果一样，用小的
		效果不一样，用效果好的
	
	-->

	<!-- <img width="200" src="img/xuhao.png" alt="logo"> -->

	<!--
        内联框架，用于向当前页面中引入一个其他页面
		     src 指定要引入的网页的路径
			 frameborder 指定内联框架的边框

	-->

	<!-- <iframe src="http://www.jynyshop.cn:8066" width="800" height="600" frameborder="0"></iframe> -->

	<!-- 
		audio 音频标签用来向页面引入一个外部音频文件，音视频文件引入时，默认情况下不允许用户自己控制播放停止
	    
		属性：controls 是否允许用户控制播放
		    autoplay 音视频文件是否自动播放
			       - 如果设置了autoplay 则音乐在打开页面时自动播放
				      但是目前来讲大部分浏览器都不会对音乐自动进行播放
			loop 音乐是否循环播放
	-->

	<!-- <audio src="source/audio.mp3" controls autoplay loop></audio> -->
	<!-- <audio controls> -->
	<!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
	<!-- <source src="source/audio.mp3">
		<source src="source/audio.ogg">
		<embed src="source/audio.mp3" type="audio/mp3" width="300" height="100">
	</audio> -->

	<!-- 
		使用video标签来引入一个视频文件
		   -使用方式和audio基本是一样的
	 -->

	<!-- <video controls>
		<source src="source/test.webm">
		<source src="source/test.mp4">
		<embed src="source/test.mp4" type="video/mp4" width="300" height="100">
	</video> -->
</body>

</html>