HTML

  • 1. HTML的简述
    • 1.1 HTML是什么
    • 1.2 HTML的语法
  • 2. HTML的基本标签
    • 2.1 字体标签和格式化标签
      • 2.1.1 font
      • 2.1.2 p&/p
      • 2.1.3 h1&/h1
      • 2.1.4
    • 2.2 图片标签
      • 2.2.1 img /
    • 2.3 列表标签
      • 2.3.1 ul&/ul
      • 2.3.2 li&/li
      • 2.3.3 ol&/ol
    • 2.4 超链接标签
      • 2.4.1 a&/a
    • 2.5 表格标签
      • 2.5.1 table&/table
      • 2.5.2 tr&/tr
      • 2.5.3 td&/td
      • 2.5.4 th&/th
      • 2.5.5 表格单元格合并
    • 2.6 块标签
      • 2.6.1 div&/div
      • 2.6.2 span&/span
      • 2.6.3 Div和span的应用场景：
  • 3. HTML的表单标签
    • 3.1 输入项标签
      • 3.1.1 input/标签
    • 3.2 选择框标签
      • 3.2.1 select&/select标签
      • 3.2.2 option&/option标签
    • 3.3 文本域标签
      • 3.3.1 textarea&/textarea标签
    • 3.4 表单标签
      • 3.4.1 form&/form标签。
    • 3.5 提交表单注意事项
      • 3.5.1、提交中文，为什么要使用URL编码？
  • 4. 恭喜通过第一关！

1. HTML的简述

1.1 HTML是什么

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

文本： 相当于记事本里写的文字。 展示信息
超文本： 超越了文本仅仅展示信息的功能范畴。泛指：图片、有样式的文字、点击跳转页面的文字

语言： 工具。
标记： 标签

HTML是由标签所组成的语言，能展示超文本效果，HTML是用来写网页的，是设计页面的基础。

1.2 HTML的语法

HTML代码是由头和体组成。

<html><head><title> 标题</title>
</head><body>需要展示给用户看的信息内容</body>
</html>
html特征
HTML文件的扩展名为html或者htm。Htm是老的命名规范，html的新的
HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行
HTML标签通常由开始标签和结束标签组成。例如:title 标题 /title
开始标签和结束标签之间的内容叫做内容体
HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如：br/ 换行
HTML标签不区分大小写，为了方便阅读，建议使用小写
HTML标签是有属性的，格式为：属性名=”属性值”，属性值用引号引起。引号包含单引号和双引号

HTML标签建议包裹嵌套，不建议交叉嵌套。如下图所示

2. HTML的基本标签

2.1 字体标签和格式化标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体与格式化</title>
</head>
<body><!-- 字体标签 --><font color="blue" size=1 face="宋体">今天是</font><font color="red" size=7 face="楷体">2021-11-7</font></br></br></br></br><!-- 格式化标签 --><h1>E&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;&nbsp;G</h1><h6>EDG</h6>7777777<br/><br/><p align="center" >EDG牛逼！</p><p>淀粉落泪！</p><p align="center">4396！</p><p align="right">我们是冠军！</p></body>
</html>

2.1.1 font

字体标签，用于展示效果中修饰文字样式
<font 属性名=”属性值”>文字

  1. size: 控制字体大小.最小1 ~ 最大7。 如果设置范围不在1~7之间，设置无效
  2. color： 控制字体颜色. 使用英文设置（例如：red,blue…）
  3. face： 控制字体类型。只能设置系统字库中存在的字体类型

2.1.2 p&/p

段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行
align: 段落内容的对齐方式（默认是left，居左；Right 居右；Center 居中）

2.1.3 h1&/h1

标题标签，用于展示效果中划分标题，其中h1最大，h6最小

2.1.4 &nbsp

HTML源码中的多个空格，效果中最终会合并成一个
空格符号，用于展示效果中显示一个空白的位置

2.2 图片标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body><!-- 图片标签 --><img src="../img/ig.jpeg" width="40%"/><img src="E:\eclipse\html01\src\main\webapp\img\edg.jpg" width="600" height="400"/> <img src="http://dingyue.ws.126.net/2019/1215/475cedfap00q2j1yg00lsc000pe00dwc.png" width="15%" >
</body>
</html>

2.2.1 img /

用于在页面效果中展示一张图片。
src： 指明图片的路径。（必有属性）

  1. 内网路径：
    绝对路径：文件在硬盘上的具体位置。【不建议使用】
    例如：E:\eclipse\html01\src\main\webapp\img\edg.jpg
    相对路径：从引入者所在目录出发 【尽量使用相对路径】
    例如：…/img/ig.jpeg
    …/ 表示上一层目录
    ./ 表示当前目录
  2. 互联网路径：
    必须前面加上http://
    例如：http://dingyue.ws.126.net/2019/1215/475cedfap00q2j1yg00lsc000pe00dwc.png

