前端三剑客之html基础笔记

<!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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Linux三剑客是指在Linux系统中经常使用的三个命令行工具,分别是grep、awk和sed。 首先是grep命令,它是Global Regular Expression Print的缩写,用于在文件中查找匹配某一模式的行。grep命令的基本语法是"grep [选项] 模式 文件",可以使用各种选项来处理不同的需求。grep命令的应用非常广泛,常用于检索文件内容、过滤日志、查找错误等,通过使用正则表达式,可以实现更高级的搜索。 其次是awk命令,它是一种文本处理语言,经常用于对文本文件进行分析和处理。awk命令的语法是"awk '条件 动作' 文件",其中条件是用于选择匹配的行,动作是对匹配的行执行的操作。awk命令可以方便地进行字段提取、计算、格式化输出等操作,特别适合处理结构化的文本数据。 最后是sed命令,它是Stream Editor的缩写,是一种基于行的文本处理工具。sed命令的基本语法是"sed [选项] '动作' 文件",其中动作是对每一行执行的操作。sed命令可以进行文本的增删改查等操作,如替换、删除、插入等,可以通过正则表达式实现复杂的模式匹配和替换。 Linux三剑客是Linux系统中非常重要的命令行工具,它们的灵活性和强大功能使得我们可以方便地对文本文件进行操作和处理。无论是开发、运维还是日常使用,熟练掌握grep、awk和sed命令都对提高工作效率和解决问题非常有帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值