HTML

HTML
- 1、概述
- 2、HTML语法
- - 基本语法规范
- 3、表格（table tr td）
- 4、超链接（< a > < /a > a标签是get请求）
- 5、表单
- 6、插入图片（ < img alter="" src="" /> ）
- 7、列表（有序 < ol > 无序 < ul > type="" -> 决定了展示的样式）
- 8、标题段落（< h1 > < p > ）

HTML

Java Web软件架构：B/S 、C/S

1、概述

超文本标记语言：Hyper Text Markup Language
HTML文件由一组标签构成，经过浏览器解析之后可以显示网页内容。
HTML文档的构成

2、HTML语法

基本语法规范

html 标签 90% 都是一对一对出现的
单个标签自己结束自己image、input、br、hr

<!-- ①标签不能交叉嵌套 -->
正确：<p><i>早安，Alex</i></p>
错误：<p><i>早安，Alex</p></i>      <!-- ②标签必须正确关闭 -->
<!-- i.有文本内容的标签： -->
正确：<p>早安，Alex</p>
错误：<p>早安，Alex       <!-- ii.没有文本内容的标签： -->
正确：aaaaaa<br />bbbbbbbb
错误：aaaaaa<br>bbbbbbbb      <!-- ③属性必须有值，属性值必须加引号 -->
正确：<font color="blue">早安，Alex</font>
错误：<font color>早安，Alex</font>
错误：<font color=red>早安，Alex</font>            <!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 -->
错误：<!-- 注释内容<!-- 嵌套的注释 --> 溢出的注释 -->

3、表格（table tr td）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><table border="1" align="center" width="80%"><tr><th>姓名</th><th>位置</th><th>公司</th><th>财富</th></tr><tr><td>王健林</td><td>北京</td><td>万达</td><td>2211</td></tr><tr><td>马云</td><td>杭州</td><td>阿里巴巴</td><td>1889</td></tr><tr><td>马化腾</td><td>深圳</td><td>腾讯</td><td>1642</td></tr><tr><td>王卫</td><td>深圳</td><td>顺丰速运</td><td>1240</td></tr></table>
</body>
</html>

结果：

4、超链接（< a > < /a > a标签是get请求）

a.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><a href="pages/target.html">跳转到目标页面，目标页面有美女！</a>
</body>
</html>

target.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>美女！
</body>
</html>

结果：

5、表单

1、form标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><!-- 创建表单 --><!-- 使用form标签定义表单使用action属性指定提交数据的位置使用method属性指定提交数据的方式GET：会将提交的数据附着在URL地址后面，在浏览器地址栏可以看到POST：不会提交的数据附着在URL地址后面，在浏览器地址栏看不到--><form action="target.html" method="post">用户名：<input type="text" name="userName" /><br /><br />密码：<input type="password" name="password" /><br /><br /><!-- 提交按钮：type="submit"，使用value属性指定它是页面上显示的文字 --><input type="submit" value="登录" /></form></body></html>

2、文本框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><!-- file:///D:/workspace/test/Web02_UI/WebContent/04.表单/target.html?username=Tom&email=tom@126.com&password=abc123&other=%E6%97%A0--><form action="target.html" method="get">用户名：<input type="text" name="username" /><br /><br />邮箱：<input type="text" name="email" /><br /><br />密码：<input type="text" name="password" /><br /><br />其他：<input type="text" name="other" /><br /><br /><input type="submit" value="登录" /><br /><br /></form>
</body>
</html>

结果：

3、密码框

<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><form action="target.html" method="get">密码：<input type="password" name="password" /><br /><br /><input type="submit" value="登录" /><br /><br /</form>
</body>
</html>

结果：

4、单选框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><form action="target.html" method="get">性别：<input type="radio" name="gender" value="male" />男生<input type="radio" name="gender" checked="checked" value="female" />女生<input type="radio" name="gender" value="eastSuccess" />东方不败<br /><br /><br /><br /><input type="submit" value="提交" /><br /><br /></form>
</body>
</html>

结果：

5、多选框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><form action="target.html" method="get">你喜欢的足球队<br /><br />巴西<input type="checkbox" name="soccerTeam" value="Brazil" />德国<input type="checkbox" name="soccerTeam" value="German" />荷兰<input type="checkbox" name="soccerTeam" value="Holland" /><br /><br /><br /><br /><input type="submit" value="提交" /><br /><br /></form>
</body>
</html>

target.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>Target Page...
</body>
</html>

结果：

6、插入图片（ < img alter="" src="" /> ）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><img alt="加载图片失败" src="img/a.jpg">
</body>
</html>

7、列表（有序 < ol > 无序 < ul > type="" -> 决定了展示的样式）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><!-- 在这里创建无序列表 --><ul><li>火影忍者</li><li>死神</li><li>海贼王</li><li>名侦探柯南</li><li>网球王子</li></ul><br /><br /><!-- 在这里创建有序列表 --><ol><li>漩涡鸣人</li><li>黑崎一护</li><li>路飞</li><li>柯南</li><li>越前龙马</li></ol>
</body>
</html>

结果：

8、标题段落（< h1 > < p > ）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><!-- 在这里创建标题 --><h1>江畔独步寻花</h1><h3>唐·杜甫</h3><!-- 在这里创建段落 --><p>黄四娘家花满蹊</p><p>千朵万朵压枝低</p><p>留连戏蝶时时舞</p><p>自在娇莺恰恰啼</p>
</body>
</html>

结果：

Java Web 学习笔记01 HTML基本用法相关推荐

Java Web学习笔记01：动态网站初体验
文章目录一.课程概述 1.课程地位 2.课程目标二.动态网站
2019年Java Web学习笔记目录
Java Web学习笔记目录 1.Java Web学习笔记01:动态网站初体验 2.Java Web学习笔记02:在Intellij里创建Web项目 3.Java Web学习笔记03:JSP元素 4. ...
java web学习笔记（持续更新）
java web学习笔记一.Java Web简介二.认识Servlet 1.什么是Servlet? 2.请求路径 3.tomcat 4.Servlet的使用三.Servlet简单应用 1.创建S ...
[原创]java WEB学习笔记48：其他的Servlet 监听器：域对象中属性的变更的事件监听器（3 个），感知 Session 绑定的事件监听器（2个）...
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
[原创]java WEB学习笔记58：Struts2学习之路---Result 详解 type属性，通配符映射
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
[原创]java WEB学习笔记02：javaWeb开发的目录结构
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
[原创]java WEB学习笔记36：Java Bean 概述，及在JSP 中的使用，原理
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
[原创]java WEB学习笔记54：Struts2学习之路--- 编写Struts2 的第一个程序，HelloWord，简述 package ，action，result...
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
Java Web学习笔记 3 深入Servlet技术
第3章深入Servlet技术请求-响应模式就是典型的Web应用程序访问过程,Java Web应用程序中,处理请求并发送响应的过程是由一种叫做Servlet的程序来完成的. 请求request,响应 ...

Java Web 学习笔记01 HTML基本用法

HTML

HTML

1、概述

2、HTML语法

基本语法规范

3、表格（table tr td）

4、超链接（< a > < /a > a标签是get请求）

5、表单

6、插入图片（ < img alter="" src="" /> ）

7、列表（有序 < ol > 无序 < ul > type="" -> 决定了展示的样式）

8、标题段落（< h1 > < p > ）

Java Web 学习笔记01 HTML基本用法相关推荐

最新文章

热门文章