Web前端零基础入门——HTML5
2024-06-07 10:01:23
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通
html入门
index1
> <html><head><title>我是谁？</title></head><body><h1>朋友，多久没撸串了？</h1><p>我们知道，</p><p>这两年有太多的悲喜交叠、人世变幻</p><p>我们许多的老朋友也曾处境艰难，</p><p>也许一杯相逢的美酒，都未必能开心了</p><p>但再次出发，走遍南北东西，</p><p>我们惊喜地发现，</p><p>民间的生命，依旧饱满，</p><p>平凡的日子，仍然滚烫</p><p>大家都一样，</p><p>不过是图个不负年华，人生快意</p></body>
</html>
index2
<html><head><title>这是我的第二个网页</title></head><body><h1>这是我的第二个网页</h1><!--html的注释，注释内容不会在网页中直接显示，但是可以在源码中查看注释。注释还可以将一些不希望显示的内容隐藏<img><img / ><input><input />标签一般成对出现，但是也存在一些自结束标签--> </body>
</html>
index3
<html><head><title>标签的属性</title></head><body><!--属性，在标签（开始标签或自结束标签）中还可以设置属性属性是一个名值对（x=y）属性和标签名或其他属性应该用空格隔开有些属性有属性值，有些没有。如果有，属性值使用引号。--><h1>这是我的<font color='red' size='3'>第三个</font>网页!</h1></body>
</html>
index4
<!doctype html>
<html><head><title>网页的基本结构</title></head><body><!--迭代 html4 html5……文档声明-用来告诉浏览器当前网页的版本<!doctype html> html5的文档声明--><h1>这是我的<font color='red' size='3'>第三个</font>网页!</h1></body>
</html>
<!--可以通过meta标签来设置网页的字符集，避免乱码问题。--><meta charset='utf-8'>
index5
<!doctype html>
<html><head><!--可以通过meta标签来设置网页的字符集，避免乱码问题。--><meta charset='utf-8'><title>网页的基本结构</title></head><body><!--迭代 html4 html5……文档声明-用来告诉浏览器当前网页的版本<!doctype html> html5的文档声明--><h1>这是我的<font color='red' size='3'>第三个</font>网页!</h1></body>
</html>
index6 实体
<!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><!-- 在网页中多个空格会被默认解析为一个空格 在html中有时不能直接书写一些特殊符号比如，多个连续的空格，比如字母两侧的大于and小于号-->转义字符——&实体的名字; 空格>大于<小于©版权符号<p>今天 天气真不错！</p> 、<p>a<b>c</p>
</body>
</html>
index7 meta标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--meta主要用来设置网页中的一些元数据，元数据不是给用户看的charset 指定网页的字符集name 指定的数据名称content 指定数据的内容\keywords 表示网站的关键字，可以同时指定多个关键字，description 用于指定网站的描述，显示在搜索引擎的结果中title标签的内容会作为搜索结果的超链接上的文字显示<meta http-equiv="refresh" content="3,url=http://www.mozilla.org">将页面重定向到另一个网站--><meta name="keywords" content="HTML5,前端,CSS3"><meta name="description" content="这是一个非常不错的网站"<meta http-equiv="refresh" content="3;url=https://www.baidu.com"><title>Document</title>
</head>
<body></body>
</html>
index8 语义化标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!--在网页中html专门用来负责网页的结构所以在使用html标签时，应该关注的是标签的语义，而不是他的样式标题标签：h1-h6 一共有六级标题 一般情况下一个页面只有一个h1，标题标签（h1-h3）在页面中独占一行的元素称为块元素(block element)--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!--hgroup用来为标题分组，可以将一组相关的标题同时放入group--><hgroup><h1>回乡偶书二首</h1><h2>其一</h2></hgroup><!--p标签表示页面中的一个段落p也是一个块元素--><p>p标签表示页面中的一个段落</p><p>p标签表示页面中的一个段落</p><!-- em标签用于表示语音语调的一个加重在页面中不会独占一行的元素称为行内元素(inline element)--><p>今天天气<em>真</em>不错！</p><!-- stong表示强调，重要内容！--><p>你今天必须要完成<strong>完成作业</strong>！</p><!-- blockquote表示一个长引用-->鲁迅说：<blockquote>这句话我是从来没有说过！</blockquote><!--q表示一个短引用-->子曰：<q>学而时习之，乐呵乐呵！</q><!-- br表示换行--><br><!--块元素在网页中一般通过块元素对页面进行布局行内元素-行内元素主要用来包裹文字-一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素-块元素中基本上什么都能放-p元素中不能放任何的块元素浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正比如：标签卸载了根元素的外部p元素中嵌套了块元素根元素中出现了除head和body以外的子元素--><!-- 布局标签（结构化语句标签）--><!--header表示网页的头部main表示网页的主体部分（一个页面中只有一个main）footer 表示网页的底部nav 表示网页中的导航aside 和主体相关的其他内容（侧边栏）article 表示一个独立的文章 section 表示一个独立的区块，上边的标签都不能使用的时候用sectiondiv没有语义，就用来表示一个区块span 是一个行内元素，没有任何的语义，一般用来在网页中选中文字--><header></header><main></main><footer></footer><nav></nav><aside></aside><article></article><section></section><div></div><span></span></body>
</html>
index9 列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 列表(list)1.铅笔2.尺子3.橡皮在html中也可以创建列表，html列表中一共有三种1.有序列表2.无序列表3.定义列表有序列表，使用ul标签来创建有序列表使用li表示列表项有序列表，用ol标签来创建有序列表使用li表示列表项定义列表，使用dl标签来创建一个定义列表使用dt来表示定义内容使用dd来对内容进行解释说明列表之间可以互相嵌套--><ul><li>结构</li><li>表现</li><li>行为</li></ul><ol><li>结构</li><li>表现</li><li>行为</li></ol><dl><dt>结构</dt><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd></dl><ul><li>aa<ul><li>aa-1</li><li>aa-2</li></ul></li></ul></body>
</html>
index10 超链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!--超链接可以让我们从一个页面跳转到另一个页面，或者是当前页面的指定位置使用a标签来定义超链接属性：href指定跳转的目标路径-值可以是外部网站的地址-也可以是内部页面的地址超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素--><a href="https://www.baidu.com">超链接</a><br><br><!--当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径相对路径使用.或..开头./.././可以省略不写，如果没写./也不写../则相当于写了././表示当前文件所在的目录../表示当前文件所在所在目录的上一级目录--><a href="./index.html">超链接2</a><!-- target属性，用来指定超链接打开的位置可选值：_self 默认值 在当前页面中打开超链接_blank 在一个新的页面中打开超链接--><a href="./index3.html" target="_blank">超链接n</a><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p id="p3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex vero architecto ut voluptatum. Ad, qui voluptate saepe sint incidunt eveniet, hic natus expedita accusamus odio autem laboriosam, atque earum!</p><!-- 可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部位置可以跳转到页面的指定位置，只需将herf属性设置 #目标元素的id属性值id属性（唯一不重复的）每一个标签都可以添加一个id属性（元素唯一表示）同一个页面中不能重复出现id属性--><a id="bottom" href="#">回到顶部</a><a href="#bottom">去底部</a><a href="#p3">去第三自然段</a><!--在开发中，可以将#作为超链接的路径的占位符--><a href="#">这是一个新的超链接</a><br><br><!-- 可以使用javascript：；来作为href的属性，此时点击这个超链接什么也不会发生--><a href="javascript:;">这是一个新的超链接</a>
</body>
</html>
index11 图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!--图片标签用于向当前页面中引入外部图片使用img标签来引入外部图片，img标签是一个自结束标签img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）属性：src 属性指定的是外部图片的路径alt 图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片width （单位是像素）height-宽度和高度中只修改了一个，则另一个会等比例缩放注意：在一般情况下pc端，不建议修改图片的大小在移动端，经常需要对图片进行缩放（大图缩小）图片的格式：jpeg(jpg)-支持的颜色比较丰富，不支持透明效果，不支持动图-一般用来显示照片gif-支持的颜色比较少，支持简单透明，支持动画-颜色单一的图片，动图png-支持的颜色丰富，支持复杂透明，不支持动图-颜色丰富，复杂透明（专为网页而生）webp-谷歌新推出的专门用来表示网页中的图片的一种格式-具备其他图片格式的所有优点，而且文件还特别的小-缺点：兼容性不好base64-将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片-一般都是一些需要和网页一起加载的图片才会使用base64 效果一样，用小的；效果不一样，用效果好的。--><img width="500" src="./img.jpg" alt="图片1">
index12 内联框架
<!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>Document</title>
</head>
<body><!-- 内联框架，用于向当前页面中引入一个其他页面src 指定要引入的网页的路径framborder 指定内联框架的边框--><iframe src="https://www.qq.com" frameborder="1" width="800" height="600"></iframe></body>
</html>
index13 音视频播放
<!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>Document</title>
</head>
<body><!-- audio 标签用来向页面中引入一个外部的音频文件音视频文件引入时，默认情况下不允许用户自己控制播放停止属性：controls是否允许用户控制播放autoplay 音频文件是否自动播放-如果设置了autoplay，则音乐在打开页面时会自动播放但是目前来讲大部分浏览器都不会自动对音乐进行播放loop 音乐是否循环播放--><audio src="./source/audio.mp3" controls loop></audio><!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件 --><audio contols>对不起，您的浏览器不支持播放音频！请升级浏览器！<source src="./source/audio.mp3"><source src="./source/audio.ogg"><embed src="./source/audio.mp3" type="audio/mp3" width="200" height="10 0"></audio><!--使用video标签来向文档中引入视频-使用方式和audio基本上是一样的--><video controls<source src="./source/flower.webm"></video>
</body>
</html>
Web前端零基础入门——HTML5相关推荐
- 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
- web前端零基础入门（一）
web前端零基础入门 01. 网页简介 02. 网页简史 03. HTML简介 04. 编写第一个网页 06. 安装notepad++ 07. 自结束标签和注释 07. 标签中的属性 08. 文档声明 ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- 慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
- html怎么在线安装,web前端零基础学习教程，如何安装HTML编辑器！
原标题:web前端零基础学习教程,如何安装HTML编辑器! HTML 编辑器推荐: 可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器: Notepad++:http ...
- WEB安全零基础入门到进阶教程
关注我们公众号的粉丝很多都是我的读者,或多或少看过<WEB安全攻防:渗透测试实战指南>一书. 如果你已经完成了该书的阅读.进行过书中实验的实操,相信WEB安全渗透与防御已经初窥门径. 如果 ...
- 前端零基础入门（八）：background的妙用_css精灵
在前面我们已经了解到了网页当中背景的基本用法了,包括: 背景颜色,背景图片,背景图片是否重复,背景图片是否平铺等等基础样式. 今天要和大家讨论的是背景图的一个稍微高级一点的用法:图片精灵(也叫:雪碧图 ...
- html5该怎么样学习？零基础入门HTML5学习路线
纵观近几年HTML5的发展可以看出,HTML5开发持续上涨,腾讯.微软.谷歌等国际互联网企业都将HTML5的研发与使用放在了重要的地位.目前全球有超过十亿台手机浏览器支持HTML5,而微信小程序的开放 ...
- web前端零基础系统学习路线，每个阶段都需要学什么？
作为刚接触web前端开发或者已成为前端工程师的你,是否经常碰到以下疑问: 1.零基础从哪里开始学web前端? 2.学web前端要学习哪些语言? 3.学完web前端能做什么? 4.自学web前端学的会吗 ...
最新文章
- 戳戳HackShield Ring0反調試
- iPhone开发中现文件的增加 删除和查询
- memcached 安装
- Tableau必知必会之用 Page 功能创建你的动态视图
- RTEMS 的 AT91SAM9260 移植(5): 调试串口驱动
- 第41讲：Scrapy框架的介绍
- 在IPCAM上实现RTSP协议直播-live555 转
- 中科院Kaggle全球文本匹配竞赛华人第1名团队-深度学习与特征工程
- php管理员权限表,权限表的建立
- Unity项目文件夹结构
- Toontrack Superior Drummer for Mac(鼓音乐制作工具)
- 在Windows上安装虚拟机详细图文教程
- pcan的dbc和project等的配置
- 怀旧小霸王游戏机网页源码
- 从2018年全球半导体数据中看物联网芯片产业现状
- JavaWeb笔记（五）后端
- 你可能不知道，Diffusion现在有多火
- [Excel]如何去除恼人的外部链接
- 重装VMare出错：用户在命令行上发出了EULAS_AGREED=1,表示不接受许可协议
- Memory Fusion Network for Multi-view Sequential Learning注意力融合MFN