学习基础:
① 计算机网络 → ② web(万维网)→ ③ (web工作原理:)HTTP协议/URL → ④ 浏览器
网页浏览器(英语:web browser),常被简称为浏览器,是一种用于检索并展示万维网信息资源的应用程序。
浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页显示方式,然后会输出至显示器或打印机。
浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。 JS 引擎 则是解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。 最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。
内核的种类很多,常见的浏览器内核可以分这四种:Trident、 Gecko、Blink、Webkit。
HTML:
超文本标记语言(HyperText Markup Language)是标准通用标记语言下的一个应用。HTML是一种标记语言 (markup language),是网页制作所必备的
Markdown是一种轻量级标记语言, 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHML(或者HTML)文档。
由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,网站广泛使用Markdown撰写帮助文档或用于论坛发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等。
格式:
<标签名称>
双标签:
<开始标签 属性名称 = "属性值" 属性名称 = "属性值">显示内容</结束标签>
<h1>内容</h1>
单标签:
<标签名称 属性名称 = "属性值" 属性名称 = "属性值" />
<hr />
单标签的结束符号 / 可以写也可以不写,html版本不同造成的,那么以后只要编辑
器自动生成标签时决定就行了,带就写,不带就不用写
并列关系
<head>
</head>
<body>
</body>
嵌套关系(父子/上下级)
<head>
<meta charset="UTF-8" />
<title>百度一下,你就知道123</title>
</head>
注意点:
1.标签只是用来给内容添加语义的,并不是修改样式的
2.浏览器对于纯文本文件中文字显示级别都是相同,浏览器不能分清谁是标题,谁是段落
3.通过标签就能给标记的文本添加语义,比如 段落 标题等
<!DOCTYPE HTML> DTD文档声明
DTD文档声明的作用是用于告诉浏览器我们的网页是用哪一个版本的标准编写的,以便方便浏览器解析和渲
染,但是浏览器并不是完全依赖这个DTD文档声明,浏览器有一套属于自己的机制;也就是说,DTD文档声
明不写网页也能正常运行,但是由于W3C规定第一行必须写上DTD文档声明,所以必须遵守规定,无论如
何,我们都应该在第一行协商DTD文档声明。
注意点:
1.不是标签
2.声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
3.不区分大小写
<html></html>
作用:此标签可告知浏览器该文件的类型是一个 HTML 文档。
注意点:其他的所有代码必须放在html开始标签和结束标签之间
<head></head> 文档头部标签
作用:
1.包含一些网站文档信息
2.外挂一些css/js文件
3.配置一些seo相关的信息,便于搜索引擎搜索
<meta name="" content=""> meta标签
<base href="./aa/" target="_blank"> base标签(所有的引用均以此地址为根目录)
<title>百度一下,你就知道</title> 设置网站标题
<link rel="icon" href="1.ico" type="image/x-icon" /> 网站小图标
<body></body> 网站的主体标签
作用:包含显示给用户查看的所有内容,页面的排版代码都是写在该标签中
<script></script> 标签内插入JavaScript
注释:
<!-- 在此处写注释 --> 解释说明的作用 不会显示在浏览器中
在小组合作开发中或者防止自己忘记了之前代码的用处,注释是最好的手段
常用标签:
①文段标签:
标题标签:
<!--标题分为1-6六个等级-->
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
段落标签:
<p></p>
②格式标签
水平线:
<hr /> 水平分割线
<!--属性: width 宽度 size 厚度 align 水平排列方式 left center(默认值) right color 颜色-->
<!--注意:属性是不赞成使用的,如果要修改样式,请使用css层叠样式表-->
换行符:
<br/> 换行符
样式标签:
<strong>强调加粗</strong>
<em>强调斜体</em>
<ins>下划线</ins>
<del>删除线</del>
<mark>高亮显示</mark>
③插入元素标签:
表格标签:
<table boarder="1" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<table>
<!--输出一个三行三列的表格-->
<!--table标签后可以添加边框等表格属性-->
<script>
for(var i,i<3,i++){
document.write('<tr>')
for(var j,j<3,j++){
document.write('<td>')
document.write('1')
document.write('</td>')
}
document.write('</tr>')
}
</script>
<!--嵌套JavaScript循环输出3*3表格 document对象write方法将括号中内容写入HTML文档>
table标签属性:
https://jingyan.baidu.com/article/c45ad29c21b924051753e2b7.html
列表标签:
<!--无序列表 unordered list
格式:-->
<ul>
<li>显示的条目内容</li>
<!-- li:list item 列表 条目 -->
...
</ul>
<!--作用: 给数据添加列表语义
注意点:
1.添加语义,不是给数据添加小黑点
2.ul标签要与li标签结合使用
3.ul标签除了li标签不要包含其他的标签
4.li标签能够嵌套其他的标签元素
5.无序列表没有先后顺序的
应用场景:
新闻列表/商品列表/导航条等 -->
<!-- 有序列表
格式: -->
<ol>
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
</ol>
<!-- 注意:
1.ol用来定义有序列表
2.ol中只有li子标签
3.li中可以嵌套其他标签 -->
<ol reversed="reversed">
<!-- 添加reserve属性,赋值为"reserved"意为倒序排序
图片标签:
<img src="" alt="" />
<!--属性:
src 引入图片地址 本地图片 网络图片 source 资源的意思
title 提示性文字
alt 图片加载失败时替换文字
width 宽度
height 高度 宽度和高度只需要设置一个 另一个会等比例缩放
border 边框
align 规定如何根据周围的文本来排列图像(top bottom middle left right)-->
<!--src 路径问题
绝对路径:
从电脑盘符开始查找 G:/html_01/images/login.png
相对路径:
参照物 你当前正在操作文档
同级 ./图片名 上一级 ../-->
视频标签:
<!--第一种:-->
<video src=""></video>
<!--第二种:-->
<video>
<source src="" type=""></source>
...
</video>
<!--
前提条件:浏览器必须支持video标签
属性:
src 视频资源地址
autoplay="autoplay":自动播放视频
controls:设置控制按钮
poster:视频未播放时的显示页面图片
loop: 循环播放
preload: 预加载,不能与autoplay同时使用
muted: 设置静音
width: 设置视频窗口的宽度
height: 设置视频窗口的高度
第二种格式存在的意义:
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种
视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后
当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
-->
音频标签:
<!--第一种:-->
<audio src=""></audio>
<!--第二种:-->
<audio>
<source src="" type=""></source>
...
</audio>
<!--
属性:音频标签和视频标签的用法基本一样,video中能够使用的属性在audio中大部分都能够使用,除了
三个属性 width/height/poster
-->
超链接标签:
<!--作用:实现页面与页面之间的跳转 可以跳转到外网 本地文件
格式:-->
<a href="跳转的目标地址">页面显示的内容(文字、图片等)</a>
<!-- 属性:href 跳转地址
target 目标地址窗口的打开方式
值:_self 默认值 当前窗口
_blank 在新窗口打开目标页面
title 鼠标悬停时的提示性文字 -->
<!--注意点:
1.实现跳转必须加上href属性 路径问题与图片标签的src属性规则一致
2.除了点击文字可以跳转,也可以嵌套图片标签,点击图片跳转
3.如果href值为URL地址 必须加上协议 http:// 或者 https://
4.假链接:在开发时,跳转的目标页面还没有开发出来,这时可以使用假链接代替
5.# 会跳转到页面顶部
-->
<!--
6.javascript:
锚点:可以跳转到当前页面指定的位置 也可以跳转到目标页面指定的位置
①定义锚点:-->
<a name="锚点名称"></a>
<!--
②跳转锚点:-->
<a href="#锚点名称">页面显示内容</a>
<!--注意:定义锚点可以使用name属性 也可以使用id属性 推荐使用id属性 因为除了使用a标签来定义
锚点外,也可以使用其他标签定义锚点 但是其他的标签例如 p标签 没有name属性
-->
输入框标签:
<!--默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦
如果想点击文字时让对应的输入框聚焦, 需要让文字和输入框进行绑定
可以使用Label标签
绑定的格式:
1、将文字利用label标签包裹起来
2、给输入框添加一个id属性
3、在label标签中通过for属性和输入框中的id进行绑定即可
-->
<label for="account">账号:</label><input type="text" id="account">
特殊符号表示:
<!-- 如果要HTML显示时不将<p>识别为标签,而是直接显示<p>在网页中:-->
<p><p></p>