小桥流水78

这个屌丝很懒，什么也没留下！

热门标签

学习html+css+js笔记_mkqqpr

作者：小桥流水78 | 2024-07-25 14:39:22

踩

mkqqpr

初学html+css+js笔记

一、html基本格式、特殊符号。
二、导航标签、表格标签、css。
三、form表单、表单标签和input、button。
四、列表标签、CSS的引用方式、CSS选择器、盒子模型。
五、计算器-用表格实现、字体字形。
六、js格式、变量命名规则、按钮点击后效果，算数运算符、页面日志，计算器加js。
七、抽奖。

这个是我阶段学习的笔记，用于自我复习。因为初次学习，笔记当中难免会有表述不正确的地方，仅供各位读者参考。

一、html基本格式、特殊符号。

1.html基本格式(标签html head body title)

<html>
	<head>
		<!-- 这是标题 -->
		<title>这是我的第一个html</title>
	</head>
	
	<body>
	
	</body>
</html>
1
2
3
4
5
6
7
8
9
10

2.特殊符号

请添加图片描述

<html>
	<head>
		<title>特殊符号</title>
	</head>
	
	
	<body>
		<h1>&lt;这是小于号&lt;</h1>
		<h1>&gt;这是大于号&gt;</h1>
		<h1>这是空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是空格</h1>
		<h1>&copy;这是版权符号</h1>
		<h1>&reg;这是已注册符号</h1>
		<h1>&amp;这是&符号</h1>
		<h1>&trade;这是商标符号</h1>
		<h1>&quot;这是双引号符号</h1>
		<h1>&yen;这是人民币符号</h1>

	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.小作业：白居易介绍（标签h1~h6 p hr img video）

标签	名称	备注
h1~h6	标题	加粗，前后自动加一行
p	段落	段前段后自动加一行
hr	横线
img	图片	属性src="“表示图片路径（绝对路径、相对路径、网络路径、base64）。alt=”“表示图片没显示出来时那块显示的文字，用来提示读者。title=”"表示鼠标滑到图片上时显示的文字。
video	视频	属性src=""表示视频路径（绝对路径、相对路径、网络路径）。controls=“controls” 写上就有控制条了（播放、暂停等）

请添加图片描述

<html>
	<head>
		<title>白居易</title>
	</head>
	
	
	<body>
		<h1>白居易<h1>
		<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字，乐天<h3>
		<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;朝代&middot;唐</h4>
		<hr/>
		<p>白居易（772年－846年），字乐天，号香山居士，又号醉吟先生，祖籍山西太原 [1-2]  ，到其曾祖父时迁居下邽，生于河南新郑 [3]  。白居易是唐代伟大的现实主义诗人，唐代三大诗人之一。白居易与元稹共同倡导新乐府运动，世称“元白”，与刘禹锡并称“刘白”。 [4] 
