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

三个基本概念:

  1. HTML负责网页的结构和内容
  2. CSS负责网页的样式
  3. JavaScript负责页面与用户交互(网页完全可以由JS生成)

1.绝对路径与相对路径

相对路径(相对地址):

(1)"." --代表目前所在的目录。如: <img src="./abc.jpg" />

【ps:这种情况下,一般是直接省略“./”,左边的地址即可表示为 <img src="abc.jpg" />】

(2)".." --代表上一层目录。如:<img src="../abc.jpg" />

(3)"../../"-- 代表的是上一层目录的上一层目录。如:<img src="../../abc.jpg" />

绝对路径(绝对地址):

(1)D:\Users\hao\Documents\GitHub\Xixi20160512.github.io/index.html

以上就是绝对地址了,由于这种表示方式过于绝对,因此也不做过多引申。

(2)还有直接前面“/”--也是绝对路径。如:<img src="/abc.jpg"/>

注:这是绝对于IP地址+端口号的地址(就是绝对与网站的根路径)

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

2.hosts的修改应用

hosts的位置:

  • c:\Windows\System32\drivers\etc\hosts

作用:

  • 是域名解析文件。
  • 可以直接用记事本打开。将IP地址重定向。
  • 格式为:ip地址-空格-域名
  • 可以将一个域名重新定向到一个IP

通过它可以达到以下目的:

  • 加快域名解析

对于要经常访问的网站,我们可以通过在 Hosts 中配置域名和 IP 的映射关系,这样当我们输入域名计算机就能很快解析出 IP ,而不用请求网络上的 DNS 服务器。

  • 方便局域网用户

在很多单位的局域网中,会有服务器提供给用户使用。但由于局域网中一般很少架设 DNS 服务器,访问这些服务要输入难记的IP地址,对不少人来说相当麻烦。现在可以分别给这些服务器取个容易记住的名字,然后在Hosts 中建立 IP 映射,这样以后访问的时候我们输入这个服务器的名字就行了。

  • 屏蔽网站

现在有很多网站不经过用户同意就将各种各样的插件安装到你的计算机中,有些说不定就是木马或病毒。对于这些网站我们可以利用 Hosts 把该网站的域名映射到错误的 IP 或自己计算机的 IP ,这样就不用访问了。比如不想访问 www.XXXX.com ,那我们在Hosts写上以下内容:

  • 127.0.0.1 www.XXXX.com #屏蔽的网站
  • 0.0.0.0 www.XXXX.com #屏蔽的网站

这样计算机解析域名就解析到本机或错误的IP,达到了屏蔽的目的。

! 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----但是百度官网上的广告去不掉
  • 顺利连接系统

对于Lotus 的服务器和一些数据库服务器,在访问时如果直接输入IP地址那是不能访问的,只能输入服务器名才能访问。那么我们配置好 Hosts 文件,这样输入服务器名就能顺利连接了。

最后要指出的是,Hosts文件配置的映射是静态的,如果网络上的计算机更改了请及时更新IP地址,否则将不能访问。

  • 强制指定某域名对应某IP地址

另外,病毒也经常通过修改它达到屏蔽某些杀毒软件网站的目的,或阻止杀毒软件升级(一些杀毒软件升级是到指定网站下载程序包,这样可使其下载失败),因此,众多安全软件也提供了HOSTS修复功能(如卡卡)

3.列表与表单

  • 无序列表
<!--列表都属于块级标签-->
    <!--无序列表:没有序号的列表-->
    <!--语义:方便搜索引擎和同事理解你的代码-->
    <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>

4.css

div{ }

容器(块级标签):

宽高、颜色、背景、位置、阴影、3d立体效果、放大缩小

字体设置,大小、颜色、位置、阴影、字体粗细

样式的引用(3种方式):

(1)<style type="text/css">

div{

width: 300px;

height: 300px;

border: 10px solid #000;

}

</style>

----------------------------------------

(2)通过link标签引入css文件

<link rel="stylesheet" href="./css/style.css" />

--------------------------------------

(3)通过元素标签的style属性来设置css

<div style="width: 300px;height: 300px; border: 20px solid deeppink;">你好</div>

三者之间权重关系:

不管顺序怎么,凡是写在style标签里面的样式,权重一定是最高的

style标签和link引入的css,谁在后面那么谁的权重高

user agent stylesheet 浏览器默认设置的样式

类选择器:.类名

id选择器:#ID名称

标签选择器:标签名称

属性选择器:[属性名称]

属性选择器的另外一种方式

---------------------------------------------

[class=div1]{

color: #fff;

font-size: 50px;

}

---------------------------------------------

混合选择:

#id .xx--------------》这个ID所选中的所有里面包裹的类名是xx的所有元素

#id>.xx-------------》这个ID所选中的直接子元素类名是xx的所有元素

标签名.xx-------》这个标签名能选中的元素里在挑选出类名是xx的所有元素

基础样式:

margin:外边距

padding:内边距

border:边框

{solid 实心线 ; dashed 虚线 ;dotted 打原点; double 双实线}

/* *代表通配符,代表所有元素*/
*{
        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 ;

字体颜色设置的三种方法:英文单词、色值,rgb值

  • 详细可参考 :
  • https://blog.csdn.net/kh896424665/article/details/76871618
/*字体颜色(有三种方法,详细上网查 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;

5.css优先级以及背景图片

ID选择器,class类选择器、标签(元素)选择器、属性选择器、多重选择器

  • 在选择器完全相同的情况下,写在后面的css优先级比较高
  • 在style元素里加!important》!important》选择器写的更详细》ID选择》类选择、属性选择器》标签选择器》浏览器默认的样式》元素继承到的样式

注意:

如果想要打乱选择器的优先级,那么可以使用!important(如果要改变颜色优先级的话,就把!important加到颜色后面)

伪类选择器:

:before,:after这两个选择器都是创造一个假的元素,假的元素一样可以设置任何样式

(before在一个div最上面,after在一个div最下面)

:hover,选择鼠标悬浮在元素上的样式

:link,设置链接时候的样式

背景图片:

background:综合属性设置

background-color,rgb,16进制色值,英文颜色,rgba

background-image

background-size,像素,设置百分比

background-position:center left top bottom right,可以用像素设置距离边框的位置,50% 50%类似center,百分比设置,可以帮助你设置一些响应式页面

background-repeat,repeat,no-repeat,repeat-x,repeat-y

英文颜色:常用的英语颜色词

rgb:r-->red(0-255),g-->green(0-255),b-->blue(0-255)

16进制色值:#000000-#ffffff

rgba:r-->red,g-->green,b-->blue,a-->apacity(0完全透明-1完全不透明)

6.css继承

  • 跟文字相关的属性(font-family字体,font-size,color,font-weight...),都会被子元素继承
  • 跟容器相关的属性(width/height/margin/padding/box-sizing/background...),都不会被继承

像文字属性,可以在父级元素上统一相对应的设置

原文发布于微信公众号 - 离不开的网(Gy_dxj)

原文发表时间:2019-06-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券