width： 图片宽度
height： 图片的高度
宽度和高度的设置：默认单位是px，像素。
例如：width=”400” 其实设置的是 width=”400px”。固定设置方式百分比设置。
例如：width=”50%”， 是父标签的百分比。 会随着页面大小而动态改变。

2.3 列表标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body><!-- 列表标签 --><!-- 1.无序列表 --><ul><li>I G</li><li>EDG</li><li>FPX</li></ul><!-- 2.有序序列表 --><ol><li>I G</li><li>EDG</li><li>FPX</li></ol>
</body>
</html>

2.3.1 ul&/ul

无序列表标签，用于在效果中定义一个无序列表

2.3.2 li&/li

列表条目项标签，用于在效果中定义一个列表的条目

2.3.3 ol&/ol

有序列表标签，用于在效果中定义一个有序列表

2.4 超链接标签

2.4.1 a&/a

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body><!-- 超链接标签 --><a href="html02.html"><img alt="夺冠图片！" src="../img/win.jpg" width="300" heigt="500"></a>  <br/> <br/><a href="https://www.bilibili.com/video/BV14b411w7La?from=search&seid=1909793427174034692&spm_id_from=333.337.0.0">I G夺冠视频！</a><br/><a href="https://www.bilibili.com/video/BV1EP4y1j7kV?from=search&seid=16401085397966658151&spm_id_from=333.337.0.0">EDG夺冠视频！</a> <br/><a href="https://www.bilibili.com/video/BV1aE411Y7Ej?from=search&seid=907586961839785142&spm_id_from=333.337.0.0l">FPX夺冠视频！</a> <br/></body>
</html>

超链接标签，用于在效果中定义一个可以点击跳转的链接
href： 超链接跳转的路径 (必有属性)

  1. 内网本机路径：
    相对路径和绝对路径
  2. 互联网路径：http://地址

超链接正常工作：

  1. a标签中必须有内容
  2. a标签必须有href属性
注意
a标签内容体，不仅仅是文字，也可以是其他内容，例如图片
a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片

2.5 表格标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body><!-- 表格标签 --><table border=10 width="50%" align="left"><tr><th>夺冠</th><th>I G</th><th>EDG</th><th>FPX</th></tr><tr><td>2018</td><td>冠军！</td><td>八强</td><td> 无</td></tr><tr><td>2019</td><td>四强</td><td> 无</td><td>冠军！</td></tr><tr><td>2021</td><td> 无</td><td>冠军！</td><td>十六名</td></tr></table><br/><br/><br/> <br/><br/><br/><br/><br/><br/><!-- 合并单元格 --><table border=5 width="40%" align="left"><tr><th colspan=2>1</th><th>3</th><th>4</th><th>5</th></tr><tr><td rowspan=3>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr><tr><td>02</td><td colspan=2 rowspan=2>03</td><td>05</td></tr><tr><td>02</td><td>05</td></tr></table></body>
</html>

2.5.1 table&/table

表格标签，用于在效果中定义一个表格
border： 设置表格的边框粗细
width： 设置表格的宽度

2.5.2 tr&/tr

表格的行标签，用于在效果中定义一个表格行

2.5.3 td&/td

表格的单元格标签，用于在效果中定义一个表格行中的单元格

2.5.4 th&/th

表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
th 和 td 唯一区别：th 内容 居中加粗

2.5.5 表格单元格合并

td 或者 th 都有两个单元格合并属性：
colspan： 跨列合并单元格
rowspan： 跨行合并单元格

合并步骤：
1.确定合并哪几个单元格，确定是跨列合并还是跨行合并
2.在第一个出现的单元格上书写 合并单元格属性
3.合并几个单元格，属性值就书写几
4.被合并的单元格必须删掉

2.6 块标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块</title>
</head>
<body><div>div-123</div><div>div-456</div><span>span-123</span><span>span-456</span></body>
</html>

2.6.1 div&/div

块级的块标签，适用于大量数据展示

  1. 默认占满一行
  2. 会自动换行

2.6.2 span&/span

行级的块标签，适用于少量数据展示。

  1. span有多少内容，就会占用多大空间。
  2. Span不会自动换行

2.6.3 Div和span的应用场景：

3. HTML的表单标签

3.1 输入项标签

