html常识

最新推荐文章于 2024-06-18 16:14:45 发布

编码小生

最新推荐文章于 2024-06-18 16:14:45 发布

阅读量95

点赞数 1

分类专栏： javaweb 文章标签： mysql 数据库 database

本文链接：https://blog.csdn.net/qq_45813532/article/details/121442858

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML文件书写规范

<html>             <!--表示整个html页面的开始-->
      <!-- 头信息-->
     <head>             
             <title> 标题 </title>     
     </head>

     <body>   <!-- body是页面的主体内容 -->

         <!-- 页面主体内容 -->
    
     </body>

</html>            <!--表示整个html页面的结束-->

html的代码注释

html 标签介绍

1.标签的格式：

<标签名>封装的数据</标签名>

2.标签名大小写不敏感。

3.标签拥有自己的属性。

i. 分为基本属性：bgcolor = “red” ，可以修改简单的样式效果

ii.事件属性：onclick = “alert(’你好！‘)”；可以直接设置时间响应后的代码。

4.标签又分为，单标签和双标签。

i.单标签格式： <标签名/> <br/换行>

ii.双标签格式：<标签名> …封装的数据…</标签名>

标签不能交叉嵌套

标签在 HTML 页面中创建水平线。

html文档不是很严谨。有时候标签不闭合，也不会报错。

常用标签介绍

font 字体标签

font标签是字体标签，它可以用来修改文本的字体，颜色，大小（尺寸）

color属性修改颜色

face 属性修改字体

size 属性修改文本大小

特殊字符

我是&lt;br&gt;标签

小高&nbsp;&nbsp;&nbsp;好棒！

标题标签

<h1 align = "left"> 标题1</h1>
<!-- align 是对齐属性-->
<!--left 左对齐(默认) center 剧中对齐 right 右对齐-->
<h2 align = "right"> 标题2</h2>
<h3 align = "center"> 标题3</h3>

超链接

在网页中所有点击之后可以跳转的内容都是超链接

<!--- a 标签是超链接
        href属性设置连接的地址
        target属性设置哪个目标进行跳转
             _self 表示当前页面
             _blank 表示打开新页面来进行跳转
      -->
<br/>
<a href="https://www.bilibili.com/video/BV1Y7411K7zz?p=13"> 百度</a><br/>
<a href="https://www.bilibili.com/video/BV1Y7411K7zz?p=13"> 百度</a><br/>
<a href="https://www.bilibili.com/video/BV1Y7411K7zz?p=13"> 百度</a><br/>

列表标签

无序标签，有序标签，定义列表

<!-- 列表标签
ul 是无序列表，ol 是有序列表，li 是列表项，type属性可以修改列表项前面的符号
-->
<ol><!--- 有序列表-->
    <li>赵四</li>
    <li>赵四</li>
    <li>赵四</li>
    <li>赵四</li>
    <li>赵四</li>
</ol>
<ul type="none"><!--- 无序列表--->
    <li>赵四</li>
    <li>赵四</li>
    <li>赵四</li>
    <li>赵四</li>
    <li>赵四</li>
</ul>

img标签

 <!--- img标签是图像标签，用来显示图片
       src属性可以设置图片的路径
       width属性设置图片的路径
       height属性设置图片的高度
       border属性设置图片边框大小
       alt属性设置当指定路径找不到图片时，用来代替显示的文本内容

       在javaSE中路径也分为相对路径和绝对路径。
         相对路径：从工程名开始算
         绝对路径：盘符：/目录/文件名
       在web中路径分为相对路径和绝对路径俩种
         相对路径：
          .  表示当前文件所在的目录
          .. 表示当前文件所在的上一级目录
          文件名  表示当前文件所在目录文件，相当于./文件名     ./可以省略
         绝对路径：
            格式： http://ip:port/工程名/资源路径
      -->
<img src = "../imgs/1.jpg" width = "200" height = "250"  border="10" alt="找不到图片" />

表格标签

 <!--
  
  需求1：做一带表头的，三行，三列的表格，并显示边框
  需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

      table 标签时表格标签
          border 设置表个标签
          width  设置表格宽度
          height 设置表格高度
          align 设置表格相对于页面的对齐方式
          cellspacing 设置单元格间距
          tr 是行标签
          th 是表头标签
          td 是单元格标签


          b 加粗标签
  -->
<table align="center" border="1" width="300" heigth="300" cellspacing="5" >
    <tr>
        <th>1.1<b></th>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

跨行跨列表格

colspan   属性设置跨行
rowspan   属性设置跨列

iframe框架标签(内嵌窗口)

iframe标签可以在一个html页面上，打开一个小窗口，去加载一个单独的页面。

 我是一个完整的单独页面<br/><br/>
