1.HTML
- HTML：HyperText Markup Language：超文本标记语言，网页语言。
- 超文本：超出文本的范畴，使用HTML可以轻易实现这样的操作。
- 标记：HTML的所有操作都是通过标记实现的，标记就是标签，<标签名称>
- 网页语言：HTML是在网页在浏览器上读取工作的
- 后缀： .html 或.htm
- 代码： <font color = "red" size = "5">这是我的第一个HTML程序！</font>
2.HTML规范（遵循）
- 一个HTML文件开始标签和结束标签 <html> </html>
- HTML包含两部分
- -- <head> 设置相关信息 </head>
- -- <body> 显示在页面上的内容都写在这里 </body>
- HTML里有开始标签，也必须有结束标签
- HTML不区分大小写
- 有些标签，没有结束标签， 在标签内结束
比如，换行 <br/>
3.HTML操作思想（**重要，需理解**）
网页中有很多的数据，不同的数据可能有不同的显示效果这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值来实现标签内数据样式的变化
一个标签相当于容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化
4.HTML常用标签
- 文字标签和注释标签
（1）文字标签：修改文字的样式
-<font> </font>
size：文字大小，取值范围1-7，超出7之后，还是7
color：文字颜色
- 两种表示方式
**英文单词：red green blue black white yellow gray.....
**用十六进制数表示 #ffffff : RGB
--通过工具实现不同的颜色 #66cc66 代表浅绿色
--<font color = "#66cc66">
(2)注释标签
- Java注释有3种
- HTML的注释 ： <!-- HTML的注释 -->
2.标题标签、水平线标签和特殊字符
（1）标题标签
- <h1></h1> <h2></h2> <h3></h3>......<h4></h4>
- 从h1到h6，大小依次变小，同时会自动换行
（2）水平线标签
- <hr/>
- 属性
** size：水平线的粗细 取值范围 1-7
**color：水平线的颜色
- 代码
<hr/ size = "5" color = "blue">
（3） 特殊字符
- 想要在页面上显示这样的内容 <html>：是网页的开始
- 需要对特殊字符进行转义
* < : <
* > : >
* 空格:
* &: &
3.列表标签
- 比如现在在网页上显示这样的效果
传智播客
财务部
学工部
人事部
* <dl></dl> 表示列表的范围
** 在dl里面 <dt></dt> ：上层内容
** 在dl里面 <dd></dd>：下层内容
- 代码
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
- 现在在网页上显示这样的效果
1. 财务部
2. 学工部
3. 人事部
a. 财务部
b. 学工部
c. 人事部
I. 财务部
II. 学工部
III. 人事部
** <ol> <ol>：有序列表的范围
- 属性 type：设置排序方式 1（默认） a I
**在ol标签里<li>具体内容</li>
- 代码
- <ol>
<dt>传智播客</dt>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
- 想在网页上显示这样的效果
特殊符号（方框） 财务部
特殊符号（方框） 学工部
特殊符号（方框） 人事部
** <ul></ur> :表示无序列表的范围
属性： type ： 空心圆 circle 实心圆 disc 实心方块 square 默认disc
在ul里边<li></li>
- 代码
<ul type = "square">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
4.图像标签（**重要**）
*<img src = "图片的路径"/>
-src : 图片的路径
-width ：图片的宽度
-hight ：图片的高度
- alt 图片上显示文字，把鼠标移动到图片上，停留片刻显示内容
** 有些浏览器不显示，兼容性差
5.路径
* 分类：两类
**绝对路径
E:\桌面\User Data\safemon
** 相对路径
一个文件对应两外一个文件的位置
- 三种
- 在同一路径 直接写文件名称
- 图片在HTML的下层路径
E:\User\4.html
E:\g.jpg
此时路径为 img\g.jpg
-图片在HTML的下层路径
E:\User\img\g.jpg
E:\User\4.html
此时路径为 ../g.jpg
如果是上层的上层呢？ ../../g.jpg
6.超链接标签（**重点**）
* 链接资源（*****）
- <a href = "链接到资源的路径">显示到页面的内容（/a）
**href ：链接的资源地址
** target：设置打开的方式，默认是在当前页打开
_blank：在一个新窗口打开
_self：在当前页打开
如果href = ""，打开当前目录，如果href = "#"，则超链接不会链接到任何地址
* 定位资源
**如果想要定位资源：定义一个位置
<a name = "top">顶部</a>
** 回到这个位置
<a href = "#top">回到顶部</a>
** 引入一个标签 <pre> </pre>原样输出
7.表格标签（*****重点***）
* 可以对数据进行格式化，使数据显示更加清晰
* <table> </table> ：表示表格的范围
- border ： 表格线
- bordercolor：表格线颜色
- cellspacing：单元格直接的距离
- weight：表格的宽度
- height：表格的高度
** 在table里边 <tr> </tr>
- 设置对其方式 align : left center right
*** 在tr里边 <td> </td>
*** 使用th也可以表示单元格
- 表示实现居中和加粗
* 首先定义一个表格范围用<table>
- 定义一行使用<tr>
- 在每行里有单元格<td>
** 操作表格技巧
- 首先数有多少行，数每行里边有多少个单元格
** 表格的标题
<caption> </caption>
** 合并单元格
- rowspan 跨行
代码： <td colspan = "3">人员信息</td>
- colspan 跨列
10.表单标签（*****今天最重要的标签*****）
* 可以提交数据到开心网的服务器，这个过程可以使用表单标签来实现
* <form> </form>：定义一个表单范围
-属性
** action：提交到的地址，默认提交到当前页面
** method：表单提交方式
- 常用的有两种 get 和 post， 默认是get请求
** get和post的区别
1、get请求地址栏携带提交的参数（数据），而post不会携带（请求体里面。）
2、get请求安全级别较低，post安全级别较高
3、get请求有数据大小限制，post理论上无限制
** enctype：一般情况下不需要这个属性，做文件上传的时候需要设置这个属性
** 输入项：可以输入内容或者选择内容的部分
*****在输入项中需要有一个name的属性
-大部分输入项 使用 <input type = "输入项类型"/>
*** 普通的输入项 ：<input type = "text"/>
*** 密码的输入项：<input type = "password">
*** 单选输入项：<input type = "radio">
- 在里边需要属性 name
- name的属性值必须要相同
- 必须要有一个value值
- 代码 <input type = "radio" name = "sex" value = "nan"/> 男 <input type = "radio" name = "sex" value = "nv"/> 女
** 实现默认选中的属性
-- checked = "checked"
*** 复选输入项 ：<input type = "checkbox"/>
- 在里边需要属性 name
- name的属性值必须要相同
- 必须要有一个value值
*** 文件输入项： <input type = "file">
*** 下拉输入项（不是在input标签内的）
<select name = "birth">
<option value = "1991">1991</option>
<option value = "1992">1992</option>
<option value = "1993">1993</option>
<option value = "1994">1994</option>
</select>
** 默认选中： selected = "selected"
*** 文本域：
<textarea cols = "10" rows = "10"></textarea>
*** 隐藏项：（不会显示在页面上，但是会显示在HTML代码里）
<input type = "hidden" / >
***提交按钮：
<input type = "submit"/>
- 代码 <input type = "submit" value = "注册"/>
*** 使用图片提交
<input type = "image" src = "图片路径"/>
*** 重置按钮：回到输入项的初始状态
<input type = "reset" value = "重置注册"/>
*** 普通按钮（和JS一起使用）
<input type = "button" value = "普通按钮">
11.HTML中其他常用标签的使用
b （加粗）
s（删除线）
u（下划线）
i （斜体）
p （段落标签，比br标签多一行）
pre （原样输出）
sub （下标）
sup （上标）
div （自动换行）
span （在一行显示）
12.HTML头标签的使用
** HTML由两部分组成 head和body
*** 在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** meta标签：设置页面一些相关的内容
** base标签：设置超链接的基本设置
-可以统一设置超链接的打开方式
<base target = "_blank"/>
** link标签：引入外部文件
** 可以使用link标签引入css文件
13.框架标签的使用
* <frameset>
-rows：按行进行划分
** <frameset rows = "80,*">
-cols:
** <frameset cols = "80,*">
* <frame>
- 具体显示的页面
* 使用框架标签是，不能写在body里面，使用了框架标签，需要把body去掉
扫一扫
1904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