白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。官至太子少傅、刑部尚书，封冯翊县侯 [45]  。公元846年，白居易在洛阳逝世，葬于香山。有《白氏长庆集》传世，代表诗作有《长恨歌》《卖炭翁》《琵琶行》等。
1988年，日本中国文化显彰会为白园捐立石碑，以纪念白居易，碑文用中、日两种文字书写。1995年，4个日本人于此上书“樱献”。 [5] </p>
		<hr/>
		<img src="D:\web-workspace\20220509\imgs\baijuyi-04.jpg"/>
		<img src="./imgs/baijuyi-05.jpg"/>
		<img src="https://tse1-mm.cn.bing.net/th/id/R-C.2edf9b4a5625061828d15140280a050e?rik=Fi19lC2A1r8SnA&riu=http%3a%2f%2fwww.exam58.com%2fuploads%2fallimg%2f130419%2f14240622G-0-lp.jpg&ehk=4GTtjINqJDKJ7uFnt%2fLXSUch0lDtrFY9IkzbiCP16UU%3d&risl=&pid=ImgRaw&r=0"/>
		<img alt="白居易的图片" title="白居易的图片" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gODUK/9sAQwAFAwQEBAMFBAQEBQUFBgcMCAcHBwcPCwsJDBEPEhIRDxERExYcFxMUGhURERghGBodHR8fHxMXIiQiHiQcHh8e/9sAQwEFBQUHBgcOCAgOHhQRFB4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4e/8AAEQgAtAC0AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A8Mtdcv10y7V0uls7SXy7lmjJmKneByxKqw3IMZPPPY19heHvFfizQvhT4OtPDHh19c1DUbDaokmCNFIsUbbmDbc9WJHH3fevk6/W5vtMKzLDDB5QuGnE/lmZ1icrtLA9zg/e4Ge4x9efDg/2f4d+G6T/ALt47GRT5jcKRZqTkkDgY68V8zgZRlVbirPy+R62I5krS1t/wTmdM8R/tD6Lr1xqOo+FG1jS5pVeW2Lwx+RGAd3ltv8Al6g4O7OB0r3PwRq9x4g8IaRrlzaC0l1C0iuWhD7gm9QwAPfgivIPhr8R9U13XPFKa7qbvaW6PbxRQWu62R2ZirmQAsoK8DdhcAZJavUvAlzDB8NvD1yVAiGlWpCx9OYkwB+fFexTelr3OOstdkvQ6UnHPFVJNT05HWN7+0V2j81VMyglME7gM9MA89ODXPeI/Fvh+Kxe0vWvDHdzNYMYoTlXbCkH0+8OvTIzXO6tY+C9P+z39xJqlw0iS2YeNgSY5t+d3T5clyD271pczUe56TFdW8sSSw3EMkbjKMjghvcHvUm4bc7h9c8VzOneH/DrabHZJFvitEkhCTMCyLulQ5z0GTIAe/4DFOeTw293/wAIn5NzcTTW5uIzGAFkQlmGGGFz169ffmi4rHZb1yF3Lk9s81BNfWcM5glvLeOUKXKNIAwUDJOPTHeuMtrzw5o1750NtqUU11C+p7chzgLKxOCxOSHb5fce9QRap4R1G9s3C6rLc3NgyIrBy5hXfktk5LHyj6k8Hvmi4cp3UN7ZzzCGG7t5Jdgk2JIC2w9Gxnp70k1/Ywu8c97bRvGoZ1aVQVGQASM8DkfmK5DRh4Vh1D+y7GW8W6e1FuJlUhvK2OVPmAccKxDZyc8EgYDvFmkeGdQvZpb+3u3N/YnfcW8gKNEmHyOevyryBjkeopXDlVzrri+soIhNPeW0UZwQ7yhRznHJ9cHH0qaOWORcxyK4xnKkHgjIrzS5t/COoajaeH5l1gTXNoyQ2z7Y/ki3IR82Dn92fzz9NHTNU8O2uqxJG9/BPdRx3HzRxr8iq+CxUZIIiOQSTnHHo7jcTsZtU02FnWXUbOMocOGmUbevXJ4+635H0p1zqFlaqGub22gBfYDJKqgsecc98EV55q+heC7rUhZ3cmqI2t51AMrbUQBZCSWx8vEjnBz29K0b3R/BV+xVphMv2uF3eEBlEsjbI8sFxyRtx2zyADmi4cqO7qK8ura0iM11PHDGD95zj8vWpM15L8X9bZfEC6fG+PIgUA56M3JP5YpkpXOz/wCE60N72S1i+0y+X96RYxt/U5/Stiw1nTL0AQ3aBj/C/wAprwrw4wkkughPylRn0AH+JrQbUfss6qJOfUGpbadrFcqPdSCPSvjz9tm8k0v4gadqUcdwWjs4/uNhGUSNlWIIYEllxgHn6Zr6J8F6/dXEsNsrGZHO3Yew7kHtXgv7XUu34o6akNuk0x03BRlIMq7ywQOOmSncHHB461wZjK1OLaur7fJnRhFLnaT1seE3XiNrCcw61bzPOVR4/LtEwqFFwMP8wIOeDRVibT4LmeS61K5kiuZSCUt7yNFUKAoBDKSGwozRXjReGsuaOvlsdrlUvoZ1vrFwNKuleGb7HaSeXcyNCWl2HeB94lVYbk4yeeegr7I8AQ2114Z+G7akEkhFpM8y3Chgf9EBJYEY/Svkq/S5v9MZZIYIofKFzJMsoTznETldpYHHJweuAM8ZFfWXgbUNN0Hw58NRrN7b2CrZujG5mVQD9kUEEnGcHj8feuzAyi6raVn/AMN/X3GeI5uXll/W4vgqfwxH4v8AE7aDp2tPcSI63t2bkOkrOrMHkhyPLHynHyjGeQMmu/8ABr+X8JdFe2slvSmhwPFbZ4mIgUqmSO+AMmuNs73who/iPxD4gj8c6LMmsxS/aIGvkCo6hRHsweu3IOfUY6nPY+C5Vb4U6G+nzwQf8Se2EMhkGxP3S4y2CMCvYgcNTV/cHi2a+VSsPhS21dFCSr5iBt5JAbgjg4A6+g64xWBe6nrwe5ji8A2jhbaKaNWtWIM7KN6swGDt3nkA5ww7Gt7SbHxSqTfaNas5PN1E3MJQl/8ARWx8nIHTtjj3NXtZGs3Sx2+marYWd5HMZHTZvLw5IAIJyOCCTjqMVoSnbQwrLX9fQXfm+D0hP2aOQeXDJ++Zm+dThOxZzj3JPWuis3hubkz3OhiNg6RwzGDLbWiBJOQCoG5k5+nqKx1sPGjTwNJr9mtslyHlCAFniLL8mSnHAfHuRzVZ9J8fskDnxJZjbOZJl2/KyfMNgIQED7hz7Hp1IFkxNb1jVI0uDa+CDcvBcC3GbfeZLfMiFlyF4AwcAn5XqA6hqcepNb/8K/tmignlhtpBBtCwDPPCEDdk8DjnvmtJ9M8Xm0v4v7ftmd5SYWB2eTGVfAOEzwSv/fOc9Qadlo3joWECXHia2juI4THOqHeN+D+83Mmc/wCyRjjPNIatYs6Lqmo3F0y3HhNbEeYFDGBs4JIYk7MdC3TPXuCSK114h1eT+zH/AOEFlc3N6trNvhLeREQuHJ28KPMYHjHyt9KnfTfGps9Mt11yza8tpoJrsmQ/vkUybx8qDhhsHQZ2np3s61Y+K5ICLDWrNXGoJKvmEx/uB1jJAPJ57dh7mmGlzM0jV9TFnpl23gaOC4ke4AMVsym2wOCQUDLv5B/melWYtX1b+0bHzfB+0iCVnkWAkwMofy0DYx93Az/t4GeRU7ad4sTTplGv263TXQcTZACxAZK4KEfgAMAA5Jq/4hGqT6dHHaXtlaXa3PBNwyB1y21c4zuIwSMHkdxQLQ57XNU1qNLmYeBre9Fs0dvat5BLSQP5iuQNpKgBQCuOj98jOrp97eQXEy/8I1Hb+XcIsTpbt88Q3r5mQvGNvC9cEeoqiul+OPLnT/hKLIyNeebEyryICz4jI24zyOcHlcZxWnfHXAJ1m1fTrPc6tA3m8kbSCpBUYBPPfBBoG7bHUZ459K+efiSxTxXelm+5cS5A7jOR+jV9B5AXI7CvMvEvg7S/EGs3eoXTXkbSHc0aOFAAUA9j/dHesqmIhRa5i6FKVS9jgvCmoLpujyXczBGnYvz6dqdql5p+sMhMgimK5Ei9fx9a2df+HdrqMKJY6nd2zqAE3qrpjsMDBxXGXvgrxTba5YacbV2ExCrcxZaIDIBYnsBnviihXo1rtS1NKtCpSautD134MosHnxXA33RzskByoTj8cnP6V4N+2tc/2b8QtO1QJOWjs4h8nCsokbKswOQcsuOD+mR774dtYdA8Ww6ZbsxhjIQFjktuQHk/U14j+1xKF+J+nLFaxTytpuGRlKtKu8sEDDjkp3Bx19TXJmM7U4tq6v8AhZjwqfO7djwi8162sbgw63ZM0xVHj2WCECMqMD958wOd3HFFXJdNhuZ5LvUppYriYglLe5RFUKoQAhlJzhRmivHjLD2XMnfyeh2OdW+ljKttZlbS7lJbZ2s7STy55Wty8gQ7wCN3yqw3R5GTzz0Ffcfwn8P6Hr3w28LXmuaVa6lPbWKGI3cYk2F4k3cHjJwO3avjC+ju9Q010a2hSPyhdTTxuFEriJyu0sMAZODnOApPHFfcnwMieH4V+HopFZXSwgDhjkhhEmQTXdgHB1nZWeun3f19xhinNRszUfwL4JY/N4O8PE4/6BsOR/47TtV0zw5pHgdtHniSx0GCBYPKTO1I8gBR1PcD8a6Bjxx6cc9qo6+qNo12ZLCO/wBsZZbVxkTMOVXnPUgfSvaPPT1ODsIvA+lX02pwavfw3UGlrFJJ5T744DlVYfJncG/I9RU+pS+CNS1S9vZ9Tug8yRG4HkOE2FkRB8ycAsF568+3F83dvJpzO3g5pGnsfOmUQ7kZhCZfLLbfm+ZioPOSfXinx3draafLfDwsts1vbo6qV8tSfOZAv3eCNoboSM9uCUaGYvhzwekd1qU2pXbQJaWysJFCeVECHiX7gYfdX5eoAGevN7XtU8JiyuNHvdXuViiW2DRiN3CDIKYwpzu4ycnir1tqLC7NomgQLbvpyMZY5DIrEMFEHyISwCvnIyOT7mm6o0Esdw0/hRbtvJhkLGNWWRmfG0AjeduM8qOnbigV9dTn9J0/wO2s6teW2v3M9x/Z0VpdoZWBiiO0K2AAQemew5zjmtD4haR4VtNA1C68Rald2+nT7ElYFpAu0qRhQGPSMDp0z61qSX1tFoQvxoSrPLDbNNBKnlIpOCoLFcfIfbg46Vz+q689xaalav4IjuoQsV1FCWINw7sqsWGzAIyxzk52478A1dsNJfwV4bvL++s9VvEN5JbmZ4rZmXcDwuUj/i2YYHnHpkUzWtE8GCfVLq9vL1Vur6Lz/wB0sarNzIAGZBwQzZySPmHtV+91WNvtajwhFcy2aRPFF5mHkD4Y4BTjaSevt61Fca5M5vkk8EORBMqbpXKrIGP39xTA6kknpQCvuQ3ukeDLVdSnfVZozfX22aSJQ2JWRgEBVDn7xPOTnBNTt4X8MZnuU1O+j+1agxdo2A/eq8m9fu/dDu+SenrUT68JJ9QlvPBA2pdQoksrhUnG91DqZFA+XaDx2Oegrp4xbXN00V3pkHlR3am3aNGfMpTzDI2FwuMj5ifvcdcZAbaOM0/wv4Fi02eyg1TUbi3jvDNJgtJslUEt0Qj7rkHI5H0qRvD3gsanLEusXyXExF75ZTIUIzgMvycYLt/nNXk1+eM3slt4KyzXgtxul2maPLL5vKcqcHpnuT2ymqa7ptvsNr4ThuWhvhZMphC7I+SWHyHOCg+UdeME0D947yQ4jbHYdP6VyluYYRc7sgyg7jnuT711b/Mh7cVzFxbTRzvhRhW4G3Ix9a83ML3i15nXgGveTIY7G1QNIrOdx3ZLk8/ialMTXU1rbryo5bPvQYXPyKvDkYA6D1rL8ReIRoepaVb28bTXV7covkpjcYF4Zvb2z6H0rkw9F1JW6dfzO2tV9nG/3GrqegXs2unVLVoAAUZVdiDlQB6e1fNP7al0dL+IWm6oElLJZxDCjCuokbKlhypyVxwep+o+urG6t7uHfC4YD7ynqp9CO1fKv7XLqvxM05I7aGeRtOxJGykNIu/cEVsY5Kd844PrXbmD5acbq6v+jPOw13N8r1seD3et2NnOYtd04CcqjxbNOUjyyox9/wCbOd3pRV6XSvtc8l5qD3UM05B8u2mRVVVUIM7lJzhaK8mMsNZcyd/J6fkdTdW+iMu31jzNJuI5rfzbS1fy55Xti7qh3gMAflUjMeRk8+1fe3wMdpPhZoEkjFmaxhZmY8kmNTmvh2+jutS02SP7JGqeWLu4njKqsjiNyNu4YwScEnptJ9K+5PgZFJF8K/D8UmQ62EAYMckHylyCR1rtwEoOs7Kz10vft/X3GOLcuS0jtMDqOKgv1upLKVLKRY52GI3cZCnpnHfFWsY69KTBznjrXtHnXOfjg8U/2kZHvLP7L9lcCNRjE2Btbpnbnd39PpQkfivfa7pdOKZJuM7txG5uBxj7pX8j61QbwNHJC1tJqczW7RpGwCASMFK8Fwc9ifqxNS3XguC6WdZtRumSdEV1DvgBVC/KCxAPAOcdQOuOUXdFnS7fxQmnGLUL62lumMg81FGFBZQjAbRnC7iR34/Bl/B4skuJzaXcEaGyCRoQuBcBly24qTgjcMEfgKr2Xge2ttcn1VNRui88kDvFuOxTDgIFBJIGBg8knn1rSn8PLPdXMj3t0IZ50nMazyKQylO4bp8nQAdfYYYrq5UvLXxWI5jb6lEzi0iVIzGgBmyfMbdj0GeVxz0qrBbeN/tCTzXsXk/ZXDQqIy3m+X8rZ2/388ZI/Crnijwjb65ZRW5v7y2MVwk4bzmlyVzgYcnHU9MV0FvHJFGVlmaZi7HcwA4JJA4HQAgevHPNFgvocRLa/EYy615WqWqxyXG/Tt0cZ8qL5ztwFGW5UZYnp9a1dPh8WpreoNfXUEunvcobJUVAUiz84fjPTp7457DpccDHFGOB07UWDmOf1OHxTNqGkyWM9na24BOoxE78nbwEYrnrxnHI9O8djaeLUsIhe6layXSu3mbVG1xvXb/Dx8gb8/y6TnI5HWlx8vSgVzG0Ma6pb+1Gt5VeZ9m07GijH3QQAQzHucgYxWBFZfEPzLwy6taFTqQa3XykGLTByudpy2cdRnt713GCDyemKMHjJGc0WBSMvxHNcwaXI9qP3rcA46VlaFcolpKtyWWTJbex4fPqfWuoIyMHGPf0poijzny06jtWcoNu5cKnKrWOXv79dN0+SeK2kv7ljtht4uSzf7R6KvqTXM6Fol8mpTa/r7pc6zdDAVfuW69kX0AH+epPp3kx9kT8qFhiHIjXp/dFTClyQ5EXOtzS5mcdAs0M8ZhL7t/VcgnPJr5z/bSuv7L+ImmaqRLuSziBCqQrqJGyN38JyVxwev5fXwRQchVz9K+Uf2uZI1+JmnottDcM2m4ljZTvkQSbgqnBXJZO/T8TXHj/AHKcb6q+v3M1wzcpvl00PBbzWdKtrgprumxCdlV4iunggxlRj7/PXd6fTrRWhNo7Xs8l7ffaoZZ8EJAyYChQgzuGc4X+VFeVGphrLmbv5PT8jrbq30SMq31hZdKmintUmtLR/Lmme28xkjO8BlUgBSMx5GTz1wMV98/At2l+FmgSu5d3soWLZ5bMan1P86+Gr6K61LT5o0s1QFBd3M8W0K7iNyCNwxgk4JPTaT6E/cvwLR4fhZ4ejlJLrYQbyxBO7ylzkjqfeu7L3CVZ2Vnrpe/b+vuOfGOShaR24HpQMdMYFOJGeOlDFcZr2+U8zm8zk9e+IXhLQ9XTSdQ1NkvWmEJiSCSTa5QyAEqp/hBNaPhfxPo3iW2Fxo9xJKpjWT54XTAbOD8wHoa8g+POgeN9Q0u68WtpejmXSLWVbe3gu5pnlRnUjMfk8twOAw6mun+E3h7xh4PvrjS5tFs5tN1C5a9uL/8AtYyGJjGieWsZiUn7gPbqcmnbqdHJH2fMnr6o9S2j0zSY9s0o3ZJ96MkDJ9KVjn5kxAPXrRjB6U7J6jvRnt1osHMMUce+KU8Hp0ozg/54p38JOc0WBSuNIB7GkJp+fb6UHtgZNFh3GEc9KXAPY0vUE9DRk9D+dOwubuJjNc5N428ORXtxbS3jrHbErNcmFvISQSGMx+ZjG8MpBHbv1FdGXA9OPeuKvfhvoN7LcvJJcBbm++2yKI4CfMMgkIDGMuBuH97OO9JxfQanHqaXizxnovhm9htNU+0LJNCZkKICuAwXBJI5yyjHfNS3/ivSrLwgnimdbkWDpCxHl/vE8xlUblJ+XBcZz059KpeJ/Aej+IL972+nv1nd0YtHNxtRWCoFYFQuXL4A+9g54FJd+AdGufDenaBLLeGyssHGU3zsP43fbu3HkkqVzk5pWYe0ganhHxDp3ijS21PShMbYTNEGkUDdt7rgkEHPBBr5X/bUuxpXxG03VcyZSzjBATAdRI24B+drcrjI78V9QeC/COk+E4LmHSVk/wBJkDyu+0E4zgYUAcZPOMnOSSa+bv2u5I1+JdhGbeK5Lab+9iZTukQSbgqkjaTlOM9D9a8/MfdpxcldX19LM68FLmqPk7Hgt1qukQTldc0u2SdlV4iun5DRlRzluc7t2enOe+aKvz6PNfTvfXn2y2kn2lY4QpAUKFB+bnJC5orxlUw9ldu/k9PyO+Xtb6JGXDrMc+kywTwRT21q2yaeS33mOMhwHVCAF6x5BPXGcDFffPwOkeX4UaDOS1w72MLkqRlyY1OeuP1r4ZvorjUtOnhistoKC8uriJV2u4jcgjIA5PBJxgqx9Cfuf4HOLb4R6C1xIdyafBvLMCc+UmckEgn8a9DLnB1nyqz10vft/X3aHNjeZwtI6iDUGnnnhSwu1ML7SzGPDHGcj5vwqrb3Fz9t09fIuCr2chI3r8xzFz973/Wudt/E5fXbyZLRA6fKgLsDtPG5h052jHXge/HRaJdJeS6VOpAP2CXcMg7Tuh9K9y55jpo0fOmyAbKcfin/AMVQJpscWU/OP4k/+KqaK6tpJNiXEbMCeAwzVV9ZsEl8kz/MG29OM/Wncn2aJVmmH/LlcfTKf/FU+KSVpADayJkfeYrj9CasZJOQc0Fh04oDlSGN/u035h0WpN46CjJ9cUCtfZka78klQc07DHnAH0o8xM4Mi5+op4Zeu4fnRcOUYAwPTPp7UmGxz+lOM8IODNGCPVhQZoQMmWP/AL6FK4+V9xpDHrQFOMZNI13bAgechPsc1G9/ar1c/gpouhW8ybBz7Uu3Haq7X8IOFSRvwpragoOBBIT+FLmQWRjXPjbw1BdS2zXs80kMhikNvZTTKrg4K7kQrkEEEZ4xzTB498MEf6/USMZ/5BN164/551H8LTnwPZMQRmSc8jH/AC3f0rzzx58bPDdp4l0C38OeK5NQJvWgvNM03TlunuvmChRI7II+QcEE5znGOa4HjJ3skdEKKex6O3j3wsoLSXd3EgzueXTrhEUDqSzRgAe5OK+Yv20b+PTviLpOrxyuy/YYiNi5WRBIxO18EA/MuMjnPFfWuqfPpNzlTzA2Qf8AdNfHPx3nje58HLJAlyW8M23mwn5mkQBWAXI2liV45Bz7GuTFYn2kFzLS/wCjOrCQam+Xex5Ldaro0c7f23ptmkzhXiK2ZbdGVBzk4JOd2ffrzRV250SfUrh9QvPtds8+0rHHErgKqhVOWPcLn8aK8+NTDWXNJp+T0/I7m6l9IozYNZhuNKktp4IJ7e1YpLcSw7zEhDgOqbRj/lnnPcgHtX2x8Jpbmf4ZaI6SGTzrGFnfPDZjU56kd/U18c3sU+oadcQW9k8e9ReXc8aqyswjcjg4B3HAJbHIY+mftb4LWpPww8P+c5eT7BBvJwWJ8pc5wSM/ia7MDOCqtxVnrpf0/r7tDnxbmoWlqU7mxkbWAQsuIo856ZJ9D3HXI57elT2EN88+nCOWVR9jkO3djHzRdq0l0XV/+E1/tCeWGWz8nyo1QOnl8EkspYq3IHPBGcd60LO1cX+nHaQPsUvQY7xV6ntm3ocDmUUtr7aVBY+5bP5UiWl4xBMShx3Lfr610Twuv8PGevNUNb1PS9DtDd6rewWUIyd0jctgZO0dWOOwBNT7eXREXuNiudYjJB27QMCntPqjgk3DJn0WodV13Q9N01dQvtRht7Z13I7nG8d9o6t9AKlvtR0yy0c6ve3sNtYKodp5m2KATgde5JAA6kmp9vUb0Q7MiQ6pvz/aMw9QOR+tThZ3BM1xJIT1y5H8qW4vLO1sI7+4uI7e3kKBZJv3Yy5AUHdjBJIGDzk4qPWtX0nw/p51LWtQt7K0zgTStwTgnAx1JweB1o9rUYh6WltgZtVJ7ZJq1HBGB/qVA9qkj/eRpJF+8V1DAjnIPSpcuhA2Y+vahSktyWyNbeIEExD8qeYbfn5Nox6VHqWp6fplot3qV3BawmRYw0pwCzEAD8zVu1eG6to7mB45YpUDoyHKsCMgg9wapSvuJp7kSQx7c71Hpx0pywK5wZV/KotTu9O0+MSX1xHbI5KqZGwCQpY/+Oqx/Cqmq6ro+jQw3Gparb2iTyLHCZGAEjMQAB6k5/rV3Fa5pragfxk5HUGhoCBxvJNKkrJwzbvfH6VKHcLxuOfahq4KxzvwtKp4Dsi+FAecnIwP9c/+c18l/GK8TxJ4vsPEVtNYaRol/dXEel2+zyVlggZS90XjUsHlmAClVLkLjOBz9U+CdPh1j4WnSbiSVIL2K7t5Hhfa4V5ZFJVuxweD61buvAnh+Xwja+G4oGtbe0tBaW1xCF+0QRYAOyRlJUsBgkc8k8HmvO5lGTO2nNQdznvgjfR33wbhkXxVN4omRJ0uL+ZZcmTLEp+9G8hQQAW5IHboPmf9oe8Gkz+C9Td5FZPD9kCuz76gfNhsFVYZXr64HpX2Lpek6PoPgxdK0C1gttNt7VlgSI/LjB5z3JOST1JJNfJHx0e387wdDLAlyD4ZtjLBjlkAVhtVhtLZU45Bz35rCs1yq6ur6+lmbYa7qNx3seUT6noizMdasLGGZwrx4tnfehUHdu4ySd2ffOeaKu3WjT6ncvqF4bq2acKUjW3WQbAoUHJYddufxormjUw9lebT8m7fkzql7S+kUZ0OtwTaU9rPHBNBbExyTyx7vKQhwHWMAED/AFec45IB6197fA1zcfC3QbiSQSPLZQuX/vExqc9T/M18M3yS3+m3FtbWMsQdReXcsaq6swjdhxwG3HAyQOQT2Gft34GyyQ/DDw+Jmd8afBuLYznyk64J5z7muzAun7VtK2+m/b+vu0OfGOXJaR3kkByduAMVi20Mgv8ATc8f6DJz+MPatuO4Vsg9cflWbaSxm+009hYyg8f7UNezyxZ5qRdjjfJAPPbiuQ+LXhO88YeGl0i2vYrQNMHldlY5QKw24UjOSRkHjGfau5DrgEDrXJfE/wAK3Hi3T9Ns7e5WCGG9Wa6BYgvEAcqo6FiduM8daTpK2hUNJJ3OW8U+CNU8QfDPTPDsuoWlo9syGaTnYUVWCp8uARyoORg4J64qTxL4Q1vUvhzY+HpLq0iZLULPudlUuqgIuVGNo5PTqqnHUVp/8IjrCfCmw8JWF1PZzvGkVxLKYpDFGTmVWwMMSCw+XncR8wHNR+KfDniPxH4QsdMgabTZ7UPFLHdXInE5C7UlMinewz838DHndjoY9kzVPz6kOp+FL6+8HWPhgXmnw2UDJ5wmsmm85I5leIYaQAZCAPkMDk4203x/4Tu/FHhW10TUNSijjSWN7iSGLyi+1hnHzEKNu75SGycdMVHrfgnW9d+Hfhvw9Kiw/YZ7c38d1KP38cbqGQiI4KFSxxuzhVBySSNb4k+FdQ8VeD4tKuYbNiHWW6WEkCXacbUDEYyCW5YYKgcg5p+yZK0a16nQ6ZC2n6fb2yyNKIowgdgqkgDA4UAdPQAVV17TLLVUjfUby/t40BTbb38lsG3YAyY2BJ9Oe9WdItb46bBHew2sNxGpVxbFvKOOAV3AEcY45x0yep5H41eHvEeu+F007w9EZZFuEmmHmBWZUO4IMkA5YLkd1DDqRUcr7ERTctyXxp4Gstf0XStC+0tb6fZ3CSy3E1y8lwUUY8sOxLfNnBctke/bofEXh+z1KNXvL7UIIY4yu211CW2Qg9z5bLz6fWuQ8deEPFPiiztVeKxtRBFIJrZpjLHcOThdvAAOBwx5XcRjvS+OtC8beIrfT/st62mRtEq3engqY9wcMxaQEkgquwBQcZzkc1VrblWvbUPHXgBdftNPSG/uITYwSQRebdSucNGyBixYksAxBY5JzyTjBz/EvgS8v5/CyJeRkabGkU5EphztRt3lBF+Uu2MkEEBFK4IrS8X6R4j8Q6bo1tbSizNo8VzdJeXBJlkjwwifyh825gAWDYHJ2scYzdasPGNx428NaqbaUWkRMmo2kd0jwQShJERlYlHbiU54IKrjGcUk0NSaS17npgYIicHAHGeSPzp5n4wCR7jmsF5dQYs3mxcD+Fe9Na9uoYszRMrf7IyDxRZtmNtCHwTq+maF8MLfVtZv4rKygeYzTzSAKuZ3AyfqQK828XfEez0v4feMdWsPHU/i0akbmDTYLazULpnPl5Z1AOwGWMB2PzErtznJ9D8EaPpfiP4TWem6zp8F9ZzGR3t7hAUYidmXI9iBXkXgL4f33gn4G6+3ivTNDt77V78fbIdXWRrVIEbESu0GSi+Zlg+cLuBPSvP0u7nXTUbanqfwltfEtj8Oms9eg0S2tLe0WHTodOmMrRxrHtIkfAVmyM5UdzmvmP8AaDv00y48FamZXUR+H7IbVUneoX5irEEAjK9cZ3Ae1e+fA2G3MfjTUdIs7Oz0K5Fulsmn5Fk9zHblbl7fIGYy+AHAAbaa8L+NTwGTwjHdRfbA3hy3MkW4MzIArDCkbWbKnByDnvzisK7SSurq+v3M3w6l7R8u9jy+fVdD85jrFrYwTMFaPEcj70Kg7tykAkktk9c5oq3eaPNqty+oXklxatMF8uP7Ks2EVQoO4sOu3P40VzRnh0lebT7Ju35M6m6l/hX9fMzodctp9Le0nWGSG3PlSXEgJESEOFdYwA2PuZyByQD1r7e+D+oSv8OdCkd1leWzhcuR1JjU5718X3sb3mmXNpa2MsXmgXd26KrqWEbsBgEbtx2jnHIJ5xz9kfCEsvwz8PiRizmxg3FuGJ8pM55PP4104RwdRuKtvpv2/P8AyObGOXJaR6FZXcYZlkIL9sDrVyKSIyEMiLgYHPPP/wCquftp5lRjhAvTOOaniLOzAuEVVBAA5bnvXq+1tY8xHRCWHcE3gk9Mc1yvxSXxI+gKnhiWaG4dmSVo0LFEZGG4hSH4zxs+bdtPQGrkHmIxbdhgeMnHP9ay/Hev6no3hu4utKtGudSb93bwrGZS0h+78oI/VlAGSSBWqqprUqEnzIyfEF74im+D9sdP/tKz1GKBEmluBKtyJIwMMVKMzqzLlmyp2kndmoNch8bQfCzRIdGa5W/+xyLJHGJBOpMDBMsxckrnPOCzhPujIqTW/HGpR+BLe/0bZcaoqSQXSy2bxyR3AgY4Eb42DzNpJORjpuzkJqnj26s/A3hW9ttQivr6+vLe3vpooFmAVWH2k7VYbMLuOQGxxxyDWiaZur6adRvirUvFEfwbhhsLO5ubqSz+y388rSpdW+cIzIjrumcZPJZASN2QDxV8Zaj4ruPhrplzpc+sfarq285xHb7Zly8bKr7QdqhC3X5jjBJJaul+JnifU9Bn0F9Lt1u7a8uHF0qwO7tGqbvlIBA6HrzjkcKxrL8e+Nru1+HFnqml2E+m6lqLRLapeW5KxbpFU7j93oSQpILDPTBITv0CN3bTqdz4fuo7nQrKVZZnzAuWlBDkgc5yAc/hXA/HL/hMrrSRH4VuHt7X7HcrfNFzISyhU2gHORkn265GK9A0iaHUdIs79FxHcxLKmSpyrDIPykjBHPU9a4P4+67f+GPCUN3oc8VvfPeRRsFQNIYmO1ioPAIJXkjGeO4qW5EU/jViL4j23iTUtK8JnSpdS2wTwtfrBKIjIrgRncSck4Zu+BnJyQKd8Zj45vNPtI/CIuokmtJRJHAU80SuuxQxJK4AZj1xuAOTjIpfGHxTe6N4I0u/0O88u7ur2GKVWjBlaFwQxUMMKQSMMVxnHHODa+KniTW9I0e2l8MeYbi5g3KTZvKxB6vjjZsAz8wI55xjBOZlx5vd0XUh8dJ4gl1PwfIbi4hsFZJNTWF5VAAZTvkbapCjGcEg5yOcGnfFhvHGoraXPgXyJbGW03FjII5VlZ1ZHG4/whOhGDvIIbOBP4v8SeJIbzw1aaFZeedRge4nUoSP9VuRAxIAy3XuFBPbBxfG/iTxTp3hnSJ7KKE+dpUVxPeN94yl4VkHl4wMK5bPIyemFNJ+goqWlkjv9D2Xei2ssfmQuIQrxXBfesg4ZSW5JBB5PJ696gvyoVfPK+h5GPrWk9vIiAPIvmY5CksAe+D3/KqcsfmsYyyqc5yRxWTavZnP1G/CPafh9ppQAqTNjAxx5z1pw+IdLufFN54WDsdRtbSO7ljKZUxSMygg9OqnIPqK4qxu7Kx+AFxNf69/YFuba5jOopktblpXUMo6s2SMAck9K+cvCsmueILjxt4nt9d12aTw5o6W/wDaNw7wXMoUMohMcW4qrAMTncw2cspYsOHlu2dcIcybPq7wf4p07xn4CfXNMj8q3kFxEIiwYqY3dDnHrtyPYivkH456kmnyeDtUaSVPK0S0Ups5ZRncVOCoIyOuM7sZ7H6C/Za0WLTfgNbXp0u2s7u/hmkllSFo5J0DP5bOTy3B4I4wRivCfjPDaRL4Qtp4DcofDsDzQhsnaNrgrG3BOVIHIPbJ6VhX5UrNXV/0Zvh01UlyHmsmraG0rNq0dpbTNtZB+9fehUHduQgHJJ/HNFT3ujy6vdPqN5JJbGUKI42tBPhFUKDuLjGcE49/eiuaMsNZc05J9k3ZfgzpbqX0iv6+ZTh121l0p7OfynigPkyTux2xoQ4VgigMVPydQOoHevtH4WXM0/w50W4lbzHezhdjjrmNTmvjy9j+2abc2lpp8sBlAursxqHUkRu23AI3bjtHbkHOcV9b/DG9jsvhdoslwjuY9PgMmVG4Hyl7etdOEUJVG4qz10v6f19xhjHJwtI7OHbtBbOBng8VYWchCIxhc81ylh4hlk8ua4U+TIVG0RNkZHYjOcVuLfRTy7Y5EzwCM8r3x7V3NO2pw1aMqTtIvR3DLll4bPHPT65qzDd/KBKPlPJ2rioEkjYgELnrjoPxNI4jYKI/xyKaT3MSy0sRAMTOoxkZPapXunAQKwVccLVSNXZ1BG48EgdKfdJySU2kr1z2quaS0At2l5IWJIztXgk4qe3uyZAJCpBbgnrn2rGiyoPI2gDmnIfOHnFWz2B6VUZyQHQyXCoVG5Rx8qj/ADxVZJEunJlXe4bKZTIQ9Ov0zWdAGYbpOcjABGAf/rVajunhfcF34AVVHC49Sa1U+YQ9tLbzYyqRskQ+T5QNnbj0/CnRQzpiJYwUxggcAAdh2x7VoRXasgLbQxGcCpRKpKjHB960UI9GOxnPKVOwy4bsPas7UYY542jlSNoNu0xsuVIx0x+ldFJGhUlUTd2yKyr+B4YCznzQqknAxzn0rGpTkOzuY7Tu3BJ4446VGqSF2m855FJ+YFiuPcUxb07Nogd96llORwAcfzp6TNNJGPs8iqxI3AZVTXOm1qaulOG6K/gnR9O8RfCaDR9Xg+02dyJlkVn+bInchgw6MCAQR0IGOlef+Bfg7eeHPC/xA0C+0tdUs9Umg+xrHfm3e+iiGfnk5MbFid2eCSw+6a9R+E4/4oHTwc5DTDkAf8tn7dq+dvHPxt+Jlhrnizw9Z6n4ejm0q8SG3uIrY+bI2/aYYonL73OepGAEPqKwV22kbU1J3SPVfgn4Pu9A0DXddvNGh8NyavGFXQ7cny7JIQ6KxYk75HHzF+MjHGc188fHu7TSbnwZqLTnCaDZEoASSuPmKkjbkZHUjO4fQ/ZGkahcar4Ih1G70+80+5uLLfLbXUYSWJivIZegPtXyR8dxYmTwfDcQfa4m8NWzTRiYMQoVW3BDwzZUgEYPbuBWFeS5feV1fX7ma4dydRtb2PLJNX0N5WOqfZ7aUhSgEsz70Khg25CAckn1+tFS32ky6vdPqF3I9t5oURRvaCchFUKDncMZIJx7570VzRlhklzTkn2Tdl+DOpud/hRUg121l0trKfyzHETBJMZWCxqRIFYKvzFT8nUD72PWvsHwMhvfhNp0lwzGSWwjctyMkxAnjt1r5Ivoxdabc2lnp8kDTgXV2I13rkRs20AEbtx28ccjvivr34dWcrfB/SCQ2/8AsyEtlcHPkqTkdjXVhHBVG4Kz10+7+vuM67l7ql3RRgiljMURhUKGChtn3iCRx+Iro9Vsb97tJrdlYI2CYsB++fbv6+tUbOyhu9Us0tmaQock4IIA5xXTTWF0F+VfKQAcIAePxr1qN3dtE5hJPljbuZVrZ3AaV2knBTJLCYnnGfung1d0m4uHieO4UtgZD7cbh7+h/wA9qhme7guT5UolMZ+46cjjtj8KuKNQnZn8nIABG99ob6elVUhfoeY0mrI0rOPcpcy9sEHtVhwMLlvMAwxPUD0ArJguJftPkzxNG7H5TnIJ54+vStGFSrrvQ46gelY8ttyLMdGhkhI2bFB+fnGKUgh41ixszwSOSPX604mQgxlSU64FIU+XhSpzjjvSHYbMiPIpQJnPLOc85q4bFQP3lyvzABQT1qkIpC5Y8Ko6Yp5Lou/G9z3PJFWnHsKw6Szkjl+WVZSCM89B2/8A1VPsvC3yo4IG3eeoqC0bynMjRgyZyoJ4q/He3BVjLjB6BV6D0+tVZd7AWtODJCTIAo6DJyT9c0mp7HspACM5Ucn3FRRuswLzALGOikE81DqUAaz8qAqxLhtucZ5zz7Vspe6XCVpJmYsSCNWQxocFcDBzz68n/wDVV22if7XEG2eXuGAOtVItLvY95aaFY9uSA2O47AVft1dLyMySxlV54J49ulTHXdHoVKsGtzirXxNp3hH4Nx6rfzzW6ebLbwtBAJJBLJcOqbUJG7BOcE9BXy/eeG9Osf2gLK28e6p/a+n3832y/nuLGbTnZnyP3kYQMPnGBtO056jJr6NM3gXVvh1L4K8Y6xbWEn2iVZoXn8ieGQXDsjqW5zkBg2MEc8g1kpBpLIltP+0Hqslmi4ULcWizFc95vL3HkdfyrzdmzGnNRR6LoN74at7PW/Bugr5LeHo1hmtjk+WssIlQgkkspDdfUEdq+T/2hrmPR7zwTqDy7Qnh6xLIR8xGPmZf4cjI4yOv4H6G8KP8LPB2masND8QwXl/qKlrq4mvmuru7dVIUE8sx5IAUdT0zXhn7R1pFbah4T0zVLMytD4ct0urfeN0WwKSRHn72UIGPcelc9ayh7yur/ozXDX53y9jyR9X0SWVm1KWO0l+Uov2qdtylQwbKEA5JPr9aKdf6TJrN2+oXLmASBVijktPPIRVC5zuGMkE4HrnvRXKvq9lzTkn2Ten4HU3O/wAKLlm32nwjM8wJ8uFkULIyDAjkODtIz07+/qa+1vg1/pPwx0KaYBnls4mfjgkxrRRW2Wf7xNev6E5gv3aOnaxtIATDbxxkjnagGahdAJliDMFJweecUUV9EkeRJt6sfBaQB12pgs2Ce/FXDDH5ZUIAMjpRRSkOOxHLZ27vhoxw2Qe4x71KkKNkkdKKKiexPUaYkDcCpDEm3OM/WiisrFCrEn92kaGMjpRRTAYYlJGf88UnlqADz0zRRTsIeY1z34FMEKNJnLDBxwffNFFNAxyQLsZSzkHHU+1K1rG2fmkHbhyKKKGCCW0iY5O7lcYB47/40qWyRuWV5Mkf3zRRTjuBf8sMBlmHbg4/z0r5E/a9ke2+LujtGxJFhEBu5x+9fn60UVyZlrSX9dGd2X/xH6HmF9Y28lxlzc5Cr927lXqAegYDqTRRRXycatRJe8/vPWcI32P/2Q=="/>
		<hr/>
		<h2>秒懂白居易</h2>
		<video src="D:\web-workspace\20220509\imgs\yiqing.mp4" controls="controls" width="400px"></video>
		<video src="./imgs/白居易秒懂百科,生活,生活小技巧,好看视频.mp4" controls="controls" width=400px></video>
		<video src="https://www.bilibili.com/video/BV1KS4y1b7aT?t=6.1" controls="controls"></video>
		
		<hr/>
		<h2>代表作</h2>
		<p>《长恨歌》<br/>《卖炭翁》<br/>《琵琶行》</p>
	
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

