Java web学习日志第一天

最新推荐文章于 2022-10-05 20:55:17 发布

愤怒的阿木木

最新推荐文章于 2022-10-05 20:55:17 发布

阅读量243

点赞数 1

分类专栏： web学习日志文章标签： web

本文链接：https://blog.csdn.net/qq_44364267/article/details/108789713

版权

web学习日志专栏收录该内容

8 篇文章 0 订阅

订阅专栏

学习目标：

掌握HTML入门知识

学习内容：

1.Html
1.1 HTML文件的基本结构

下面HTML文件的基本结构

1.1.1<html>···</html>：表示HTML文件的开头和结束的位置

1.1.2<head>...</head>：文件头部标记

1.1.3<body>...</body>：用来指明文档的主题区域，网页所要现实的内容都要放在这个标记里

1.2编写HTML页面

利用自带的记事本或者可视化的网页制作软件Dreamweaver编写。我用的是集成开发软件（IDE）eclipse编写web程序。

1.3 常用HTML标签

1.3.1标题一共六级

<h1>···</h1>

<h2>···</h2>

<h3>···</h3>

<h4>···</h4>

<h5>···</h5>

<h6>···</h6>

1.3.2段落

<p>段落内容</p>

<p align="对齐方式"></p>：属性align能设置段落的对齐方式，right，left，center；

例：<p align="left">居左文字</P>

<p align="right">居右文字</p>

<p align="center">居中文字</p>

1.3.3滚动

<marquee direction="滚动方向" behavior="滚动方式">内容</marquee>

例：<marquee direction="left" behavior="scroll">fuck you</marquee>
<p align="center">《赠汪伦》<br><font size="2">李白</font><br>
李白乘舟将欲行，<br>
忽闻岸上踏歌声。<br>
桃花潭水深千尺，<br>
疑是银河落九天。<br>
</p>

1.3.4列表

无序列表标记<ul>

项目标记通过type改变，disc，circle，square

<ul>

<li>列表项</li>

···

</ul>

有序列表标记<ol>

项目标记通过type改变，1，a，A，i，I

<ol>

<li>列表项</li>

···

</ol>

例：

<h2>无序列表--车类</h2>
<ul type="circle">
<li>小轿车</li>
<li>小货车</li>
<li>重型卡车</li>
</ul>
<h2>有序列表--计算机网络专业的学生应该具备的能力</h2>
<ol type="a">
<li>办公自动化能力</li>
<li>计算机硬件选购与测试能力</li>
<li>计算机组装与维护能力</li>
<li>网站建设与维护能力</li>
<li>动态网页设计能力</li>
</ol>

1.3.5表格

<table>···</table>：标记表格开头和结束

<tr>···</tr>：表示表格有几行，属性值colspan设置单元格跨列数

<td>···</td>：表示表格有几列，属性值rowspan设置单元格跨行数

<th>···</th>：字体加粗，与<td>···</td>一样

<table>
<tr >
<td colspan="2">我是你爹<td>
</tr>
<tr>
<td>上官婉儿<td>
<th>在你头上拉粑粑<th>
</tr>
</table>

例：

<body>
<table border="1"style="border-color: blue">
<caption>个人简历</caption>
<tr>
<th rowspan="2">基本资料</th>
<th align="left">姓名</th>
<td>李小白</td>
<th align="left">性别</th>
<td>女</td>
</tr>
<tr>
<th align="left">政治main毛</th>
<td>群众</td>
<th align="left">出生日期</th>
<td>2000-03-26</td>
</tr>
<tr><th colspan="5">兴趣爱好</th></tr>
<tr>
<td>替身</td>
<td>各种球类</td>
<td>看言情</td>
<td>爬山</td>
<td>压马路</td>
</tr>
</table>

1.3.6图像与多媒体

<img src="图像文件路径及名称">

<bgsound src="音乐文件路径及名称"loop="重复次数">

<embed src="多媒体文件路径及名称"loop="重复次数"width="播放器宽度"height="播放器高度">

1.3.7超链接

<a href="连接路径"target="目标窗口打开方式">helloworld</a>

<ul type="circle">
<li><a href="index.html">首页</a></li>
<li><a href="C:\Users\Administrator\Desktop/代码雨.html">代码雨</a></li>
<li><a href="C:\Users\Administrator\Desktop/helloworld.html">helloworld</a></li>
</ul>

1.3.8表单

<form action="">
input 元素
</form>

<input type="···"value="···"name="···"/>

type 属性值：text单行文本框，radio单元按钮，checkbox复选框，button按钮，reset重置，submit提交，file文件域

下拉列表

文本区

<textarea name="个人描述" rows="20" cols="20"></textarea>

1.1.4 实践环节--制作调查问卷

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调查问卷</title>
</head>
<body>
<h1>调查问卷</h1><br>
<form action="" enctype="multipart/form-data">
姓名:<input type="text"value=""name="username"/><br>
性别:<input type="radio"value="male"name="sex"/>男
<input type="radio"value="female"name="sex"/>女<br>
所在地：<select name="citis" size="5"multiple>
       <option value="台湾">台湾</option>
       <option value="中国大陆">中国大陆</option>
       <option value="俄罗斯联邦">俄罗斯联邦</option>
       <option value="美国">美国</option>
       <option value="韩国">韩国</option>
       <option value="日本">日本</option>
       <option value="中国澳门">中国澳门</option>
</select><br>
喜欢的歌星 <input type="checkbox"value="zhangsan"name="lover"/>张三
<input type="checkbox"value="lisi"name="lover"/>李四
<input type="checkbox"value="wangwu"name="lover"/>王五<br>
你的靓照：<input type="file"name="filename"/><br>
<textarea name="个人描述" rows="20" cols="20"></textarea><br>
<input type="submit"value="点击提交"name="按钮"/>
<input type="reset"value="点击重置"name="按钮"/><br>
</form>
</body>
</html>

愤怒的阿木木

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java web学习日志第一天

学习目标：掌握HTML入门知识学习内容：1.Html1.1HTML文件的基本结构下面HTML文件的基本结构<html><head>...</head><body>...</body></html>1.1.1<html>···</html>：表示HTML文件的开头和结束的位置1.1.2<head>...</head>：文件头部标记1.1.3&.
复制链接

扫一扫