HTML
1.html的简介
## 1.什么是html? 超文本标记型语言##
*超文本: 超出文本的范畴
*标记: 理解为标签, html中所有的操作都是通过标签来实现的
*html是做网页的
`<font color="red" size="5">我的第一个html程序</font>`
## 2.html程序遵循一定的规范 ##
第一: html程序以<html>开始, 同时以</html>结束 ###
*比如创建java的方法, public void add() {方法体}
第二: html程序以<html>开始, 同时以</html>结束 ###
`<html>
<head>设置页面信息</head>
<body>显示到页面上的内容</body>
</html>`
第三: html的标签要有开始标签, 同时要有结束标签
第四: html的代码不区分大小写
第五: 有些标签没有结束标签, 需要在标签内结束, 如换行<br/>
## 3.html的操作思想 ##
在网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候就需要使用标签把要操作的数据包装起来(封装),通过修改标签的属性值来实现标签内数据样式的变化.标签相当于一个容器,通过修改容器的属性值,实现容器内数据样式的变化. ###
2.字体标签
## 1.文字标签 <font color="设置文字颜色" size="文字大小">要操作的文字内容</font> ##
1.color:设置文字颜色,三种方式
*1.直接使用英文单词, red,green,blue...
*2.使用十六进制数字表示, #ffffff
*3.使用RGB颜色配置, rgb(255,0,0)
2.size:设置文字大小, 范围1-7, 如果超过7, 按7的大小使用
## 2.标题标签 ##
*<h1></h1><h2></h2>......<h6></h6>, 标题标签可以自动换行, 从h1到h6字体从大变小
## 3.水平线标签 ##
*<hr/>
*属性:color, 设置水平线颜色
size, 设置水平线粗细, 范围1-7
## 4.注释标签 ##
*在java中有3中注释, 单行注释, 多行注释, 文档注释
*html中注释 <!-- 注释的内容 -->
## 5.特殊字符 ##
*实现空格操作
3.列表标签
## 1.想要实现子父级列表:##
传智播客
java学员
人事部
学工部
*首先使用 <dl></dl>: 定义列表范围
*之后在dl标签中, <dt></dt>: 定义下层内容
*在dl标签中, <dd></dd>: 定义下层内容
`<dl>
<dt>传智播客</dt>
<dl>java学员</dl>
<dl>人事部</dl>
<dl>学工部</dl>
</dl>`
## 2.有序列表标签 ##
要实现:
1.java学院
2.人事部
3.学工部
a.java学院
b.人事部
c.学工部
i.java学院
ii.人事部
iii.学工部
*使用<ol></ol>: 定义有序列表的范围
**ol标签属性 type: 排序方式
**type属性的值: 1, a, i
*ol标签中 <li></li>: 封装具体的内容
`<ol type="1">
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ol>`
## 3.无序列表标签 ##
*使用 <ul></ul>: 定义无序列表的范围
**ul标签属性type的值: disc circle square
*ul标签中使用<li></li>: 定义具体内容
`<ul type="disc">
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ul>`
4.图形标签
## 1.在html中显示图片, <img src="图片的路径"/> ##
*属性: src: 图片路径名
weidth: 图片宽度
height: 图片高度
border: 图片边框的粗细
alt: 显示图片上的内容
**鼠标移到图片上会显示内容, 有些浏览器不显示
5.超链接标签
## 1.什么是超链接: 点击链接打开新的网页. <a href="链接到的地址">显示到页面上的内容</a> ##
## 2.属性: href: 链接到的地址
target: 超链接打开方式, "_self",在当前页打开; "_blank",在新标签页打开
6.表格标签
操作技巧:首先数表格有多少行,数每行有多少单元格
## 1.表格对数据进行格式化,使数据显示更清晰,结构分明,<table></table> ##
*属性:border,设置表格线
bordercolor,设置表格线颜色
cellspacing,设置单元格之间距离
cellpadding,设置文字和单元格之间距离
width:设置表格宽度
height:设置表格高度
*table标签中表示行: <tr></tr>
**属性:align,设置对齐方式,值left,center,right
*tr标签中表示列: <td></td>
**属性:align,设置某单元格对齐方式
*tr标签中也可以表示单元格: <th></th>, 实现居中和加粗效果
## 2.合并单元格 ##
*在td标签进行操作,rowspan: 跨行合并, colspan: 跨列合并
## 3.标题标签 ##
*<caption>标题内容</caption>
7.表单标签
## 1.什么是表单? 把输入的数据提交到服务器上(存到服务器),这个过程称为表单, <form></form> ##
*属性: action,提交的服务器地址
method,表单提交方式(常见两种get(默认get)和post)
get会在地址栏显示数据,安全性很差, post不会显示数据,数据在请求体中,安全性比较高
## 2.输入项:可以输入内容或选择内容的地方 ##
*要求1:输入项里必须有name属性
*要求2:在单选输入项和复选输入项以及下拉输入项里需要有value属性
*输入项需要写到form标签里
*大部分输入项通过标签input进行封装操作, <input type="输入项类型"/>
*普通输入项:<input type="text"/>
*密码输入项:<input type="password"/>
*单选输入项:<input type="radio"/>
**单选输入项必须有name属性,同时name属性必须要相同
**设置默认选中,使用checked="checked"
*多选输入项:<input type="checkbox"/>
**多选输入项必须有name和value属性
**设置默认选中,使用checked="checked"
*文件输入项:<input type="file"/>
*隐藏项:<input type="button"/>,隐藏项不会显示在网页上,但是也会提交到服务器上
*普通按钮:<input type="button"/>
*下拉选择输入项(不用input标签封装)
`<select>
<option>AAAA</option>
<option>BBBB</option>
</select>`
设置默认选中, selected="selected"
*文本域(不用input标签封装)
`<textarea cols="10" rows="5"></textarea>`
*提交按钮和其他按钮
<input type="submit"/>
<input type="reset"/>
*使用图片提交<input type="image" src="图片路径">
其它标签
*pre 原样输出
*p 段落标签
*s 删除线
*u 下划线
*b 加粗
*i 斜体
*div 自动换行
*span 在一行进行显示
提示:
*如果单元格没内容,用占位符
*如果超链接没效果,把href属性值写成"#"
CSS
1.css简介
## 什么是css? 层叠样式表 ##
*样式表: 有很多的属性和属性值, 用来设置网页内容样式
*层叠: 一层一层的, 样式的优先级
*使用css的目的: 把网页的内容和样式进行分离, 利于代码的维护
*css要和html结合使用
2.css和html的结合方式
*第一种,使用html中标签的属性 style="css的代码"
`<div style="background-color:red; color:blue;">`
*第二种,使用html的style标签和标签的type属性"text/css"
`<style type="text/css">
div {
background-color:red;
color:blue;
}
</style>`
*第三种,使用html标签 link, 写在head中,把css文件链接到html中
*首先创建css文件, 写入css代码
*在html中用link标签引入css文件
`<link rel="stylesheet" type="text/css" href="css文件路径名">` (`最常用方法`)
*第四种,使用html的style标签,把css文件链接到html
*首先创建css文件, 写入css代码
*html中写style标签, 标签中 @import url(css路径)
3.css选择器
## 1.css优先级 ##
*一般情况, 后加载的优先级较高
## 2.选择器: 作用在哪个标签上(要对哪个标签内容进行操作) ##
*第一种,标签选择器:使用标签名作为选择器
`div {
background-color:black;
}`
*第二种,class选择器
**html中每个标签都有class属性,通过设置class属性值设置选择器
`.class {
background-color:black;
}`
*第三种, id选择器
**每个html标签都有id属性,通过设置id属性值设置选择器
`#id {
background-color:black;
}`
*优先级:
style标签 > id选择器 > class选择器 > 标签选择器
## css的扩展选择器 ##
*关联选择器
**设置嵌套标签
`div p { <!--p是嵌套在div中的标签-->
background-color:black;
}`
*组合选择器
**设置不同的标签具有相同样式
`div,p { <!--div和p是不同的标签-->
background-color:black;
}`
*伪元素选择器
**例如超链接
** 状态 原始状态 a:link
鼠标放上状态 a:hover
点击状态 a:active
点击之后状态 a:visited
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