二、导航标签、表格标签、css。

1.导航标签（标签a）

标签	名称	备注
<a href=“#libai”>李白	导航标签	在同一个html文件中，#libai点击后跳转到本页面的name=libai处。目录就是这么做的。
<a name=“libai”>李白
	iframe用于在网页内显示网页。

<a>		定义超链接，用于跳转

效果：点击李白，在本页面中进行跳转
请添加图片描述

<html>
	<head>
		<title>诗人</title>
	</head>
	
	
	<body>
	
		<a href="#libai">李白</a>

		<a href="#dufu">杜甫</a>
		
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		
		<p>
		<a name="libai">李白</a>（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。《旧唐书》记载李白为山东人 [2]  ；《新唐书》记载，李白为兴圣皇帝李暠九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友 [3]  。
李白有《李太白集》传世，诗作中多以醉时写的，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《早发白帝城》等多首。 [3]  李白所作词赋，宋人已有传记（如文莹《湘山野录》卷上），就其开创意义及艺术成就而言，“李白词”享有极为崇高的地位。 [25] 
		</p>
		
		
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		
		
		<p>
		<a name="dufu">杜甫</a>（712年2月12日 [1]  ～770年），字子美，自号少陵野老，唐代伟大的现实主义诗人，与李白合称“李杜”。出生于河南巩县，原籍湖北襄阳。 [2-3]  为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”，杜甫也常被称为“老杜”。 [2] 
