• 学习打卡HTML

    标签

    对大小写不敏感

    <>开始标签</>结束标签，ps：在开始标签中添加斜杠可以关闭空元素，比如<p />

    <html>网页内容</html>

    <head></head>标题内容

    <body></body>页面内容

    <title></title>标题

    <h1></h1>标题，ps：h1-h6数字越小，字体越大

    <p></p>段落

    <img></img>图像  

     <a></a>链接

    <br></br>换行，或者<br />

    <hr />创建水平线

    <!-- comment -->注释

    属性

    <a>中href指定链接地址，href='http:www..com'

    <h1>中align指定对齐方式，align='center'居中

    <body>中bgcolor指定背景颜色，bgcolor='yellow'

    <table> 中border表格边框，border='1'

    以旧换新的<style>标签

    淘汰标签：<center>、<front>、<basefront>、<s>、<strike>、<u>

    淘汰属性：align、bgcolor、color

    替换成<style>background-color属性指定背景颜色，front-family属性指定字体，color属性指定颜色，font-size属性指定字体尺寸，text-align属性指定文本对齐方式

    试试ing

    1. <br>
    2.     <head>
    3.         <title>
    4.             菜鸡本鸡
    5.         </title>
    6.     </head>
    7.     <body background='3.jpg' width='800'>
    8.         <!--添加背景图片-->
    9.         <h1 style="font-family:arial;color:green;text-align:center;font-size:80px;">全球高考</h1>
    10.         <p style="font-family:arial;color:green;font-size:20px;">世界灿烂盛大，欢迎回家</p>
    11.         <a href="http:www.baidu.com" target="_blank">welcome
    12.         <img src="4.jpg" height='100' width='200' alt="秦究游惑"></a>
    13.         <!--alt可替代文本，img放进a里面=将图片作为链接来使用-->
    14.  
    15.     </body>
    16. </html>

    链接

    href属性：指定链接的地址

    target属性：指定被链接的文档在何处显示 

    name属性：命名锚

    新窗口打开百度官网，welcome是元素内容

    <a href="http:www.baidu.com" target="_blank">welcome</a>

    图像 

    src源属性：图像地址

    <img src="1.jpeg" width="104" height="'142"></img>

    alt属性：图像加载不出来，可显示用以替换的文本

    添加背景图片：<background>，若图像与网页不匹配，图像会重复显示

    表格

    html的表格不是预设然后填充的，是写多少数据出现多少表格，这种写法我第一次见到（学得太少了呜呜呜涨见识了家人们）

    border属性：设定表格边框

    <tr>分割各行

    <td>分割各个单元格

    <td>之间不写表示空单元格，缺少边框，为了显示边框，需添加空格占位符&nbsp;

    <th>定义表头

    <caption>定义标题

    逻辑结构如下图

    1.         <h4>一行一列</h4>
    2.         <table border="1">
    3.             <tr>
    4.             <td>100</td>    
    5.             </tr>
    6.         </table>
    7.  
    8.         <h4>一行两列</h4>
    9.         <table border="1">
    10.             <tr>
    11.             <td>100</td> 
    12.             <td>200</td>    
    13.             </tr>
    14.         </table>
    15.  
    16.         <h4>两行两列</h4>
    17.         <table border="1">
    18.             <caption>xiu标题</caption>
    19.             <tr>
    20.             <th>张三</th>    
    21.             <td>300</td>    
    22.             </tr>
    23.             <tr>
    24.             <th>李四</th>    
    25.             <td>400</td>    
    26.             </tr>
    27.         </table>

      

    列表

    <ul></ul>无序列表每行前面有一个小黑圆圈进行标记

    <ul>后还可以加type属性定义多种标记，disc小黑圆圈（默认），circle空心圆圈，square小黑方块

    <ol></ol>有序列表用数字进行标记

    <ol>后也可以加type属性定义多种标记，type="a/A"等都可以，默认是数字，次序依次往后增加

    框架起始于<ul>、<ol>，每个列表项起始于<li>

    <dl>自定义列表

    框架起始于<dl>，每个列表项起始于<dt>，每个列表项的定义起始于<dd>

    嵌套列表中，框架起始<ul>，随后tab键在其中增加<ul>，默认最开始始小黑圆圈-空心圆圈-小黑方块

    1.         <h4>嵌套列表</h4>
    2.         <ul>
    3.             <li>子鼠</li>
    4.             <li>丑牛</li>
    5.                 <ul>
    6.                     <li>寅虎</li>
    7.                     <li>卯兔</li>
    8.                         <ul>
    9.                             <li>辰龙</li>
    10.                             <li>巳蛇</li>
    11.                         </ul>
    12.                 </ul>
    13.         </ul>
    14.         <h4>自定义列表</h4>
    15.         <dl>
    16.             <dt>午马</dt>
    17.             <dd>未羊</dd>
    18.         </dl>

    文本格式化

    文本加粗下标等调整HTML 文本格式化

    块元素和内联元素

    块元素block level element开始新的一行

    内联元素inline element不开始新的元素

    <div>块元素：分割文档（块级元素），例如可以将文档中单独的一个部分显示为绿色

    <span>内联元素：分割文本（行内元素），例如可以为文本中单独的一个部分设置样式属性

     id属性、class属性

    id属性值唯一，class可以使用多次都对大小写敏感，感觉和python里的先写一个函数然后调用差不多

    id属性语法是# + id + {CSS属性}，class属性语法是. + id + {CSS属性}

    1.     <style>
    2.     <!--id-->
    3.     #mystyle1{
    4.         font-family:arial;
    5.         color:green;
    6.         text-align:center;
    7.         font-size:80px; 
    8.     }
    9.     <!--class-->
    10.     .mystyle2{
    11.         font-family:arial;
    12.         color:rgb(78, 203, 241);
    13.         text-align:left;
    14.         font-size:40px; 
    15.     }
    16.     </style>
    17.     <body background='3.jpg' width='800'>    
    18.         <!--调用id-->  
    19.         <h1 id="mystyle1">全球高考</h1>
    20.         <!--调用class-->
    21.         <p class="mystyle2">世界灿烂盛大，欢迎回家</p>
    22.         <p class="mystyle2">世界灿烂盛大，欢迎回家</p>
    23.     </body>

    iframe在网页中显示网页

    src指向链接地址，frameborder规定是否显示边框，等于0时移除

    <iframe src="URL" width="200" height="200" frameborder="0"></iframe>
  • 相关阅读:
    事务并发引发的问题
    【PAT甲级 - C++题解】1042 Shuffling Machine
    Redis超详细总结
    【PDN仿真笔记4-电容布局仿真及结果分析】
    oracle数据库应用技术
    爬虫异常处理实战：应对请求频率限制和数据格式异常
    嵌入式系统开发笔记79：为什么要获取本机网卡IP地址
    设计模式之命令模式
    双链笔记Logseq的安装指南
    云端开炉,线上训练,Bert-vits2-v2.2云端线上训练和推理实践(基于GoogleColab)
  • 原文地址：https://blog.csdn.net/wow0524/article/details/125502682