版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/first52hz/article/details/81210678
目录
开发工具
chrome，subline，photoshop
常用浏览器
- IE（微软已放弃更新）
- Edge（微软）
- Safari（苹果）
- Opera（很早以前的浏览器）
- Firefox
- Chrome
浏览器市场份额
谷歌（38%），ie8.0（16%）等等.......
书写
subline
切图
photoshop
浏览器内核
浏览器内核分为两部分：渲染引擎和JS引擎（如今内核一般都指渲染引擎）
- 渲染引擎会取得网页内容（html）和外观（css），然后输出至显示器（内核不同导致渲染效果不同）
- JS引擎会解析JavaScript语言，执行JavaScript语言来实现网页的动态效果
常用浏览器内核
- Trident（IE）
- Gecko（Firefox）
- webkit（safari，Chrome的前身）
- Blink（Chrome）
- Presto（Opera）
移动端浏览器内核
- Android：webkit或webkit二次开发
- ios以及WP7平台上：Safari或Trident
web标准
- 结构：骨骼（HTML）
- 表现：衣服（CSS）
- 行为：运动（JavaScript）
HTML初识
超文本标记语言，所谓 超文本，即可以加入图片，声音，动画等内容
- HTML指的是超文本标记语言
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签
HTML骨架格式
<html>
<head>
<title>网页名字</title>
</head>
<body>
</body>
</html>
HTML标签分类
- 双标签：<x></x>
- 单标签：<x />
HTML标签关系
- 嵌套（父亲和子孙）
- 并列（兄弟）
文档类型
HTML5
字符集
- GB2312
- GBK
- BIG5（繁体中文）
- UTF-8
排版标签
排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签
标题标签
- 单词：head
- 特点：大号文本
- 使用：<h1> 标题文本 </h1>
- 注：h1不要轻易使用
段落标签
- 单词：paragraph
- 特点：正常文本，自动换行且行距较大
- 使用：<p> 段落文本 </p>
换行标签
- 单词：break
- 特点：单标签，自动换行且行距较小
- 使用：<br />
水平线标签
- 单词：horizontal
- 特点：单标签
- 使用：<hr />
div span标签
- 单词：division
- 单词：span
- 特点：布局标签
- 特点：布局标签
- 使用：<div>盒子</div>
- 使用：<span>盒子</span>
文本格式化标签
- <b></b> <strong></strong>
- <i></i> <em></em>
- <s></s> <del></del>
- <u></u> <ins></ins>
图像标签
- 单词：image
- 特点：单标签
- 使用：<img src="URL" />
- 属性值如下
- scr：图像的路径（推荐相对路径）
- alt：图像不能显示时的替代文本（文本）
- title：鼠标悬停时显示的内容（文本）
- width：设置图像宽度（数字）
- height：设置一个即可，保持原图像比例（数字）
- border：图像边框的宽度（数字）
链接标签
- 单词：anchor
- 特点：无
- 使用：<a href="#">内容</a>
- 属性值如下
- href：链接页面的url地址，内部链接可直接写名字，例如index.html
- target：链接页面的打开方式，_self默认在原页面打开，_blank在新页面打开
- 注：http://外部链接的协议名一定要加
锚点定位
- 第一步：使用<a href="#live">创建链接</a>
- 第二步：使用<h3 id="live">定位锚点<h3>
base标签
- 单词：base
- 特点：单标签
- 使用：<base target="_blank /">写在<head></head>内部
特殊字符标签
- 起因：html代码中的回车和多个空格在浏览器中只会显示一个空格
- 空格符
- < <
- > >
- & &
注释标签
- 使用：<!-- 内容 -->
相对路径和绝对路径
相对路径
- 图像文件和HTML文件位于同一文件夹：输入名称 src="logo.gif"
- 图像文件位于HTML文件的下一文件夹：输入文件夹和文件名 src="img/img1/logo.gif"
- 图像文件位于HTML文件的上一文件夹：输入../和文件夹名 src="../../logo.gif"
绝对路径
- 常用于复制在线网图片地址
无序列表
- 单词：ul，li
- 特点：无序号
- 使用：<ul><li>盒子，可容纳其他元素</li></ul>
- 注：ul中只放li
有序列表
- 单词：ol，li
- 特点：有序号
- 使用：<ol><li>盒子，可容纳其他元素</li></ol>
自定义列表
- 单词：dl，dt，dd
- 特点：dd围绕dt进行语义解释并进行首行缩进
- 使用：<dl> <dt></dt> <dd></dd><dd></dd> </dl>
- 注：小米官网最下面的例子