Java小易——HTML

最新推荐文章于 2026-01-04 19:13:21 发布

原创最新推荐文章于 2026-01-04 19:13:21 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML的基础概念，包括其作为超文本标记语言的角色，以及如何使用各种标签进行页面布局和内容展示。从无语义标签如div和span，到有语义标签如a、input、select等，涵盖了表单元素、多媒体元素、列表和表格等多种应用场景。

HTML:

HTML:超文本标记语言，一般只要一ML结尾的东西，都叫标记性语言

如XML，HTML这样的东西，其实和.txt没有任何本质区别，只不过不管是XML，还是HTML，都加入了对格式的要求，而这个格式，是给解释这个格式的解释器看的，如果你不遵守其实也无所谓

但是你要是遵守这个格式，你就能得到更好的展示样式，存储读取的速度和数据管理优势

<!-- 对于这个东西，我们叫他标签式语言，标签是用<>来声明使用的，而且你可以随便定义-->
<!--随便定义就可能引起一些问题---- 浏览器不认识-->
<!--对于不是对边定义的标签，是HTML约定的具有内容或者一定意义的标签，那么浏览器是可以直接解释的--><!--一个HTML文件，一定有一根标签，叫做html 所有其他的布局过程等，都在html这个根标签里面-->
<!--根标签里面，一般包含两个子标签，一个叫做head，一个叫做boby-->
<!--head里面，一般放的内容都是一些导入文件，配置等相关的内容，而Body里面放置的是页面的骨架-->
<!DOCTYPE html>
<html>
    <head>        
        <meta charset="UTF-8">        
        <title>登陆</title>    
    </head>    
    <body style="margin: 0px; padding:0px; border: 0px;">
         <!-- div 块标签，负责在页面中占据一行 -->
        <!-- 不设置高度则内容有多高，盒子有多高-->
        
        <!--块标签可设置大小，行标签靠内容撑开，不可设置大小-->    
        <!--一、块标签，负责在页面中独占据一行 无语意标签-->
            <div style="height: 30px"></div>   
        <!--二、inline 行标签，具体代表的意思一小块 不能设置高度-->
            <span style="width: 300px">aaa</span>    
        <!--以上两种无语义标签都是用来布局用的-->    
        </body>
</html>

<!-- 无语义标签是用来布局的-->
        <!-- span 行标签,具体代表的意思是一小块-->
        <!-- 行标签的大小是靠内容撑开的 inline格式-->
        <!-- 可以用display关键字来设置格式-->
        <span style="width:30px; height: 30px">aaa</span>
        <span style="width:30px; height: 30px">bbb</span>

有语义标签

<!--锚标签，href后跟一个超链接，点击忘记密码后跳到链接-->
<a href="http://www.baidu.com">忘记密码</a>
    <input type="checkbox">勾选<br>   <!--br为一行-->
    <input type="color">颜色<br>
    <input type="search">搜索<br>
<!--下拉框选项-->
<select>
    <option>男</option>
    <option>女</option>
</select>

在不同的浏览器之间的html的body style不一样，所以再写页面的时，一般要先设置body style（margin =0px，border = 0px，padding = 0px）

<body style="margin: 0px; padding: 0px; border: 0px"> ...  <body>

式样调整（CSS）

内联样式优先级最高

内部样式次之:

<style> 
body {
                margin: 0px;
                padding: 0px;
                border: 0px;
            }
<style>

两者不会冲突，按优先级操作。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>登陆</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
                border: 0px;
            }

            div {
                margin: 8px;
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div style="background-color: aquamarine"></div>
        <div></div>
        <div></div>

    </body>

</html>

一些标签的介绍：

<!-- 锚标签  默认inline 类型-->
    <a href="#"> 转到一个页面</a>

<audio src="?"> 放置声音的标签</audio>

 <strong> 加粗  但可能会被当做关键字能被搜索</strong>

    <b> 也是加粗  但不会被当做关键字搜索</b>

<br> 换行单标签 不会破坏当前盒子结构

<button> 按钮</button>
<button onclick="alert()"> 点击按钮之后执行一个脚本</button>
<input type="button" value="按钮">
<input type="hidden" name="sec" value="mmm">只要有name，此标签的内容就会发给后台
<input type="checkbox">带对勾的选项框
<input type="color">颜色 <br>
    <input type="file">选择文件 <br>
    <input type="search">搜索框 <br>

<img src="图片名">展示一个图片

    <iframe style="width: 100px; height: 100px; " src="myh5.html"> 展示你所选择的网页</iframe>

<nav>一般用来做导航栏，实质就是一个div</nav>

<p>段落标签 一般用来写文章，新闻之类的</p>

<select name="sele">    这是一个下拉选项框    通过name把所选择的value传给后台     <option value="1">一月</option>   
  <option value="2">二月</option>   
  <option value="3">三月</option>
</select>

<table>表
        <thead><tr>一行</tr></thead>
        <tbody><td>一列</td></tbody>
        <tfoot><td colspan="3"> 三列合并</td></tfoot>
</table>

<textarea>可变动文本框</textarea>

	<ul>没有列标号的列表
        <li>按列显示内容</li>
        <li>第二列</li>
    </ul>

    <ol>有标号的列表
        <li>第一列</li>
        <li>第二列</li>
    </ol>

<template style="display: none">模板标签,不展示给外界</template>