web前端从入门到精通(一)

html基础学习(一)

1. 常用标签（语义标签）

（1）标题标签

HTML提供了6个等级的标题(head)，h1是最高级的标题。其基本语法是：

 标题信息 

注意:h1因为重要，尽量少用，一般都是给logo用，或者页面中最重要标题信息，其他5个级别标题在一个页面中都可以出现多次，h1只能出现一次。

(2)段落标签

在网页中要想把文字内容有条理地显示，离不开段落标签（paragraph）,它是网页中文章内容的基本组成部分。其基本语法是：

 文本内容 

注意：段落标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

(3)水平线标签

在网页中经常看到一些水平线将段落与段落间隔开，层次分明。这些水平线可以通过插入图片来实现，也可以简单地通过

---

标签(horizontal)来完成。其基本语法是：

是单标签

（4）换行标签

在HTML中，一个段落的文字会从左往右按顺序排列，直到浏览器窗口的右端，然后会自动换行，如果希望某段文字强制进行换行，就需要使用换行标签(break)。其基本语法是：

注意：除了少数应用（比如诗歌的分行），应该尽量避免使用这个标签，因为它并没有特别的语义含义，而且分行的视觉效果完全可以通过p标签、列表标签和CSS命令达到。

（5）Div spanl标签

div 和 span是没有语义的，是现在网页布局用到的最主要的2个盒子，比如css+div的结合就可以基本上满足页面布局需要。其基本语法是：

 这是头部 
      今日行情 

（6）文本格式化标签

在网页中，有时要为某些文字设置加粗、加斜或加下划线的效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。其基本语法是：

注意：b i s u 只有使用，没有强调的意思，strong em del ins的语义更强烈。

（7）图像标签

要想在网页中显示图像就需要使用图像标签，下图详细介绍了图像标签以及与其相关的一些属性。其基本语法是：

1.基本图像插入方式：

2.带有alt的图像插入方式：

3.带有title的图像插入方式：

4.带有宽度的图像插入方式：

5.带有边框的图像插入方式：

（8）链接标签

HTML中创建超链接比较简单，只需用链接标签(anchor)环绕需要被链接的对象即可。其基本语法是：

文本或图像

href：Hypertext Reference的缩写，意思是超文本引用，用于指定链接目标的url地址。
target：用于指定链接页面的打开方式，其取值有self(新链接页面覆盖原页面，为默认值)、blank(在新窗口打开)、_parent(载入父级窗口，与iframe结合用得到)、_top(载入顶级窗口，与iframe结合用得到)。
注意：

1. 外部链接：需要添加 http://www.baidu.com
2. 内部链接：直接链接内部页面名称即可，如首页；还有可以通过创建锚点链接，能够快速定位到内部页面的目标内容：①.使用链接文本 ②.使用相应的id名标注跳转到目标的位置。
3. 如果没有确定的链接目标时，通常将href属性定义为"#"(即href="#")，表示该链接暂时为一个空链接。
4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
5. 当然也可以利用base标签来设置整体链接的打开状态，如网易这样设置让页面所有链接按新窗口打开：

（9）特殊字符标签

无序列表ul
无序列表(unordered list)的各个列表项之间没有顺序级别之分，是并列的。其基本语法是：

  
列表项1
  
列表项2
  
列表项3
  ......

注意：

1. 中只能嵌套
，直接在
标签内输入其他标签或者文字的做法是不被允许的。
4. 与
之间相当于一个容器，可以容纳所有元素。
5. 无序列表会自带样式属性，但还是让css来做！
   有序列表ol
   有序列表(ordered list)即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义。其基本语法是：

   
列表项1
   
列表项2
   
列表项3
   ...... 

所有特性基本和ul一致，且自带顺序。
定义列表
定义列表(definition list)常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法是：

  
名词1
  
名词1解释1
  
名词1解释2
    
  ......  
  
名词2
  
名词2解释1
  
名词2解释2
     
  ......  

表格table
表格还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。其基本语法是：

    ...
   
  ...

  

    
