前端开发基础（html）

一、网页说明

1.网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)
2.网页生成制作:  有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
3.HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等…

二、浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器

三、web标准

（1）web标准的优势：遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

• 让 Web 的发展前景更广阔。
• 内容能被更广泛的设备访问。
• 更容易被搜寻引擎搜索。
• 降低网站流量费用。
• 使网站更易于维护。
• 提高页面浏览速度。

（2）web标准的构成：

主要包括 《结构Structure》 、《表现（Presentation）》和《行为（Behavior）》三个方面。

四、标签相关：

1、骨架标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写

2、语义化标签

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰

• 标题标签：

（1）特点：

1、加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。

（2）具体实现：

<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

• 段落标签

（1）特点：

1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
3. 在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

（2）具体实现：

<p> 我是一个段落标签 </p>

• 换行标签

（1）特点：

 - <br /> 是个单标签。
 - <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
 - 在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

（2）具体实现

<br />

• 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示

• div和span标签

（1）特点

1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
2. <span> 标签用来布局，一行上可以多个 <span>。小盒子
3. <div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的

（2）具体实现

<div> 这是头部 </div>    
<span> 今日价格 </span>

• 图片标签

（1）实现

<img src="图像URL" />

（2）属性：

src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。

（3）路径

分为相对路径和绝对路径：
**路径之相对路径**
    相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。 
    这里简单来说，图片相对于 HTML 页面的位置
    绝对路径： 1.是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。 例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”

• 链接标签

 链接的语法格式
    <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性：
    1.href：用于指定链接目标的url地址
    2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开
    3.#：空链接

链接分类： 
1.外部链接: 例如 < a href="http:// www.baidu.com "> 百度。 
2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 。 
3.空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 。 
4.下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。 
5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接. 
6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

• 特殊字符

一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代

五、表格：

1、表格的主要作用：

表格的主要作用：
1.表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
2.表格不是用来布局页面的,而是用来展示数据的。

2、表格的具体用法：

<table>
     <tr>
         <td>单元格内的文字</td>
         ...
     </tr>
     ...
 </table>
 1.<table> </table> 是用于定义表格的标签。
 2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
 3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
 4.字母 td 指表格数据（table data），即数据单元格的内容。

3、表头单元格标签：

表头标签的具体实现：
 <table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>
1.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
    <th> 标签表示 HTML 表格的表头部分(table head 的缩写)
3.表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

4、表格常用属性：

5、表格结构标签

使用场景:
因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分.
在表格标签中，分别用：<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域. 这样可以更好的分清表格结构

1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
3.  以上标签都是放在 <table></table> 标签中

6、合并单元格

跨行合并：rowspan="合并单元格的个数"
最上侧单元格为目标单元格, 写合并代码
跨列合并：colspan="合并单元格的个数"
最左侧单元格为目标单元格, 写合并代码
合并单元格三步曲：
先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 = 合并的单元格数量。

六、列表

1、列表的作用

表格是用来显示数据的，那么列表就是用来布局的。 
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

2、无序列表

（1）格式：

`<ul>` 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义
<ul> 
<li>列表项1</li>   <li>列表项2</li>   <li>列表项3</li>   ... 
</ul>

（2）特点：

1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置

3、有序列表

（1）定义

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML 标签中，<ol> 标签用于定义有序列表，
列表排序以数字来显示，并且使用 <li> 标签来定义列表项。有序列表的基本语法格式如下：
<ol>   <li>列表项1</li>   <li>列表项2</li>   <li>列表项3</li>   ... </ol>

（3）特点：

1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。
3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置

4、自定义列表：

（1）定义：

自定义列表的使用场景:自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。语法如下：

 <dl>   <dt>名词1</dt>   <dd>名词1解释1</dd>   <dd>名词1解释2</dd> </dl>

七、表单

1、表单说明：

使用表单目的是为了收集用户信息
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

2、表单域

表单域是一个包含表单元素的区域。
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器.
实现代码：
<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>

3、表单控件：

在 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

（1）type属性值：

（2）其他属性值

（3）label标签

<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
语法：
     <label for="sex">男</label>
     <input type="radio" name="sex"  id="sex" />
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同

（4）select标签

使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表

<select>
   <option>选项1</option>
   <option>选项2</option>
   <option>选项3</option>
   ...
 </select>

（5）textarea 表单元素

1. 使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
2. 在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
3. 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论

语法：

<textarea rows="3" cols="20">   文本内容 </textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”

有三个名字非常相似的标签:
1.表单域   form    使用场景:  提交区域内表单元素给后台服务器文件域   
2.file      是input type 属性值   使用场景: 上传文件文本域   
3.textarea    使用场景:  可以输入多行文字, 比如留言板  网站介绍等…
4. 我们当前阶段不需要提交表单元素,所以我们只负责表单元素的外观形态即可

前端学习推荐网站： http://www.w3school.com.cn/

非原创，整合网上知识。