1.HTML
指的是超文本标记语言
HTML不是编程语言,是一种超文本标记语言
1.1.网页:HTML利用标签描述出来,然后通过浏览器解析展示给用户
总结:由图片,文字,文本,链接组成
2.常用浏览器
浏览器内核:读取网页内容,整理讯息,计算网页的显示方式并显示页面。
Chrome Blink内核 就是Webkit的分支
3.WEB标准(重点)
基本分为两类:第一种IE,一般就是政府网站或者BAT大厂才需要兼容
第二种就是其他的
由W3C组织和其他标准化组织指定的一系列标准的集合。
3.1让WEB发展前景更好、内容被更多的设备访问、更容易被搜索引擎搜索、降低网站流量费用
3.2****WEB标准的构成
主要包括结构、表现、和行为三个方面
WEB标准提出的最佳体验方案:结构、样式、行为相分离。
人话:结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中
HTML语言规范
1.双标签和单标签
1.2标签关系
包含关系和嵌套一样的说法
并列关系
开发工具VScode
1.新建文件
2.保存为HTML文件
3.快捷生成
!tab
开发工具!TAB总结
字符集(Character set)是多个字符的集合。
在<head>标签中,<meta Character set ="UTF-8"> 必须写
在HTML5当中不写闭合 / 也行。
HTML常用标签
排版标签
<html> 根标签,最大的标签
<head>网页头部显示内容
<title></title>文档标题
<hx></hx>标题标签
<p></p>段落换行标签
<hr />水平线标签
<br />换行标签
<div></div>用来布局的,只能放一个
<span></span>用来布局的,可以放好多个span
<b></b>和<strong></strong>文字加粗标签,推荐使用strong
<i></i>和<em></em>文字斜体标签,推荐使用em
<s></s>和<del></del>文字加删除线显示,推荐del
<u></u>和<ins></ins>文字加下划线显示,不赞成使用u
ctrl +回车 快速换行
shift+下建 直接复制这一行代码 下面这两行就是这样复制的
h1-h6 p div 单独占一整行块级元素
strong b em i ins u del s span 一行内显示多个元素 行内元素
<!-- div 和 span 是没有语义的,就是一个盒子,装内容
division的缩写:表示分割,div 的子级 也可以是div-->
<div>这是头部,我是一个div标签一个人占一行</div>
<div>我是<span>老王</span></div> <br>
<div> 这个里面可以加所有HTML5其他标签 </div>
<!-- span是一个小盒子 后面学到网页布局的时候会用到
一行可以用到多个span -->
图像标签
<img src="图像URL" />
该语法中src属性用于指定图像文件的路径和文件名
<img />
标记属性
alt =“”
图像不能显示时的替换文本
title=“”
鼠标悬停图片上时显示的内容
width=“”
设置图像的宽度
height=“”
设置像素的高度
高和宽只需要设置一个就可以,会等比例缩放
border=""
设置图片边框 后面会使用css来做,这里只要记住这个单词就好了
<!-- 图像标签的使用 -->
<!-- alt替换文本 没有照片 或者显示不出来的时候 -->
<img src="#" alt="我是一张照片">
<!-- title 提示文本,鼠标放到图像上,能有文字提示 -->
<img src="#" alt="没有照片时显示的文字" title="鼠标放上来就会显示这些文字">
图像标签和路径(重点)
相对路径:图片相对与HTML页面的位置
./ 和直接输入 xx.jpg时一样的 ./代表着当前的意思 并且会有提示
…/ 返回上一级
同级:<img src="#" / >
上级:<img src="image/#" />
<img src="timg.gif" alt="">
<img src="文件夹名字/文件夹名/timg.jpg " alt="">
<img src="../" alt="">
链接标签
空连接有个注意事项
name只能放再a链接里面
<a href="跳转目标">文本或图像</a>
<a href="demo.html"内部链接 </a>
<a href="#"> 空连接</a>
1.空连接 用一个#的时候 点击链接 会回到顶部 有一个刷新的效果
<a href="javascript:;"> 空连接</a>
最好写上javascript:; 这样不会跳转刷新
<a href="网址"> <img src="文件名" /> </a> 图像链接
<a href="" target="_blank"> 文本或图像 </a> 默认是_self,_blank是在新窗口打开
注释标签
<!-- 注释语句 --> 快捷键ctrl+/ 或者 ctrl+shift+/
路径
相对路径:保存不同目录的网页引用同一个文件时,使用的路径不相同,为相对路径
从代码所在的这个文件出发,去寻找我们的目标文件的,而我们说的上下同级,就是图片位于HTML页面的位置
1.同一级路径:同一级路径,图片引用的时候,直接写图片的名字就可以了
2.下一级路径:<img src="images/timg.jpg" /> 需要"/"符号表示下一级路径
3.上一级路径:<img src="../images/timg.gif"> 需要"../"
绝对路径:<img src="网络图片网络地址或者电脑图片文件夹地址" /> 不推荐使用图片文件夹地址
电脑文件夹地址方向\是这个样子
而相对路径是/这个
锚点定位
通过创建锚点链接,能够快速定位到目标内容**,使用#id定位
1.id模式
<a href="#id名称">链接的内容</a>
<h3 id="id名称">需要目标内容</h3>
2.name模式
使用name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用。
<a href="#name名称" 链接地址</a>
<a name="name名称" 需要链接的内容 > </a>
锚点定位 链接中加上#号 标记可以用id或者name
但是name不能放在块级元素(p hx div ul ol li)中
base标签
1.base可以设置整体链接的打开方式
2.base写到<head></head>
之间`
3.把所有的连接都默认添加target="_blank"
<base target="_blank">
pre标签 预格式化文本
这个标签里的文字,会按照我们书写的模式显示,不需要段落和换行标签了。但是,比较少用,因为不好整体控制。
<pre>
可以对空格和空行
进行控制
</pre>
特殊字符(理解)
不需要用&nbsp;
用输入法的全角输入方法就可以了
只需要记住 空格 大于号 小于号就可以了,剩下的回来查阅
1.是以运算符&开头,以分号符;结尾
2.他们不是标签,而是符号。
HTML中不能使用小于号“<“和大于号”>”特殊字符,浏览器会将它们作为标签解析,若要显示正确,在HTML源代码中使用字符实体
空格符:
大于号:>
小于号: <
<a href="#">more >></a>