单元格内的文字

上面的语法中包含三对HTML标签，分别为

、、，他们是创建表格的基本标签，缺一不可，下面对他们进行具体解释：

1. table用于定义一个表格。
2. tr用于定义表格中的一行，必须嵌套在table标签中，且只能嵌套，在table中包含几对tr，就有几行表格。
3. td /td：用于定义表格中的单元格，必须嵌套在标签中，一对中包含几对，就表示该行中有多少"列"（或多少个单元格），但表格只有行tr和单元格td，行里面装单元格，没有列的概念；标签像一个容器，可以容纳所有的元素。
   表单标签
   表单的目的是为了收集用户信息，在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常还需要包含一些说明性的文字，作用是提示用户进行填写和操作。
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
input控件
标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。其常见属性如下所示：

text语法:

  所在地区    
      //value为默认值

password语法：

  密码
      

radio单选按钮语法：

  性别
  
     男
     女
     人妖
      

label标签
label标签为input元素定义标注，其中for属性规定了label与哪个表单元素绑定。其基本语法是：

Male
 

点击Male会直接跳到右边的文本框内，label通过for和id建立联系快速找到。
当然也可以简化成这种形式：

Male

textarea文件域 ⭐⭐
text 文本框只能写一行文本
如果需要输入大量的信息，就需要用到textarea标签，可以轻松地创建多行文本输入框。其基本语法是：

   文本内容   

但是textarea的宽和高通常是通过css来控制的,cols和rows几乎不用。
下拉菜单 ⭐⭐
使用select标签定义下拉菜单的基本语法如下：

  选项1
  选项2
  选项3
  ...

注意：

1. 中至少应包含一对。
2. 在option中定义selected="selected"时，当前项即为默认选中项。
   表单域 ⭐⭐
   在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。其基本语法是：

    
    各种表单控件   

常见属性：

1. Action：在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接受并处理表单数据的服务器程序的url地址。
2. method：用于设置表单数据的提交方式，其取值为get或post。
3. name：用于指定表单的名称，以区分同一个页面中的多个表单。
   注意：每个表单都应该有自己的表单域。

HTML5常用新标签 ⭐⭐⭐
• header：定义文档的页眉
• nav：定义导航链接的部分
• footer：定义文档或节的页脚
• article：标签规定独立的自包含内容
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容（侧边）
• datalist：标签定义选项列表，与input元素配合使用
• fieldset：可将表单内的相关元素分组，打包，与legend搭配使用
HTML5新增的input type属性

多媒体标签
• embed：标签定义嵌入的内容
• audio：播放音频
• video：播放视频
多媒体embed ⭐⭐
embed可以用来插入各种多媒体（较大的），格式可以是Wav、AIFF、AU、MP3等。其中url为音频或视频文件的路径，可以是相对路径或绝对路径。其基本语法是：

多媒体audio ⭐⭐
HTML5通过标签来解决音频播放的问题。其基本语法是：
//通过src指定音频文件路径即可
并且可以通过添加属性来更友好控制音频的播放，如：
• autoplay 自动播放
• controls 是否显示默认播放组件
• loop 循环播放 ，loop=2就是循环2次 ，loop或者loop=“-1”无限循环
多媒体video ⭐⭐
同音频播放一样，（通常插入较小的视频）使用也相当简单。其基本语法是：
//通过src指定视频文件路径
同样，通过附加属性可以更友好的控制视频的播放：
• autoplay 自动播放
• controls 是否显示默认播放组件
• loop 循环播放
• width 设置播放窗口的宽度
• height 设置播放窗口的高度
块级元素与行内元素
在 HTML 中，标签（tag）通常又被称作元素（element）。例如 标签又叫做 元素，

标签也叫作

元素。
HTML 元素根据其表现形式可以分为 2 种：
• 块级元素
• 行内元素
任何 HTML 元素都属于这两者中的任意一种。
提示：块级元素和行内元素的概念极其重要，同时也是学习 CSS 的基础知识之一，请读者不要忽略。

