初级html学习笔记一

一、基础认知
目标：认识网页组成和五大浏览器，明确web标准的构成，使用HTML骨架搭建出一个网页

学习路径：
   1、基础概念
       1、认识网页
           1、网页由哪些部分组成
               文字、图片、音频、视频、超链接
           2、网页背后本质是什么
               清单程序员写的代码
           3、前端代码是通过什么软件转换成用户眼中的也
               通过浏览器转换(解析和渲染)成用户看到的网页

       2、五大浏览器和渲染引擎
           1、五大浏览器
               浏览器：是网页显示、运行的平台
               常见的五大浏览器：IE、火狐、谷歌、Safari、Opera(欧朋)
           2、渲染引擎
               渲染引擎(浏览器内核)：浏览器中专门对代码解析解析渲染的部分
               浏览器触碰的个数不同，内在的渲染引擎也是不同的
               渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同

       3、web标准
           1、web标准构成
               结构   HTML       网页元素和内容
               表现   CSS           网页元素的外观和位置等页面样式(如颜色、大小等)
               行为   JavaScript   网页模型的定义与页面交互


   2、HTML初体验
       1、HTML的感知
           1、HTML概念
               HTML：超文本标记语言。专门用于网页开发语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述


你猜，这个字是加粗的吗？
<strong>你猜，这个字是加粗的吗？</strong>

2、HTML骨架结构
<html>网页整体；<head>网页头部；<body>网页身体；<title>网页标题


<!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>这是网页主体<!-- 这是注释 对代码的解释说明 -->
</body>
</html

3、开发工具的使用
           Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder
           VScode 快速自建骨架，输入 !

   3、语法规范
       1、HTML的注释
           方便下次的阅读代码者
           注释的快捷键在VS code中：ctrl + /

       2、HTML标签的构成
           1、HTML标签结构
               <strong>文字要变粗</strong>
           常见标签有两部分组成称为双标签，由一部分组成称为单标签

       3、HTML标签的关系
           父子关系(嵌套关系)

兄弟关系(并列关系)

二、HTML标签学习
   学习路径：
   1、排版标签
       1、标题标签
           h标签，突出文章主题
               <h1>一级标题</h1>
               <h2>一级标题</h2>
               <h3>一级标题</h3>
               <h4>一级标题</h4>
               <h5>一级标题</h5>
               <h6>一级标题</h6>
               文字都有加粗，变大，独占一行


<!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><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body>
</html>

2、段落标签
           <p>我是一段文字</p>
           段落之间存在间隙
           独占一行


<!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><h1>这是文章标题</h1><hr><p>我是超级无敌大帅帅帅帅 <br> 帅帅***************************************************************帅帅哥</p><p>我是超级无敌大帅**********************************************************************帅哥</p>
</body>
</html>

3、换行标签
           <br>
           单标签
           让文字强制换行

       4、水平线标签
           <hr>
           单标签
           在页面中显示一条水平线

2、文本格式化标签
       b           加粗
       u           下划线
       i           倾斜
       s           删除

下面的是突出重要性的强调语境，所使用的标签
       strong       加粗
       ins           下划线
       em           倾斜
       del           删除线

语义
strong、ins、em、del表示的强调语义更强烈


<!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><b>加粗</b><strong>加粗</strong><br><u>下划线</u><ins>下划线</ins><br><i>倾斜</i><em>倾斜</em><br><s>删除线</s><del>删除线</del>
</body>
</html>

3、媒体标签
       1、图片标签
           <img src="" alt="">
           src 属性名 ""里面是属性值 src=""表示标签属性
           单标签
           img标签需要展示对应的效果，需要借助标签的属性进行设置

注意：
               1、标签的属性写在开始标签内部
               2、标签上可以同时存在多个属性
               3、属性之间以空格隔开
               4、标签名与属性之间必须以空格隔开
               5、属性之间没有顺序之分

alt
           替换文本
           当图片加载失败时，才会显示alt文本
           当图片加载成功，不会显示alt文本

tltle
           提示文本
           当鼠标悬停的时候，才会显示的文本
           title属性不仅仅可以用于图片标签，还能用于其他标签

width和heigt
           宽度和高度
           注意：
               如果只设置了宽或高，另一个没设置的会自动等比例的缩放
               而如果同时设置了宽和高，如果设置不当可能会导致图片变形


<!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><img src="./1.jpg" alt=""><br><!-- alt;替换文本，当图片不显示的时候显示的文字 --><img src="./asd1.jpg" alt="这是一个吊毛"><br><img src="./1asd.jpg" alt="这是一个吊毛" title="这是title文字当鼠标悬停的时候显示"><br><!-- width和height属性只需要给出一个值，另一个等比例缩放-- 好处就是图片不变形 --><img src="./1.jpg" alt="这是一个吊毛" title="这是title文字当鼠标悬停的时候显示" width="200" height="100"></body>
</html>

2、路径
           路径介绍
               页面需要加载图片，首先需要找到对应的图片
                   路径分为：
                       绝对路径：值目录下的绝对伪装，从盘符开始的路径
                       相对路径：从当前文件开始触发找目标文件的过程
                           相对路径分类：
                               同级目录
                               下级目录
                               上级目录