杜甫少年时代曾先后游历吴越和齐赵，其间曾赴洛阳应举不第。三十五岁以后，先在长安应试，落第；后来向皇帝献赋，向贵人投赠。官场不得志，目睹了唐朝上层社会的奢靡与社会危机。天宝十四载（755年），安史之乱爆发，潼关失守，杜甫先后辗转多地。乾元二年（759年）杜甫弃官入川，虽然躲避了战乱，生活相对安定，但仍然心系苍生，胸怀国事。杜甫创作了《登高》《春望》《北征》以及“三吏”、“三别”等名作。虽然杜甫是个现实主义诗人，但他也有狂放不羁的一面，从其名作《饮中八仙歌》不难看出杜甫的豪气干云。
杜甫的思想核心是仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。 [4] 
大历五年（770年）冬，病逝，享年五十九岁。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。后世称其杜拾遗、杜工部，也称他杜少陵、杜草堂。
		</p>
		
		
		</a>
		

	
	</body>
	
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

2.表格标签（标签table caption thead tbody tfoot tr th td）

标签	名称	备注
table	表格	属性有 border=“1” 表格边框。bgcolor="lightgreen"表格背景颜色。
caption	表格名
thead	表格标题头部
tbody	表格内容部
tfoot	表格尾部
tr	标题行
th	内容行
td	单元格	属性有 rowspan="4"同一行4个单元格合并。colspan="3"同一列3个单元格合并。align="center"居中。

请添加图片描述

<html>
	<head>
		<title>表格标签</title>
	</head>
	
	
	<body>
		<center>
		<table border="1" bgcolor="lightgreen">
			<caption>名将表格</caption>
			<thead>
				<tr>
					<th width="100px">姓名</th>
					<th width="100px">性别</th>
					<th width="100px">年龄</th>
					<th width="100px">图片</th>
					<th width="100px">职位</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td align="center">韩信</td>
					<td align="center">男</td>
					<td align="center">28</td>
					<td align="center">
						<img width="200px" src="https://tse1-mm.cn.bing.net/th/id/R-C.ea95f773583f21d6b0b6e1566019ac12?rik=FIUubOFgDMpMGg&riu=http%3a%2f%2fwww.xuanlishi.com%2flishijiemi%2fUploadFiles_7357%2f201811%2f2018111511144210.jpg&ehk=KL480FZpKitlnYnA5pEkHWolIcu%2b2id92sV8iuRBhFw%3d&risl=&pid=ImgRaw&r=0"/>
					</td>
					<td rowspan="4" align="center">大将军</td>
				</tr>
				<tr>
					<td align="center">白起</td>
					<td align="center">男</td>
					<td align="center">50</td>
					<td align="center">
						<img width="200px"  src="https://tse1-mm.cn.bing.net/th/id/R-C.11e634e079bc7ca4a9bad0a50b529704?rik=x1s7A8Je1eyVqg&riu=http%3a%2f%2flbimg.tvmao.com%2fstillcut%2fKpwqL7WqMBSpVnKsKDwmLR%3d.jpg&ehk=ElQFkgtae8FCFRj10TPL3FSliZpURoBxYG5%2bklcxzvs%3d&risl=&pid=ImgRaw&r=0"/>
					</td>
				</tr>
				<tr>
					<td align="center">李靖</td>
					<td align="center">男</td>
					<td align="center">50</td>
					<td align="center">
						<img  width="200px" src="https://pic.baike.soso.com/p/20130522/20130522155448-2112026685.jpg"/>
					</td>
				</tr>
				<tr>
					<td align="center">岳飞</td>
					<td align="center">男</td>
					<td align="center">35</td>
					<td align="center">
						<img  width="200px" src="https://imagev2.xmcdn.com/storages/0e74-audiofreehighqps/34/2F/CKwRIaIEutkmAAFlYwDESFK1.jpg!strip=1&quality=7&magick=jpg&op_type=5&upload_type=cover&name=web_large&device_type=ios"/>
					</td>
				</tr>
				<tr>
					<td align="center">花木兰</td>
					<td align="center">女</td>
					<td align="center">35</td>
					<td align="center">
						<img  width="200px" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.hfQSqY-ACA5OHHZszdMONAHaK-?pid=ImgDet&rs=1"/>
					</td>
					<td align="center">士兵</td>
				</tr>
			</tbody>
			
			<tfoot>
				<tr>
					<td colspan="5" align="right">
						<a href="#">上一页</a>&nbsp;&nbsp;
						<a href="#">1</a>&nbsp;&nbsp;
						<a href="#">2</a>&nbsp;&nbsp;
						<a href="#">3</a>&nbsp;&nbsp;
						<a href="#">4</a>&nbsp;&nbsp;
						<a href="#">……</a>&nbsp;&nbsp;
						<a href="#">99</a>&nbsp;&nbsp;
						<a href="https://www.baidu.com">下一页</a>
					</td>
				</tr>
			</tfoot>
		</table>
		</center>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

3.表格标签-css

