• 【前端开发】HTML1


    HTML标签

    HTML全称 Hypertext Markup Language (超文本标记语言)
    通过一系列的标签来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。
    双标签:拥有开始标签和结束标签,内容位于两者之间

    <p>这是一个段落p>
    <h1>这是一个标题h1>
    <a href="#">这是一个超链接a>
    
    • 1
    • 2
    • 3

    单标签:用于没有内容的元素

    <input type="text">
    <br>
    <hr>
    
    • 1
    • 2
    • 3

    HTML文件结构

    一般结构

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML 练习title>
    head>
    <body>
        
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    HTML含6个标题标签,文本样式能进行如下更改:字体加粗、斜体、下划线、删除线。

    <body>
        <h1>一级标题标签h1>
        <h2>二级标题标签h2>
        <h3>三级标题标签h3>
        <h4>四级标题标签h4>
        <h5>五级标题标签h5>
        <h6>六级标题标签h6>
        <p>这是一个段落标签p>
        <p>更改文本样式:<b>字体加粗1b>p>
        <p>更改文本样式:<strong>字体加粗2strong>p>
        <p>更改文本样式:<i>字体斜体i><u>下划线u><s>删除线s>p>
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    无序列表ul包含几个li标签

    <ul>
            <li>无序列表元素1li>
            <li>无序列表元素2li>
            <li>无序列表元素3li>
        ul>
    
    • 1
    • 2
    • 3
    • 4
    • 5

    有序列表ol

    <ol>
            <li>有序列表元素1li>
            <li>有序列表元素2li>
            <li>有序列表元素3li>
        ol>
    
    • 1
    • 2
    • 3
    • 4
    • 5

    表格标签table,行标签tr,第一行是列标题th,每一行含很多td(表格数据)

    <table border="1">
            <tr>
                <th>列标题1th>
                <th>列标题2th>
                <th>列标题3th>
            tr>
            <tr>
                <td>元素1td>
                <td>元素2td>
                <td>元素3td>
            tr>
            <tr>
                <td>元素1td>
                <td>元素2td>
                <td>元素3td>
            tr>
            <tr>
                <td>元素1td>
                <td>元素2td>
                <td>元素3td>
            tr>
        table>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    HTML标签属性

    属性用于定义元素的行为和外观,以及与其他元素的关系
    基本语法:<开始标签 属性名="属性值">
    每个HTML元素可以具有不同属性
    属性名称不区分大小写,属性值区分大小写

    适于大多数HTML元素的属性
    class: 为HTML元素定义一个或者多个类名
    id: 定义元素的唯一ID
    style: 规定元素的行内样式

    超链接
    href 引用链接
    target 链接打开到的页面
    br 换行
    hr 分割线

    <body>
        <a href="https://docs.geeksman.com">超链接a>
        <br>
        <a href="https://docs.geeksman.com" target="_blank">超链接2a>
        <hr>
        
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    图片 src 图片来源 alt 若图片无法显示则显示alt

    <body>
        
        <img src="imag1.png" alt="" width="200" height="100">
        <hr>
        <img src="imag.png" alt="该图片无法显示">
        <hr>
        <img src="https://img.xz7.com/d/file/2023/05-31/86f3bf454de052bc58db253c0fd93bd1.png" alt="">
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
  • 相关阅读:
    锅炉智能制造工厂工业物联数字孪生平台,推进制造业数字化转型
    哈夫曼树实现哈夫曼编码(C++)
    【微软漏洞分析】MS15-023 Win32k 特权提升漏洞 - CVE-2015-0078 + 绕过(CVE-2015-2527 in MS15-097)
    【RcoketMQ】RcoketMQ 5.0新特性(二)- Pop消费模式
    【Python开发(基础/后端/安全开发)】专栏文章汇总
    同旺科技USB to I2C 适配器烧写 Arduino 模块
    四)Stable Diffussion使用教程:图生图
    Flink CDC 2.0 主要是借鉴 DBLog 算法
    如何平衡新老策略的好与坏,一道常见风控送命题解答
    Qt扫盲-QListView理论总结
  • 原文地址:https://blog.csdn.net/vox520/article/details/136490290