html/css(1)

目录

hr:

列表:

费曼技巧案例

特殊符号:

table:

表格合并:

表格案例:

表单:

外部样式表:

行内样式:

优先级:


hr:

<!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>
  <hr color="red">
  <hr color="green">
  <hr color="blue">

  <hr color="orange" width="300px">
  <hr color="pink" width="600px">
  <hr color="red" width="600px" align="left">
  <hr color="red" width="600px" align="right">

  <hr noshade>
</body>
</html>

列表:

<!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>
  <ol type="a" start="3">
    <!-- 有序标签,自动生成序号
    type-1,a,A,i,I-标签类型
    start-只能是数字
   -->
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ol>
<!--无序列表ul只能放li,li里面可以放其他值
默认是实心圆
type:disc,circle,square,none  -->
  <ul type="none">
    <li>真羊羔</li>
    <li>真穷张</li>
    <li>qqqqqqqqqq</li>
  </ul>

  <!-- 自定义列表 -->
  <dl>
    <dt>卧室图片</dt>
    <dd>我是文字</dd>
    <dt>你是狗</dt>
  </dl>
  <dl>
    <dt>卧室图片</dt>
    <dd>我是文字</dd>
    <dt>你是狗</dt>
  </dl>
  <dl>
    <dt>sdsd</dt>
    <dt>sdsd</dt>
    <dt>sdsd</dt>
  </dl>
</body>
</html>

费曼技巧案例

<!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>
  <h1>费曼技巧</h1>
  <img src="code/v2-b215873710cbe674f35effeec6852346_hd.jpg" alt="alt">
  <p><strong>- 什么是费曼方法?</strong> </p>
  <p>费曼学习法的灵感源于诺贝尔物理奖获得者理查德•费曼(Richard Feynman),运用费曼技巧,你只需花上20分钟就能深入理解知识点,而且记忆深刻,难以遗忘。知识有两种类型,我们绝大多数人关注的都是错误的那类。第一类知识注重了解某个事物的名称。第二类知识注重了解某件事物。这可不是一回事儿。著名的诺贝尔物理学家理查德·费曼(Richard Feynman)能够理解这二者间的差别,这也是他成功最重要的原因之一。事实上,他创造了一种学习方法,确保他会比别人对事物了解的更透彻。
    ————————————————
    版权声明:本文为CSDN博主「onehao」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/onehao/article/details/90028065</p>
</body>
</html>

特殊符号:

<!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>
  <p>&nbsp;&nbsp;而非俗爱繁荣你发我如果认为该一到平稳</p>
  <p>&emsp;恩爱覅价格我日IGiitrig</p>
  <p>&copy;</p>
  <p>第一个&lt;标签&gt;</p>
  <p>
    <hr noshade="noshade">
  </p>
  <p>&trade;&reg;</p>
  <p>&#123520;</p>
</body>
</html>

table:

<!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>
  <!-- width 百分比  相对于父元素的 -->
  <table border="1" width="50%" hight="80%" align="center" bordercolor="red" bgcolor="yellow" cellspace="10" cellpadding="10">
    <!-- cellspace 单元格与单元格间距
    cellpadding 内容与单元格之间的间隙 -->
    <tr bgcolor="pink" height="200" align="center" valign="top">
      <!-- align文字水平对齐left,right,center
      valign 文字垂直对齐  top middle,bottom -->
      <td weight="100" height="100" bgcolor="blue" align="right" 
      valign="botton">1</td>
      <!--如果一个单元格设计宽度,影响的是一整列的宽度 -->
      <!--如果一个单元格设计高度,影响的是一整列的高度 -->
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
  
</body>
</html>

表格合并:

<!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>
  <table border="10" width="800" hight="800" align="center" >
   <tr>
     <td>否</td>
   <td colspan="2" rowspan="2">的</td>
   <!-- colspan列合并 -->
   <!-- <td>好</td> -->
  </tr>
   <tr>
     <td rowspan="2">与</td>
   <!-- <td colspan="2">看</td> -->
   <!-- <td>与</td> -->
  </tr>
   <tr>
   <!-- <td>看</td> -->
   <td colspan="2">我</td>
   <!-- <td>吗</td> -->
  </tr>
   
  </table>
  
</body>
</html>

表格案例:

<!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>
  <table border="1" cellspacing="0" cellpading="0" align="center">

    <tr height="50"align="center">
      <td width="100">会员姓名</td>
      <td width="150"></td>
      <td width="150">出生日期</td>
      <td width="150"></td>
    </tr>
    
    <tr>
      <td>身份证号</td>
      <td colspan="3"></td>
      <!-- <td></td>
      <td></td> -->
    </tr>
    <tr>
      <td>通信地址</td>
      <td colspan="3"></td>
      <!-- <td></td>
      <td></td> -->
    </tr>
    <tr>
      <td>联系电话</td>
      <td colspan="3"></td>
      <!-- <td></td>
      <td></td> -->
    </tr>
    <tr>
      <td>会员卡号</td>
      <td colspan="3"></td>
      <!-- <td></td>
      <td></td> -->
    </tr>
    
  </table>
  
</body>
</html>

表单:

<!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>
  <!-- 提交信息到auction指定的地址 -->
  <form action="http://wwww.baidu.com" method="post">
    用户信息:<input type="text" placeholder="请输入你的用户名,注意大小写"><br/>
    密码:<input type="password" placeholder="请输入你的密码,注意大小写"><br>
    <!-- <input type="submit" value="登入"> -->
    <button type="submit">登入</button>

    <!-- <input type="reset" value="重新输一遍"> -->
    <button type="reset">重新输一遍</button>
    <input type="button" value="aaaaaaaaa">
  </form>
  
</body>
</html>

外部样式表:

<!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>
  <!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
  <style>
    @import url(css/index.css);
  </style>
</head>
<body>
  <h1>1111111111111</h1>
</body>
</html>

行内样式:

<!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>
  <h1 style="color: brown;">1111111111111111</h1>
  <h2 style="color:aquamarine;">222222222222222</h2>
</body>
</html>

优先级:

<!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>
  <link rel="stylesheet"style="text/css" href="css/index.css">
  <style>
    div{
      color: pink;
    }
  </style>
</head>
<body>
  <!-- <h1 style="color: orange;">111111111111</h1> -->
  <div style="width: 200px;height: 200px;height: 200px;">1111111111111</div>
</body>
<!--优先级:!important> 行内>内部样式>外部样式 -->
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值