HTML+CSS（1-30）-CSDN博客

本文链接：https://blog.csdn.net/A_loha_/article/details/128464347

一）、前端应用于：网页、管理系统、APP、小程序、智能电视、桌面应用、网页游戏、工具和后端。

二）、HTML:超文本标记语言，非编程语言。

三）、常见标签：

<h></h>、、 （换行）、<hr>（水平线）
（强调，推荐使用strong）、
（倾斜，推荐使用em）、
（删除线，推荐使用del）<s></s>、<del></del>
（划线，下划线，上角标，下角标）、、

 <hr color="red" width="100px" align="left">

四）、特殊符号：

&lt 左尖角号
&gt 右尖角号
&nbsp 空格（受字体影响）
&emsp 空格（写几个就空几个格）
&copy 版权（）
&trade 商标符号（tm）
&reg 商标符号（R）
&#12851x 表情包(x属于0~9)

五）、

<div></div>

div{11111}*3 快捷操作

  <p>早起的鸟儿<span style="color:grey;">有虫吃</span></p>

六）、有序列表

<!--    
  1.  li里可以随便放标签,但ol里只能放li
  2.  type:1,a,A,i,I
      start:只能是一个数字 -->
    
<ol>
   <li>早起</li>
   <li>快乐</li>
   <li>睡觉</li>
</ol>

七）、无序列表

    <!-- type:disk,circle,square,none -->

<ul>
  <li>舅舅</li>
  <li>姨姨</li>
  <li>姐姐</li>
</ul>

八）、自定义列表

<dl>
    <dl>
         <dt></dt>
         <dd></dd>
    </dl>
    <dl>
        <dt></dt>
         <dd></dd>
    </dl>
    <dl>
         <dt></dt>
         <dd></dd>
    </dl>

</dl>

九）、移入图片

  <!-- 同级目录
            1.code.gif
            2.  ./code.gif
            (将图片移入编辑器的文件夹下，alt=""删掉)
         -->

        <img src="地址" alt="">

十）、图片的属性

alt：图片加载不出来，显示提示文字

title：鼠标经过会显示文字

十一）、超链接标签


    <!-- 
        target="_self"  默认值
        target="_blank" 新窗口打开 
    -->
    
<a href="路径" title="鼠标悬停后的提示信息" target="规定在何处打开文档">
    内容</a>

十二）、table表格

<table>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>

        <!-- 快捷操作
           1. table>tr*2>td*2 
           2. table>(tr>td*2)*2
        -->
</table>

十三）、table表格属性

<table 
border="1" width="50px" height="50px"
bordercolor="边框颜色"
bgcolor="背景颜色"
cellspacing="单元格与单元格之间的距离"
cellpadding="单元格与内容之间的空隙">
</table>

十四）、行tr属性

         <tr border="1" bgcolor="grey" height="20px" 
         align="文字水平对齐（left、right、center）"
         valign="文字数值对齐（top、middle、bottom）">
            <td></td>
            <td></td>
        </tr>

十五）、列tr属性

<td border="1" bgcolor="grey" 
    width="20px"
    height="20px" 
    align="文字水平对齐（left、right、center）"
    valign="文字数值对齐（top、middle、bottom）">
</td>

十六）、表格合并

   <tr>
            <td rowspan="单元格合并的列数"></td>
            <td></td>
            <td colspan="单元格合并单的行数"></td>
            <td></td>   
   </tr>

十七）、表单标签

<form action="" method="post">
    用户信息：<input type="text" placeholder="请输入你的用户名，注意大小写"
    name="username">
    密码：<input type="password" placeholder="请输入你的密码">
    <input type="submit" value="登录">
    <input type="reset" value="重置">
</form>

十八）、CSS

<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>

    <style>
        h1{
            color: red;
        }

    </style>
</head>
<body>
    <h1>1111</h1>
    <h2>2222</h2>
    <h3>4444</h3>
</body>
</html>

十九）、外联式