• HTML相关

    标题：HTML 标题（Heading）是通过

    -

    等标签进行定义的。

    1. <h1 align="center">一级标题并且居中显示h1>
    2. <h2>二级标题h2>
    3. <h3>三级标题h3>

    段落：HTML 段落是通过

    标签进行定义的。以及一些修饰段落的标签

    1. <p>段落p>
    2. <b>加粗b>
    3. <i>斜体i>
    4. <u>下划线u>
    5. <s>删除线s>

    链接：HTML 链接是通过 标签进行定义的。

    <a href="http://www.w3school.com.cn">一个链接a>

    图片：HTML 图像是通过 标签进行定义的。

    <img src="w3school.jpg" width="104" height="142" />

    结束标签与换行标签

    1. <p>该内容不在页面中显示p>
    2. <br>

    HTML注释

    2. <p>这是一段普通的段落。p>

    标记一个缩写

    1. 一段<abbr title="弹出的内容">鼠标在此停留会弹出小标签abbr> 文字
    2. <acronym title="弹出的内容">鼠标在此停留会弹出小标签acronym>

    嵌入小程序：<applet> 标签在 HTML 4 中用于定义嵌入式小程序（插件）。

    1. <applet code="Bubbles.class" width="350" height="350">
    2. 嵌入的小程序名称
    3. applet>

    有序与无序列表：两个列表可以嵌套

    1. <h2>无序列表h2>
    2. <ul>
    3.     <li>无序列表前方有个点li>
    4.     <li>列表内容li>
    5. ul>
    6. <h2>有序列表h2>
    7. <ol>
    8.     <li>有序列表前方有一列数字li>
    9.     <li>列表内容li>
    10. ol>

    插入图像

    src资源路径:
        相对路径: 访问站内资源时使用
            1. 资源和页面在同一目录:直接写图片名
            2. 资源在页面的上级目录: ../图片名
            3. 资源在页面的下级目录:文件夹名/图片名
        绝对路径:访问站外资源时使用, 也称为图片盗链,有找不到图片的风险
        alt:当图片不能正常显示时显示的文本
        title:图片标题 悬停在图片上显示的内容
        width/height:设置宽高
            1. 像素
            2. 百分比
            如果只设置宽度高度会等比例缩放

    1. <img src="aa.png" alt="当图片不能正常显示时显示的文本">
    2. <img src="../b.jpg" title="图片标题 悬停在图片上显示的内容" width="50%">
    3. <img src="abc/c.jpg" width="300" height="300">

    超链接

    1. <a  href="http://www.baidu.com">超链接1a>
    2. <a href="a.png">超链接3a>
    4. <a href="http://www.tmooc.cn">
    5.     <img src="a.png" alt="">
    6. a>
    7. <a href="#top">回到顶部a>

    分区标签

    1. <div>第一行div>
    2. <div>第二行div>
    3. <span>第三行span>
    4. <span>第三行span>

    css内联样式

    2. <h1 style="color: red">显示为红色h1>
    3.

    css内部样式

    1. <head>
    2.     <style>
    3.         h2{
    4.             color: blue;
    5.         }
    6.     style>
    7. head>
    8. <body>
    9. <h2>此处样式为蓝色h2>
    10. body>

    css外部样式

    1. !DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     
    5.     <link rel="stylesheet" href="my.css">
    6. head>
    7. <body>
    8. <h3>此处为绿色h3>
    9. body>
    10. html>
    12. h3{
    13.     color: green;
    14. }

    选择器

    1. head>
    2.     <style>
    3.         /*id选择器*/
    4.         #p1{color: red}
    5.         /*类选择器*/
    6.         .c1{color: blue}
    7.         /*分组选择器*/
    8.         h3,#p1,.c1{background-color: yellow}
    9.         /*属性选择器*/
    10.         input[type='text']{background-color: red}
    11.         input[type='password']{color: green}
    12.         /*任意元素选择器*/
    13.         *{
    14.             /*边框:粗细  样式   颜色*/
    15.             border: 1px solid red;
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <input type="text">红色输入框
    21.     <input type="password">绿色输入框
    22.     <h3>黄色3h3>
    23.     <p id="p1">黄色p><p class="c1">黄色p>
    24.     <div class="c1">黄色div>
    25. body>

    表格

    1. <table border="1">
    2.     
    3.   <tr>
    4.     
    5.     <td colspan="2" align="center">1-1td>
    6.     
    7.     
    8.     <td rowspan="2">1-3td><td rowspan="3">1-4td>
    9.   tr>
    10.   <tr>
    11.     <td>2-1td><td>2-2td>
    12.   tr>
    13.   <tr>
    14.     <td align="center" colspan="3">3-1td>
    15.   tr>
    16. table>
    17. <table border="1">
    18.   <caption>表格名称caption>
    19.   <tr>
    20.     <th>1th><th>1th><th>1th>
    21.   tr>
    22.   <tr>
    23.     <td>1td><td>2td><td>2td>
    24.   tr>
    25. table>

  • 相关阅读:
    金仓数据库KingbaseES安全指南--6.2. 身份验证相关的配置文件
    AD域 - 自动为域颁发证书
    【软件工程】软件工程之道—《人月神话》读后思考
    Linux下如何配置普通用户的sudo命令权限？
    【Java】之Java8新特性
    数据仓库工具hive面试题集锦
    2022第十一届PMO大会（线上会议）成功召开
    2024年江西省三支一扶考试报名详细流程
    Memcached&Redis构建缓存服务器
    Go Slice 排除异己
  • 原文地址：https://blog.csdn.net/weixin_48100716/article/details/126481366