HTMLCSS简单代码⽰例
<!DOCTYPE html><!-- 约束声明 -->
<html lang="en"><!-- html标签表⽰html的开始 -->
<head><!-- 表⽰头部信息，⼀般包含三部分内容，title标签，css样式，js代码 -->
<meta charset="UTF-8"><!-- 表⽰当前页⾯使⽤UTF-8字符集 -->
<title>Hello JAVAWEB!</title><!-- 表⽰标题 -->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body><!-- body标签是整个HTML标签显⽰的主题内容 -->
<h1>JAVA WEB学习指南</h1>
<h2 align="left">Part 1 超链接</h2>
超链接：<a href="www.csdn/" target="_blank">CSDN</a>
<button οnclick="alert('点击此超链接可跳转⾄CSDN主页')">点击查看事件</button>
<br>
超链接：<a href="www.baidu" target="_blank">百度</a>
<button οnclick="alert('点击此超链接可跳转⾄百度主页')">点击查看事件</button>
<br>
超链接：<a href="www.bilibili/" target="_blank">哔哩哔哩</a>
<button οnclick="alert('点击此超链接可跳转⾄bilibili主页')">点击查看事件</button>
<br>
超链接：<a href="uku/" target="_blank">优酷</a>
<button οnclick="alert('点击此超链接可跳转⾄优酷⾸页')">点击查看事件</button>
<br/>
<br/>
<h2 align="left">Part 2 列表</h2>
<ul><!-- unorder list -->
<li>伟培</li><!-- list item -->
<li>乐培</li>
<li>培</li>
<li>培哥</li>
<li>乐乐乐乐培</li>
</ul>
<ol><!-- order list -->
<li>伟培</li><!-- list item -->
<li>乐培</li>
<li>培</li>
<li>培哥</li>
<li>乐乐乐乐培</li>
</ol>
<h2 align="left">Part 3 image标签</h2>
<img src="./image/Lebron.jpg" width="400" height="260" border="1" alt="路径出错"><!--img标签是图⽚标签，⽤来显⽰图⽚ src属性可以设置图⽚的路径
在web中路径分为相对路径和绝对路径两种
相对路径：
. 表⽰当前⽂件所在的⽬录
.. 表⽰当前⽂件所在的上⼀级⽬录
⽂件名表⽰当前⽂件所在⽬录的⽂件
绝对路径：
格式是：http：//ip:port/⼯程名/资源路径
-->
<button οnclick="alert('Lebron James')">点击查看最强球星</button>
<h2 align="left">Part 4 表格标签</h2>
<!-- table 标签是表格标签
border 设置表格边框
width 设置表格宽度
height 设置表格⾼度
aligh 设置表格相对于页⾯的对齐⽅式
tr 是⾏标签
th 是表头标签
td 是单元格标签
align 设置单元格⽂本对齐⽅式
b标签是加粗标签
-->
-->
<table align="left" border="1" width="300" height="300" cellspacing="0">
<tr>
<td align="center"><b>1.1</b></td>
<th>1.2</th><!--效果与上相同-->
<th>1.3</th>
</tr>
<tr>
<th>2.1</th>
<th>2.2</th>
<th>2.3</th>
</tr>
<tr>
<th>3.1</th>
<th>3.2</th>
<th>3.3</th>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 align="left">Part 5 表单的显⽰</h2>
<!-- form标签是表单标签
action属性设置提交的服务器地址
method属性设置提交的⽅式GET（默认值）或POST
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性值
2、单选、复选（下拉列表中的option标签）都需要添加value标签，以便发送给服务器
3、表单项不在提交的form标签中
GET请求的特点是：
1、浏览器地址栏中的地址是：action属性[+？+请求参数]
请求参数的格式是：name=value&name=value&...... URL?name=value&name=value &连字符
2、不安全
3、它有数据长度的限制，长度过多请⽤post
POST请求的特点是：
1、浏览器地址栏中只有action属性值
2、相对于GET请求要安全
3、理论上没有数据长度的限制
-->
<form action="www.baidu" method="get">
<h3 align="center">⽤户注册</h3>
<table align="center"><!--⽤⼀个表格装会使表单更齐整好看-->
<tr>
<td>⽤户名称：</td>
<td>
<input type="text" value="000" name="username">
</td>
</tr>
<tr>
<td>⽤户密码：</td>
<td><input type="password" maxlength="16" name="password"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" maxlength="16" name="password_again"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" checked="checked" value="boy">男<input type="radio" name="sex" value="girl">⼥</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox" name="interest" value="js">JavaScript<input type="checkbox" name="interest" value="java">Java<input type="check box" name="interest" value="cpp">C++</td>
</tr>
</tr>
<tr>
<td>国籍：</td>
<td>
<select name="country">
<option value="none">--请选择国籍--</option>
<option selected="selected" value="CN">中国</option><!--selected属性默认选择-->
<option value="US">美国</option>
<option>阿根廷</option>
<option>澳⼤利亚</option>
<option>⽇本</option>
</select>
</td>
</tr>
<tr>
<td>⾃我评价：</td>
<td>
<textarea rows="10" cols="20" name="desc">爱你哦
</textarea>
</td>
</tr>
<tr>
<td><input type="reset" value="reset"></td> <!-- 功能按钮 -->
<td align="center"><input type="submit" value="submit"></td>
</tr>
<tr>
<td><input type="button" value="abc"></td>
<td><input type="file"></td>
</tr>
<tr>
<td><input type="hidden"></td>
<td></td>
</tr>
</table>
</form>
<hr>
<form action="localhost:8080" method="get">
⽤户名称：<input type="text" value="000"><br><!--value设置显⽰内容（默认值）-->
⽤户密码：<input type="password" maxlength="16"><br><!--maxlength限制长度为多少 size是⽂本框的长度-->
确认密码：<input type="password" maxlength="16"><br>
性别： <input type="radio" name="sex" checked="checked"><!--radio是单选框-->男<input type="radio" name="sex">⼥<!--name属性可以对其进⾏分组，让只能选中⼀个--><br>
兴趣爱好：<input type="checkbox" >JavaScript<input type="checkbox" >Java<input type="checkbox" >C++ <br><!--checked属性可以让它默认选中-->国籍：<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option><!--selected属性默认选择-->
<option>美国</option>
<option>阿根廷</option>
<option>澳⼤利亚</option>
<option>⽇本</option>
</select><br>
⾃我评价：<textarea rows="10" cols="20">爱你哦
</textarea><br><!--textarea 表⽰多⾏⽂本输⼊框 rows 属性设置可以显⽰⼏⾏的⾼度 cols 属性设置每⾏可以显⽰⼏个字符宽度-->
<input type="reset" value="reset"><!--重置按钮 value属性修改按钮上的⽂本-->
<input type="submit" value="submit"><!--提交按钮-->
<input type="button" value="abc"><!--按钮-->
<input type="file"> <!--是⽂件上传域-->
<input type="hidden"><!--隐藏域当我们要发送某些信息，⽽这些信息，不需要⽤户参与，就可以使⽤隐藏域（提交的时候同时发送给服务器）-->
</form>
<h2>Part 6 其他标签</h2>
<!--
div标签默认独占⼀⾏
span标签它的长度是封装数据的长度
p段落标签默认会在段落的上⽅或下⽅各空出⼀⾏来（如果已有就不再空）
-->
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<span>span标签</span>
<span>span标签</span>
<p>p段落标签1</p>好看的css代码
<p>p段落标签2</p>
<br>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
<div class="class01">div标签3</div>
<div class="class02">div标签4</div>
</body>
</html>
.css⽂件
div{/*标签选择器*/
border: 1px solid wheat;
color: darkgoldenrod;
font-size: 30px;
}
span{
border: 3px dashed green;
color: yellow;
font-size: 20px;
}
#id001{/*ID选择器（优先级最⾼）*/
border: none;
color: #0099ff;
font-size: 30px;
}
#id002{
border: none;
color: skyblue;
font-size: 30px;
}
.class01{/*类选择器*/
border: none;
color: darkgoldenrod;
font-size: 40px;
}
.class02{
border: none;
color: aquamarine;
font-size: 40px;
}
/*组合选择器
格式是：
选择器1，选择器2，选择器n{
属性：值
}
组合选择器可以让多个选择器共⽤同⼀个css样式代码*/
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论