1. Html快速入门之基本介绍
1.1 网页组成
1.2 浏览器内核
| 浏览器 | 内核 | 备注 |
|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 这几年已经没落，打开速度慢、升级频繁、猪一样的队友flash、神一样对手chrome |
| Safari | webkit | chrome的内核一开始是webkit，现在是Blink |
| chrome | Chromeium/Blink | 在Chromeium项目中研发Blink渲染引擎（浏览器核心），内置于Chrome浏览器之中。Blink其实是WebKit的分支，大部分国产浏览器最新版本都采用Blink内核。二次开发 |
| Opera | blink | 现在跟随chrome用blink内核 |
Android手机而言，使用率最高的是webkit内核，大部分国产浏览器的内核也属于webkit二次开发。
ios以及WP7平台上，系统大部分自带浏览器内核，一般是Safari或IE内核Trident
1.3 Web标准
W3C组织，万维网联盟是国际最著名的标准化组织。
- 结构（Structure），结构主要用于对网页元素进行整理和分类，主要以HTML为主
- 表现（Presentation） ，表现用于设置网页元素的版式、颜色、大小等外观样式，主要以CSS为主
- 行为 （Behavior），行为指网页模型的定义及交互的编写，主要是JavaScript
1.4 Html概念
- Html是超文本标记语言，用来描述网页。
- html不是编程语言，是一种标记语言（markup language）。
- 标记语言是一套标记系统（markup tag）
1.5 超文本的含义
- 它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
- 它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超文本链接）
1.6 Html骨架标签
| 标签名 | 定义 | 说明 |
|---|
| HTML标签 | 页面中最大的标签，根标签 |
| 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
1.7 Html标签分类
- 常规元素（双标签）
<标签名>内容</标签名> - 空元素（单标签）
<标签名/>
1.8 html标签的关系
（主要针对双标签）
1.9 html开发工具
- Dreamweaver
- SublimeText
- WebStorm
- HBuilder
- Visual Studio Code
- IDEA
- 等
1.10 *.html说明
<!DOCTYPE html>告诉浏览器按照Html5规范解析页面<meta charset="UTF-8">指定此文档的编码方式为UTF-8<html lang="en">指定html语言种类，en定义语言为英语，zh-CN定义语言为中文
1.11 字符集
- GB2312简体中文，包括6763个汉字
- BIG5繁体中文，港澳台等通用
- GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
- UTF-8基本上包含全世界所有国家需要用到的字符
1.12 html常用标签
1.12.1 排版标签
- 标题标签h1~h6
- 段落标签p，
- 水平线标签hr
- 换行标签br
- div和span标签,盒子标签，div用来布局，一行只能放一个div，span标签用来布局，一行上可以放好多的span
1.12.2 文本格式化标签
- <b></b>或<strong></strong>,文本以粗体方式显示（XHtml推荐使用strong）
- <i></i>或<em></em>,文本以斜体方式显示（XHtml推荐使用em）
- <s></s>或<del></del>,文本以加删除线方式显示（XHtml推荐使用del）
- <u></u>或<ins></ins>,文本以下划线方式显示（XHtml推荐使用u）
1.12.3 标签属性
1.12.4 图像标签
<img src=""/>
| 属性 | 属性值 | 描述 |
|---|
| src | url | 图像的路径,href="#"，空链接 |
| alt | 文本 | 图像不能显示的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持%页面百分百） | 设置图像的宽度 |
| height | 像素（XHTML不支持%页面百分百） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
1.12.5 链接标签
| 属性 | 作用 |
|---|
| href | 用于指定连接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式 |
1.12.6 注释标签
快捷键ctrl+/
1.13 路径
打开目录文件夹的第一层就是根目录
| 路径分类 | 符号 | 说明 |
|---|
| 同一级路径 | 无符号 | *.html和*.png在同一个目录下，不需要使用符号，如<img src=*.png/>| |
| 下一级路径 | / | *.png在文件*.html同级文件夹a的目录下，如<img src=a/*.png/> |
| 上一级路径 | ../ | *.png与文件*.html父文件夹a同级，如<img src=../*.png/>,如果是上2级就是../../,类推 |
绝对物理地址<img src="C:\web\*.ping"/>
绝对网络地址<img src="http://www.baidu.com/logo.png"/>
1.14 锚点定位
| 属性 | 作用 | 示例 |
|---|
| id | 标记名称 | <h3 id="tree"></h3>标记的位置 |
| #id | 指定标记跳转 | <a href="#tree"></a>指定去往的位置id |
1.15 base标签
| 标签 | 作用 | 示例 |
|---|
| base | 指定链接标签整体打开方式 | <head><base target="_blank"></head>，base标签在head中 |
1.16 预格式化文本标签
| 标签 | 作用 | 示例 |
|---|
| pre | 预格式化文本 | <body><pre>原始样式文本</pre></body> |
1.17 特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|
| 空格符 | | |
| < | 小于号 | &alt; |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方² | ² |
| ³ | 平方³ | ³ |
1.18 Html5发展之路
1.19 什么是xhtml
xhtml是更严格更纯净的html代码
- xhtml指可扩展超文本标签语言a
- xhtml的目标是取代html
- xhtml与html4.01几乎相同
- xhtml是更严格更纯净的html版本
- xhtml是作为一种xml应用被重新定义的html
- xhtml是一个w3c标准
1.20 html和xhtml区别
- xhtml是2001年1月发布的w3c推荐标准
- xhtml得到了所有主流浏览器的支持
- xhtml元素是以xml格式编写的html元素。xhtml是严格版本的html，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。
1.21 表格标签
1.22 Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--段落-->
<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>
<!--<img src="../Pictures/demo1.png" alt="加载不了显示" title="悬停" width="300" border="10"/>-->
<!--<a href="http://www.baidu.com"/><img src="../Pictures/demo1.png" alt="测试" title="点击进入项目">-->
<a href="http://www.baidu.com" target="_blank"><img src="../Pictures/demo1.png" alt="测试" title="进入"></a>
<a href="#one">测试</a>
<h2 id="one">知网的概念是国家知识基础设施（National Knowledge Infrastructure，NKI），由世界银行于1998年提出。CNKI工程是以实现全社会知识资源传播共享与增值利用为目标的信息化建设项目，由清华大学、清华同方发起，始建于1999年6月。在党和国家领导以及教育部、中宣部、科技部、新闻出版总署、国家版权局、国家发改委的大力支持下，在全国学术界、教育界、出版界、图书情报界等社会各界的密切配合和清华大学的直接领导下，CNKI工程集团经过多年努力，采用自主开发并具有国际领先水平的数字图书馆技术，建成了世界上全文信息量规模最大的"CNKI数字图书馆"，并正式启动建设《中国知识资源总库》及CNKI网格资源共享平台，通过产业化运作，为全社会知识资源高效共享提供最丰富的知识信息资源和最有效的知识传播与数字化学习平台。（一般评定职称所说的中国期刊网，是中国知网）。 CNKI工程的具体目标：一是大规模集成整合知识信息资源，整体提高资源的综合和增值利用价值；二是建设知识资源互联网传播扩散与增值服务平台，为全社会提供资源共享、数字化学习、知识创新信息化条件；三是建设知识资源的深度开发利用平台，为社会各方面提供知识管理与知识服务的信息化手段；四是为知识资源生产出版部门创造互联网出版发行的市场环境与商业机制，大力促进文化出版事业、产业的现代化建设与跨越式发展。 凭借优质的内容资源、领先的技术和专业的服务，中国知网在业界享有极高的声誉，在2007年，中国知网旗下的《中国学术期刊网络出版总库》获首届“中国出版政府奖”，《中国博士学位论文全文数据库》、《中国年鉴网络出版总库》获提名奖。这是中国出版领域的最高奖项。国家“十一五”重大网络出版工程-----《中国学术文献网络出版总库》也于2006年通过新闻出版总署组织的鉴定验收。</h2>
</body>
</html>
扫一扫
1866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
