Java Web HTML介绍及基础标签

什么是web前端：简单说web前端就是网页，由多种技术参与制作，用于给用户展示的网页，就是所谓网站的前端
多种技术：

• HTML
• CSS
• JavaScript
• jQuery
• BT（bootstrap）

更高端技术：
AngurlarJS，VUE，React，webpack，nodeJS

一、HTML

1. 什么是HTML：超文本标签语言
   可描述文字 表格 声音 视频 动画 链接
2. HTML分两部分：

• 头部head标签：提供浏览器所需要的信息
• 主体部分body标签：提供网页的主要内容

3. HTML优点：

• 简单灵活
• 可扩展性高
• 平台无关性

二、环境配置和浏览器说明

1. 环境配置：

• 运行环境：有一台有浏览器的PC即可
• 开发环境：。。。

2. 浏览器：什么是浏览器：用来渲染和呈现网页的软件

三、HTML语法结构

• 标签大多成队出现，有开始标签和结束标签，自结束标签除外
• 标签可以有属性有属性必有值
• 开始和结束标签之间内容称为区域
• 标签不区分大小写

四、网页分类

静态页面：在不修改源代码的前提下，无论你何时去访问网页都会获得相同结果。后缀名为html
动态交互式页面：用户通过提交数据给网站，网站根据用户提交的数据进行反馈。后缀名为jsp，aspx，asp，php

五、HTML网页

1. 常用标签：
   加粗标签：b/strong带有语气成分
   斜体标签：i/em
   下划线标签：u
   删除线标签：del
   换行标签：br
   段落标签：p
   格式化输出标签：pre
   众多行内标签之一：span用于修饰所包裹的内容
   众多块标签之一：div内容即使不满一行也会占满一行
   行内标签修饰所包裹的内容，不能直接支持宽高属性
   块标签即使不满一行也会占满一行，支持宽高属性
   自结束标签：不需要结束标签的标签，如有html文件头声明，斜杠可以省略
   下标标签：sub
   上标标签：sup
   分割线标签：hr
   标题标签：h1-h6，h1标题最大，依次减小
2. 语义化标签
   优点：增强代码可读性，提高维护效率较低维护成本，可为搜索引擎起到引导作用
3. 多媒体标签
   图片标签：img
   音频标签：audio
   视频标签：video
   autoplay–自动播放
   controls–显示操作界面
   audio和video在主流浏览器的上不支持自动播放，若进行自动播放需添加静音muted
   布尔型属性：默认true并且无法修改，除非移除属性
4. 表格标签
   通过table标签创建
   • 包含子元素：thead，tbody，tfoot，td（列），tr（行）
   • thead，tbody，tfooot：三标签可进行分批次显示表格
   • 无论这三标签如何放置总是以head，body，foot输出
     table支持属性：
   • width/height：用于告知表格宽高，支持具体像素输入，也支持百分比
   • align：控制表格再页面中的位置
     表格合并：
   • rowspan：所填数字为要合并的单元格个数，从上至下合并
   • colpan：所填数字为要合并的单元格个数，从左至右合并
5. 超链接标签
   超链接标签时H5的重要组成部分之一，通过超链接实现跳转其他网页的目的，a标签
   • 文字超链接
     <a href = ""要跳转的页面URL target = “跳转方式”>
     target：如果不写此属性，target默认是self，将通过自身选项卡加载页面，若是_blank将新建选项卡进行跳转
   • 锚链接
     制作网页时，网页巨长，可在顶部位置创建一个a标签并绑定其id（#id）点击标签即可达到跳转
   • 图片超链接
     在a标签中填入img标签，即可达到点击图片即跳转
   • 热区超链接
     将一图片分割为多个区域，区域可为矩形圆形多边形，通过点击不同区域进行不同跳转
6. 表单标签
   给用户进行数据提交的标签，属于一种交互标签，form标签
   具有三重要属性：
   • action：需要填入一个指向服务器的url，转为处理表单的接口函数
   • method：http的请求方式，主要使用get和post
     三重要子标签：
   • input：最常用输入标签，有多重输入类型
   • select：下拉框，multiple属性存在时，它是一个列表
   • textarea：多行文本框
7. 有序列表
   ol标签
8. 无序列表
   ul标签