【笛子的JavaWeb总结】一文带你快速入门HTML

最新推荐文章于 2024-09-14 22:11:27 发布

SOS团团员A

最新推荐文章于 2024-09-14 22:11:27 发布

阅读量144

点赞数

分类专栏：笛子的JavaWeb总结文章标签： html java web

本文链接：https://blog.csdn.net/qq_34332616/article/details/117044775

版权

笛子的JavaWeb总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一文带你快速入门HTML

基础理论
HTML

基础理论

JavaSE部分主要学习的是C/S Client / Server的内容
JavaWeb学习的是B/S Brower / Server的内容
B/S 软件结构由客户端和服务器端两部分组成，客户端指浏览器，服务器端值WEB服务器
网页的组成部分
（1）内容（结构）：是在网页上可以看到的数据，一般用html技术来展示
（2）表现：内容在页面上的展示形式，比如布局、颜色、大小等等，一般用CSS技术实现
（3）行为：指的是页面中元素与输入设备交互的响应，一般用javascript技术实现

HTML

书写规范

Hyper Text Markup Language （超文本标记语言）

<html> 表示整个 html 页面的开始
    <head> 头信息
        <title>标题</title> 标题
    </head>
    <body> body 是页面的主体内容
        页面主体内容
        <!--  注释语法这么写-->
     </body>
</html> 表示整个 html 页面的结束

HTML标签介绍

标签是html文件部分的主要内容载体；
格式：<标签名>封装的数据</标签名>
标签名大小写不敏感
标签拥有可以设置的属性，分成两类
（1）基本属性，如颜色，大小，位置布局等：bgcolor = “blue”
（2）事件属性，可以直接设置事件响应后的代码 onclick = “alert(‘你好’);”
标签又可以分成，单标签和双标签，不过双标签可以替换所有的单标签
内容简单的如只有一个属性的可以单标签，提高可阅读性；内容比较多，使用双标签，可以在标签中嵌套其他内容。
（1）单标签：<标签名 /> br换行 hr水平线等：有些数据可以直接封装在单标签里，比如< img src = “./1.ipg” />
（2）双标签：<标签名> …封装的数据… </标签名>

常用标签介绍

字体标签 < font>

color：设置文本颜色
face：设置字体
size：设置文本大小

标题标签 < h1> ~ < h6> ：还有align属性可以设置标题位置
超链接 < a>：

href属性设置连接的地址
target属性设置跳转的形式：_self表示当前页面（默认值）；_blank表示打开新页面来进行跳转

列表标签
（1）无序列表< ul> : type属性可以修改列表前面的符号,< li> 是列表项
（2）有序列表< ol>，< li>是列表项
img标签< img>：在html上显示图片

src属性设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框大小
alt属性设置当指定路径找不到图片时，用来替代显示的文本内容

表格标签及跨行跨列表格

（1）< table>

border设置表格标签
width设置表格宽度
height设置表格高度
align设置表格相对页面的对齐方式
cellspacing设置单元格间距

（2）< tr> 是表格的行标签
（3）< th> 是表头标签
（4）< td> 是单元格标签

align：设置单元格对齐方式
colspan：设置跨列的数量
rowspan：设置跨行的数量

iframe框架标签（内嵌窗口）< iframe>
（1）可在一个html上打开一个小窗口，加载一个单独的画面
（2）iframe框架标签与a超链接标签组合使用的步骤：

在iframe标签中使用name属性定义一个名称
在a标签的target属性上设置iframe的name的属性值

表单标签< form>

（1）表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.

action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST

（2）表单中的内容设置

input type=text 是文件输入框，value设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组，checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
input type=file 是文件上传域
input type=hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

特殊字符
假如想把< br>换行符这个文本现在在页面上就需要这些特殊字符了
其他标签

（1）< div>

< div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。更重要的意义是在网页的动态实现过程中，对划分的区域统一处理，例如换背景色、字体等。
< div> 是一个块级元素。它的内容自动地开始一个新行。实际上，换行是 < div> 唯一格式上的表现

（2）< span>

< span>是一个行内标签，用来组合行内的多个元素。div与span区别div占用的位置是一行。span占用的是内容有多宽就占用多宽的空间距离。

（3）< p>

< p>代表一个段落，对于在< p>与< /p>之间的内容，当作一个段落统一处理，同样具有格式上的换行效果。

（4）区别与联系
通常用于文章分段。选用这三个标签时，可以按写文章的方式考虑，如果你在考虑文章的整体构架，就先< div>；写各其中一个小节的每段时，就< p>；如果一段内容中有部分内容需要另起一行（换行的内容与前一行内容仍属于一段），就< br>。

※常用标签代码及演示效果

在这里插入图片描述

文件一：test.html（主页面）

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>一文带你快速入门HTML</title>
</head>
<body>
<font color="blue" face="宋体" size="15">1.字体标签：将当前字体设置为蓝色、宋体、15号</font>
<h1 align="left">2.标题标签：这是置左的h1标题</h1>
<a href="www.baidu.com" target="_blank">3.超链接标签，点击这里百度一下</a>
</br></br>
4.列表标签（以有序列表举例）
<ol>
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
</ol>
<BR>5.使用图像标签显示图像</BR><br>
<img src="tile.png" width="558" height="558" border="50" alt="啊嘞，图像不见了"/>
<BR><br>6.设置表格及跨行跨列</BR>
<table border="5" width="500" height="600" cellspacing="4">
  <th colspan="5">这是表头标签</th>
  <tr>
    <td colspan="2">1.1</td>
    <td>1.3</td>
    <td>1.4</td>
    <td>1.5</td>
  </tr>
  <tr>
    <td rowspan="2">2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
    <td>2.5</td>
  </tr>
  <tr>
    <td>3.2</td>
    <td>3.3</td>
    <td>3.4</td>
    <td>3.5</td>
  </tr>
  <tr>
    <td>4.1</td>>
    <td>4.2</td>>
    <td>4.3</td>>
    <td colspan="2" rowspan="2">4.4</td>>
  </tr>
  <tr>
    <td>5.1</td>
    <td>5.2</td>
    <td>5.3</td>
  </tr>
</table>
<BR><br>7.框架标签实现内嵌窗口 </BR>
<iframe src="./form.html" width="600" height="400"></iframe>
<BR><br>9.通过特殊字符把换行符&lt;br&gt;显示出来 </BR>
</body>
</html>

文件二：iframe嵌入窗口中显示的页面form.html（表单标签）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
8.干脆在内嵌窗口里展示表单标签的功能了
<form>
  用户名称：<input type="text" value="这是默认值"/><br/>
  用户密码：<input type="password" value="password"/><br/>
  确认密码：<input type="password" value="password"/><br/>
  性别：<input type="radio" name="sex"/>男
  <input type="radio" name="sex" checked="checked" />女<br/>
  兴趣爱好：<input type="checkbox" checked="checked" />Java
  <input type="checkbox" />JavaScript
  <input type="checkbox" />C++<br/>
  国籍：<select>
  <option>--请选择国籍--</option>
  <option selected="selected">中国</option>
  <option>美国</option>
  <option>日本</option>
</select><br/>
  自我评价：<textarea rows="10" cols="20">写下对自己的评价吧</textarea><br/>
  <input type="reset" value="重置表格" />
  <input type="submit"/>
</form>
</body>
</html>