html和css(杜)
html和css(杜)
F12 可显示网页资源
html：超文本标记语言，有大量的标签组成，每一个标签都有开始标签和结束标签，创建的文件扩展名是.html和.htm
html的整体结构，如下所示
<!--
这是HTML的注释
加上以下代码的第一行，就表示HTML5语法，去掉就表示HTML4
HTML不区分大小写
-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--告诉浏览器用什么编码方式打开，而不是说用什么编码写的-->
<meta charset="utf8">
<!--网页的标题，显示在网页左上角-->
<tittle>网页的标题</tittle>
</head>
<!--体-->
<body>
网页的主题内容，欢迎学习HTML
</body>
</html>
基本标签
<!doctory html>
<html>
<head>
<title>html基本标签</title>
</head>
<body>
<!--虽然说，这里分一行一行，但是在浏览器上还是不分的，-->
<!--p表示段落标签 ，其中该段落的最后一行和下一行会有一个空隙-->
<p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、
指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语
言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。</p>
Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等
特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等
<!--h表示标题字标签，h1 到 h6-->
<h1>标题字标签</h1>
<h2>标题字标签</h2>
<h3>标题字标签</h3>
<h4>标题字标签</h4>
<h5>标题字标签</h5>
<h6>标题字标签</h6>
hello world
<!-- br 换行标签和下一行没有间隙 ，这种只有一个的称为独目标签，也不用加/-->
hello <br>world
<!-- hr 水平线标签 ，也是独目标签，也不用加/-->
<hr>
<!-- color 和 width 都是 hr 的属性-->
<hr color="red" width="50%">
<!-- pre 预留格式标签，写的什么样子，显示出来就什么样子-->
<pre>
for(int i = 0;i<5;i++){
System.out.println("i = " + i);
}
</pre>
<!-- del 删除字标签-->
<del>删除字</del>
<!-- ins 插入字标签-->
<ins>插入字</ins>
<!-- b 粗体字标签-->
<b>粗体字</b>
<!-- i 斜体字标签-->
<i>斜体字</i>
<!-- sup 右上角标签，在右上角显示-->
10<sup>2</sup>
<!-- sub 右下角标签，在右下角显示-->
10<sub>m</sub>
<!-- font 字体标签-->
<font color="red" size="50">字体标签</font>
</body>
</html>
实体符号
<!doctory html>
<html>
<head>
<title>html实体符号</title>
</head>
<body>
<!--实体符号特点是：以 & 开始，以 ; 结束，-->
<!--< 表示小于号 > 表示大于号 表示空格-->
<!--实体符号，相当与转义符号，是为了解决冲突的，比如：就是想在网页上显示出 >
大于号，但是和html冲突，就是用实体符号，让他显示出原本的样子-->
b<a>c<br>
b c
</body>
</html>
表格
<!doctory html>
<html>
<head>
<title>表格</title>
</head>
<body>
<!--table 表格标签，-->
<!--border="1px"，设置表格的边框为1像素宽度-->
<!--width="60%"，设置表格的整体宽度 为 60% ，随界面的大小变化而变化，更加推荐-->
<!--width="300px"，设置表格的整体宽度 为300像素宽度，大小不会变化-->
<!--heigth="60%"，设置表格的整体长度 为 60% ，随界面的大小变化而变化，H5中无效-->
<!--heigth="150px"，设置表格的整体长度 为150像素宽度，大小不会变化-->
<!--align 对其方式-->
<!--thead tbody tfoot 在表格中不是必须的，只是这样做便于后期js代码的编写-->
<table border="1px" width="60%" height="90%">
<thead>
<tr>
<!-- th 标签也是单元格标签，比td多的是居中，加粗，一般表格首行使用-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门编号</th>
</tr>
</thead>
<tbody>
<!--tr 表格中的 行 标签，-->
<tr>
<!--td 表格中的 列 标签，-->
<!--align 设置单元格内容居中-->
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<!--rowspan 表示行合并，行合并都是让后面行不写-->
<!--colspan 表示列合并，-->
<td colspan=2>4</td>
<!--
<td >5</td>
-->
<td rowspan=2>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<!--
<td>8</td>
-->
</tr>
</tbody>
<tfoot>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tfoot>
</table>
</body>
</html>
背景图片和背景颜色
<!doctory html>
<html>
<head>
<title>背景图片和背景颜色</title>
</head>
<!--
bgcolor:设置背景颜色
background:设置背景图片
以上的设置都是对背景进行设置
一旦设置背景图片，背景颜色就在背景图片的下面
-->
<body bgcolor="red" background="D:\知识点截图\项目图片\好看的头像.png">
</body>
</html>
图片
<!doctory html>
<html>
<head>
<title>图片</title>
</head>
<body >
<!--img 图片标签，src 图片的路径 width 图片的宽度，-->
<!--title 设置鼠标悬停时，显示的信息-->
<!--alt 设置图片显示错误时，显示的信息-->
<!--不用设置图片的高度，高度会随宽度的变化而变化，等比例缩放-->
<!--img 可以在后面加上 </img> 也可以不加上-->
<!--border 设置图片的边框-->
<img src="D:\知识点截图\项目图片\好看的头像.png" width="100px title="头像" alt="没找到图片" border="1px">
<img src="D:\知识点截图\项目图片\好看的头像.png" width="100px title="头像" alt="没找到图片" border="1px" />
<!--如果在<></>的中间没有内容的话，可以省略 后面的</> 在前面的<>里面加上/变成</>-->
<img src="D:\知识点截图\项目图片\好看的头像.png" width="100px title="头像" alt="没找到图片" border="1px"></img>
</body>
</html>
超链接
<!doctory html>
<html>
<head>
<title>超链接</title>
</head>
<body>
<!--
特点：
有下划线
鼠标停留在上面显示小手
点击之后还能跳转界面
-->
<!-- a超链接标签 href 资源地址 -->
<!-- href 后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源路径 -->
<!-- target 表示跳转界面是出现在哪里 -->
<!-- _self 表示新界面(默认)，_blank表示本界面 _top 顶级窗口 _parent 父窗口 -->
<!--后面两个窗口是有窗口嵌套时，使用-->
<!--文字超链接-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--图片超链接-->
<a href="http://www.baidu.com" target="_self">
<img src="D:\知识点截图\项目图片\好看的头像.png" width="100px"/>
</a>
</body>
</html>
列表
<!doctory html>
<html>
<head>
<title>列表</title>
</head>
<body>
<!--ol 有序列表 type 可以指定前面的样式 li 显示列表中的值-->
<ol type="1">
<li>中国
<!--可以一直嵌套-->
<ol type="a">
<li>天津
<ol type="A">
<li>haha</li>
<li>heihei</li>
</ol>
</li>
<li>北京</li>
<li>上海</li>
</ol>
</li>
<li>美国</li>
<li>韩国</li>
<li>日本</li>
</ol>
<hr>
<!--ul 无序列表 type 可以指定前面的样式 li 显示列表中的值-->
<ul type="circle">
<li>中国
<!--可以一直嵌套-->
<ul type="square">
<li>天津
<ul type="disc">
<li>haha</li>
<li>heihei</li>
</ul>
</li>
<li>北京</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>韩国</li>
<li>日本</li>
</ul>
</body>
</html>
表单
用于收集用户的信息
<!doctory html>
<html>
<head>
<title>表单</title>
</head>
<body>
<!--
表单有什么用：收集用户信息，提交给服务器，保存在数据库
form标签画表单
一个网页当中可以有多个表单form
-->
<!-- form 表单标签 action 属性，表示提交的服务器地址
action属性和超链接中的href属性一样，都可以向服务器发送请求（request）
表单发送请求的同时可以携带数据
192.168.111.3:8080/oa/save 192.168.111.3机器上的8080端口对应的软件
method如果是set则显示提交的数据在网址(默认方式)
method如果是post则不显示提交的数据在网址
-->
<form action="192.168.111.3:8080/oa/save" method="post">
<!--画按钮，可以使用input输入域-->
<!--对于按钮来说，value属性用来指定按钮上显示的文本信息-->
<!--画一个提交按钮，这个按钮可以提交表单-->
<input type="submit" value="注册"/>
<!--这是一个普通的按钮，不具备提交表单的能力-->
<input type="button" value="显示按钮上的文本"/>
</form>
<br>
<!--
表单是以什么按格式提交数给服务器的
格式：action?name=value&name=value...
HTTP协议规定，分割的符号（&）
所以需要提交的数据，一定要写 name 属性
重点强调：表单项写了name属性的，一律会提交给服务器，不想提交这个内容，就不要写name属性
当value没有写的时候，value的默认值是空字符串"",而不是null
文本框不用写value，输入的内容就是value，如果没有输入则默认""
-->
<form action="192.168.111.3:8080/oa/save">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
</td>
</tr>
</table>
</form>
</body>
</html>
表单练习
<!doctory html>
<html>
<head>
<title>表单</title>
</head>
<body>
<form action="http://localhost:8080/jd" method="post">
<!--这里的 maxlength 设置文本框中最多能输入多少个字符数量-->
用户名<input type="text" name="username" maxlength="3"/><br>
密码<input type="password" name="userpwd"/><br>
<!--确认密码，不用name属性，浏览器可以进行判断，后面再学-->
确认密码<input type="password"/><br>
<!-- radio 类型，如果name的值是一样的，表示是同一组只能选一个，单选框-->
<!-- radio 类型，必须手动给定value，其中 checked 属性表示默认选择值-->
性别
<input type="radio" name="sex" value="男" checked/>男
<input type="radio" name="sex" value="女"/>女<br>
兴趣爱好
<!-- checkbox类型，必须手动给定value，其中 checked 属性表示默认选择值 复选框-->
<input type="checkbox" name="hobby" value="篮球" checked/>篮球
<input type="checkbox" name="hobby" value="羽毛球" checked/>羽毛球
<input type="checkbox" name="hobby" value="排球"/>排球<br>
学历
<!-- select类型，必须手动给定value，其中 selected 属性表示默认选择值 下拉框-->
<!-- multiple 属性 表示下拉列表可以多选 ，size 属性规定一次显示的行数-->
<select name="grade" multiple="multiple" size="2">
<option value="gz">高中</option>
<option value="dx" selected>大学</option>
<option value="yjs">研究生</option>
</select><br>
简历<br>
<!-- textarea 大的文本框-->
<textarea rows="10" cols="60" name="introduce"></textarea><br>
<input type="submit" value="注册">
<input type="reset" value="清空"><br>
<!--上传文件-->
文件上传
<input type="file"/><br>
<!--隐藏域，网页上看不到，但是表单提交数据时会自动提交给服务器-->
<input type="hidden" name="id" value="1111"><br>
<!--
readonly和disabled相同点，都是只读不可修改
但是readonly可以提交给服务器，disabled数据不会提交给服务器（即使有name属性）
-->
用户代码<input type="text" name="usercode" value="110" readonly><br>
用户姓名<input type="text" name="username" value="zhangsan" disabled>
</form>
</body>
</html>
超链接也可以提交数据给服务器，但是提交的数据都是固定不变的，超链接是get请求，不是post请求
<a href="http://www.baiducom/kjk?usernamme=haha&password=hkljkl>
Html中元素的id属性
在Html文档中，任何元素（节点：就是一个<>）都有id属性，id属性是该节点的唯一标识，所以在同一个Html文档当中id值不能重复
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>HTML中元素的id属性
</title>
</head>
<body id="mybody">
<form id="myform">
<input type="text" id="username" name="username"/>
<input type="password" id="password" name="userpwd"/>
</form>
</body>
</html>
id有什么用？
说明：javascrip语言，可以对HTML文档当中的任意节点进行增删改操作，那么增删改之前需要先拿到这个节点，通常我们通过id来获取节点对象，从而产生动态效果，id属性可以让我们快速的定位每一个节点
HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id
javaScript主要就是对这课树上的节点进行增删改的
DOM（Document：文档）树
HTML中的div和span
div和span是什么？有什么用？
div和span都可以称为“图层”
图层的作用是为了保证页面可以灵活的布局
其实最早的网页是采用table进行布局的，但是table不灵活，太死板，现代的网页开发中div布局使用最多，几乎很少使用table进行布局了
图层就是一个一个的盒子，div嵌套div就是盒子嵌套盒子
div和span是可以定位的，只要顶下div的左上角的x轴和y轴坐标即可
div和span的区别？
- div会独自占用一行（默认情况下）
- span不会独自占用一行
<body>
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<span id="span1">我是一个span</span>
<span id="span1">我是一个span</span>
<div id="div3">
<div>
<div>
test
</div>
</div>
</div>
</body>
补充
&+amp;表示与&
一个标签可以有多个属性，但是要用空格分开
<font:字体标签 size:1-7,7最大，color：颜色 ，face:什么字体>
<tt表示打印字体>
<u表示有下划线>
<s表示有删除线>
顶端和低端的相互跳转
<a name="顶端" href="#底端">回到底端</a>
<a name="底端" href="#顶端">回到顶端</a>
<html>
<title>body属性</title>
<body text="green" link="red" alink="black" vlink="green" bgcolor="pink" >
<!--text是设置文本的颜色-->
<!--link是设置超链接的颜色-->
<!--alink是设置超链接点击时的颜色-->
<!--vlink是设置超链接点击后的颜色-->
<!--bgcolor是设置整个body的颜色-->
<!--background是设置body的背景图片-->
你好啊，傻逼
<a href="#">超链接</a>这种就是超链接，但是点击没有用
</body>
</html>
<html>
<head>
<title>我是承载页面</title>
<frameset rows="15%,*">
<!--rows表示上下分，cols表示左右分-->
<!--一个页面只能上下分或者左右分，想实现多个划分，需要多个页面组合-->
<frame src="top.html" noresize="noresize"/>
<frameset cols="30%,*">
<frame src="left.html" noresize="noresize"/>
<frame src="right.html" name="right"/>
</frameset>
</frameset>
</head>
</html>
<html>
<head>
<title>我是上边的页面</title>
</head>
<body bgcolor="yellow">
我是上边
</body>
</html>
<html>
<head>
<title>这是左边的页面</title>
</head>
<body bgcolor="pink">
<a href="http://www.baidu.com" target="right">百度</a>
<a href="http://www.mop.com" target="right">猫扑</a>
<a href="http://www.dapenti.com" target="right">打喷嚏</a>
<a href="http://www.51aspx.com" target="right">51aspx</a>
</body>
</html>
<html>
<head>
<title>这是右边的页面</title>
</head>
<body bgcolor="red">
我是右边
</body>
</html>
css
什么是css，有什么用？
css(cascading style sheet)：层叠样式表语言
css的作用是：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比HTML的的化妆品一样，HTML还是主体，CSS依赖HTML，CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件
HTML中使用CSS
HTML页面中嵌套使用CSS有三种方式
第一种方式：
在标签内部使用 style 属性来设置元素的css样式，这种方式称为内联定义方式
语法格式
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值...;"></标签>
<!doctory html>
<html>
<head>
<title>css</title>
</head>
<body>
<!--display 布局样式，none表示隐藏，block表示显示-->
<div style="width:300px;height:300px;background-color:#CCFFFF;display:block;">
</div><br>
<!--border 边框样式-->
<div style="width:300px;height:300px;background-color:#CCFFFF;display:block;border:1px solid black">
</div>
</body>
</html>
第二种方式：
在head标签中使用style块，这种方式被称为样式块方式
语法格式
<head>
<style type="text/css">
选择器{
样式名:样式值;
样式名:样式值;
样式名:样式值;
...;
}
选择器{
样式名:样式值;
样式名:样式值;
样式名:样式值;
...;
}
...
</style>
</head>
<!doctory html>
<html>
<head>
<title>css</title>
<style type="text/css">
/*
这是css的注释
*/
/*
id选择器
*/
#userNameErrorMsg{
color:red;
font-size:12px;
}
/*
标签选择器:所有的该标签都会应用
标签选择器作用的范围比id选择器广
语法格式
标签名{
样式名:样式值;
样式名:样式值;
样式名:样式值;
...
}
*/
div{
background-color:black;
border:1px solid red;
width:100px;
height:100px;
}
/*
类选择器:class属性相同的都属于同一类
.类名{
样式名:样式值;
样式名:样式值;
样式名:样式值;
...
}
*/
.myclass{
border:1px solid red;
}
</style>
</head>
<body>
<span id="userNameErrorMsg">sorry，姓名不能为空
</span>
<div></div>
<div></div>
<div></div>
<input type="text" class="myclass"/>
<br><br><br><br>
<select class="myclass">
<option>daxue</option>
<option>yanjiusheng</option>
</select>
</body>
</html>
第三种样式：链入外部样式表文件，这种方式最常用
将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了
语法格式
<head>
<link type="text/css" rel="stylesheet" href="css文件的路径"/>
</head>
这种方式维护成本较低
先创建一个.css文件，编写样式
a{
/*去除超链接的下划线*/
text-decoration:none;
}
#baiduspan{
/*加上下划线*/
text-decoration:underline;
/*鼠标的样式*/
cursor:pointer;
}
ul{
/*改变列表的样式，这里是去除*/
list-style-type:none;
}
#div1{
background-color:red;
border:1px black solid;
width:300px;
height:300px;
position:absolute;/*绝对定位*/
left:100px;/*左上角距离左边的距离*/
top:100px;/*左上角距离上边的距离*/
}
创建html文件
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>第三种方式：引入外部独立的文件</title>
<link type="text/css" rel="stylesheet" href="css/1.css" />
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduspan">点击我链接到百度</span>
<ul>
<li>中国
<ul>
<li><北京/li>
<li>上海</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
<div id="div1"></div>
</body>
</html>
创建html文件
```html
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>第三种方式：引入外部独立的文件</title>
<link type="text/css" rel="stylesheet" href="css/1.css" />
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduspan">点击我链接到百度</span>
<ul>
<li>中国
<ul>
<li><北京/li>
<li>上海</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
<div id="div1"></div>
</body>
</html>
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
