java学习——HTML

HTML总结

在这里插入图片描述

HTML创建

  • 1、注释: 快捷键:ctrl+/
  • 2、编辑完成后,右击右上角图标选择一个浏览器即可打开网页
    在这里插入图片描述
    在这里插入图片描述
  • 3、idea创建一个html文件
<!--声明 DOCTYPE:告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">

<!--head标签代表网页头部-->
<head>
    <!--<meta>描述性标签,用来描述我们网站的一些信息-->
    <!--<meta>一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="Keywords" content="学习狂神说java">
    <meta name="description" content="来这个地方学习java">

    <!--<title>网页标题-->
    <title>我的第一个网页</title>
</head>

<!--body标签代表网页主体-->
<body>

Hellow,World!

</body>

</html>

1、网页基本标签

  • 标题标签:      <h1> 一级标题内容 </h1>  一级标题
                   <h2> 一级标题内容 </h2>  二级标题
                   ...
    
  • 段落标签:      <p>  段落内容  </p>
    
  • 换行标签:      换行内容  <br/>     (自闭合标签)
    
  • 水平线标签:     <hr/>    ————————————————
    
  • 字体标签:      粗体:  <strong> 粗体内容 </strong>
                   斜体:  <em> 斜体内容 </em>
    
  • 特殊符号:      空格:  &nbsp;
                   大于号:  &gt;
                   小于号:  &lt;
                   版权符号:  &copy;
                   其他:  &+...+;
    

2、图像标签

在这里插入图片描述

3、超链接标签

  • 跳转连接    
    href:     必填,表示要跳转到哪个页面;
    target:  表示窗口在哪里打开;
         *   _blank:在新窗口打开;
         *   _self:在自己的窗口打开 
         * ......
     例如:    
     <a href="https://ww.baidu.com"  target="_blank"> 点击跳转到百度  </a>  
    
  • 锚链接: 可跳转到指定位置  使用#
    例如:<a name="top">顶部</a>          放在指定位置,可以相同或者不同页面
          <a href="#top">回到顶部</a>   
    
  • 功能性链接
    例如:邮件链接:mailto
    <a href="mailto:1715299723@qq.com">点击联系我</a>
    

4、行内元素和块元素

5、列表

  • 1、有序列表 (order list) 应用范围:试卷,问答…
<ol>
      <li>java</li>
      <li>python</li>
      <li>运维</li>
      <li>前端</li>
      <li>c/c++</li>
      ...
</ol>

2、无序列表 (unorder list) 应用范围:导航、侧边栏…

 <ul>
      <li>java</li>
      <li>python</li>
      <li>运维</li>
      <li>前端</li>
      <li>c/c++</li>
      ...
</ul>

有序和无序效果:
在这里插入图片描述

3、自定义列表 (dl:标签 dt:列表名称 dd:列表内容 )

<dl>
    <dt>语言</dt>
    <dd>c/c++</dd>
    <dd>python</dd>
    <dd>linux</dd>
    <dt>位置</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>淮南</dd>
</dl>

自定义效果:
在这里插入图片描述

6、表格标签

  • 表格                 <table></table>
    行(table rows)     <tr></tr>
    列(table det)      <td></td>
    

在这里插入图片描述
效果:
在这里插入图片描述

7、视频和音频

在这里插入图片描述

8、页面结构分析

在这里插入图片描述

9、iframe内联框架

在这里插入图片描述

10、表单语法

在这里插入图片描述
例如:
在这里插入图片描述
表单元素格式:
在这里插入图片描述
表单应用:
hidden 隐藏域
readonly 只读
disabled 禁用
placeholder 提示信息
required 非空判断(表单中不可为空)
pattern 正则表达式(百度常用正则表达式,选脚本之家那个可以看到很多)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值