1. 块级元素
   块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下：
   块级元素
   块级元素 说明
   div 最典型的块元素
   p 表示段落
   h1-h6 表示1-6级标题（默认加粗）
   br 表示换行
   ol有序列表
   ul无序列表
2. 行内元素
   行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下：
   行内元素
   行内元素 说明
   a超链接
   span 常用行级
   strong 加粗，强调
   b 加粗，不强调
   em 斜体，强调
   i 斜体，不强调
   img图片
   input输入框
   select下拉列表

1. 实例演示

1.	
2.	
3.	
4.	    
5.	    
6.	
7.	
8.	    
div标签（块级标签）
9.	    
p标签（块级标签）
10.	    span标签（行内标签）
11.	    a标签（行内标签）
12.	
13.	

块元素与行内元素区别

标签和

标签分别独占一行，因为它们是块级元素；而 标签和 标签在同一行中显示，因为它们是行内元素。

注意，这里我们说的独占一行是指元素在浏览器中的运行效果，并不是在编辑器中独占一行。在编辑器中，不论怎么书写代码，都不会影响它在浏览器中的运行效果。
3. 元素的嵌套
HTML 中的各个元素之间是可以互相嵌套的，例如：
• 块元素可以嵌套块元素
• 块元素可以嵌套行内元素
• 行内元素可以嵌套行内元素
• 行内元素可以嵌套块元素
值得注意的是我们不建议在行内元素中嵌套块元素，这样不仅不符合开发规范，还会导致行内元素也独占一行。

下面来看一段元素之间互相嵌套的代码：

1.	
2.	
3.	
4.	    
5.	    
6.	    
7.	
8.	
9.	    
10.	    

11.	        
p标签（块级元素）
12.	        
div标签（块级元素）
13.	    
14.	    
15.	    

16.	        span标签（行内元素）
17.	    
18.	    
19.	    
20.	        span标签（行内元素）
21.	        a标签（行内元素）
22.	    
23.	
24.	

元素之间的嵌套
4. 总结

1. 块级元素的宽度是 100%，在浏览器中默认独占一行。
2. 行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
3. 块级元素内部可以嵌套块级元素或行内元素。
4. 建议行内元素里面只嵌套行内元素。

超链接与图片标签

（1）超链接

在 HTML 中，我们使用 标签来表示超链接。
超链接（Hyperlink）是网页中最常见的元素之一，整个互联网都是基于超链接而构建的。每个网站都由众多的网页组成，超链接使得网页之间不再独立，它就像一根线，把网页连接在一起，形成一个网状结构。互联网之所以能够称之为“网”，就是因为有超链接的存在。
标签的语法格式如下：

链接文本

其中，href 属性用来指明要跳转到的 url，target 属性用来指明新页面的打开方式，链接文本需要写在 和 之间。

例如，链接到C语言中文网首页可以这样写：

1.	C语言中文网:

链接到C语言中文网里面的一个 HTML 页面可以这样写：

1.	网站到底是什么

下面，我们来详细分析一下 标签的各个属性。
1. href 属性
href 属性指定链接的目标，也就是要跳转到什么位置。href 可以有多种形式，例如：
• href 可以指向一个网页（.html、.php、.jsp、.asp等格式），这也是最常见的形式，例如 href=“http://c.biancheng.net/view/1719.html”；
• href 可以指向图片（.jpg、.gif、.png 等格式）、音频（.mp3、.wav等格式）、视频（.mp4、.mkv格式）等媒体文件，例如 href="/uploads/allimg/181221/134I32557-0.jpg"；
• href 可以指向压缩文件（.zip、.rar等格式）、可执行程序（.exe）等，一些下载网站的链接就可以写成这种形式，例如 href="./…/uploads/data_package/ComputerFoundation.zip"；
• href 甚至还可以指向本机的文件，只是很少这样使用，例如 href=“D:/Program Files/360/360safe/360Safe.exe”。

