【前端攻略--HTML/CSS】HTML与CSS

<!--绝对路径，第一个字符是斜杠，那么就是绝对与网站的根路径-->
    <img src="/img/timg.jpg"/>
    <!--相对路径，相对于当前文件的路径-->
    <img src="img/timg.jpg"/>
    <!--相对路径，同上（等价）-->
    <img src="./img/timg.jpg"/>
<!--../寻找上一层相对路径-->
    <img src="../img/timg.jpg"/>

! renren
0.0.0.0 click.jebe.renren.com
0.0.0.0 cupid.jebe.renren.com
0.0.0.0 shaft.jebe.renren.com
0.0.0.0 jebe.renren.com
0.0.0.0 jebe.xnimg.cn----- 效果很好
 
! baidu
0.0.0.0 a.baidu.com
0.0.0.0 baidutv.baidu.com
0.0.0.0 bar.baidu.com
0.0.0.0 c.baidu.com
0.0.0.0 cjhq.baidu.com
0.0.0.0 cpro.baidu.com
0.0.0.0 drmcmm.baidu.com
0.0.0.0 e.baidu.com
0.0.0.0 eiv.baidu.com
0.0.0.0 hc.baidu.com
0.0.0.0 hm.baidu.com
0.0.0.0 ma.baidu.com
0.0.0.0 nsclick.baidu.com
0.0.0.0 spcode.baidu.com
0.0.0.0 tk.baidu.com
 
0.0.0.0 ucstat.baidu.com
0.0.0.0 union.baidu.com
0.0.0.0 unstat.baidu.com
0.0.0.0 utility.baidu.com
0.0.0.0 utk.baidu.com
0.0.0.0 focusbaiduafp.allyes.com----但是百度官网上的广告去不掉

<!--列表都属于块级标签-->
    <!--无序列表：没有序号的列表-->
    <!--语义：方便搜索引擎和同事理解你的代码-->
    <ul>
      <li>苹果</li>
      <li>雪梨</li>
      <li>香蕉</li>
      <li>菠萝</li>
    </ul>

<!--有序列表：有序号列表-->
    <ol>
      <li>苹果</li>
      <li>雪梨</li>
      <li>香蕉</li>
      <li>菠萝</li>
    </ol>

<!--自定义列表-->
    <dl>
      <dt>凤谋天下：毒后浴火归来！</dt>
      <dd>大燕帝后华家孤女，重活一世偷天换日。朝堂诡谲人心险恶，翻手为云覆手为雨。</dd>
      <dt>影后养成：扑倒男神大人！</dt>
      <dd>徐栩霉运不断，被亲生父亲算计，错惹上霸道总裁沈墨岑，却从此走上了人生巅峰</dd>
      <dt>影后养成：扑倒男神大人！</dt>
      <dd>徐栩霉运不断，被亲生父亲算计，错惹上霸道总裁沈墨岑，却从此走上了人生巅峰</dd>
    </dl>

<!--form标签将需要输入的内容，一并提交给服务器-->
    <!--action:这个属性要设置表单提交给的服务器-->
    <!--get:将数据直接放到请求路径里面，直接就可以看得到,简单、方便、快捷、性能好，缺点：不安全，一般用于搜索-->
    <!--post:将数据放在请求的主体里面，不能直接看到,更安全,文件上传的时候，也只能用POST-->
    <form action="./" method="post">
      <!--input是输入标签 文本输入框，type类型为text,name是告诉服务器，这个值是干嘛的-->
      <!--placeholder:预置文字-->
      <input type="text" name="username" value="" placeholder="请输入用户名" />
      <!--密码输入框，type:password-->
      <input type="password" name="password" value="" placeholder="请输入密码" />
      <!--file文件上传-->
      <input type="file" name="fileupload" id="" value="" />
    
      <input type="color" name="color" id="color" value="" />
      <!--输入标签， type:类型：提交按钮类型 ，value按钮所显示的文字-->
      <input type="submit" value="提交"/>
    </form>

/* *代表通配符，代表所有元素*/
*{
        margin:0;
        padding:0;
        /*
           border-box:width和高度是加上了边框和内边距和内容
           content-box:宽度和高度是只有内容
         * 
         * */
        box-sizing: border-box;
        /*box-sizing: content-box;*/
      }

/*统一设置所有的内边距*/
        padding: 50px;

/*顺时针的运行：上、右、下、左*/
        padding: 20px 30px 40px 50px;

/*设置上下、左右*/
        padding: 40px 20px; 

/*设置：上、左右、下*/
        padding: 40px 20px 30px;

/*设置上边距*/
        padding-top: 10px;

/*设置下边距*/
        padding-bottom: 10px;

设置左边距/*padding-left: ;*/

设置右边距/*padding-right: ;*/

/*设置背景图片不重复*/
        background-repeat: no-repeat;

/*设置背景图片的位置*/
        background-position: center;

/*设置背景图片的尺寸*/
        background-size: 200px auto;

/*字体大小*/
        font-size:50px ;

/*字体颜色（有三种方法，详细上网查 https://blog.csdn.net/kh896424665/article/details/76871618）*/    
/*英文单词、色值，rgb值*/rgba（a是透明度）
        color: rgb(255,255,255);

/*文字的位置*/
        text-align: center;

/*这个设置可以让div元素水平居中*/
     margin: 0 auto;

/*inline是没有宽高的，只有inline-block和block是有宽高*/
     display: inline-block;

/*浮动解决高度不一致，以及间距问题*/
  float: left;

/*去掉下划线*/
  text-decoration: none;

/*设置溢出隐藏*/
  overflow: hidden;