3.1.1 input/标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body><form>用户名：<input name="username"/><br/>密码：<input type="password" name="password"/><br/>大学：<input type="text" name="university" value="DUT"/><br/>性别：<input type="radio" name="sex" value="man" checked="checked"/>男<input type="radio" name="sex" value="woman"/>女<!-- <input type="radio" name="sex1"/>攻<input type="radio" name="sex1"/>受--><input type="submit"/></form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body><form><input type="hidden" name="uid" value="asf526g526asfa2">用户名：<input name="username"/><br/>爱好：<input type="checkbox" name="habby" value="basketball">篮球<input type="checkbox" name="habby" value="football">足球<input type="checkbox" name="habby" value="volleyball">排球<input type="checkbox" name="habby" value="badminton">羽毛球<input type="checkbox" name="habby" value="DUT" checked="checked">DUT<br/>照片：<input type="file" name="photo"/><br/>介绍：<input name="introduce" readonly="readonly" value="子陌是大帅逼"/><br/>特点：<input name="characteristic" disabled="disabled" value="事实无法改变"/><br/><input type="reset"/><input type="submit" value="注册"><br/><input type="button" value="快按我！按我！"/></form>
</body>
</html>

表单输入项标签之一，用户可以在该标签上 通过填写和选择 进行数据的输入。

  1. type: 设置该标签的种类
1. text:文本框。 默认
2. password:密码框。 内容为非明文
3. radio:单选框。 在同一组内有单选效果
4. checkbox:复选框。 在同一组内有复选效果
5. submit:提交按钮。用于控制表单提交数据
6. reset:重置按钮。 用于将表单输入项恢复到默认状态
7. file:附件框。用于文件上传
8. hidden:隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据
9. button:普通按钮。需要和JS事件一起用

  1. name: 单选框、复选框进行数据的分组。/ 设置该标签对应的参数名
    某个表单输入项需要通过参数列表提交，就必须设置name属性

  2. value: 设置该标签对应的参数值。 / 作为按钮的名字

value属性的设置策略：
1. 文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入
2. 单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
  1. checked: 设置单选框/复选框的默认选中状态
  2. readonly: 设置该标签的参数值只读，用户无法手动更改。数据是可以正常提交
  3. disabled: 设置该标签不可用，参数值无法更改，且参数值也无法提交

3.2 选择框标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><form action=""><select name="lpl"><option value="1">IG</option><option value="2">EDG</option><option value="3">RNG</option><option value="4">WE</option><option value="5">OMG</option></select><br/><br/><select name="选手"><option>请选择你最爱的角色</option><option value="1">7777777</option><option value="2">4396</option><option value="3" selected="selected">养猪</option></select><br/><input type="submit"></form>
</body>
</html>

3.2.1 select&/select标签

定义一个选择框

  1. name: 设置该标签对应的参数名
  2. multiple： 设置该标签选项全部显示，并且可以进行多选提交。默认为单选。

3.2.2 option&/option标签

选项标签，用于为一个选择框添加一个选项

  1. value: 设置需要提交的参数值。
  2. selected: 设置选项的默认选中状态
注意事项：
Option的内容体一般是用来进行展示
参数值 应该是option的value属性值

3.3 文本域标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><form>简介：<textarea name="introduce" rows="3" cols="20">DUT</textarea><br/><input type="submit"/></form>
</body>
</html>

3.3.1 textarea&/textarea标签

表单输入项标签之一，用户可以在该标签上 通过输入 进行数据的输入。
name: 设置该标签对应的参数名

文本域和文本框区别：
文本框不能换行，文本域可以
文本框参数值是value属性，文本域参数值是标签的内容体

3.4 表单标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><form action="html02.html" method="get">用户名get：<input name="uname"/><br/><input type="submit"/></form><form action="E:\eclipse\html01\src\main\webapp\html\html02.html" method="post">用户名post：<input name="uname"/><br/><input type="submit"/></form>
</body>
</html>

3.4.1 form&/form标签。

用于在效果中定义一个表单，用于提交用户填写的数据。

  1. action: 将数据提交到何处。
    默认提交到本页。