标签	css中可调的	含义
table	border:2px dotted red;	调整表框线条颜色类型宽度。
	border-collapse:collapse;	表格框线合并。
	width:70%;	宽度设置为页面宽度的70%
	text-align:center;	文字居中
	margin:0 auto 0 auto;	调整位置
	background-image:url(‘#’);	设置背景图片
td	border:1px solid green;	调整表框线条颜色类型宽度。
th	border:1px solid green;	调整表框线条颜色类型宽度。
	font-size:30px;	字体大小
img	width:200px;	图片宽度
	height:140px;	图片高度
caption	font-size:35px;	表格标题名称字体大小
a	text-decoration:none;	不显示下划线

请添加图片描述

4.小作业：简历

就是表格和CSS的练习

请添加图片描述

<html>
	<head>
		<!-- 这是标题 -->
		<title>简历</title>
		<style>
			table{
				border-collapse:collapse;
				border:20px solid #336699;
				width:70%;
			}
		
		</style>
	</head>
	

	<body>
	<center>
		<table>
			<tbody>
				<tr>
					<td colspan="5">
						&nbsp;
					</td>
				</tr>
				<tr>
					<td colspan="4" style="color:#336699;font-size:1.5em;"><b>速写简历</b></td>
					
					<td rowspan="4" style="border:0px solid red;">
						
						<img height="140px" style="border:0px solid green;" src="https://tse1-mm.cn.bing.net/th/id/R-C.11f2fbe0ce20f805804f84fdfdbfb482?rik=blrvYXUgCCgyGg&riu=http%3a%2f%2fwww.gufengjia.com%2fd%2ffile%2fimages%2f201907011313%2f13-1P130101519-50.jpg&ehk=9yaVv5HNE%2b6YCc4VlHkdsV%2bDNeZHVfWYr3L8QHWltZY%3d&risl=&pid=ImgRaw&r=0"/>
						
					</td>
				</tr>
				
				<tr>
					<td>生日：</td>
					<td>1995.05.05</td>
					<td>手机：</td>
					<td>17070707070</td>
				</tr>
				<tr>
					<td>现居：</td>
					<td>四川省成都</td>
					<td>邮箱：</td>
					<td>Docer@qq.com</td>
				</tr>
				
				<tr>
					<td>
						&nbsp;
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<b style="color:#336699;font-size:1.2em;">工作经历</b>
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<hr/>
					</td>
				</tr>
				
				
				<tr>
					<td colspan="2">
						<b style="color:#336699;">2014.09-2018.06</b>
					</td>
					
					<td colspan="2">
						<b style="color:#336699;">食味添（上海）科技贸易有限公司</b>
					</td>
					
					<td colspan="2">
						<b style="color:#336699;">渠道/分销经理</b>
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<p style="padding-top:5px;"><b>渠道开发：</b></p>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<p>通过行业展会、广告宣传、客户转介绍等方式开发传统经销商的销售渠道，覆盖传统的婴童产品渠道，组建线上运营团队，开发天猫、网易考拉等电商渠道，同时结合产品市场定位，开发主营进口产品的高端KA连锁卖场，不断扩大产品销售渠道。16个月时间，共计开发31个省市经销商。</p>
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<p style="padding-top:5px;"><b>品牌推广：</b></p>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<p>结合“海、陆、空”三条渠道树立公司品牌形象，“海”通过消费者活动、积分体系等软营销开展消费者教育活动，加强口碑建设。“陆”通过行业论坛、大事件推广等方式提升品牌的专业形象；“空”通过卫视、网络等硬广以及软广的植入，增加产品宣传的覆盖率，深化品牌形象。</p>
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<p style="padding-top:5px;"><b>经销商管理：</b></p>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<p>建立并完善经销商运营管理体系，大力支持核心经销商的销售运营，深耕合作经销商，开发意向合作经销商；建立经销商管理数据库，掌握各经销商的市场情况，帮助其抓住市场的机会点，提供市场策略’促销活动以及人员培训、销售支持，跟进月度、季度KPI指标的达成。</p>
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<p style="padding-top:5px;"><b>销售管理：</b></p>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<p>制定并分解全年的销售指标，跟进阶段指标的达成情况，深入终端门店，分析问题，调整更符合客户需求的市场推广方案，保证市场销售；通过外包公司、线下监控等方式严格管控市场价格，分析经销商的各项动态指标，及时调整库存，控制产品效期，保证产品利润率。传统经销商渠道年销售额达4500万，线上渠道年销售额达460万。</p>
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<p style="padding-top:5px;"><b>团队管理：</b></p>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<p>制定并完善团队考核、激励方案，根据KPI指标跟进员工的工作情况，要求员工以客户需求为导向，以销售结果为目标，严格按标准执行市场策略。</p>
					</td>
				</tr>
				
				
				
				<tr>
					<td colspan="5">
						<br/>
						<b style="color:#336699;font-size:1.2em;">自我评价</b>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<hr/>
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<p>工作背景：3年销售管理岗位工作经验，熟悉传统快消品行业及“互联网+”的新型运作模式。</p>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<p>品牌建设：不断完善产品销售布局，结合“海陆空”的宣传推广，使产品能够更好的满足市场需求。</p>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<p>客户管理：深入挖掘客户需求，提供专业的定制化服务，通过积分和开展线下活动，提升客户粘性。</p>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<p>团队管理：制定完善的KPI管理指标，并严格跟进执行，保证团队工作结果。</p>
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<br/>
						<b style="color:#336699;font-size:1.2em;">教育背景</b>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<hr/>
					</td>
				</tr>
				
				<tr>
					<td colspan="2">
						<b>2014.09-2018.06</b>
					</td>
					
					<td colspan="2">
						<b>湖北工业大学工程技术学院管理系</b>
					</td>
					
					<td>
						<b>信息管理专业/本科</b>
					</td>
				</tr>
				
				<tr>
					<td colspan="5">
						<br/>
					</td>
				</tr>
				
				
			</tbody>
		</table>
	</center>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

三、form表单、表单标签和input、button。

1.form表单基本格式

<form action="https://www.baidu.com">
	<fieldset>
        <legend></legend>
    </fieldset>
</form>
1
2
3
4
5

2.表单标签和input、button

标签	名称	备注
form		属性有 action="https://www.baidu.com"跳转位置
fieldset		这是form表单的框线
legend		这是form表单框线上的文字，也就是标题
input	输入框(单标签)	input和form结合起来，input中的属性type=“submit"表示提交数据，form中的action=”#"表示提交到哪，属性value表示显示的文字。
button	按钮（双标签）	<button type=“button”>这只是个按钮 butoon中的属性type="button"时只是个按钮。
		<button type=“reset”>重置form中的数据 butoon中的属性type="reset"时表示重置。input中也能写type=“reset”，也是重置。

请添加图片描述

<html>
	<head>
		<title>form表单-提交按钮</title>
	</head>
	
	
	<body>
		<form action="https://www.baidu.com">
			<input type="submit" value="访问百度页面"/>
			<button type="button">这只是个按钮</button>
			<button type="reset">重置form中的数据</button>
		</form>
		
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

请添加图片描述

<html>
	<head>
		<title>form表单-结构</title>
	</head>
	
	
	<body>
		<form action="https://www.baidu.com">
			<fieldset>
				<legend>名字</legend>
				<input type="submit" value="百度"/>
			
			</fieldset>
		</form>
		
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.例子：用户注册

思想：form表单中放一个表格，这样比较整齐。

标签	属性	备注
input	type=“text”	文本输入框（明文）
	placeholder=“请输入您的姓名”	输入之前显示的东西，用于提示用户
	required	此项为必填项，不填无法提交
	readonly	此项只读，不能修改
	type=“password”	文本输入框（密码）
	type=“date”	日期选择框
	男	type="radio"表示单选。
	跑步	type="checkbox"表示多选
	type=“file”	上传文件
select		下拉选择框
	请选择工作经验
	0~1年
	1~3年
	3~5年
	5年以上

textarea		属性cols="50"表示输入框宽度为50个字，rows="20"表示输入框高度为20行。

请添加图片描述

<html>
	<head>
		<title>form表单-组件</title>
	</head>
	
	
	<body>
		<form action="https://www.baidu.com">
			<fieldset>
				<legend>用户注册</legend>
				<table border="1" style="color:black;">
					<tbody>
						<tr>
							<td align="right">姓名：</td>
							<td>
								<input type="text" placeholder="请输入您的姓名" required readonly/>
							</td>
						</tr>
						<tr>
							<td align="right">密码：</td>
							<td>
								<input type="password" placeholder="请输入您的密码"/>
							</td>
						</tr>
						<tr>
							<td align="right">出生年月：</td>
							<td>
								<input type="date" placeholder="请输入您的出生日期"/>
							</td>
						</tr>
						<tr>
							<td align="right">性别：</td>
							<td>
								<input type="radio" name="gender"/> 男
								<input type="radio" name="gender"/> 女
							</td>
						</tr>
						<tr>
							<td align="right">爱好：</td>
							<td>
								<input type="checkbox" name="hobby"/> 跑步
								<input type="checkbox" name="hobby"/> 篮球
								<input type="checkbox" name="hobby"/> 游泳
								<input type="checkbox" name="hobby"/> 乒乓球
							</td>
						</tr>
						<tr>
							<td align="right">工资：</td>
							<td>
								<input type="number" placeholder="请输入您的工资"/>
							</td>
						</tr>
						<tr>
							<td align="right">工作经验：</td>
							<td>
								<select>
									<option>请选择工作经验</option>
									<option>0~1年</option>
									<option>1~3年</option>
									<option>3~5年</option>
									<option>5年以上</option>
								</select>
							</td>
						</tr>
						<tr>
							<td align="right">上传图片：</td>
							<td>
								<input type="file"/>
							</td>
						</tr>
						<tr>
							<td align="right">个人评价：</td>
							<td>
								<textarea cols="50" rows="20" style="border:2px solid green;"></textarea>
							</td>
						</tr>
						<tr>
							<td></td>
							<td>
								<input type="submit" value="用户注册"/>
								<input type="reset" value="取消"/>
							</td>
						</tr>
					</tbody>
				</table>
			</fieldset>
		</form>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

4.小作业：疫情个人信息登记表

就是以上知识的运用。

请添加图片描述

<html>
	<head>
		<title>疫情个人信息登记表</title>
		<style>
			table{
				 border:0px solid red;
				 border:2px solid black;
				 border-collapse:collapse;
				 width:100%;
			}
			td{
				border:0px solid green;
				border:1px solid black;
				height:35px;
			}
			fieldset{
				width:50%;
				border:3px solid black;
			}
		</style>
	</head>
	
	
	<body>
		<form action="https://www.baidu.com">
			<fieldset>
				<legend>疫情个人信息登记表</legend>
				<table>
					<tbody>
						<tr>
							<td align="right">
								<label>姓名（*）：<label>
							</td>
							<td>
								<input type="text" placeholder="请输入您的姓名" required/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>身份证号（*）：<label>
							</td>
							<td>
								<input type="number" placeholder="请输入您的身份证号" required/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>性别：<label>
							</td>
							<td>
								<input type="radio" name="gender"/> 男
								<input type="radio" name="gender"/> 女
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>出生年月：<label>
							</td>
							<td>
								<input type="date"/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>电话号码（*）：<label>
							</td>
							<td>
								<input type="number" placeholder="请输入您的电话号码" required/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>所在行政区：<label>
							</td>
							<td>
								<select>
									<option>请选择所在省</option>
									<option>陕西省</option>
									<option>河南省</option>
									<option>上海市</option>
									<option>广东省</option>
								</select>
								<select>
									<option>请选择所在市</option>
									<option>西安</option>
									<option>郑州市</option>
									<option>上海市</option>
									<option>深圳市</option>
								</select>
								<select>
									<option>请选择所在区县</option>
									<option>未央区</option>
									<option>长安区</option>
									<option>雁塔区</option>
									<option>碑林区</option>
								</select>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>详细住址：<label>
							</td>
							<td>
								<input type="text" placeholder="请输入您的详细住址"/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>社区名称：<label>
							</td>
							<td>
								<input type="text" placeholder="请输入您所在的社区名称"/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>是否接种疫苗（*）：<label>
							</td>
							<td>
								<input type="radio" name="yimiao" required/> 是
								<input type="radio" name="yimiao" required/> 否
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>最近去的地方：<label>
							</td>
							<td>
								<input type="text" placeholder="请输入您的最近去的地方"/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>有无24小时核酸：<label>
							</td>
							<td>
								<input type="radio" name="hesuan"/> 有
								<input type="radio" name="hesuan"/> 无
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>上传核酸结果：<label>
							</td>
							<td>
								<input type="file"/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>是否去过以下地区：<label>
							</td>
							<td>
								<input type="checkbox" name="diqu"/> 去过上海市
								<input type="checkbox" name="diqu"/> 去过深圳市
								<input type="checkbox" name="diqu"/> 去过郑州市
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>最近是否有发烧、干咳、<br>嗅觉失灵现象：<label>
							</td>
							<td>
								<input type="checkbox" name="zhengzhaung"/> 有发烧现象
								<input type="checkbox" name="zhengzhaung"/> 有干咳现象
								<input type="checkbox" name="zhengzhaung"/> 有嗅觉失灵现象
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>有无接触新冠患者：<label>
							</td>
							<td>
								<input type="radio" name="jiechu"/> 有
								<input type="radio" name="jiechu"/> 无
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>是否有以下慢性病：<label>
							</td>
							<td>
								<input type="checkbox" name="diqu"/>  高血压
								<input type="checkbox" name="diqu"/> 糖尿病
								<input type="checkbox" name="diqu"/> 心脏病
							</td>
						</tr>
						<tr>
							<td align="right">
								<label> 紧急联系人姓名(*)：<label>
							</td>
							<td>
								<input type="text" placeholder="请输入紧急联系人姓名" required/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label> 您与紧急联系人的关系：<label>
							</td>
							<td>
								<input type="text" placeholder="请输入您与紧急联系人的关系"/>
							</td>
						</tr>
						<tr>
							<td align="right">
								<label>紧急联系人联系方式：<label>
							</td>
							<td>
								<input type="number" placeholder="请输入紧急联系人联系方式"/>
							</td>
						</tr>
						
						<tr>
							<td align="right">
								<label>列出近14天旅居史：<label>
							</td>
							<td>
								<textarea cols="50" rows="13"></textarea>
							</td>
						</tr>
						<tr>
							<td></td>
							<td>
								<input type="submit" value="提交"/>
								<input type="reset" value="取消"/>
							</td>
						</tr>
					</tbody>
				</table>
			</fieldset>
		</form>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

四、列表标签、CSS的引用方式、CSS选择器、盒子模型。

1.列表标签


无序标签	水果
	苹果
	香蕉
	梨子

有序标签	水果
	苹果
	香蕉
	梨子

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试列表标签</title>
</head>
<body>
    <h1>测试列表标签</h1>
    <ul>水果
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨子</li>
    </ul>
    <ol>水果
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨子</li>
    </ol>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.CSS的引用方式

CSS的引用方式	备注
内部引用	css放在html中
内嵌式	需要修饰的内容通过style写在标签数属性中
外部方式	css和html是两个文件，在html中加一句话引用

(1).内部引用：style写在head中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的引入方式-内部引用</title>
    <style>
        div{
            width:300px;
            height:200px;
            border:5px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(2).内嵌式：style直接写在需要修饰的标签里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的引入方式-内嵌式</title>
</head>
<body>
    <div style="width:300px;height:200px;border:10px solid green;"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

(3).外部方式

<!-- html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的引入方式-外部方式</title>
    <link rel="stylesheet" href="./css/style01.css">  <!-- 调用css文件 -->
</head>
<body>
    <div></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

//css文件
div{
    width:300px;
    height:200px;
    border:20px solid purple;
}
1
2
3
4
5
6

3.CSS选择器

选择器	举例	备注
标签选择器	div{}
id选择器	#one{}	id=“one”
类选择器	.aId{}	class=“aId”
多选选择器	div,p,h1{}	实现多选
全选选择器	*{}	实现全选
后代选择器	#Outid p{}	中间是空格
父子选择器	#Outid>p{}	中间加>号
属性选择器	input[type=‘text’],input[type=‘button’]{}	中括号[]

div{	//标签选择器，针对一类标签进行修饰
    width:300px;
    height:100px;
    border:2px solid red;
}
#one{	//id选择器（#号），修饰单个标签，id类似人的身份证
    width: 300px;
    height: 100px;
    border: 2px solid red;
}
.divOne{	//类选择器（.号），可修饰所有用户自定义为divOne的标签
    color:red;
    font-size:2em;
}
#text1,#text2{	//多选选择器（用逗号隔开），一次选择多个标签进行修饰
    width: 400px;
    height: 200px;
}
*{	//全选选择器（*号），选择所有标签进行修饰
    font-family: '楷体';
    color:darkblue;
    margin-left:0px;
}
#Outid div p{	//选择id为Outid下div标签下的p标签进行修改
    color:red;

}
#Outid>p{	//父子选择器（用>号隔开），选择Outid标签下的p标签进行修饰
    color:blue;
    font-size:
}
input[type='text'],input[type='button']{	//属性选择器，选择属性为特定值的某些标签进行修饰
    width: 200px;
    height:50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

4.盒子模型

请添加图片描述


div
margin
padding
border-radius		四个角的弧度
position	fixed	top:20px;right:20px;
	absolute
background-image: url(‘#’);		背景图片
background-size: 100% 100%;		背景图片的大小
#aId:hover{}		伪类
	background-image: url(‘#’);
	cursor: pointer;	鼠标停留时的样式
	border-radius: 50px;
	border:2px solid red;

五、计算器-用表格实现、字体字形。

1.计算器-用表格实现

其实就是表格的应用。

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <link rel="stylesheet" href="./css/jisuanqi.css">
</head>
<body>
    <div id="biaoti1">
        <p><b>计算器<b/></p>
    </div>
    <div id="aId">
        <input  id="xianshiId" type="text" value="0" style="text-align:right;" readonly/>
        <div class="colId">
            <input type="button" value="C"/>
            <input type="button" value="( )"/>
            <input type="button" value="<-"/>
            <input type="button" value="/"/>
        </div>
        <div class="colId">
            <input type="button" value="7"/>
            <input type="button" value="8"/>
            <input type="button" value="9"/>
            <input type="button" value="*"/>
        </div>
        <div class="colId">
            <input type="button" value="4"/>
            <input type="button" value="5"/>
            <input type="button" value="6"/>
            <input type="button" value="-"/>
        </div>
        <div class="colId">
            <input type="button" value="1"/>
            <input type="button" value="2"/>
            <input type="button" value="3"/>
            <input type="button" value="+"/>
        </div>
        <div class="colId">
            <input type="button" value="%"/>
            <input type="button" value="0"/>
            <input type="button" value="."/>
            <input type="button" value="="/>
        </div>
    </div>
    <div id="biaoti2">
        <a href="#">版权所有，侵权必究!</a>
    </div>

    <hr/><hr/><hr/>




    <div id="biaoti1">
        <p><b>计算器<b/></p>
    </div>
    <div id="aId">
        <input  id="xianshiId" type="text" placeholder="请输入" style="text-align:right;" readonly/>
        <div class="colId">
            <button>
                <img src="./imgs/C.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/( ).PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/shanchu.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/chu.PNG" width="54px" height="54px">
            </button>
        </div>
        <div class="colId">
            <button>
                <img src="./imgs/7.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/8.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/9.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/cheng.PNG" width="54px" height="54px">
            </button>
        </div>
        <div class="colId">
            <button>
                <img src="./imgs/4.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/5.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/6.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/jian.PNG" width="54px" height="54px">
            </button>
        </div>
        <div class="colId">
            <button>
                <img src="./imgs/1.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/2.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/3.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/jia.PNG" width="54px" height="54px">
            </button>
        </div>
        <div class="colId">
            <button>
                <img src="./imgs/baifenhao.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/0.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/dian.PNG" width="54px" height="54px">
            </button>
            <button>
                <img src="./imgs/=.PNG" width="54px" height="54px">
            </button>
        </div>
    </div>
           
    <div id="biaoti2">
        <a href="#">版权所有，侵权必究!</a>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

#biaoti1{
    width: 295px;
    height: 35px;
    border: 0px solid orange;
    text-align: center;
}

#biaoti2{
    width: 295px;
    height: 35px;
    border: 0px solid orange;
    text-align: right;

}
a{
    color:black;
    text-decoration: none;
}


#aId{
    width: 300px;
    height: 480px;
    border: 2px solid red;
    border-collapse:collapse;
}
#xianshiId{
    width: 286px;
    height: 100px;
    margin:3px auto auto 3px;

}
.colId{
    width: 295px;
    height: 70px;
    border: 0px solid green;
    margin:3px auto 3px auto;

}

