1.html的操作思想

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


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


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

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

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

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

*<  <
*>  >
*空格: 
*&: &
*双引号: "

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里面,使用了框架标签,需要