java基础--html

最新推荐文章于 2023-04-10 18:24:14 发布

song_lf

最新推荐文章于 2023-04-10 18:24:14 发布

阅读量871

点赞数

分类专栏：培训日志 html

本文链接：https://blog.csdn.net/song_lf/article/details/51614148

版权

培训日志同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

web应用程序

web的客户端技术－－－web基础---只需要浏览器即可运行

创建页面－－－内容显示－－html----1

美化页面－－－设置样式外观---css---2--完全可以些页面常见的css样式制作页面---在页面的基础上添加服务器端代码

动态效果－－－单击等－－javascript--3

web的服务器端技术

与服务器交互－－进行数据的交互

php－－2～3周－－应用的程度

页面效果图－－－html页面和css样式

web的服务器端技术

与服务器交互－－进行数据的交互－－－servlet+JSP--调用jdbc,实现对数据库的操作

PHP核心－－php

aspx--.net

1. html 概述

超文本标记语言

用来设计网页的标记语言

后缀是.html或者.htm

浏览器解释执行

是一个扩展性很强的语言，可以嵌套用脚本语言编写的程序段

什么是html:是一种标记语言，用于编写.html/.htm网页文件，由浏览器解释运行

作用：创建静态网页，结合css和javascript实现页面的创建

2. html基础语法

标记：<>括起来的单词，成对出现，也有可能单个，组合在一起

封闭型标记<标记>内容<标记>

非封闭类型标记:只有一个标记，建议使用/结束，

例如：普通文本<br>普通文本<br/>普通文本

元素： <br><h1>

属性:描述元素，为其进行额外的设置

版本信息－－－指定html版本

<html>

<head>关于整个文档的定义，比如编码、标题等</head>

<body> 显示页面的内容 </body>

</html>

head:title meta(头元素) script style link

title:没有属性，一个文档只能有一个title

meta:属性：content/http-equiv

<title>我的第一个HTML页面</title>

<metahttp-equiv="content-type"content="text/html;charset=uft-8"/>

meta:自动刷新（实时性）例如留言论坛

===============================================================

<head>

<metahttp-equiv="content-type"content="text/html;charset=uft-8"/>

</head>

=============================================================

3. 文本

直接写在文件中的文本，由浏览器默认显示－－空格折叠：多个空格会合并成一个空格

特殊字符：转义字符

空格：＆nbsp; <：< >：＆gt;

标题元素：h1--h6

段落元素：大段文本自称段落－－<p></p>--段落间距，常用属性：align

普通换行：<br/>

分区元素：可以使用分区元素包含一些元素，进行统一设置

div--独占一行

span--同一行，不会影响布局－－同一行中的某些内容

块级（block）元素和行内元素

块级：页面上会独占一行的元素，上下文的其他元素会自动换行p/h1/div/table/ul/ol/li/...

行内:不会影响同一行其他元素span/a/img/....

4. 图像

路径：

相对路径：相对于当前html文档而言<img src="images/a.jpg"/>

绝对路径：<imgsrc="http://tts.tarena.com.cn/a.jpg"/>

常用属性：width/height

5 链接

<ahref="second.html">被点击的<h4>方法重载</h4>

<input type="button"value="匿名排序" οnclick="nimingpaixu();"/><br/><br/>文本或者其他元素</a>

<ahref="http://tts.tarena.com.cn">被点击的文本或者其他元素</a>

例如：点击图片转到http://tts6.tarena.com.cn

<div>

<imgsrc="a.png" width=""height="100"/></a>

</div>

target属性设置在哪里打开：

_self--默认值,替换

_blank--新打开

6 锚点

A页去往B页：不同页面的跳转

A页某个位置去往A页的另外一个位置：同一个页面上不同部分之间的跳转

第一步：在目标位置定义一个锚点

<aname="top"></a>

第二步：链接到锚点

<ahref="#top">return to top</a>

<marquee>从右向左划出

7 列表：将一些有关系的数据排列显示

有序列表：ol

无序列表：ul

列表项：li

常见的应用：实现分层的导航菜单－－－－列表的嵌套

例如：

<ol>

<li>案例1

<ul>

</ul>

</li>

<li>案例2

<ul>

</ul>

</ol>

8 表格常用于数据库的显示，也可以用于页面的布局

a 表格的基础结构<table> <tr><td>

b 常用属性 borderwidth/height align valign cellpadding单元格边框与内容之间的间距 cellspacing单元格之间的间距

c 行分组<thead><tbody><tfoot>

d 不规则表格：设置单元格的夸行或者夸列实现多个单元格合并

valign="top"

rowspan

colspan

<caption>表格标题

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

<body>

<aname="top"></a>

<h1align="center">Java 语言基础

<spanstyle="color:red;"><Day03></span>