你看，href 本质上就是指向一个文件，这个文件几乎可以是任意格式的。如果浏览器支持这种格式，那么它就可以在浏览器上显示，比如常见的图片、音频、视频等，如果浏览器不支持这种格式，那么就提示用户下载。

另外，href 使用的路径可以是绝对路径，也可以是相对路径。绝对路径往往以域名为起点，例如 http://c.biancheng.net/view/1719.html；相对路径往往以当前文件或者当前域名为起点，例如 ./…/uploads/data_package/ComputerFoundation.zip。 后续我们将在《绝对路径与相对路径》一文中详细讲解，这里大家不必深究。
2. target属性
在创建网页时，默认情况下，超链接在当前的浏览器窗口打开，但是我们可以使用 target 属性来改变目标窗口的打开方式。常见的打开方式如下表所示：

target 属性值
属性值 说明
_self 默认，在现有的窗口中打开新页面，原窗口将被覆盖。
_blank 在新的窗口中打开新页面。
_parent 在当前框架的上一层打开新页面。
_top 在顶层框架中打开新页面。

绝大部分情况下，target 属性要么不写，保持默认的 _self，要么把它的值设置为 _blank，在新的窗口中打开链接。例如：

1.	
2.	
3.	
4.	    
5.	    
6.	
7.	
8.	    C语言中文网（新窗口打开）
9.	    C语言中文网（现有窗口打开）
10.	
11.	

target 窗口打开方式

这两种效果在浏览器预览中看不出来区别，但是当我们点击一下超链接，会发现它们的窗口打开方式是有区别的，请读者自己试一试。
3. 标签的默认样式

1. 鼠标样式
   当鼠标移入网页上的某个超链接时，其样式会变为一只小手；当鼠标移出超链接区域时，样式会再次回到箭头形状。
2. 颜色及下划线
   任何 HTML 元素都有默认的样式， 标签也不例外。在浏览器下，超链接被点击后颜色会发生改变：超链接被点击之前是蓝色的，点击之后会变成紫色。

超链接默认是带下划线的，下划线颜色和文本颜色保持一致。 浏览器根据历史记录来判断超链接是否被点击过，如果 标签的 href 属性和历史记录中的某条 URL 重合，那就说明该链接被点击了，否则是没有被点击的。所以，清空浏览器的历史记录会让超链接的颜色再次变回蓝色。

(2)图片标签
img标签又称图片标签。img标签是用来在浏览器中显示一张图片的HTML标签。img 标签 – 代表HTML图像，img,是image(图像)的缩写。

做网站时，如果网页上没有图片，将会使自己的网站失色。通过图片标签img标签可以让我们自己的网站图文并茂，图像会使网页更加生动。
img标签也可以加a标签，如：
HTML 图片 img标签用法
img标签使用书写语法

img标签是单独出现的，如：

但是随着HTML5的普及，图片 img标签也使用闭合的标签。如：
HTML 图片 img标签属性
img标签在使用过程中有以下几个属性：
alt – 代表图像的替代文字
src – 代表一个图像源(就是图像的位置)
height – 代表一个图像的高度
width – 代表一个图像的宽度

相对路径与绝对路径

路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：相对路径，绝对路径。以下讨论均是在HTML环境下进行。

(1)相对路径

相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：
./ ：代表文件所在的目录（可以省略不写）
…/ ：代表文件所在的父级目录
…/…/ ：代表文件所在的父级目录的父级目录
/ ：代表文件所在的根目录
值得注意的是，（/ ：代表文件所在的根目录）其实可以理解成项目内部的绝对路径。
图1：项目目录结构
以图1所示项目目录结构为例，如果要在test.html中引入000.css，可以有以下写法：

1、 (./可以省略)
2、
3、

(2)绝对路径

绝对路径是指完整的网址，假设图一中项目的网站域名为www.test.com，那么000.css的绝对路径应该是
https://www.test.com/HelloHBuilder/html/css/css1/000.css。
相对路径与绝对路径的优缺点

常用实体

记得双击点赞偶