input{
    width: 70px;
    height: 70px;
}

input[type='button'],button:hover{
    cursor: pointer;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

2.字体

标签	属性	备注
span		标签被用来组合文档中的行内元素。
font-family:‘楷体’;		字体类型
font-size: 1.3em;		字体大小
color: purple;		字体颜色
font-weight: bolder;		字体加粗
@font-face {		引用本地新的字体。
font-family: myfont;
src: url(‘…/fonts/web-font13.ttf’);
}

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css字体</title>
    <link rel="stylesheet" href="./css/fonts.css">
</head>
<body>
    <div id="aId">
        <div id="bId">
            <h1>长恨歌</h1>
            <h3>白居易</h3>
            <p><span class="span1">汉</span>皇重色思倾国，御宇多年求不得。</p>
            <p><span class="span1">杨</span>家有女初长成，养在深闺人未识。</p>
            <p><span class="span1">天</span>生丽质难自弃，一朝选在君王侧。</p>
            <p><span class="span1">回</span>眸一笑百媚生，六宫粉黛无颜色。</p>
            <p><span class="span1">春</span>寒赐浴华清池，温泉水滑洗凝脂。</p>
            <p><span class="span1">侍</span>儿扶起娇无力，始是新承恩泽时。</p>
            <p><span class="span1">云</span>鬓花颜金步摇，芙蓉帐暖度春宵。</p>
            <p><span class="span1">春</span>宵苦短日高起，从此君王不早朝。</p>
            <p><span class="span1">承</span>欢侍宴无闲暇，春从春游夜专夜。</p>
            <p><span class="span1">后</span>宫佳丽三千人，三千宠爱在一身。</p>
        </div>
        
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

*{
    font-family: myfont;
}

#aId{
    width: 80%;
    margin: 0 auto 0 auto;
    border: 2px solid red;
    background-image: url('https://img.zcool.cn/community/015cce5fc707e311013ee04d720741.jpg@1280w_1l_2o_100sh.jpg');
}

#bId{
    width: 40%;
    margin: 0 auto 0 auto;
    border: 0px solid green;
}


p{
    font-size: 1.3em;
}
.span1{
    font-size: 1.3em;
    color: purple;
    font-weight: bolder;
}

@font-face {
    font-family: myfont;
    src: url('../fonts/web-font13.ttf');
}

h1,h3,p{
    color: black;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

3.百度百科-李世民-div实现

其实就是div套div。


line-height: 1.3;	行高
text-indent: 38px;	将段落的第一行缩进 50 像素

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度百科-李世民</title>
    <link rel="stylesheet" href="./css/baidubaike.css">
</head>
<body>
    <div id="aId">
        <div id="leftId">
            <div>
                <p><span id="span1">李世民</span> <span id="span2">（唐朝第二位皇帝）</span></p>
            </div>
            <div>
                <button>
                    <a href="https://www.baidu.com">
                        <img src="./imgs/bobao.PNG" class="anniu"/>
                    </a>
                </button>
                <button>
                    <a href="https://www.baidu.com">
                        <img src="./imgs/bianji.PNG" class="anniu"/>
                    </a>
                </button>
                <button>
                    <a href="https://baike.baidu.com/planet/talk?lemmaId=44058">
                        <img src="./imgs/taolun.PNG" class="anniu"/>
                    </a>
                </button>
                <button>
                    <a href="https://baike.baidu.com/second/publish?lemmaId=44058&from=lemma&lemmaTitle=%E6%9D%8E%E4%B8%96%E6%B0%91&lemmaDesc=%E5%94%90%E6%9C%9D%E7%AC%AC%E4%BA%8C%E4%BD%8D%E7%9A%87%E5%B8%9D">
                        <img src="./imgs/shangchuanshipin.PNG" class="anniu"/>
                    </a>
                </button>
            </div>
            <div>
                <a href="#"></a>
                <p style="text-indent: 38px;">李世民（599年1月23日 <a href="#"><sup>[156]</sup></a> 【一说598年1月28日】<a href="#"><sup>[155]</sup></a> —649年7月10日），祖籍陇西成纪（今甘肃秦安），一说陇西狄道（今<a href="#">甘肃</a>省<a href="#">临洮</a>县）人，又说钜鹿郡人。<a href="#"><sup>[138]</sup></a>   <a href="#">唐朝</a>第二位皇帝（626年—649年在位），政治家、战略家、军事家、书法家、诗人。<a href="#"><sup>[150]</sup></a>  </p>
                <p style="text-indent: 38px;">李世民少年从军，曾往雁门关解救<a href="#">隋炀帝</a>。首倡<a href="#">晋阳起兵</a>，拜右领军大都督，受封敦煌郡公，领兵攻破长安，拜尚书令、光禄大夫，受封秦国公、赵国公。唐朝建立后，领兵平定<a href="#">薛仁杲</a>、<a href="#">刘武周</a>、<a href="#">窦建德</a>、<a href="#">王世充</a>、<a href="#">刘黑闼</a>等割据势力，为唐朝的建立与统一立下赫赫战功，拜天策上将，封秦王。武德九年六月初四日（626年7月2日），发动“<a href="https://baike.baidu.com/item/%E7%8E%84%E6%AD%A6%E9%97%A8%E4%B9%8B%E5%8F%98/143164">玄武门之变</a>”，杀死太子<a href="#">李建成</a>和齐王<a href="#">李元吉</a>，被册立为皇太子。八月初九日，唐高祖<a href="#">李渊</a>退位，李世民即皇帝位，年号贞观。在位初期，听取群臣意见，虚心纳谏。对内文治天下，厉行节约，劝课农桑，实现休养生息、国泰民安，开创“<a href="#">贞观之治</a>”。对外开疆拓土，攻灭<a href="#">东突厥</a>与<a href="#">薛延陀</a>，征服<a href="#">高昌</a>、<a href="#">龟兹</a>和<a href="#">吐谷浑</a>，重创<a href="#">高句丽</a>。设立<a href="#">安西四镇</a>，与北方地区各民族融洽相处，获得尊号“<a href="https://baike.baidu.com/item/%E6%9D%8E%E4%B8%96%E6%B0%91/44058?fromtitle=%E5%A4%A9%E5%8F%AF%E6%B1%97&fromid=54154">天可汗</a>”，为唐朝后来一百多年的盛世局面奠定重要基础。</p>
                <p style="text-indent: 38px;">贞观二十三年五月二十六日（649年7月10日），李世民驾崩于含风殿，享年五十二岁，在位二十三年，庙号太宗，谥号文皇帝（后加谥文武大圣大广孝皇帝），葬于<a href="#">昭陵</a>。他爱好文学与书法，有诗作与墨宝传世。 <a href="#"><sup>[148-149]</sup></a> </p>
                <p style="text-indent: 38px;">（概述图参考资料 <a href="#"><sup>[1]</sup></a>  ）</p>
            </div>

            <div style="background-color:DodgerBlue;
            color:white;
            border:1px solid blue;
            width: 80px;
            height: 26px;
            border-radius: 5px;
            text-align: center;
            float: left;
            ">人物关系
            </div>

            <div style="float: left;
            color:grey;
            border:0px solid red;
            width: 80px;
            height: 26px;
            text-align: center;
            margin:0 0 0 80%;">
            <a href="#" style="color:grey;">纠错</a>
            </div>

            <br/><br/>
            <div class="cId" style="clear:left;">
                <a style="color:black;" href="https://baike.baidu.com/item/%E6%96%87%E5%BE%B7%E7%9A%87%E5%90%8E/10955864">
                    <img src="https://bkimg.cdn.bcebos.com/pic/e61190ef76c6a7efce1b026929abb851f3deb48fc878?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto" alt="妻子&nbsp;&nbsp;文德皇后" class="pic2">
                    妻子<a href="#">文德皇后</a>
                </a>
            </div>
            <div class="cId">
                <a style="color:black;" href="https://baike.baidu.com/item/%E6%9D%8E%E6%B3%B0/4163">
                    <img src="https://bkimg.cdn.bcebos.com/pic/7af40ad162d9f2d3572ccf4b86a19d13632762d0664b?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyNzI=,g_7,xp_5,yp_5/format,f_auto" class="pic2">
                    &nbsp;&nbsp;儿子&nbsp;<a href="#">李泰</a>
                </a>
            </div>
            <div  class="cId">
                <a style="color:black;" href="https://baike.baidu.com/item/%E6%9D%8E%E6%89%BF%E4%B9%BE/1118749">
                    <img src="https://bkimg.cdn.bcebos.com/pic/adaf2edda3cc7cd98d1031b4094c363fb80e7bec3b03?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyNzI=,g_7,xp_5,yp_5/format,f_auto" class="pic2">
                    &nbsp;&nbsp;儿子&nbsp;<a href="#">李承乾</a>
                </a>
            </div>
            <div  class="cId">
                <a style="color:black;" href="https://baike.baidu.com/item/%E6%9D%8E%E8%B4%9E/6587855">
                    <img src="https://p1.ssl.qhmsg.com/t01f6801de929f2d309.jpg" class="pic2">
                    &nbsp;&nbsp;儿子&nbsp;<a href="#">李贞</a>
                </a>
            </div>
            <div  class="cId">
                <a style="color:black;" href="https://baike.baidu.com/item/%E6%9D%8E%E5%AE%BD/33865">
                    <img src="./imgs/erzi.PNG" class="pic2">
                    &nbsp;&nbsp;儿子&nbsp;<a href="#">李宽</a>
                </a>
            </div>
            <div  class="cId">
                <a style="color:black;" href="https://baike.baidu.com/item/%E6%9D%8E%E7%A6%8F/122158">
                    <img src="./imgs/erzi.PNG" class="pic2">
                    &nbsp;&nbsp;儿子&nbsp;<a href="#">李福</a>
                </a>
            </div>
            <div  class="cId">
                <a style="color:black;" href="https://baike.baidu.com/item/%E6%9D%8E%E6%98%8E/4709675">
                    <img src="./imgs/erzi.PNG" class="pic2">
                    &nbsp;&nbsp;儿子&nbsp;<a href="#">李明</a>
                </a>
            </div>
            <div  class="cId">
                <a style="color:black;" href="https://baike.baidu.com/item/%E6%9D%8E%E6%85%8E/5494153">
                    <img src="./imgs/erzi.PNG" class="pic2">
                    &nbsp;&nbsp;儿子&nbsp;<a href="#">李慎</a>
                </a>
            </div>
        </div>
        
        <div id="rightId">
            <a href="https://baike.baidu.com/pic/%E6%9D%8E%E4%B8%96%E6%B0%91/44058/1/dcc451da81cb39db37c20509d2160924ab18306a?fr=lemma&ct=single#aid=1&pic=dcc451da81cb39db37c20509d2160924ab18306a">
                <img src="https://bkimg.cdn.bcebos.com/pic/dcc451da81cb39db37c20509d2160924ab18306a?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto" id="pic1"/>
            </a>
        </div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

#aId{
    width: 1200px;
    height: 800px;
    border: 10px solid red;
    margin: 0 auto 0 auto;
}

