整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
/一、html
//a、HTML语法规范
//a.1基本语法概述
1、HTML标签是由尖括号包围的关键字，例如,
2、HTML标签通常是成对出现的，例如和,我们成为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。
3、有些特殊的标签是单个标签（极少情况），例如
，我们称为单标签
//a.2标签关系
双标签关系可以分为两类：包含关系和并列关系。
//b、HTML基本结构标签
//b.1第一个HTML网页
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上写的。
HTML页面也称为HTML文档
标签名 | 定义 | 说明 |
<html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容，基本都是放到body里面的 |
必须是.html或.htm,浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。
//c、开发工具vscode
1、<!DOCTYPE>标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>这句代码的意思是：当前页面采用的是HTML5来显示页面。
2、lang语言
用来定义当前文档显示的语言：
a、en定义语言为英语
b、zh-CN定义语言为中文
简单来说定义为en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义zh-CN的文档也可以显示英文
这个属性对于浏览器和搜索引擎（百度、谷歌等）还是有作用的
3、charset字符集
字符集是多个字符的集合，以便计算机能够识别和存储各种文字
在标签内，通过标签的charset属性来规定HTML文档应该使用哪种字符编码。
charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：上面语法是必须写的代码，否则可能引起乱码的情况，一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8",不要写成"utf-8"或"UTF8"。
//d、HTML常用标签
//d.1标签语义
学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是指标签的含义，即这个标签是用来干嘛的
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
//d.2标题标签
-
(重要)
为了使网页更具有语义，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标题集
-
特点：
1、加了标题的文字会变得更加粗，字号也会依次变大。
2、一个标题独占一行。
//d.3段落和换行标签（重要）
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在HTML标签中，
标签用于定义段落，它可以将整个网页分为若干段落。
<p>我是一个段落标签</p>标签语义：可以把HTML文档分割为若干段落。
特点：
1、文本在一个段落中会根据浏览器窗口的大小自动换行。
2、段落和段落之间保有一个较大的空隙。
在HTML中，一个段落中的文字从左到右依次排列，直到浏览器的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签
<br />
单词break的缩写，意为打断，换行。
特点：
1、单标签
2、
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
//d.4文本格式标签
在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式标签，使文字以特殊的方式显示
标签语义：突出重要性，比普通文字更重要。
语义 | 标签 | 说明 |
加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong></strong>标签加粗，语义更强烈 |
倾斜 | <em><em> 或者<i><i> | 更加推荐使用<em><em>标签，语义更加强烈 |
删除线 | <del><del>或者<s><s> | 更加推荐使用<del><del>标签，语义更加强烈 |
下划线 | <ins><ins>或者<u><u> | 更加推荐<ins><ins>标签，语义更加强烈 |
//d.5<div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容。
<div>这是头部</div>
<span>今日价格</span>div是division的缩写，表示分割，分区，span意为跨度，跨距。
特点：
1、<div>标签用来布局，但是现在一行只能放一个<div>，大盒子。
2、<span>标签用来布局，一行上可以有多个<span>,小盒子
//d.6图像标签和路径（重点）
1、图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
<img src="图像url"/>单词image的缩写，意为图像
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本，图像不能显示的文字 |
title | 文本 | 提示文本，鼠标放到图像上，显示文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
例
使用 <span> 元素对文本中的一部分进行着色：
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
浏览器支持
所有主流浏览器都支持 <span> 标签。
标签定义及使用说明
<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
提示和注释
提示：被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
HTML 4.01 与 HTML5之间的差异
NONE.
全局属性
<span> 标签支持 HTML 的全局属性。
事件属性
<span> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
lt;h2 id="title1">开发工具(工欲善其事必先利其器)</h2>
为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用每天编写很多没有意义的重复代码, 提升大家的开发效率今后的课程中我们统一采用最高级高发工具来编写网页
<h3 id="title2">常见的前端开发工具</h3>
记事本: 提示功能较差
editplus/nodepad++: 提示功能较差
Dreamwaver: 更偏向设计
Sublime: 轻量级,自带功能不太全, 但是插件十分丰富
WebStorm: 重量级, 自带功能全面
其它ide(zend studio、netbean等)
为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 今后的课程中我们统一采用最牛逼最高级的高发工具WebStorm
<h3 id="title3">WebStorm安装和使用</h3>
安装软件
1.png
2.png
3.png
4.jpg
5.jpg
6.png
7.jpg
8.png
破解软件
9.png
10.png
11.jpg
12.jpg
13.png
14.png
汉化软件
15.png
16.jpg
设置模版
创建文件
17.png
18.jpg
关注微信订阅号：网页设计轻松学 有更多内容
19.png
WebStorm常见快捷键
如何在WebStorm中利用快捷键创建一个新的.html的文件
同时按下键盘上的Ctrl + Alt + Insert
如何在WebStorm中让光标移动到当前行的末尾
按下键盘上的End键即可
如何在WebStorm中让光标移动到当前行的最前面
按下键盘上的Home键即可
如何在WebStorm中让光标在多行中闪烁
按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可
如何在WebStorm中快速的复制光标所在的那一行
按下键盘上的Ctrl + D
如何在WebStorm中快速的删除光标所在的那一行
按下键盘上的Ctrl + X
如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签
按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可
<h2 id="title4">基础标签学习</h2>
<h3 id="title5">H系列标签(Header 1~Header 6)</h3>
作用:
用于给文本添加标题语义
格式:
<h1>xxxxxx</h1>
注意点:
H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
被H系列标签包裹的内容会独占一行
在H系列的标签中, H1最大, H6最小
在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)
<h3 id="title6">P标签(Paragraph)</h3>
作用:
告诉浏览器哪些文字是一个段落
格式:
<p>xxxxxxxx</p>
注意点:
在浏览器中会单独占一行
<h3 id="title7">Hr标签(Horizontal Rule)</h3>
作用:
在浏览器上显示一条分割线
格式:
<hr />
注意点:
在浏览器中会单独占一行
通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做
<h2 id="title8">HTML注释(Annotation)</h2>
什么是注释?
注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思
注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流
为什么要使用注释?
适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的
注释格式
<!--被注释的内容-->
注意点:
被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
注释不能嵌套使用
<!--<!--被注释的内容-->-->
快捷键: ctrl + /
<h3 id="title9">img标签(image)</h3>
作用: 在网页上插入一张图片
格式: 
标签的属性
写在标签中K="V"这种格式的文本我们称之为标签属性
| 属性名称 | 作用 |
|---|---|
| src(source) | 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片 |
| alt(alternate) | 规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本 |
| title | 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示) |
| height | 设置图片显示的高度 |
| width | 设置图片显示的宽度 |
注意点:
img标签添加的图片默认不是占一整行空间
如果想让图片等比拉伸, 只写高度或者宽度即可
关注微信订阅号：网页设计轻松学 有更多内容
<h3 id="title10">br标签(Break)</h3>
作用:
让内容换行
格式:
<br/>
注意点:
br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做
<h3 id="title11">相对路径和绝对路径</h3>
图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径
绝对路径
从电脑的具体盘符开始寻找我们需要的资源
以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片
相对路径
一个文件相对于另外一个文件的位置寻找我们需要的资源
假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片
为什么没人使用绝对路径?
可以移植性太差.
什么是可移植性?
可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行
为什么绝对路径可移植性差?
假如我编写的html文件放在我电脑的 F:/lnj 目录下, html文件中用到的图片放在F:/lnj/images目录下, 我给src指定的绝对路为F:/lnj/images/girl.png. 那么将来我将整个lnj文件夹拷贝给你, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片
例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png, 而src会去F盘找, 所以不会显示
你只有将lnj文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好
Q群；162542073
为什么相对路径可移植性好?
同上, 如果src指定的路径为images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示
相对路径几种查找方式
../代表访问上级目录
假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
直接编写, 例如abc/girl.png
加上./ 编写, 例如./abc/girl.png
相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
直接编写, 例如: girl.png
加上./ 编写, 例如./girl.png
./代表当前目录, ./girl.png代表在当前目录下查找
同级
下级
上级
注意事项:
相对路径不会出现这种格式aaa/../bbb/girl.png
虽然可以显示, 但是企业开发中千万不要这么写
<h3 id="title12">a标签(anchor)</h3>
格式: <a href="http://www.it666.com">江哥博客</a>
作用: 用于从一个页面链接到另一个页面
注意事项:
在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
a标签也叫做超级链接或超链接
a标签的属性
| 属性名称 | 作用 |
|---|---|
| href(hypertext reference) | 指定跳转的目标地址 |
| target | 告诉浏览器是否保留原始界面, _blank保留, _self不保留 |
| title | 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示) |
base标签和a标签结合使用
如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
格式: <base target="_blank" />
注意事项:
base必须嵌套在head标签里面
如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
a标签其它用法
例如<a href="girl.zip">下载福利资源<a/>
格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
只需要在01-锚点链接.html页面添加一个id位置即可
2.1.格式<a href="#location">跳转到指定位置</a>
2.2.在页面的指定位置给任意标签添加一个id属性
例如 <p id="location">这个是目标</p>
格式<a href="#">江哥博客</a>
格式<a href="javascript：">江哥博客</a>
假链接(本质是跳转到当前页面)
跳转到当前页面指定位置(锚点链接)
跳转到指定页面的指定位置
下载(极力不推荐使用)
*请认真填写需求信息，我们会在24小时内与您取得联系。
