Hyper Text Markup Language （超文本标记语言） 简写：HTML [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSQngtRk-1587052939119)(D:YoudaoNotedataweixinobU7VjkjF_n6Xv4vkiPhhSvWhZskf328d5b01b7942bc89b048d4779685ec360截图20200410180034096.jpg)]
HTML简介
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="https://www.baidu.com" target="_blank"> ★图像标签
需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性 img标签是图片标签,用来显示图片 src属性可以设置图片的路径 width属性设置图片的宽度 height属性设置图片的高度 border属性设置图片边框大小 alt属性设置当指定路径找不到图片时,用来代替显示的文本内容 在JavaSE中路径也分为相对路径和绝对路径. 相对路径:从工程名开始算 绝对路径:盘符:/目录/文件名 在web中路径分为相对路径和绝对路径两种 相对路径: . 表示当前文件所在的目录 .. 表示当前文件所在的上一级目录 文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略 绝对路径: 正确格式是: https://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>在页面开辟一个空间，显示另外的页面 一般配合列表标签使用。菜单栏选择 ★表单标签
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="https://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基础内容
作者公众号：小编编码，欢迎一起交流
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