<!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><!-- 绝对路径 --><img src="F:\学习笔记\web前端学习\001_HTML+CSS基础到高级\01第一章HTML基础知识\操作\1.jpg" alt=""><br><!-- 相对路径-同级 --><img src="1.jpg" alt=""><br><img src="./1.jpg" alt=""><br><!-- 相对路径-下级 --><img src="imges/4.jpg" alt=""><!-- 相对路径上级 --><br><img src="../2.jpg" alt="">
</body>
</html>

3、音频标签
<audio src="./music.mp3" controls ></audio>

src           音频路径
           controls   显示播放的控件
           autoplay   自动播放(部分浏览器不支持)
           loop       循环播放

注意：
音频标签目前支持三种格式：MP3、Wav、Ogg


<!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><!-- 注意：目前音频标签支持三种。分别是MP3、Wav、Ogg --><audio src="./music/ukulele.mp3" controls autoplay loop></audio>
</body>
</html>

4、视频标签
           视频标签介绍
               在页面插入视频
               <video src="./1.mp4" controls></video>

src           视频路径
               controls   显示播放的控件
               autoplay   自动播放(google浏览器中需要配合muted实现静音播放)
               loop       循环播放

注意：
视频目前只支持三种格式：MP4、WebM、Ogg


<!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><!-- google 可以让视自动播放，但是要配合muted的静音状态 --><video src="./1.mp4" controls autoplay muted loop></video><!-- 注意：视频目前只支持三种格式：MP4、WebM、Ogg -->
</body>
</html>

4、链接标签
       链接标签介绍
           点击之后，从一个业务跳到另一个页面
           <a href="./目标网页.html">超链接</a>

双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签的target
           目标网页的打开形式
           _self       默认值，在当前窗口中跳转(覆盖原页面)
           _blank       在新窗口跳转(保留原网页)
           <a href="https://www.baidu.com/" target="_blank">百度一下</a>


<!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><!-- 跳转到百度 --><a href="https://www.baidu.com">跳转到百度</a><br><a href="./001第一个HTML文档.html">跳转到001第一个HTML标签</a><br><!-- 当开发网站初期，我们还不知道跳转地址的时候，href的值书写为#(空链接) --><a href="#">芜湖，这是一个空链接</a><br><!-- 新窗口 --><a href="https://www.baidu.com" target="_blank">跳转百度</a>
</body>
</html>

5、综合案例


<!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><h1>腾讯科技高级web前端开发岗位</h1><hr><h2>职位描述</h2><p>复制重点项目的前端技术方案和架构的研发和维护工作</p><h2>岗位要求</h2><p>5年以上的前端开发经验,<strong>精通html5/css3/javascript等</strong>web开发技术;</p><p>熟悉bootstrap,vau,angularjs,reactjs等框架,熟练掌握一种以上;</p><p>代码风格严谨,能高保真还原设计稿,能兼容各种浏览器;</p><p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;</p><p>具备良好的分析解决能力,能独立承担任务,有开发进度把控能力;</p><p>责任心强,思路清晰,抗压能力好,具备良好的对外沟通和团队协作能力。</p><h2>工作地址</h2><p>上海市-徐汇区-腾云大厦</p><img src="./1.jpg" alt="地图" title="地图">
</body>
</html>

web前端之初级html-学习笔记分享一相关推荐

Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
web前端攻城狮学习笔记——HTML基础
开始学习web前端开发基础了,我是跟着清华大学在学堂在线的<Web前端攻城狮>学习的,把一些笔记记在这里,方便后期查阅. 1 HTML基础 HTML是超文本语言. 一段HTML代码: &l ...
Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
Web前端开发之CSS学习笔记3—颜色和背景
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 backgroun ...
Web前端开发之CSS学习笔记8—居中和自适应
目录 1.居中 1.1水平居中 1.2垂直居中 2.单列布局自适应 3.双列布局自适应 3.1双列自适应 3.2半边固定半边自适应 3.三列布局自适应 3.1浮动法 3.2绝对定位法 3.3margi ...
Web前端开发之CSS学习笔记10—栅格布局（网格布局）
目录 [网格布局grid] 1.网格布局的构成 2.父容器grid container 3.生成网格容器 display:grid/inline-grid 4.构建网格 grid-template-c ...
web前端开发html5+css3学习笔记day1
软件分类: 系统软件:windows.linux.macOS等应用软件:office.QQ等游戏软件:王者荣耀.QQ飞车等客户端与服务器 ·通常情况下,软件由两部分组成: ----客户端:用户通 ...
web前端java script BOM学习笔记2017.8.1
DOM: document object model 文档对象模型提供了一套可以访问和修改HTML文档内容的方法访问:获取修改:设置 1 JS要去操作HTML元素,必须要先用JS找到他,转换为JS ...
Web前端基础CSS初识学习笔记（8）行高对齐和首行缩进间距
Important! 方便的文本设置 line-height:行间距 text-align text-intent letter-spacing word-spacing line-height:行间 ...

web前端之初级html-学习笔记分享一

初级html学习笔记一

web前端之初级html-学习笔记分享一相关推荐

最新文章

热门文章