HTML基础知识详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Onlyfor_Lamb/article/details/114687703

这篇博客介绍了HTML的基本概念，包括行内和块级元素的定义，详细讲解了基础标签如标题、水平线、段落等的使用。还涵盖了列表、表格的创建和定制，以及图片和超链接的插入。此外，还探讨了表单的创建与提交，包括不同类型的input元素和表单数据的GET与POST提交方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编写网页的语言，叫做HTML。规则由W3C制定的。

W3C的主要职责就是确定未来万维网的发展方向,并且制定相关的推荐。

行内元素：跳转a , 图片img , 间隔span , 斜体i , 加粗b , 表单input , 选项select

块级元素：段落p , 无序列表ul , 有序列表ol , 标题h1-h6 , 水平线hr , 分区div

img 和 input 属于行内替换元素，height/width/padding/margin均可用。效果等于块元素。

基础标签

<h1></h1> 标题标签（h1-h6）

<hr> 是单标签，画一条水平线 <br>是单标签，换行

<p></p> 段落，可使文字独占一行

<i></i> 斜体文字 （或em） <b></b> 加粗文字 （strong) <u></u>文字加下划线

<del></del>~~文字加删除线~~ <sup></sup>文字变为上标 <center></center>文字居中

&nbsp 代表一个空格

列表与表格

<ul> <ol>

<li></li> <li></li>

<li></li> <li></li>

</ul> // 无序标签 </ol>//有序标签

对于无序列表ul ,默认为实心圆(disc),

可更改type="disc"(实心圆)，type="circle"(空心圆)，type="square"(实心方块)

对于有序列表ol，默认为数字排序

type="1"(数字)，type="a"或"A"(小写字母或大写字母)，type="i"或"I"(小写或大写罗马字母)

表格table 表格中的行tr 每一行中的单元格td

<table>

<col width="200px"> //第一列宽度

        <tr>

            <td></td> <td></td> ...

        </tr>

        <tr>

            <td></td> <td></td> ...

        </tr>

...

    </table>

table标签中 border="?px"边框大小 cellspacing=""单元格间隙

tr或td标签中可设置height width，align="center"文字对齐方式

表头元素<th></th> 实现文字加粗并居中

合并单元格常用colspan="5"表示此单元格宽度占据5列长度

rowspan="4"表示此单元格高度占据4行长度

例子：简历框架练习

其中7列col属性也可简写为<colgroup span="6" width="100px"> <colgroup span="1" width="200px">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历框架</title>
</head>
<body>
    <table border="1px" cellspacing="0" align="center">
        <col width="100px">
        <col width="100px">
        <col width="100px">
        <col width="100px">
        <col width="200px">    
 <!--可简写为<colgroup span="6" width="100px">  <colgroup span="1" width="200px"> -->
        <tr heigt="40px">
            <th colspan="5" >个人简历</th>
            
        </tr>
        <tr heigt="40px" align="center">
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>照片</td>
        </tr>
        <tr heigt="40px" align="center">
            <td>学历</td>
            <td></td>
            <td>籍贯</td>
            <td></td>
        </tr>
        <tr heigt="40px" align="center">
            <td>电话</td>
            <td></td>
            <td>政治面貌</td>
            <td></td>
        </tr>
        <tr heigt="40px" align="center">
            <td >毕业院校</td>
            <td colspan="3"></td>
        </tr>
        <tr heigt="40px" align="center">
            <td >求职意向</td>
            <td colspan="3"></td>
        </tr>
       
    </table>
</body>
</html>

图片与超链接

<a href=""> </a> 超链接如果想要此链接打开新的页面可增加target="_blank"

<img src="" title="" alt=""> 图片可调整width或height="??px" 引号内也可设置为100%（撑满整张屏幕）

title鼠标滑上去时显示的文字 alt图片加载失败后的文字

图片的路径： ../表示上层目录

表单与提交

<form action=""></form> 表单，action指向要提交表单的地址。所有要提交的数据的Input中必须有name属性

<input type=" ">输入框 type如 text文本,password密码,button按钮,radio单选,chexkbox复选框，file文件选择框，

在表单中时，type为submit是提交，最终提交在form的action地址中。type为reset时是重置表单中输入框为空。

input按钮的文字中使用value属性，如

<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">

input必须放入form内才能提交。

<form method=""></form> method属性有get和post两种取值，在数据传输过程中分别对应了HTTP协议中的GET和POST方法。（get获取数据 post提交数据）两种只是在传递数据的方式上不同。

Get将表单中数据写在地址栏上用户可见。（按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；）get请求不能提交大量数据，但是Post可以。

Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。post是更加隐私的。

HTML（1）

基础标签

列表与表格

图片与超链接

表单与提交