浅谈 Html && Css && JavaScript(1)

来源：互联网发布：剑三花爹数据编辑：程序博客网时间：2024/06/14 04:21

一、Html

html简介
a: 什么是？
HyperText Mark-up Language ，超文本标记型语言，是网页的语言。
b:遵循的规范
第一个：html程序以<html>开始，同时</html>结束
* 比如创建java里面方法，public void add() { 方法体 }
第二个：html程序包含两部分内容：head和body
第三个：html的标签有开始标签，同时也要结束标签
第四个：html的代码不区分大小写的
第五个：有些标签没有结束标签，需要在标签内结束 <br/>
* 实现换行的操作，使用标签实现的<br>, 没有</br>
c:html的操作思想
在网页中可能有很多的数据，不同的数据可能需要不同的显示效果这个时候需要使用标签把要操作的数据包起来（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。
d: 标签
A:字体标签
（1）文字标签
<font color=”设置文字颜色” size=”文字的大小”>要操作的文字的内容</font>
常用两个属性
color：设置文字的颜色
有三种表示方式
第一种：直接使用英文单词进行表示 red green yellow……
第二种：使用十六进制数字进行表示 #ffffff，
第三种：使用RGB颜色值配置 rgb(255,0,0
size：设置文字的大小
文字大小值范围：1-7，如果值超过了7，使用还是7的效果
（2）标题标签
<h1></h1> <h2></h2>.......<h6></h6>
标题标签可以自动换行，从h1到h6字体的大小依次变小的
（3）水平线标签
<hr/>
属性
color：表示设置水平线颜色
size：设置水平线的粗细，范围1-7
（4）注释标签
在java里面有几类注释？三类注释
单行注释，多行注释，文档注释
在html中注释 
使内容不在html页面中进行显示
（5）特殊字符  
实现空格的操作
B:列表标签
（1）缩进效果

<dl>     <dt>数信学院</dt>     <dd>计算机专业</dd>     <dd>信息工程</dd>     <dd>数本</dd></dl>

（2）有序列表标签
使用 <ol></ol>: 定义有序列表的范围
ol标签上面有属性 type：排序的方式
type属性里面的值 1 a i
之后在ol标签里面：<li></li>: 封装具体的内容

<ol> <li>数信学院</li> <li>计算机</li> <li>数本</li></ol>

（3）无序列表标
（特殊符号）数信学院
（特殊符号）计算机
（特殊符号）数本
首先使用标签 <ul></ul>: 定义无序列表的范围
ul标签上面有属性 type：设置特殊符号
type属性里面的值 disc circle square
之后在ul标签里面： <li></li>: 封装具体的内容
代码

<ul>    <li>数信学院</li>     <li>计算机</li>     <li>数本</li>    </ul>

C:图形标签

（1）在html中显示图片
（2）标签：<img src="图片的路径名称"/>
（3）属性：
src：图片的路径名称
width：图片宽度
height：图片的高度
border：图片的边框的粗细
alt: 显示在图片上面的内容
鼠标移动到图片上面，稍等片刻出现文字
如果图片找不到，显示alt的内容
这个属性在某些浏览器不能显示的
D:超链接标签
（1）什么是超链接：点击打开新的内容
（2）标签：<a href="链接到的地址">显示在页面上的内容</a>
代码 <a href="hello.html">显示在页面上的内容</a>
（3）属性
- href：链接到地址
- target：超链接的打开方式
  ** 在默认的情况下，打开方式在当前的页面打开
  ** target里面的值：_self,当前页面打开； _blank，在新标签页打开
  E:表格标签
（1）什么是表格：对数据进行格式化，使数据显示更加清晰，结构分明
（2）标签
首先定义表格的范围：<table></table>
属性
border：设置表格线
bordercolor：设置表格线的颜色
cellspacing: 设置单元格之间的距离
cellpadding: 设置文字和单元格之间的距离
width: 设置表格的宽度
height：设置表格的高度
在table标签里面表示行： <tr></tr>
属性
align：设置对齐方式，值 left center right
在tr标签里面表示列： <td></td>
属性
align：设置某个单元格对齐方式
在tr标签里面也可以表示单元格：<th></th>
实现居中和加粗的效果
（3）合并单元格
是在td标签上面进行的操作，使用两个属性
rowspan：跨行
代码 <th rowspan="4">人员信息3人</th>
colspan：跨列
代码 <td colspan="3">统计信息3人</td>
（4）标题标签：<caption>标题内容</caption>

F:表单标签
<form action="hello.html" method="get/post"><input type="输入项的类型"/></form>
get提交方式会在地址栏携带数据，安全性很差
post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面
第一个：普通输入项 <input type="text"/>
第二个：密码输入项 <input type="password"/>
第三个：单选输入项 <input type="radio"/>
** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
** 设置默认选中，使用属性 checked=”checked”
第四个：复选输入项 <input type="checkbox"/>
** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
** 设置默认选中，使用属性 checked=”checked”
第五个：文件输入项，上传文件的。<input type="file"/>
第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上

<input type="hidden"/>

第七个：普通按钮 <input type="button"/>
G:其他的标签的使用
（1）pre：原样输出
p：段落标签
s：删除线
u: 下划线
b：加粗
i：斜体
（2）div : 自动换行
span：在一行进行显示

二、CSS

css的简介
（1）什么是css？层叠样式表
样式表：有很多的属性和属性值，来设置内容样式
层叠：一层一层的，样式的优先级。
优先级: 最终以谁的样式为准
使用css目的是：把网页的内容和样式进行分离，利用代码的维护。
想要使用css，不能单独使用，要和html结合使用
css和html的如何结合使用。
css和html的结合方式
（1）css和html有四种结合方式
第一种：使用html标签里面的属性 style=”css的代码”
代码 <div style="background-color:red;color:blue;">
第二种：使用html的标签

<style type="text/css">        css的代码;    </style>

代码

<style type="text/css">        div {            background-color:red;            color:black;        }      </style>

第三种：使用html标签实现 link，写在head里面
首先创建css文件，在css文件里面写css代码
在html中使用link标签引入css文件
代码
<link rel="stylesheet" type="text/css" href="1.css"/>
第四种：使用html的style标签，在标签里面使用语句样式操作
首先创建css文件，在css文件里面写css代码
写style标签，在标签里面 @import url(css路径);

css的选择器
（1）css优先级
在一般情况下，优先级是后加载的优先级高
（2）格式规范：属性名称1:属性值1;属性名称2:属性值2;
（3）选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）
css有三个基本选择
第一个：标签选择器
使用标签名称作为选择器
div {
background-color: red;
}
第二个：class选择器
每个html标签上面都有一个属性class，通过设置class属性的值
代码
.haha {
background-color:red;
}
第三个：id选择器
每个html标签都有一个属性id，通过设置id的属性值
代码
#hehe {
background-color:green;
}
（4）选择器的优先级
style > id选择器 > class选择器 > 标签选择器
1. css的扩展选择器
（1）关联选择器
设置嵌套标签的样式
代码
div p {
background-color:red;
}
（2）组合选择器
设置不同的标签具有相同的样式
代码
div,p {
background-color:green;
}
（3）伪元素选择器
比如超链接为例，
状态：原始状态:link 、鼠标放上去的状态:hover 、点击状态:active、点击之后的状态:visited

0 0