#leftId{
    width: 71%;
    height: 800px;
    border: 0px solid green;
    float: left;
    padding-left: 6px;
}

#rightId{
    float: left;
    width: 27%;
    height: 770px;
    border: 0px solid blue;
    margin: 20px 0 0 10px;
}

#pic1{
    width: 100%;

}

.pic2{
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.cId{
    width: 100px;
    height: 150px;
    float: left;
    border: 0px solid purple;
    margin: 2px 2px 2px 2px;
}

#span1{
    font-size: 2em;
}

#span2{
    font-size: 1.3em;

}

a{
    color:blue;
    text-decoration: none;
}


p{
    font-size: 1.2em;
    font-family: '楷体';
    line-height: 1.3;
}

.anniu{
    width: 60px;
    height: 25px;
    cursor: pointer;
}



#blueButton{
    background-color:DodgerBlue;
    color:white;
    border:0px solid blue;
    width: 80px;
    height: 30px;
    border-radius: 5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

六、js格式、变量命名规则、按钮点击后效果，算数运算符、页面日志，计算器加js。

1.js格式、变量命名规则、按钮点击后效果

标签、条目	名称	备注
script		js的东西写在script里面
alert()	弹出框	alert(1); alert(“内容”)； alert(“我吃的是：”+a);
confirm()	确认框	confirm(“内容”);
prompt()	输入框	prompt(“你吃的啥？”);
let a = 3;	变量初始化	变量前加let，规范要求
document.getElementById(“btn7”).οnclick=function(){}		找到id为btn7的东西点击后有什么作用写在大括号中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的hello</title>
</head>
<body>
    <button id="btnId">点我</button>

    <script>
        let a=3;
        document.getElementById("btnId").onclick=function(){
            alert("我是javascript"+a);
        }
        confirm("你吃饭了吗？");
        let b = prompt("你吃了啥?");
        // alert(a);
        alert("我吃了"+b);
        
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.算数运算符、页面日志


console.log()	页面日志	可用于控制台检查错误
let c = parseFloat(a);	类型转换	parseFloat可将a的类型转换为float浮点型
let c = parseInt(a);	类型转换	parseInt可将a的类型转换为int整型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算数运算符</title>
</head>

<body>
    <script>
        // let a=3;
        // let b=2;

        // let c1 = a+b;
        // let c2 = a-b;
        // let c3 = a*b;
        // let c4 = a/b;
        // let c5 = a%b;

        // console.log(a+"+"+b+"="+c1);
        // console.log(a+"-"+b+"="+c2);
        // console.log(a+"*"+b+"="+c3);
        // console.log(a+"/"+b+"="+c4);
        // console.log(a+"%"+b+"="+c5);

        let a = prompt("请输入a的值");
        let b = prompt("请输入b的值");

        let c = parseFloat(a);
        let d = parseFloat(b);

        // alert(a+"+"+b+"="+a+b);
        alert(a + "+" + b + "=" + (c + d));
        



    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE html>	//页面日志
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面日志</title>
</head>
<body>
    <script>
        let a = 3;
        let b = 4;
        let c = a + b;

        console.log("c="+c);
    </script>
    

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.计算器加js


document.getElementById(“btn7”).onclick = function () {
console.log(this.innerText);		this.innerText指的是id为btn7这个标签中文本的内容
let val = this.innerText;		将this.innerText中的内容赋值给变量val
document.getElementById(“showId”).value = val;}		将val的值赋值给id为showId的标签（这里是显示框）中的属性值

计算器（加入js–javascript）制作要点

1.%就是把输入的值除以100再输出

2.a+b a-b a*b a/b中涉及两个操作数，第一个用firstNum存，第二个用SecondNum存，为保证两个数按照顺序放，每次先将SecondNum中的数给firstNum，再讲要存的数放到SecondNum中。

3.可用console.log将变量写上，方便查错。

请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        table {
            border: 2px solid black;
            border-collapse: collapse;
            margin: 0 auto 0 auto;
        }

        td {
            border: 0px solid red;
        }

        button {
            width: 100%;
            background-color: rgb(99, 86, 92);
            color: white;
        }

        button:hover {
            background-color: rgb(53, 72, 112);
            cursor: pointer;
        }

        #showId {
            text-align: right;
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td colspan="4">
                    <input type="text" readonly id="showId" value="0">
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnAC">C</button>
                </td>
                <td>
                    <button id="btnzhengfuhao">+-</button>
                </td>
                <td>
                    <button id="btnshanchu">&larr;</button>
                </td>
                <td>
                    <button id="btnchuhao">/</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btn7">7</button>
                </td>
                <td>
                    <button id="btn8">8</button>
                </td>
                <td>
                    <button id="btn9">9</button>
                </td>
                <td>
                    <button id="btnxinghao">*</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btn4">4</button>
                </td>
                <td>
                    <button id="btn5">5</button>
                </td>
                <td>
                    <button id="btn6">6</button>
                </td>
                <td>
                    <button id="btnjianhao">-</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btn1">1</button>
                </td>
                <td>
                    <button id="btn2">2</button>
                </td>
                <td>
                    <button id="btn3">3</button>
                </td>
                <td>
                    <button id="btnAdd">+</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnbaifenhao">%</button>
                </td>
                <td>
                    <button id="btn0">0</button>
                </td>
                <td>
                    <button id="btnDot">.</button>
                </td>
                <td>
                    <button id="btndenghao">=</button>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        FirstNum = 0;
        SecondNum = 0;
        opt = "";

        document.getElementById("btnAC").onclick = function () {
            console.log(this.innerText);
            document.getElementById("showId").value = "0";
        }
        document.getElementById("btnzhengfuhao").onclick = function () {
            console.log(this.innerText);
            let val = document.getElementById("showId").value;
            let a = parseInt(val);
            let b = val * (-1);
            document.getElementById("showId").value = b;

        }
        document.getElementById("btnshanchu").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;
        }
        document.getElementById("btnchuhao").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;
            opt = this.innerText;   //记录/号
        }
        document.getElementById("btn7").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;

        }
        document.getElementById("btn8").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;

        }
        document.getElementById("btn9").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;
        }
        document.getElementById("btnxinghao").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;
            opt = this.innerText;   //记录*号
        }
        document.getElementById("btn4").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;
        }
        document.getElementById("btn5").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;
        }
        document.getElementById("btn6").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;
        }
        document.getElementById("btnjianhao").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;
            opt = this.innerText;   //记录-号
        }
        document.getElementById("btn1").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;
        }
        document.getElementById("btn2").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;
        }
        document.getElementById("btn3").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;
        }
        document.getElementById("btnAdd").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;
            opt = this.innerText;   //记录+号
        }
        document.getElementById("btnbaifenhao").onclick = function () {
            console.log(this.innerText);
            let val = document.getElementById("showId").value;
            let a = parseFloat(val);
            let b = a / 100;
            document.getElementById("showId").value = b;
        }
        document.getElementById("btn0").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            let a = document.getElementById("showId").value;
            let b = parseInt(val);
            FirstNum = SecondNum;
            SecondNum = b;
        }
        document.getElementById("btnDot").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;
        }
        document.getElementById("btndenghao").onclick = function () {
            // console.log(this.innerText);
            // let val = this.innerText;
            // document.getElementById("showId").value = val;
            let res=0;

            console.log("FirstNum:"+FirstNum);
            console.log("SecondNum:"+SecondNum);
            console.log("opt:"+opt);

            if (opt == "+") {
                res = FirstNum + SecondNum;
                document.getElementById("showId").value = res;
            }
            if (opt == "-") {
                res = FirstNum - SecondNum;
                document.getElementById("showId").value = res;
            }
            if (opt == "*") {
                res = FirstNum * SecondNum;
                document.getElementById("showId").value = res;
            }
            if (opt == "/") {
                res = FirstNum / SecondNum;
                document.getElementById("showId").value = res;
            }
        }
    </script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器写第2遍</title>
    <style>
        table {
            border: 2px solid red;
            border-collapse: collapse;
            margin: 0 auto 0 auto;
        }

        td {
            border: 0px solid green;
        }

        button {
            width: 100%;
            background-color: rgb(76, 60, 91);
            color: white;
        }

        button:hover {
            background-color: aqua;
            cursor: pointer;
        }

        input {
            text-align: right;
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td colspan="4">
                    <!-- 输入框初始显示0 -->
                    <input type="text" readonly id="showId" value="0" />
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnAC">AC</button>
                </td>
                <td>
                    <button id="btnzhengfuhao">±</button>
                </td>
                <td>
                    <button id="btnshanchu">&larr;</button>
                </td>
                <td>
                    <button id="btnchu">/</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btn7">7</button>
                </td>
                <td>
                    <button id="btn8">8</button>
                </td>
                <td>
                    <button id="btn9">9</button>
                </td>
                <td>
                    <button id="btncheng">*</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btn4">4</button>
                </td>
                <td>
                    <button id="btn5">5</button>
                </td>
                <td>
                    <button id="btn6">6</button>
                </td>
                <td>
                    <button id="btnjian">-</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btn1">1</button>
                </td>
                <td>
                    <button id="btn2">2</button>
                </td>
                <td>
                    <button id="btn3">3</button>
                </td>
                <td>
                    <button id="btnAdd">+</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnbaifenhao">%</button>
                </td>
                <td>
                    <button id="btn0">0</button>
                </td>
                <td>
                    <button id="btnDot">.</button>
                </td>
                <td>
                    <button id="btnEq">=</button>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        firstNum = 0;       // 设置全局标量，firstNum用来记录第一个操作数
        SecondNum = 0;      //第二个操作数
        opt = "";       //opt用来存放操作符

        document.getElementById("btnAC").onclick = function () {
            document.getElementById("showId").value = "0";      //AC按钮让显示框显示0就行了
        }
        document.getElementById("btnzhengfuhao").onclick = function () {
            // console.log(this.innerText);
            // let val = this.innerText;
            let a = document.getElementById("showId").value;        //让显示框里的值乘-1显示出来就行了
            let b = parseInt(a);
            let c = a * (-1);
            document.getElementById("showId").value = c;
        }
        document.getElementById("btnshanchu").onclick = function () {       //这个还没讲
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;
        }
        document.getElementById("btnchu").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            opt = this.innerText;     //opt用来记录除号
        }


        document.getElementById("btn7").onclick = function () {
            console.log(this.innerText);        //获取id为btn7的标签中的文本
            let val = this.innerText;       //将文本的值交给变量val
            document.getElementById("showId").value = val;  //将val的值交给显示框，显示出来

            firstNum = SecondNum;   //先将SecondNum的值交给firstNum
            let a = document.getElementById("showId").value;    //将显示框中的值交给变量a，此时是字符
            let b = parseInt(a);        //将字符转换成整型存在b中
            SecondNum = b;      //将b中的值交给SecondNum
        }
        document.getElementById("btn8").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            firstNum = SecondNum;
            let a = document.getElementById("showId").value;
            let b = parseInt(a);
            SecondNum = b;
        }
        document.getElementById("btn9").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            firstNum = SecondNum;
            let a = document.getElementById("showId").value;
            let b = parseInt(a);
            SecondNum = b;
        }
        document.getElementById("btncheng").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            opt = this.innerText;     //opt用来记录*号
        }


        document.getElementById("btn4").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            firstNum = SecondNum;
            let a = document.getElementById("showId").value;
            let b = parseInt(a);
            SecondNum = b;
        }
        document.getElementById("btn5").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            firstNum = SecondNum;
            let a = document.getElementById("showId").value;
            let b = parseInt(a);
            SecondNum = b;
        }
        document.getElementById("btn6").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            firstNum = SecondNum;
            let a = document.getElementById("showId").value;
            let b = parseInt(a);
            SecondNum = b;
        }
        document.getElementById("btnjian").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            opt = this.innerText;     //opt用来记录-号
        }


        document.getElementById("btn1").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            firstNum = SecondNum;
            let a = document.getElementById("showId").value;
            let b = parseInt(a);
            SecondNum = b;
        }
        document.getElementById("btn2").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            firstNum = SecondNum;
            let a = document.getElementById("showId").value;
            let b = parseInt(a);
            SecondNum = b;
        }
        document.getElementById("btn3").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            firstNum = SecondNum;
            let a = document.getElementById("showId").value;
            let b = parseInt(a);
            SecondNum = b;
        }
        document.getElementById("btnAdd").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            opt = this.innerText;     //opt用来记录+号
        }


        document.getElementById("btnbaifenhao").onclick = function () {
            console.log(this.innerText);
            let val = document.getElementById("showId").value;
            let a = parseFloat(val);
            let b = val / 100;      //一个数加一个百分号  的作用  就是这个数除100
            document.getElementById("showId").value = b;
        }
        document.getElementById("btn0").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;

            firstNum = SecondNum;
            let a = document.getElementById("showId").value;
            let b = parseInt(a);
            SecondNum = b;
        }
        document.getElementById("btnDot").onclick = function () {
            console.log(this.innerText);
            let val = this.innerText;
            document.getElementById("showId").value = val;
        }
        document.getElementById("btnEq").onclick = function () {        //用来处理等号的逻辑
            res = 0;
            console.log("firstNum:" + firstNum);      //用日志查看firstNum的值
            console.log("SecondNum:" + SecondNum);      //用日志查看SecondNum的值
            console.log("opt:" + opt);      //用日志查看opt的值

            // console.log(this.innerText);
            // let val = this.innerText;
            // document.getElementById("showId").value = val;


            if (opt == "+") {       //处理+法
                res = firstNum + SecondNum;
                document.getElementById("showId").value = res;
            }
            if (opt == "-") {       //处理-法
                res = firstNum - SecondNum;
                document.getElementById("showId").value = res;
            }
            if (opt == "*") {       //处理*法
                res = firstNum * SecondNum;
                document.getElementById("showId").value = res;
            }
            if (opt == "/") {       //处理/法
                res = firstNum / SecondNum;
                document.getElementById("showId").value = res;
            }
        }
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319