</h1>

<ol>

<li>案例1

</ul>

</li>

<li>案例2

</ol>

<h2>1&nbsp个人所得税计算器</h2>

<aname="qudao"></a>

<p>    计算老三届的了三等奖分散力的萨的萨的的所的速度发计算老三计算老三届的了三等奖分散力的萨的萨的的所的速度发计老三届的了三等奖分散力的萨的萨的的所的速度发届的了三等奖分散力的萨的萨的的所的速度发,如图-1所示</p>

<imgsrc="triplegears.jpg"width=""height="375"/>

</a>

<ahref="http://tcsd6.it211.com.cn"target="_blank">

<imgsrc="default_blue.jpg"width=""height="375"/>

</a>

<aname="1.2"></a>

<p>    三届的了三等奖分散力的萨的萨的的所的速度发计算老三计算老三届的了三等奖分散力的萨的萨</p>

<aname="1.3"></a>

<h3>1.3&nbsp实现</h3>

<p>public void alkdf()

<br>{

<div>

<imgalign="right" src="a.jpg"width=""height="300"/>

</marquee>

</a>

</div>

<br/>

<br/>}

<br>

</p>

<ol>

</ol>

<ul>

</ul>

<tableborder="1"width="200"height="100">

<theadalign="center"style="color:green;">

<tr>

</tr>

</thead>

<tbodyalign="center">

<tr>

<tdalign="center" height="40"width="100">张三</td><tdwidth="80">20</td>

</tr>

<tr>

</tr>

<tr>

<tdalign="center" height="40"width="100">王五</td><tdwidth="80">22</td>

</tr>

</tbody>

</table>

</marquee>

--------------------------------------------------------------------------------

表格的嵌套

<tableborder="1"width="500"height="300"align="center">

<table><tr><tdwidth="80"height="">fd</td><td>sdfsdf</td></tr></table>

</td>

</tr>

</table>

7 表单

表单：承载交互的元素，实现和服务器的数据的交互<formaction="login.jsp"method="post">

多个文本框等信息，当前form中点击提交按钮

</form>

数据

表单中包含什么：表单上的交互元素

文本框<input type="text"/>

密码框<input type="password"/>常用属性： vlue/readonly/maxlength

按钮<input type="button"/>

单选<input type="radio"/>

多选(复选框/核选框)<input type="checkbox"/>常用属性： vlue/cheked

文件域：<input type="file"/>选择系统中的某个文件

隐藏域：<input type="hidden"/>

提交按钮：<input type="submit"/>

重置按钮：<input type="reset"/>

普通按钮：<input type="button"/>

其他元素

选择框 <select></select>

多行文本输入框<textarea></textarea>

控件分组<fieldset></fieldset>

给分组的控件指定标题<legend>标题名</legend>

</fieldset>

标签元素<label for="某个元素的id值">文本</label>--单击文本时就像那个元素一样

8 浮动框架

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

<head><h1border="1"align="center"style="color:red;">增加管理员</h1></head>

<bodybgcolor="pink"style="color:magenta;">

<formaction=""method="">

姓名：<input type="text"/><br>

密码：<input type="password"/><br>

性别：<input type="radio"name="sex"/>女士<inputtype="radio"name="sex"/>男士<br>

角色：<inputtype="checkbox"name="role"/>超级管理员

<inputtype="checkbox"name="role"/>普通管理员

</form>

头像：<inputtype="file"/><br></br>

状态：<select>

<option>ldfds</option><option>ldfds</option><option>ldfds</option>

</select><br></br>

描述：<textarea></textarea>

</fieldset>

</marquee>

<iframesrc="day522.html"width="700"height=""></iframe>

</body>

％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％

//重叠

<divstyle="width:500px;height:400px;background-color:red;border:1px solidblack;"></div>

<divstyle="position:relative;top:-20px;left:60px;background-color:blue;width:500px;height:400px;z-index:-1;"></div>

<divstyle="width:20px;height:20px;border:1px solidblack;line-height:200px">div test tsldfdiv</div>

<divstyle="width:700px;height:400px;border:1px solidblack;background-image:url(index_out.png);

background-repeat:no－repeat;"></div>

//div 于span的比较span添加display:block之后和前后的文本分开

<divstyle="width:100px;height:40px;background-color:red;">divtext</div>

bac<spanstyle="display:block;width:100px;height:40px;background-color:red;">spantext</span>aaa

％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％

song_lf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java基础--html

web应用程序 web的客户端技术－－－web基础---只需要浏览器即可运行创建页面－－－内容显示－－html----1 美化页面－－－设置样式外观---css---2--完全可以些页面常见的css样式制作页面---在页面的基础上添加服务器端代码动态效果－
复制链接

扫一扫