HTML简介
HTML简介
Hyper Text Markup Language （超文本标记语言） 简写：HTML
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
HTML 文件的书写规范
<html> 表示整个html 页面的开始
<head> 头信息
<title>标题</title> 标题
</head>
<body> body 是页面的主体内容
页面主体内容
</body>
</html>
特例
<!DOCTYPE html><!-- 约束，声明 -->
<html lang="en"><!-- html标签标识html的开始 lang="zh_CN"表示中文 html标签中一般分为两部分，分别是head和body -->
<head><!-- 表示头部信息，一般包含三部分内容，title标签 css样式，js代码 -->
<meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
<title>标题啊</title><!-- 标题 -->
</head>
<body><!-- body主体标签是整个html页面显示的主体内容 -->
hello world
</body>
</html>
HTML 标签介绍
1.标签的格式:
<标签名>封装的数据</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
i. 分为基本属性：bgcolor="red" 可以修改简单的样式效果
ii. 事件属性： onclick="alert('你好！');" 可以直接设置事件响应后的代码。
4.标签又分为，单标签和双标签。
i. 单标签格式： <标签名/> br 换行hr 水平线
ii. 双标签格式: <标签名> ...封装的数据...</标签名>
★标签的语法
<!-- ①标签不能交叉嵌套-->
正确：<div><span>早安</span></div>
错误：<div><span>早安</div></span>
<hr />
<!-- ②标签必须正确关闭-->
<!-- i.有文本内容的标签： -->
正确：<div>早安</div>
错误：<div>早安
<hr />
<!-- ii.没有文本内容的标签： -->
正确：<br />
错误：<br>
<hr />
<!-- ③属性必须有值，属性值必须加引号-->
正确：<font color="blue">早安</font>
错误：<font color=blue>早安</font>
错误：<font color>早安</font>
<hr />
<!-- ④注释不能嵌套-->
正确：<!-- 注释内容--> <br/>
错误：<!-- <!-- 这是错误的html 注释--> -->
<hr />
注意事项：
1.html 代码不是很严谨。有时候标签不闭合，也不会报错。
标题标记
<h1>一级标题<h1> ,<h2>二级标题<h2> <h3>三级标题<h3> <h4>四级标题<h4> <h5>五级标题<h5> <h6>六级标题<h6>
字体标签
font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
color属性修改颜色
face属性修改字体
size属性修改文本大小
特殊字符
需求1：把 <br> 换行标签 变成文本 转换成字符显示在页面上
常用的特殊字符:
< ===>>>> <
> ===>>>> >
空格 ===>>>>
★超链接
a标签是 超链接
href属性设置连接的地址 "#"不跳转
target属性设置哪个目标进行跳转
_self 表示当前页面(默认值)
_blank 表示打开新页面来进行跳转
<a href="http://www.baidu.com" target="_blank">
★图像标签
需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性
img标签是图片标签,用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框大小
alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
在JavaSE中路径也分为相对路径和绝对路径.
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
绝对路径:
正确格式是: http://ip:port/工程名/资源路径
错误格式是: 盘符:/目录/文件名
<img src=""/>
★列表标签
<ul>
<li> </li>
</ul>无序列表
<ol>
<li></li>
</ol>有序列表 其中li是列表项
★表格标签
table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签
<table> 表格标签
<tr>行标签
<td> </td>单元格标签
<th></th>表头标签
<tr>
</table>
加粗<b></b> align 设置单元格文本对齐方式
cellspacing = "0" 设置单元格间距
colspan ="2"属性设置跨列
rowspan="2"属性设置跨行
iframe 框架标签(内嵌窗口)
<iframe src="demo.html" name="abc"></iframe>在页面开辟一个空间，显示另外的页面
一般配合列表标签使用。菜单栏选择
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSQngtRk-1587052939119)(D:\YoudaoNote\data\weixinobU7VjkjF_n6Xv4vkiPhhSvWhZsk\f328d5b01b7942bc89b048d4779685ec\360截图20200410180034096.jpg)]
★表单标签
form标签就是表单
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属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
form标签是表单标签
action属性设置提交的服务器地址
method属性设置提交的方式GET(默认值)或POST
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性值
2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3、表单项不在提交的form标签中
GET请求的特点是：
1、浏览器地址栏中的地址是：action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST请求的特点是：
1、浏览器地址栏中只有action属性值
2、相对于GET请求要安全
3、理论上没有数据长度的限制
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td>
<input type="text" name="username" value="默认值"/>
</td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>Java
<input name="hobby" type="checkbox" value="js"/>JavaScript
<input name="hobby" type="checkbox" value="cpp"/>C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select name="country">
<option value="none">--请选择国籍--</option>
<option value="cn" selected="selected">中国</option>
<option value="usa">美国</option>
<option value="jp">小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
div - p -span标签
div标签 默认独占一行
span标签 它的长度是封装数据的长度
p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
★结构元素
1.headery 头部内容结构
2.nav 导航栏内容结构
3.<article> 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
4.aside标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关
5.<section> 标签定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。
6。footer标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
分组元素
1.figure与figcaption标签用于对元素进行组合
2.hgroup
页面交互元素
1.details与summary
2.progress （进度条） 搭配value：已完成工作量 max：总共工作量
3.meter用于投票等进度条
文本层次语义元素
1.time（时间日期）
2.mark 标记主要字体（添加底纹）
3.cite用于文档参考文献说明
全局属性
1.draggable 可拖动图片
2.hidden 隐藏域
3.spellcheck 文本确认检查
4.contenteditable 设置可编辑内容（列表标签）
以上就是javaweb的html基础内容
作者公众号：小编编码，欢迎一起交流
