|
在黑马学习了十几天了，从当初的电脑小白到现在懂得了一点点儿的前端基础知识，虽然还是菜鸟但觉得这些天的经历还是很值得的，因为对前端的技术还不是太了解，所以只能在这里跟大家分享一下我所了解的一部分基础知识。HTML初识
1、Web标准构成：结构、表现、行为
结构：用于对网页元素进行整理和分类，主要学的是HTML
表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指css
行为：网页模型的定义及交互的编写，主要是javascript
2、html是超文本标记语言;
3、html骨架：
<html>
<head>
<title> 俺的第一个页面</title>
</head>
<body>
你我之间 黑马历练 月薪过万 一飞冲天
</body>
</html>
4、标签分类：
双标签（常规元素）：<标签名></标签名>
单标签（空元素）：</标签名> ； ”/"关闭符
5、标签关系(主要针对双标签的相互关系);
嵌套关系：<head>
<title></title>
</head>
并列关系：<head></head>
<body></body>
代码开发工具（书写代码）
1、sublime生成html骨架小技巧：
双击打开软件
新建文件（ctrl+n）
保存（ctrl+s）,保存为文件名：html(后缀必须是html)
放大缩小代码：按住ctrl在滚动鼠标滚轮或者ctrl+加号键和ctrl+减号键
生成页面骨架结构：
o html:5 按下tab键或者o!按下tab键
在浏览器中浏览页面
0右键在浏览器中打开
文档类型
1、<!DOCTYPE>声明位于文档中的最前面的位置 ，处于<html>标签之前。就是告诉浏览器按照HTML5规范解析页面。
2、HTML文件必须加上DOCTYPE声明，并统一使用HTML5的文档声明.
页面语言lang:
1、<html lang="en"> 指定html 语言种类
2、最常见的2个：1、en定义语言为英语
2、zh-CN定义语言为中文
字符集
1、字符集（character set）是多个字符的集合。
2、UTF-8（大写）是目前最常用的字符集编码方式，基本包含全世界所有国家需要用到的字符。
3、<meta charset="UTF-8"/>是必须要写的代码，否则可能引起乱码的情况。
HTML标签的语义化：指标签的含义。
标签语义化的目的：1、方便代码的阅读和维护
2、同时让浏览器或是网络爬虫可以更好地解析，从而更好地分析其中的内容
3、使用语义化标签会具有更好地搜索引擎优化.
HTML常用标签
排版标签：主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
1、标题标签h（熟记）
单词缩写：head 头、标题 title 文档标题
标题标签语义：作为标题使用，并且依据重要性递减
基本语法格式：<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>
2、段落标签p(熟记)
单词缩写：paragrah 段落 <p>文本内容</p>
语义;可以把HTML文档分割成若干段落
3、水平线标签hr（认识）
horizontal 横线 <hr/>是单标签
4、换行标签br(熟记) <br/>
5、div和span标签（重点）
div（分割） span （跨度、范围） 是没有语义的 是我们网页布局主要的2个盒子
<div>这是头部</div> ；<span>今日价格</span>都是盒子，用来装网页元素
div标签 用来布局的，但是现在一行只能放一个div
span标签 用来布局的，一行上可以放好多个span.
<hx></hx>标题标签 作为标题使用且依据重要性递减
<p></p> 段落标签 可把HTML文档分为若干段落
文本格式化标签（熟记）
<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=“属性值1” 属性2=“属性值2”>内容</标签名>
图像标签img(重点)
<img src="图像URL"/> src属性用于指定图像文件的路径和文件名，是img标签的必须属性。
<img/>标记属性：
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素（XHTML不支持%页面百分比）设置图像的宽度
height 像素（XHTML不支持%页面百分比）设置图像的高度
border 数字 设置图像边框的宽度
注意：1、标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
2、属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
3、采取键值对的格式 key ="value"的格式
链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。
target 用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
外部链接需要添加http://www.baidu.com
内部链接直接链接内部页面名称即可
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为"#",表示该链接暂时为一个空连接。
不仅可以创建文本超链接，在网页中各种网页元素，如果图像、表格、音频、视频等可以添加超链接。
注释标签
<!--注释语--> 快捷键 ctrl+/
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行。
推荐<!--Comment Text-->
<div>....</div>
相对路径(重点)：
同一级路径：只需输入图像文件的名称即可，如<img src="baidu.gif"/>
下一级路径：图像文件位于HTML文件同级文件夹下，如<img src="images/baidu.gif"/>
上一级路径：在文件名之前加入"../";如果是上两级，则需要使用“../../”,以此类推，如<img src="../baidu.gif"/>
锚点定位（难点）
1、使用相应的id名标注跳转目标的位置（找目标）
<h3 id="two">第二集</h3>
2、使用<a href="#id名">链接文本</a>创建链接文本（被点击）
<a href=“#two”>
base标签
1、可以设置整体链接的打开状态
2、写到<head></head>之间
3、把所有的连接都默认添加target="-blank"
| 
收藏
淘帖
踩