七、抽奖。

1.抽奖-js实现01

9宫格：每个位置只能点击一次

实现思想：在html中写个表格，每个td放入待抽奖图片，将css和js分离出去，在html中加这个引用。css中放修饰html的东西，js中放以下代码。

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖-js实现</title>

    <!-- 下面这句表示引用css -->
    <link rel="stylesheet" href="../css/game-01.css">
</head>
<body>
    <table>
        <caption>抽奖-js实现</caption>
        <tbody>
            <tr>
                <td>
                    <img src="../imgs/zj-01.jpg" id="pic00">
                </td>
                <td>
                    <img src="../imgs/zj-01.jpg" id="pic01">
                </td>
                <td>
                    <img src="../imgs/zj-01.jpg" id="pic02">
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../imgs/zj-01.jpg" id="pic10">
                </td>
                <td>
                    <img src="../imgs/zj-01.jpg" id="pic11">
                </td>
                <td>
                    <img src="../imgs/zj-01.jpg" id="pic12">
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../imgs/zj-01.jpg" id="pic20">
                </td>
                <td>
                    <img src="../imgs/zj-01.jpg" id="pic21">
                </td>
                <td>
                    <img src="../imgs/zj-01.jpg" id="pic22">
                </td>
            </tr>
        </tbody>
    </table>


    <!-- 下面这句表示引用js -->
    <script src="../js/game-01.js"></script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

table{
    border: 2px solid red;
    border-collapse: collapse;
    margin: 0 auto 0 auto;
}

td{
    width: 150px;
    border: 1px solid green;
}

img{
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

document.getElementById("pic00").onclick=function(){    //点击后的效果
    this.src="../imgs/zj-02.jpg"        //修改img的src属性就达到了换图片的目的,this指的就是id为pic00的图片
    // this.title="兰博基尼"    //鼠标滑过图片时的标题

}										
document.getElementById("pic01").onclick=function(){
    this.src="../imgs/1.jpg"
    // this.style="border:5px solid lightblue"      //蓝色边框
}
document.getElementById("pic02").onclick=function(){
    this.src="../imgs/2.jpg"
}


document.getElementById("pic10").onclick=function(){
    this.src="https://img1.jiemian.com/jiemian/original/20161129/148038027929438100.gif"
}
document.getElementById("pic11").onclick=function(){
    this.src="../imgs/4.jpg"
}
document.getElementById("pic12").onclick=function(){
    this.src="../imgs/5.jpg"
}


document.getElementById("pic20").onclick=function(){
    this.src="../imgs/6.jpg"
}
document.getElementById("pic21").onclick=function(){
    this.src="../imgs/7.jpg"
}
document.getElementById("pic22").onclick=function(){
    this.src="../imgs/8.jpg"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2.抽奖-js实现02

9宫格：加入了随机值。每个位置可以一直点，中奖的话可以盖上再继续点，没中奖可以选择继续或者终止。
将图片作为表格的背景，铺满表格单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖-js实现</title>

    <!-- 下面这句表示引用css -->
    <link rel="stylesheet" href="../css/game-02.css">
</head>
<body>
    <table>
        <caption>抽奖-js实现</caption>
        <tbody>
            <tr>
                <td id="td00">
                </td>
                <td id="td01">
                </td>
                <td id="td02">
                </td>
            </tr>
            <tr>
                <td id="td10">
                </td>
                <td id="td11">
                </td>
                <td id="td12">
                </td>
            </tr>
            <tr>
                <td id="td20">
                </td>
                <td id="td21">
                </td>
                <td id="td22">
                </td>
            </tr>
           
        </tbody>
    </table>


    <!-- 下面这句表示引用js -->
    <script src="../js/game-02.js"></script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

table{
    border: 2px solid red;
    border-collapse: collapse;
    margin: 0 auto 0 auto;
    width: 50%;
    height: 450px;
}

td{
    width: 30%;
    border: 1px solid green;
    background-image: url('../imgs/zj-01.jpg');
    background-size: 100% 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

let jp=[
    "url('../imgs/bomb.jpg')",
    "url('../imgs/1.jpg')",
    "url('../imgs/2.jpg')",
    "url('../imgs/3.jpg')",
    "url('../imgs/4.jpg')",
    "url('../imgs/5.jpg')",
    "url('../imgs/6.jpg')",
    "url('../imgs/7.jpg')",
    "url('../imgs/8.jpg')",
]



document.getElementById("td00").onclick=function(){    //点击后的效果
    let a =Math.random();
    let b= a*9;     //b的大小[0,9)
    let c=Math.floor(b);
    console.log(c);
    this.style.backgroundImage=jp[c];   //驼峰法，background-image: url('../imgs/zj-01.jpg');
    if(c>=1&&c<=8){
        alert("手气不错，再来一次");
        window.location.href="../html/choujiang-02.html"
    }
    else{
        let d=confirm("没有抽中，是否继续？");
        if(d){
            window.location.href="../html/choujiang-02.html"
        }else{
            ;
        }
        
    }
}
document.getElementById("td01").onclick=function(){    //点击后的效果
    let a =Math.random();
    let b= a*9;     //b的大小[0,9)
    let c=Math.floor(b);
    console.log(c);
    this.style.backgroundImage=jp[c];   //驼峰法，background-image: url('../imgs/zj-01.jpg');
    if(c>=1&&c<=8){
        alert("手气不错，再来一次");
        window.location.href="../html/choujiang-02.html"
    }
    else{
        let d=confirm("没有抽中，是否继续？");
        if(d){
            window.location.href="../html/choujiang-02.html"
        }else{
            ;
        }
        
    }
}
document.getElementById("td02").onclick=function(){    //点击后的效果
    let a =Math.random();
    let b= a*9;     //b的大小[0,9)
    let c=Math.floor(b);
    console.log(c);
    this.style.backgroundImage=jp[c];   //驼峰法，background-image: url('../imgs/zj-01.jpg');
    if(c>=1&&c<=8){
        alert("手气不错，再来一次");
        window.location.href="../html/choujiang-02.html"
    }
    else{
        let d=confirm("没有抽中，是否继续？");
        if(d){
            window.location.href="../html/choujiang-02.html"
        }else{
            ;
        }
        
    }
}



document.getElementById("td10").onclick=function(){    //点击后的效果
    let a =Math.random();
    let b= a*9;     //b的大小[0,9)
    let c=Math.floor(b);
    console.log(c);
    this.style.backgroundImage=jp[c];   //驼峰法，background-image: url('../imgs/zj-01.jpg');
    if(c>=1&&c<=8){
        alert("手气不错，再来一次");
        window.location.href="../html/choujiang-02.html"
    }
    else{
        let d=confirm("没有抽中，是否继续？");
        if(d){
            window.location.href="../html/choujiang-02.html"
        }else{
            ;
        }
        
    }
}
document.getElementById("td11").onclick=function(){    //点击后的效果
    let a =Math.random();
    let b= a*9;     //b的大小[0,9)
    let c=Math.floor(b);
    console.log(c);
    this.style.backgroundImage=jp[c];   //驼峰法，background-image: url('../imgs/zj-01.jpg');
    if(c>=1&&c<=8){
        alert("手气不错，再来一次");
        window.location.href="../html/choujiang-02.html"
    }
    else{
        let d=confirm("没有抽中，是否继续？");
        if(d){
            window.location.href="../html/choujiang-02.html"
        }else{
            ;
        }
        
    }
}
document.getElementById("td12").onclick=function(){    //点击后的效果
    let a =Math.random();
    let b= a*9;     //b的大小[0,9)
    let c=Math.floor(b);
    console.log(c);
    this.style.backgroundImage=jp[c];   //驼峰法，background-image: url('../imgs/zj-01.jpg');
    if(c>=1&&c<=8){
        alert("手气不错，再来一次");
        window.location.href="../html/choujiang-02.html"
    }
    else{
        let d=confirm("没有抽中，是否继续？");
        if(d){
            window.location.href="../html/choujiang-02.html"
        }else{
            ;
        }
        
    }
}



document.getElementById("td20").onclick=function(){    //点击后的效果
    let a =Math.random();
    let b= a*9;     //b的大小[0,9)
    let c=Math.floor(b);
    console.log(c);
    this.style.backgroundImage=jp[c];   //驼峰法，background-image: url('../imgs/zj-01.jpg');
    if(c>=1&&c<=8){
        alert("手气不错，再来一次");
        window.location.href="../html/choujiang-02.html"
    }
    else{
        let d=confirm("没有抽中，是否继续？");
        if(d){
            window.location.href="../html/choujiang-02.html"
        }else{
            ;
        }
        
    }
}
document.getElementById("td21").onclick=function(){    //点击后的效果
    let a =Math.random();
    let b= a*9;     //b的大小[0,9)
    let c=Math.floor(b);
    console.log(c);
    this.style.backgroundImage=jp[c];   //驼峰法，background-image: url('../imgs/zj-01.jpg');
    if(c>=1&&c<=8){
        alert("手气不错，再来一次");
        window.location.href="../html/choujiang-02.html"
    }
    else{
        let d=confirm("没有抽中，是否继续？");
        if(d){
            window.location.href="../html/choujiang-02.html"
        }else{
            ;
        }
        
    }
}
document.getElementById("td22").onclick=function(){    //点击后的效果
    let a =Math.random();
    let b= a*9;     //b的大小[0,9)
    let c=Math.floor(b);
    console.log(c);
    this.style.backgroundImage=jp[c];   //驼峰法，background-image: url('../imgs/zj-01.jpg');
    if(c>=1&&c<=8){
        alert("手气不错，再来一次");
        window.location.href="../html/choujiang-02.html"
    }
    else{
        let d=confirm("没有抽中，是否继续？");
        if(d){
            window.location.href="../html/choujiang-02.html"
        }else{
            ;
        }
        
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

3.抽奖3-开始停止类型抽奖-js实现

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖03</title>
    <link rel="stylesheet" href="../css/game-03.css">
</head>
<body>
    <h3 style="text-align:center;">抽奖-js实现-div</h3>
    <div id="aId">
        <button id="btn1">开始</button>
        <button id="btn2">结束</button>
    </div>

    <script src="../js/game-04.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#aId{
    width: 50%;
    height: 400px;
    border: 2px solid red;
    margin: 0 auto 0 auto;
    background-image: url('../imgs/zj-01.jpg');
    background-size: 100% 100%;
}
#btn1,#btn2{
    width: 100px;
    height: 40px;
    background-color: orange;
    color:white;
    font-family: '楷体';
    font-size: 30px;
    border: 1px solid red;
    border-radius: 20px;
}
#btn1:hover{
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.5;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

let t=0;
let jp=[
    "url('../imgs/1.jpg')",
    "url('../imgs/2.jpg')",
    "url('../imgs/3.jpg')",
    "url('../imgs/4.jpg')",
    "url('../imgs/5.jpg')",
    "url('../imgs/6.jpg')",
    "url('../imgs/7.jpg')",
    "url('../imgs/8.jpg')"
];


/**
 * 点击开始按钮
 */
document.getElementById("btn1").onclick=function(){
    func();
}


/**
 * 
 */
function func(){
    let a=Math.random()*8;
    let b=Math.floor(a);
    document.getElementById("aId").style.backgroundImage=jp[b];
    t=setTimeout("func()",17);
    console.log(t);
}

/**
 * 点击结束按钮
 */
document.getElementById("btn2").onclick=function(){
    clearTimeout(t);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/880681