路径
本机内网相对路径：html02.html
本机内网绝对路径：E:\eclipse\html01\src\main\webapp\html\html02.html
互联网路径：http://www.baidu.com/xxx
  1. **method:**将数据以何种方式提交
    提交方式可定义：get(默认） 或者 post
    Get提交方式特点：把数据拼接到地址栏上
    Post提交方式特点：没有把提交数据拼接到地址栏上，而是放在请求体
    尽量使用post方式提交表单
Get和post提交方式区别：
get提交的参数列表拼接到了地址栏后面；post方式不会 拼接地址栏
get方式提交的数据 敏感信息不安全；Post方式提交的数据 相对安全
get方式提交的数据量 有限； Post方式从理论上提交的数据量无限大

3.5 提交表单注意事项

3.5.1、提交中文，为什么要使用URL编码？

正常提交数据：密码为：DUT
?password=DUT&username=zimo
非正常提交数据：密码为：D&U&T
?password=D&U&Tusername=zimo

URL编码目的解决：特殊符号，中文
例如：& —> %26
?password=D&U&Tusername=zimo
编码完：?password=D %26U %26T&username=zimo

为了保证表单数据传递时能更好区分出name和value，保证数据传递的完整性。

4. 恭喜通过第一关！

java的web开发之旅——第1站html相关推荐

  1. java的web开发之旅——第3站javascript

    js 1. javaScript 1.1 js是什么 1.2 js的语言特征 1.3 js的组成 1.4 js的引入 1.4.1 内部引用 1.4.2 外部引用 1.4.3 script标签规范化 2 ...

  2. 为什么做java的web开发我们会使用struts2，springMVC和spring这样的框架?

    2019独角兽企业重金招聘Python工程师标准>>> 今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制 ...

  3. JavaWeb那些事儿(一)--为什么做java的web开发使用struts2，springMVC和spring这样的框架

    今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架由struts2迁移到springMVC,我突然有了一个新的疑 ...

  4. 浅谈PHP与Java之Web开发整合技术

      淺談PHP與Java之Web開發整合技術      鄭哲聖郑哲圣   前言 PHP為語法簡單的腳本語言,可以做為HTML的嵌入型語言,而且與Apache網頁伺服器搭配的設定容易.效能亦高. 前言 ...

  5. 张利国java pdf_Java Web开发与实战–Eclipse+Tomcat+Servlet+JSP整合应用 （刘伟张利国） PDF...

    资源名称:Java Web开发与实战–Eclipse+Tomcat+Servlet+JSP整合应用 (刘伟,张利国) PDF 第1章 web开发工具的安装与使用 第2章 web编程技术基础 第3章 s ...

  6. java tapestry_Java Web开发的轻便架构Tapestry5---简介

    简介: Java Web开发架构Tapestry最初由Howard Lewis Ship创建于2000年,2006年荣升为Apache的顶级开源项目.经过近10年的发展,在Tapestry开发团队不断 ...

  7. Java EE Web开发与项目实战_【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 （第一节）...

    312334546574820.jpg 序 前一段时间有很多朋友来问我各种问题,比如java怎么学,c,c++,c#,java,还有php等等,到底学哪个好,哪个好就业?其中不乏刚毕业找不到工作的学生 ...

  8. 【程序思考】RIA 对于 java 在 web 开发领域是否是一个转机？

    今天看了 dlee 在 csdn  发表的一篇文章  http://blog.csdn.net/mozilla/archive/2007/07/22/1702365.aspx  . 觉得很有意思.以前 ...

  9. java 表头固定_[Java教程]web开发：表头固定（利用jquery实现）_星空网

    web开发:表头固定(利用jquery实现) 2012-11-08 0 表头固定应该是一个用得比较多的功能,参考了网上几个例子,在几个常用浏览器下显示不是很完美.而且很多都是基于固定的表格,在编码时多 ...

  10. java osgi web开发_基于 OSGi 和 Spring 开发 Web 应用

    开发一个简单的OSGi Web应用实例 一个简单的Web应用 我们写一个简单的 Web 应用 compute.html :计算两个数字的和或乘积.如下图所示: 图1.一个简单例子 一个简单例子.bmp ...

最新文章

  1. 你想要的宏基因组-微生物组知识全在这(180801)
  2. 我想问一下为什么会开3分钟系统自动会从新启动呢？
  3. 025_CSS框模型概述
  4. Spring boot配置文件值注入
  5. web前端零基础入门学习！前端真不难！
  6. 充电网完成数千万元Pre-B轮融资，将会聚焦新能源乘用车市场
  7. MongoDB ServerStatus返回信息
  8. Linux系统rootpassword改动
  9. droidbox官网
  10. python语言高空坠球_高空坠物打击体验装置制造方法
  11. CentOS7.6上搭建阿里云OSS的C SDK
  12. php阿拉伯语字符串,使用PHP将RTL(阿拉伯语)文本写入图像
  13. HTTP代理服务器 - Apache httpd
  14. java并发编程入门_Java并发编程从入门到精通 PDF 下载
  15. python3.8安装pyltp
  16. 基于java的企业信息网站发系统
  17. 一级造价工程师（安装）- 计量笔记 - 第五章第二节通风空调工程
  18. eclipse导入spring源码二（丢失的spring-asm-repack和spring-cglib-repack）
  19. 360手机刷机：360N7pro刷机
  20. 木材材积表快速计算器_木材材积表计算器

热门文章

  1. 论文中常用的对word页眉页脚的操作
  2. numpy中的统计函数
  3. 特斯拉“深陷”召回/监管调查，“高田气囊门”是前车之鉴
  4. css创始人层叠样式表,CSS层叠样式表
  5. 多多参谋：拼多多推广怎么出价？该怎么做好推广？
  6. Centos 6 yum安装出错
  7. 《计算机网络 第7版》第9章 无线局域网的物理层和MAC层
  8. 英文版oracle数据库不能复制粘贴,win10 plsql没法复制 粘贴
  9. mocha.opts配置文件
  10. python绘制线段_使用matplotlib绘制线段线