|
第一章 HTML与CSS 1.浏览器展览区（1）常见浏览器 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera，统称5大浏览器其中对应的浏览器内核分别是，IE（Trident）、Firefox（Gecko）、safari（webkit）、chrome（chromium/Blink）、Opera（blink）。另外，对于移动端的诸多浏览器，其中：安卓机器一般都用Webkit内核，iOS以及WP7（Windows Phone）一般都是系统自带浏览器内核，一般是Safari或者Trident内核。由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的Web标准让所有浏览器最终显示的效果完全一致 （2）Web标准组成(重要)结构标准（HTML）：页面的机构搭建 表现标准（CSS样式）：页面的样式美化 行为标准（javascript）：页面的交互实现 2.Htmlhtml的基本结构(在书写代码的时候要注意所有的标签都要用小写不能用大小) <html> <head> <title>标题</tilte> </head> <body> 网页主体内容 </body> </html> 一对html标签嵌套了一对head标签和body标签，head标签里面嵌套的内容是给浏览器解析用的，只不过title标签是用户可以看到的，body里面放所有用户能看见的内容； （1）HTML标签分类双标签：由开始标签<开始标签>和结束标签</结束标签>组成； 例如：<html></html> 单标签: 不需要包含内容，直接在开始标签最后面添加一个结束的符号/; 例如：<br /> （2）HTML标签关系嵌套关系 --- 父子级关系 并列关系 --- 兄弟关系 <!DOCTYPEhtml> 告诉浏览器用最新的html5版本的html来解析页面 lang="en"规定网站用哪个国家的语言解析；en表示英文，zh-CN表示中文； 字符集<meta charset="UTF-8">常用的字符编码： • Gb2312简体中文 BIG5 繁体中文 GBK 全部中文（包括简体和繁体中文） • UTF-8 全世界所有国家需要用到的字符 标签的语义化的目的语义化标签让代码结构更清晰，方便代码的阅读和维护，也可以让浏览器或者网络爬虫更好的解析从而分析其中的内容，更好得到优化网站的搜索引擎；
（3）HTML常用标签Html标题标签• 标题标签分为6个级别，分别是h1/h2/h3/h4/h5/h6作为标题使用，并且依据重要性递减；
• 标题标签是双标签；
注意：
• 01、标题标签默认加粗，独自占一行，双标签；
• 02、h1标签一般情况下一个页面最好出现一次，并且放logo最好，h2标签一个页面最多使用两次，h3-h6标签可以多次重复出现；
段落标签p，双标签，可以清楚得到划分页面的段落；
水平线标签hr单标签 --- <hr />
关于空格和回车换行的解析浏览器在解析代码的时候，只会解析一个空格不管输入多少个空格，对于回车换行直接是不解析或者解析成一个空格，所以我们在书写换行效果的时候书写换行用<br />，空格用 书写即可；
br标签 ，<br />强制换行；• 注意：使用段落标签等语义标签换行和br换行是不同的，前者是有控制范围效果有开始有技术，后者只是简单的强制换行效果；
div和span标签• div标签布局标签，主要是布局用的大标签也是主要标签;
特点：没有语义，独占一行；
• span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；
特点：没有语义，一行共存多个；
文本格式化标签- 加粗标签： <b>单纯的加粗</b> <strong>语义化强调</strong>
- 倾斜标签： <i>单纯的加粗</i> <em>语义化强调</em>
- 删除线标签：<s>单纯的加粗</s> <del>语义化强调</del>
- 下划线标签： <u>单纯的加粗</u> <ins>语义化强调</ins>
标签属性使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
<标签名属性1=“属性值1” 属性2=“属性值2” …> 内容 </标签名>；
注意：在书写标签属性的时候每一个属性之间要用空格隔开；
图像标签img（灰常重要）img标签,单标签，<img />,可以配合src属性将图片引入html页面，<img src=“图片路径” />
图像标签的常见属性：- alt 属性值 --- 自定义文本 图像不能正常显示的时候替换文本；
- title 属性值 --- 自定义文本 鼠标移入图片显示提示文本；width 属性值--- 自定义数值 设置图片的宽度；
- height 属性值 --- 自定义数值 设置图片的高度；
- border 属性值 --- 自定义数值 设置图片的描边，一般不使用，后期会使用css进行设置；
- 注意：在设置图像标签img的属性的时候，
- Src属性是不能缺少的，必须写，用来查找图片路径
- alt的使用是在图片错误的时候才能显示属性值，
- title是鼠标移入图片的时候显属性值，
宽width和高height在使用的时候要注意，我们不需要全部设置，只需要设置一个属性就可以，另外的一个属性会等比缩放；
超链接a（经常用要记住）1、超链接：实现页面之间的跳转，a标签，双标签；
常用属性：href用于指定链接目标的url路径地址，必不可少的；
target 用于指定链接页面的打开方式，属性值我们一般选择新窗口打开_blank；
2、超链接的链接方式：
外部链接（在线链接）：直接在href=“http://+要访问的网址”，注意http://必须书写；
内部链接： 直接在href=“书写html页面名称”，注意在书写内部链接的时候要书写清楚页面的路径；
空链接： 如果不知道要链接到什么地方，我们就暂时用#代替即可；
其他链接：我们不仅仅能给文字添加链接，我们还可以给其他的网页元素添加链接，例如：图像、表格、音频、视频等；
注释标签html注释：<!--注释内容 -->
css注释： /* 注释内容 */
快捷键：Ctrl+？
添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的；
路径定义：从当前文件出发查找目标文件，分为相对路径和绝对路径
相对路径又分为：同级路径（兄弟关系）、下级路径、上级路径
绝对路径又分为：带有盘符的路径，线上网址
目录文件夹：用一个文件夹将一个项目的所有资源整合到一起，一般包含了存放图片的文件，存放css的文件夹，存放js的文件夹、存放图标文字的文件夹以及html文档等；
根目录：打开目录文件夹的第一级；
相对路径（一定要会用）同级路径：文件（html文件）和目标文件在同一个目录文件下面平级存在，我们可以直接书写目标文件名称（如果是图片就直接书写图片名称）,例如：<img src=“laowang.jpg” />
下级路径：文件（html文件）和存放目标文件的父级是平级存在，我们可以先书写目标文件的父级名称+/+目标文件名称，
例如：<img src=“img/laowang.jpg”>
上级路径 ../存放文件（html文件）的父级和存放目标文件的父级是平级关系，我们可以直接以../ 表示上一级去查找目标文件路径；
例如：<img src=“../img/laowang.jpg”>
记忆口诀：
同级路径：文件和目标文件是同一个父级，平级关系；
下级路径：从文件出发往里面查找；
上级路径：从文件出发往外面查找，用 ../ 表示上一级关系；
绝对路径(了解)：以web站点根目录为参考基础的目录路径，其实一般分为两种情况：
• 01、带有盘符的路径，坚决不能使用，
• 例如：“D:\web/logo.gif”;
• 02、完整的网络地址，可以使用只要网络资源一直存在，
例如：http://www.itcast.cn
锚点定位锚点的作用：实现页面内部的跳转
添加锚点效果添加过程：
01、 使用id名标注要跳转到的目标位置（锚点目标) <divid=“id名称”；></div> 02、使用超链接a进行锚点按钮设置，<a href=“#id名称”>链接文本</a>
base标签（会用）• base标签可以统一设置超链接a的打开方式,书写在<head></head>之间； • <base target=“_blank”>
特殊的字符注意：我们常用的特殊符号是：空格 、小于号<、大于号>、版权©；
| 
收藏
淘帖
踩
