1.html的操作思想

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把需要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

2.标题标签、水平线标签和特殊字符

*标题标签：
h1….h7 的标签
h1到h7依次变小
标题标签之间不需要加br
就可以自动换行。
表格的标签：caption

水平线标签：
hr/表示水平线标签
-属性
*size：水平线的粗细、取值范围1-7 color：颜色
代码：

<hr size="5" color = "blue"/>

*特殊符号：
-想要在页面上显示这样的内容:是网页的开始！
-需要转义

*<  &lt;
*>  &gt;
*空格：&nbsp;
*&: &amp
*双引号： &quot;

3.列表标签

-比如现在页面显示这样的效果
传智播客
财务部
人事部
学工部
```html

:表示列表范围
在dl里面

:上层内容 在dl里面

:下层内容
-代码

传智播客

财务部

人事部

学工部

-想要在页面上实现这样的效果
    1.财务部
    2.学工部
    3.人事部

    a.财务部
    b.学工部
    c.人事部

    I.财务部
    II.学工部
    III.人事部
这样的有序标签
```html
**<ol></ol>:有序列表的范围
**在ol标签里面<li>具体内容</li>
<ol></ol>
-属性type：设置排序方式（默认是1,2,3）

-想要在页面上显示这样的效果
特殊符号（方框）财务处

4.图像标签（重点）

<img src = "图片的路径"/>
-属性：
-src：图片的路径
-width：图片的宽度
-height：图片的高度
-alt：图片上显示的文字

5.路径介绍：

分类：两类
*绝对路径
-C:\AppData
-http://www.baidu.com/b.jpg

6.超链接标签

*链接资源：
-```html
显示所有内容

**href：链接的资源路径
**target：链接的打开方式：
默认是在当前页打开
--_blank :在一个新窗口打开
--_self :在当前页打开（默认）
```html
不需要跳转到页面的时候，相当于无效
<a href="#"></a>

定位资源：
*如果想要定位资源：定义一个位置
将滚动条滚动

<a name = "top">顶部</a>

**回到这个位置

<a href = "#top">回到顶部</a>

原样输出标签```html



------------

# 7.表格标签

------------
*可以对数据进行格式化，使数据显示更加清晰。
```html
*<table></table>
**在table里面<tr></tr>行
<td></td>单元格

属性：border：表格线粗细
bordercolor：表格线颜色
cellspacing：单元格的距离
width：表格宽度
height：表格高度
将单元格内容显示位置

<tr align="left center right"></tr>

**操作技巧：
-首先数有多少行，每行有多少个单元格

使用th也可以表示单元格，表示的单元格内容字体居中和加粗。

**合并单元格：
-rowspan跨行
-colspan跨列

10.表单标签

*可以提交数据到某个网站的注册服务器。

*<form></form>:定义一个表单的范围
属性：**action：页面提交<form action=""/>
    **method:提交方式
    （1）get（2）post 默认使用get。
两种提交方式的区别：
1、get请求地址栏会携带提交的数据，post不会携带（请求里面。）
2、get安全级别较低，post较高。
3、get请求数据大小的限制，post没有文件大小限制。
** enctype：一般请求下不需要，作为文件上传时设置的属性

**输入项：可以输入内容挥着选择内容的部分
-大部分的输入项使用<input type="输入项的类型"/>

**普通文本框:<input type = "text"/>

**密码输入项：<input type = "password"/>

**单选框：<input type = "radio" name="sex1"/>男<input type = "radio" name = "sex1"/>女
    -在里面必须要有属性值name
    name的属性值必须相同
    必须有value
    ***实现默认选项 checked= "checked"

***复选输入项：<input type = "checkbox" name="love"/>篮球<input type = "checkbox" name="love"/>羽毛球<input type = "checkbox" name="love"/>乒乓球
    -在里面必须要有属性值name
    name的属性值必须相同
    必须有value
    ***实现默认选项 checked= "checked"

***文件上传输入项：<input type = "file" />
***下拉输入项：（不是在input标签里）
    <select name="birth">
        <option value="0">请输入</option>
        <option value="1991">1991</option>
        <option value="1992">1992</option>
        <option value="1993">1993</option>
</select>
    ***实现默认选项 selected="selected"

***文本域
<textarea cols="10" rows="10" >自我描述：</textarea>

***隐藏项（不会显示在页面，但是在html代码里）
<input type = "hidden"/>

**提交按钮
<input type = "submit" value = "注册"/>
***注意：输入项中一定要写上name的属性
**使用图片提交
<input type = "image" src="a.jpg"/>

**重置/取消按钮:回到输入项的初始状态
<input type="reset"/>

**普通按钮(与js一起使用)
<input type = "button" value=""/>

11.html中的其他的常用标签的使用
<b></b>:加粗
<u></u>:下划线

<i></i>:斜体

<s></s>:删除线

<pre></pre>原样输出

<sub></sub>:下标

<sup></sup>:上标

举例：
3<sub>100</sub>
<br/>
4<sup>200</sup>
用处：数学公式底数使用

<div></div>：1.自动换行

<span></span>:1.不会自动换行，会在一行显示

<div></div>应用：例如QQ空间导航栏

<span></span>应用在注册页面提示输入出错。

<p></p>:段落标签

12.html的头标签的使用

*html两部分组成head和body
**在head里面的标签就是头标签
**title：表示在标签上显示的内容
**<meta>:
--<meta name="keywords" content="毕姥爷,熊出没">

页面的定时跳转，3秒后跳到url的。
**base标签：设置超链接的基本设置，统一设置超链接的打开方式。
--<base target ="_blank">在base标签下的所有超链接都是打开一个新窗口
**link标签：引入外部文件，可以引入css文件

13.框架标签的使用：

*<frameset></frameset>
    属性：rows：按照行进行划分
            **<frameset rows="80,*">表示把一行划分成两部分，上边80，
    </frameset>
         cols:按照行划分
            **<frameset cols="80,*">表示把左右两列
    </frameset>
    *<fram></fram>
    -具体显示页面
    -<frame name = "lower_left" src = "b.html"></frame>
    name表示页面的名称，src页面路径
    注意：页面使用框架标签不能写在body里面，使用了框架标签，需要

Html基础学习笔记