web中HTML的基础知识点_web里面.-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73473737/article/details/127642664

这篇博客介绍了HTML中的基础知识点，包括标题标签、段落标签、换行标签、布局标签、图像标签和路径、超链接标签的使用，如外部链接、内部链接、空链接和锚点链接。此外，还详细讲解了表格标签的创建、属性设置、单元格合并以及列表标签的运用。重点阐述了表格的align、border、cellpadding、cellspacing等属性和跨行、跨列合并的方法。

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

html中的常用标签

1. 标题标签

<h1>---<h6> h为head的缩写特点:1.标题文字更粗 2.一个标题独占一行

2.段落标签

<p></p> p为paragraph的缩写

3.换行标签

<br/> 第一个单标签

4.标签布局

<div></div> 一行只放一个div 类似于一个大盒子，里面装东西

<span></span> 一行可以放多个<span>,小盒子

5.图像标签和路径

<img src = "图像在电脑中的位置"/> 第二个单标签

src (属性) : 指定图像文件的路径和文件名

拓展1. 当图像显示不出来时用文字替换 ; 当鼠标放在图片上时会显示字

例: <img src="images/img1.jpg" alt = "图片加载失败" />

路径标签包括 : 相对路径和绝对路径:

相对路径(图片相对于HTML的路径) : 1.同一级路径 (在同一个文件夹里(直属文件夹))

2.下一级路径(图片所在位置被包含于html所在文件夹)

3. 上一级路径(html所在位置被包含于图片所在位置)

绝对路径 : 1.文件在电脑中的位置

2.文件在网站中的位置

6.超链接标签

外部链接

a为anchor 锚的缩写

href : 用于指定连接目标的url地址

target : 用于指定连接页面的打开方式 , 其中_self为默认值(跳转到另一个页面的同时,原页面会消失) ,_blank(跳转到另一个页面时,保留原页面)

内部链接

<a href = "T1.html" ></a> 网站内部页面相互链接

空链接

<a href = "#"></a>

锚点链接

<h1 id = "haohaodushu"></h1> 点击链接时快速定位到页面的某个位置

<a href = "#haohaodushu"></a>

7.注释标签和空格标签

ctrl + / ; &nbsp

8.表格标签

one

1.<table></table> 用于定义表格标签

2.<tr></tr> 定义表格中的行,必须嵌套在 table 标签中

3.<td></td> 用于定义表格中的单位格,必须嵌套在<tr></tr>中

4.<th></th> 类似于td 不同于td的地方在于其在tr中加粗并居中

two 表格属性

属性名 : align , border , cellpadding , cellpadding , cellspacing , width , height.

align : 属性值为 left , center , right 规定表格相对周围元素的对齐方式

border : 属性值为"1"或"" 规定表格单元格是否有边框, " 1 "代表有

cellpadding : 属性值为像素值规定文字与边框的距离

cellspacing : 属性值为像素值规定单元格之间的空白

width : 设置表格宽度

height : 设置表格高度

three 合并单元格

1. 跨行合并 : rowspan = "合并单元格个数" 上侧为目标单元格

2. 跨列合并 : colspan = "合并单元格个数" 左侧为目标单元格

9.列表标签

1. 布局页面 : 无序列表 , 有序列表 ,自定义列表

无序列表 : < ul ></ul>为无序列表标签 <li></li> 为列表项

注意点 : <ul>中只能放<li>标签为<li>中可以放任何标签

有序列表 : <ol></ol> 为有序列表其他与无序列表差不多,有序指有特定顺序

自定义列表 :

(一大哥,带一群小弟)

2.表单标签

有实例看代码

 <!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>Document</title>
</head>
<body>
    <h4>青春不常在,抓紧谈恋爱</h4>
    <table width="600"  border="1">
    <tr><td>性别:</td>
        <td><input type="radio" id="NAN" name="sex"><label for="NAN"> <img src="">男 </label> 
        <input type="radio" id="NU" name="sex"><label for="NU"> <img src="">女 </label></td></tr>
    <tr>
        <td>生日:</td>
        <td>
            <select>
                <option>---请选择年份---</option>
                <option>2000</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
            </select>
            <select>
                <option>---请选择月份---</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>所在地区</td>
        <td><input type="text" value="周子健很帅"</td>
    </tr>
    <tr>
        <td>婚姻状况</td>
        <td>
            <input type="radio" name="marry" id="wzwz" checked="checked"><label for="wzwz">已婚</label>
            <input type="radio" name="marry" id="wzwzw"><label for="wzwzw">未婚</label>
            <input type="radio" name="marry" id="wzwzwz"><label for="wzwzwz">离异</label>
        </td>
    </tr>
    <tr>
        <td>学历</td>
        <td><input type="text" value="博士后"></td>
    </tr>
    <tr>
        <td>喜欢的类型:</td>
        <td><input type="checkbox" name="love" id="xzxz"> <label for="xzxz">   清纯的 </label>
            <input type="checkbox" name="love"> 妩媚的
            <input type="checkbox" name="love"> 性感的
            <input type="checkbox" name="love"> 御姐的
            <input type="checkbox" name="love"> 萝莉的
    </tr>
    <tr>
        <td>自我介绍:</td>
        <td><textare>自我介绍</textare></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="submit" value="免费注册">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="checkbox" checked="checked"> 我同意加入非诚勿扰会员
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <a herf="#">我是会员立即登录</a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <h5>我承诺</h5>
            <ul>
                <li>年满十八周岁</li>
                <li>单身</li>
                <li>真心交友</li>

            </ul>
            
        </td>
    
    </table>

    
</body>
</html>