<!--ifarme标签可以在页面上开辟一个小区域显示一个单独的页面
     iframe和a标签做和使用的步骤：
           1 在ifarme标签中使用name属性定义一个名称
           2 在a 标签的额traget属性上设置iframe的name属性

-->
 <iframe scr ="html1.html" width="1000" height="1000" name = "abc"></iframe>
 <br/>

 <ul>
     <li><a href="html1.html" target="abc">0_标签语法.html</a></li>

 </ul>

表单标签

什么是表单？

表单就是html页面中收集用户信息的所有元素集合，然后把这些信息发送给服务器。

<!--
   需求1：创建一个个人信息注册的表单信息，包含用户名，密码，确认密码。 性别（单选），兴趣爱好（多选），国籍（下拉列表）
   隐藏域，自我评价（多行文本域）。重置，提交。
-->
    <!--
      form标签就是表单
         input type = text 是文本输入  value 设置默认现实内容
         input type = password 是密码输入框
         input type = radio 是单选框 name属性可以对其进行分组 checked ="checked" 表示默认选中
         select 标签是下拉列表框
         option 标签是下拉列表框中的选项 selected = "selected" 设置默认选中
         textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
              rows 属性设置可以显示几行的高度
              cols 属性设置每行可以显示几个字符高度
         input type=reset  是重置按钮  value 属性修改按钮上的文本
         input type=submit 是提交按钮  value 属性修改按钮上的文本
         input type=button 是按钮     value 属性修改按钮上的文本
         input type=file   是文件上传域
         input type=hidden 是隐藏域  当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）



     -->

     <form>
         <h1 align="center">用户注册</h1>
         <table align="center">
             <tr>
                 <td>用户名称：</td>
                 <td>
                 <input type="text" value="默认值"/>                        </td>
             </tr>
             <tr>
                 <td>用户密码:</td>
                 <td>
                 <input type="password" value="abc"/>
                 </td>
             </tr>
             <tr>
                 <td> 确认密码：</td>
                 <td>
                 <input type="password" value="abc"/>                      </td>
             </tr>
             <tr>
                 <td> 性别：</td>
                 <td><input type="radio" name="sex" checked="checked"/>男
                 <input type="radio" name="sex"/>女
                 </td>
            </tr>
             <tr>
                 <td>兴趣爱好：</td>
                 <td><input type="checkbox" checked="checked"/>java
                 <input type="checkbox"/>javaScript
                 <input type="checkbox"/>C++
                 </td>
             </tr>
             <tr>
                 <td>国籍：</td>
                 <td>
                     <select>
                        <option>--请选择国籍--</option>
                        <option>中国</option>
                        <option>美国</option>
                        <option>日本</option>
                      </select>
                 </td>
             </tr>
             <tr>
                 <td>自我评价:</td>
                 <td>
                     <textarea rows="10" cols="20">我才是默认值</textarea>
                 </td>
             </tr>
             <tr>
                 <td>
                     <input type="reset" value="重置"/>
                 </td>
                 <td align="center">
                     <input type="submit" />
                 </td>
             </tr>

         </table>
     </form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Grq70T5S-1637401516117)(C:\Users\小高\AppData\Roaming\Typora\typora-user-images\image-20211120171712369.png)]

表单提交

  <!--
     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" value="默认值"/></td>
     </tr>
     <tr>
         <td>用户密码:</td>
         <td><input type="password" value="abc"/></td>
     </tr>
     <tr>
         <td> 确认密码：</td>
         <td><input type="password" value="abc"/></td>
     </tr>
     <tr>
         <td> 性别：</td>
         <td><input type="radio" name="sex" checked="checked"/>男
             <input type="radio" name="sex"/>女
         </td>
     </tr>
     <tr>
         <td>兴趣爱好：</td>
         <td><input type="checkbox" checked="checked"/>java
             <input type="checkbox"/>javaScript
             <input type="checkbox"/>C++
         </td>
     </tr>
     <tr>
         <td>国籍：</td>
         <td>
             <select>
                 <option>--请选择国籍--</option>
                 <option>中国</option>
                 <option>美国</option>
                 <option>日本</option>
             </select>
         </td>
     </tr>
     <tr>
         <td>自我评价:</td>
         <td>
             <textarea rows="10" cols="20">我才是默认值</textarea>
         </td>
     </tr>
     <tr>
         <td>
             <input type="reset" value="重置"/>
         </td>
         <td align="center">
             <input type="submit" />
         </td>
     </tr>

    </table>
 </form>

其他标签

<!--div,span,p标签
 div标签 默认独占一行
 span   它的长度是封装数据的长度
 p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p> p 段落标签1</p>
<p> p 段落标签2</p>

编码小生

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html常识

HTML文件书写规范<html>   <head> <title> 标题 </title> </head> <body>  <!-- 页面
复制链接

扫一扫