XHTML可扩展超文本标记语言（1）

（1）网页的形成
（2）浏览器内核
（3）web标准
（4）html骨架标签
（5）html元素标签分类
（6）html标签关系
（7）代码开发工具
（8）html模板
（9）标签的语义化（含义）
（10）常用标签
- 排版标签
- - (1)标题标签
  - (2)段落标签
  - (3)水平线标签
  - (4)换行标签
  - (5)div和span标签
- 文本格式化标签
- 标签属性
- 图像标签
- 链接标签
- 注释标签
- 锚点
- base标签
- 预格式化文本
- 特殊字符
（11）路径

（1）网页的形成

浏览器市场份额：https://tongji.baidu.com/research/site

（2）浏览器内核

负责读取网页信息，整理讯息，计算网页的显示方式并显示页面

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
Firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome
Safari	webkit	现在很多人错误地把webkit叫做chrome内核（即使chrome内核已经是blink了）苹果感觉像被人抢了媳妇，都哭晕在厕所里面了
chrome	Chromium/Blink	在Chromium项目中研发Blink渲染引擎（即浏览器核心），内置于Chrome浏览器之中。Blink其实是WebKit的分支。大部分国产浏览器最新版都采用Blink内核二次开发
Opera	blink	现在跟随chrome用blink内核

（3）web标准

三层标准

结构（html）
表现（css）
行为（javascript）

（4）html骨架标签

总结

标签名	定义	说明
`<html></html>`	html标签	页面中最大的标签，我们称为根标签
`<head></head>`	文档的头部	注意在head标签中我们必须要设置的标签是`title`
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

（5）html元素标签分类

常规元素（双标签）
<body></body>
空元素（单标签）
<br />

（6）html标签关系

嵌套关系
并列关系

（7）代码开发工具

使用sublime-text
下载地址：http://www.sublimetext.com/

生成页面骨架结构
（1）html:5 按下tab'键    或者
（2）! 按下tab键

（8）html模板

<!DOCTYPR html>
告诉浏览器使用哪种规范

<html lang="en">
指定html语言种类- en英语- zh-CN中文

<meta charset="UTF-8">
字符集：多个字符的集合

（9）标签的语义化（含义）

结构清晰
在合适的地方放入合适的标签

（10）常用标签

排版标签

(1)标题标签

<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>

(2)段落标签

<p>段落</p>

(3)水平线标签

<hr />

(4)换行标签

<br />

(5)div和span标签

<div></div>
<span></span>
div标签用来布局，一行只能放一个
span标签一行可放置多个

文本格式化标签

标签	功能
`<b></b>`	文字以粗体方式显示
`<strong></strong>`	文字以粗体方式显示
`<em></em>`	文字以斜体方式显示
`<i></i>`	文字以斜体方式显示
`<del></del>`	文字以删除线方式显示
`<s></s>`	文字以删除线方式显示
`<ins></ins>`	文字以加下划线方式显示
`<u></u>`	文字以加下划线方式显示

标签属性

外在特性，html标签属性

图像标签

<img src="URL" alt="替换文本">

属性	属性值	描述
src	url	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度（一般不设置）
border	数字	设置图像边框的宽度

注意：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
采取键值对的格式 key=“value” 的格式

链接标签

<a href="#"></a>

属性	作用
href	指定链接目标的URL地址
target	指定链接页面的打开方式，_self（默认），_blank（在新窗口打开）

注意：

可以为图像、表格、音频、视频等各种网页元素添加超链接
# 为空链接
外部链接，http://www.baidu.com
内部链接，内部页面名称

注释标签

<!-- 注释内容 -->

快捷键：
ctrl+/
ctrl+shift+/

团队约定
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

锚点

<a href="#id">跳转锚点</a>
<h2 id="id"></h2>

创建锚点链接分为两步：

1.使用相应的id名称标注跳转目标的位置（找目标）
<h3 id="two">第2集</h3>2.使用<a href="#id名">链接文本</a>
创建链接文本 （被点击的）（拉关系）我也有一个姓毕的姥爷...
<a href="#two"></a>

base标签

<base target="_blank">

=所有链接=默认添加_blank

注意：跳转锚点也是链接！！！

预格式化文本

按照书写格式显示

<pre>testaaaaaaaaaaaaaa,bbbbbbbbbbbbbb,cccccccccccccc.
</pre>

特殊字符

特殊字符	描述	字符的代码
	空格	` `
<	小于号	`<`
>	大于号	`>`

（11）路径

相对路径
（1）同一级路径，图片引用的时候，直接写出图片的名字就可以了
（2）上一级目录../
绝对路径

零基础前端笔记（1）web，html，标签，锚点，路径相关推荐

零基础前端笔记（2）html，表格，列表，标签，文本域，表单域
XHTML可扩展超文本标记语言(2) (1)创建表格 (2)表格属性表头单元格标签th 表格标题caption 小说排行榜 (3)合并单元格 (4)划分表格结构 (5)列表标签无序列表有序列表 ...
零基础该如何学习Web前端知识?
想要跳槽到IT行业人在近几年越来越多,大部分都是想要学习web前端技术,但是这其中有很多都是零基础学员,大家都想知道零基础该如何学习Web前端知识?我们来看看下面的详细介绍. 零基础该如何学习Web前 ...
零基础能不能学习web前端开发？【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
零基础前端入门系列（八）
CSS精讲(二) CSS体系知识介绍选择器优先级为什么关注优先级优先级处理原则 !important 和内联样式样式继承一个继承的例子继承属性和非继承属性范例选择器权重计算范例1 ...
零基础前端入门，真正难在哪里？简说编程思想和逻辑思维
很多同学跟我说,学前端学的很迷茫, 就这样,问他为啥迷茫吧,说也说不出来啥具体的.就是也学了一堆东西,也确实都是前端开发工作当中要用的.但依然不知道前路如何. 这里就有一个"前端入门的标准& ...
11岁过python1级_11岁表弟写的Python零基础入门笔记！
一.Python输入与输出输出:使用print()函数. print()函数的基本语法格式如下:print(输出内容). 输出内容可以是数字和字符串(字符串需要用引号括起来),也可以是包含运算符的表达 ...
SQL零基础学习笔记(一）
真的不知道我写了这么多不同的的学习笔记又没用..开始SQL零基础学习笔记百度百科:SQL(Structured Query Language)结构化查询语言,是一种数据库查询和程序设计语言,用于存取 ...
【Python3零基础入门笔记】05 Python时间处理——time库的使用
time库的使用: time库基本情况时间获取时间格式化程序计时文本进度条实例 time库基本情况 Time库是python中处理时间的标准库计算机时间表达提供获取系统时间并格式化输出功能 ...
PS零基础自学笔记：PS制作伤痕、制作UI图标，老师推荐的一些链接
PS零基础自学笔记:PS制作伤痕.换头交互设计导论的上机和艺术设计基础换汤不换药,也是搞设计,只不过这次不是Xd,是PS粉墨登场······ 1.PS制作伤痕 https://zhidao.baid ...

零基础前端笔记（1）web，html，标签，锚点，路径