HTML基本知识（1）
意识网页
网页是由文字 图片 音频 视频 超链接 flash等组成
如何显示网页
程序员写好代码后，通过浏览器渲染之后而造成网页
浏览器
浏览器是网页显示 运行的平台
罕用的五大浏览器及内核
- IE浏览器：Trident内核
- 火狐浏览器：Gecko内核
- safari浏览器：webkit内核
- 谷歌浏览器：Bink内核（属于webkit的分支）
- 欧朋浏览器：Bink内核
WEB规范
WEB规范不是一个规范，是W3C组织和其它标准化组织制订的一系列规范，能够让不同的浏览器在页面显示对立内容
WEB规范的组成
- 构造（html）:网页元素的分类以及整顿
- 体现（css）：网页外观的款式
- 行为（js）:网页模型的交互及行为。
WEB规范的益处
- 使WEB倒退更为广大
- 内容能被更宽泛的设施拜访
- 升高网站流量费用
- 使网站更易于保护
HTML
HTML：超文本标记语言 并不是编程语言 而是标记语言
HTML骨架格局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
HTML元素标签分类
html标签：单标签 双标签
双标签
<body></body> <html></html>等等单标签
<img /> <br />等等
html标签关系
嵌套关系
<head>
<title></title>
</head>
并列关系
<head></head>
<body></body>
在嵌套关系中 子元素间隔父元素应缩进一个tab键身位
代码开发工具
- DWcs6
- VScode
- Webstrom
- sublime
- HBuilder
生成html5骨架的形式
! 或者 html:5
骨架标签含意
- !DOCTYPE html:文档类型，指的是html5的构造。
- html:根标签
- lang:指定html的语言品种
- head:头部标签
- charset:字符集
- title:文档题目标签
- body:主体标签
字符集编码
- gb2312：简略中文，包含6723个文字
- BIG5:繁体中文，泛指港澳台等
- GBK:包含简体中文与繁体字，是GB2312的升级版
- UTF-8：包含全世界各地所须要的字符集。
标签的语义
标签的语义：指的是标签的含意 在适合的中央放上适合的标签 让构造更清晰
排版标签
题目标签
h1~h6:指的是1~6级题目 字体会顺次变小，具备换行的特点
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
段落标签
p：指的是段落标签
<p>文本</p>
水平线标签
hr:水平线表标签
<hr />
换行标签
br :水平线标签
掘金 一个专属于程序员的APP <br />
div和span
<div>胡歌</div>
<div>霍建华</div>
<span>韩红</span> <span>古天乐</span>
div:分隔 分区。一行内只能放一个div标签
span：跨度 跨距。一行内能够放很多span标签
文本格式化标签
<b>文字以加粗的形式显示</b> <strong>文字以加粗的形式显示</strong> <br />
<i>文字以歪斜的形式显示</i> <em>文字以歪斜的形式显示</em> <br />
<s>文字以删除线的形式显示</s> <del>文字以删除线的形式显示</del> <br />
<u>文字以下划线的形式显示</u> <ins>文字以下划线的形式显示</ins> <br />
标签属性
让HTML标签领有更多的信息 便叫作标签的属性
<标签名 属性1="属性值1" 属性2="属性值2">文本</完结标签>
图像属性
<img src="图像URL" />
总结
- 标签名领有多个属性。必须写在开始标签中，且位于标签名前面。
- 属性之间不分先后顺序，标签名与属性，属性与属性之间必须以空格隔开
- 采纳键对值的模式，如key=value的格局。
- alt是图片不能显示呈现的文字，title是鼠标挪动时显示的文字
链接标签
<a herf="指标的url地址" target="页面的打开方式">文本</a>
复制代码 <a href="http:////www.baidu.com" target="_blank">内部超链接</a>
<a href="7.图像标签.html">外部超链接</a>
注意事项
- _self:是在原网页关上链接
- _blank 是在新网页关上链接
正文标签
<!-- 正文内容-->
正文自身是让程序人员看的，目标是为了解释这段代码的含意。 程序不执行 快捷键：ctrl+/
门路
指标文件夹—->根目录
相对路径
上一级门路
<img src="../图像URL" />
同一级门路
<img src="./图像URL" />
下一级门路
<img src="./img/图像URL" />
绝对路径
个别是指残缺的网络门路
錨點定位
創建锚点链接 使用户可能疾速跳到指标地位
步骤如下
- 创立绝对应的id名
- 应用绝对应的id名标注跳往指标的地位
<a href="#Christmas">3.圣诞树的由来</a><br />
<h2 id="Christmas"> 圣诞树的由来</h2>
base标签
base标签
base标签是为了设置整体链接的打开方式 写在head与</head>之间
复制代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.qq.com/">腾讯</a>
<a href="https://www.sina.com.cn/">新浪</a>
<a href="https://www.163.com/">网易</a>
</body>
</html>
pre标签
pre:文本格式化标签，依照文本的本来的设置在网页中出现
<pre>
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
</pre>
特殊字符
html 标签不方便使用的中央能够应用特殊字符 它们属于符号。
HTML5的倒退之路
html5的倒退之路：jingyan.baidu.com/article/59a…
发表回复