欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端——HTML,CSS

程序员文章站 2022-03-16 23:05:13
HTML HTML叫做超文本标记语言,是一种制作万维网页面标准语言。相当于定义一套规则,大家都来遵守它,这样浏览器就可以去解释它。 浏览器负责将标签翻译成用户看得懂的格式,呈现给用户。 作为开发者需要学习的: 1.学习HTML规则 2.从数据库获取数据,然后替换到HTML文件的指定位置(web框架) ......

HTML

HTML叫做超文本标记语言,是一种制作万维网页面标准语言。相当于定义一套规则,大家都来遵守它,这样浏览器就可以去解释它。

浏览器负责将标签翻译成用户看得懂的格式,呈现给用户。

作为开发者需要学习的:

  1.学习HTML规则

  2.从数据库获取数据,然后替换到HTML文件的指定位置(web框架)

HTML文档

前端——HTML,CSS

如果新建一个HTML文档,编译器会帮你自动写好基本格式:

前端——HTML,CSS

我们一一来看,他们是怎么回事

head  标签

1.Doctype

Doctype告诉浏览器使用什么样的规范来解析文档。这个属性会被浏览器识别并使用,如果你的页面没有这个声明,那么默认是标准兼容模式未开启,浏览器会按照自己的方式去解析渲染页面。这将是恶魔的开始。

2.Meta

meta标签提供有关页面的信息,例如页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。

  1.页面编码

    charest=“utf-8”

  2.刷新和跳转

  <meta http-equiv="Refresh"Content="30"> 每隔30秒刷新一次网页

  <meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 过5秒跳转到某网页。(关于跳转,可以在应急的时候用,一般可以用js实现)

  3.关键词

    <meta name="keywords" content="星际2.老男孩,UFO,皮卡">  关键字

  4.描述

    <meta name="description" content="为您提供最新的信息">  网站描述

3.title

  title标签写网站头部信息,即网页标签的名称

4.Link

link标签有两个作用:

  1.设置标签页图标:

    <link rel="shortcut icon" href="image/favicon.ico">  # rel指的是类型,href是文件路径,(image是存放图片的文件夹)

  2.外联CSS文件

    <link rel="stylesheet" type="text/css" href="css/common.css">    # rel指的是类型,href是存放css文件的文件夹

5.style

 在页面中写样式

6.script

  1.引进文件

    <script type="text/javasvript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>

  2.写js代码

    <script type="text/javascript">...</script>

以上都是head标签,head标签内的内容是不会显示在界面上的(除了title)。接下来讲body标签

body标签

标签一般分为两种:

  1.块级标签

    霸占一整行的标签。比如:<h>,<p>,<div>等

  2.行内标签

    可以多个标签共同占用一行的标签。比如:<span>,<a>,<input>,<img>,<label>等

1.各种符号

  使用字符编码来代替某种符号,详细对照表参照 http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

2.<p>标签

  段落标签:<p>文字</p>,在里面的文字自成一个段落。段落之间会有间距,但换行没有

3.<br>标签

  用于换行

4.<h>标签

  标题(自动加大加粗),分为1~6等级,h1最大,h6最小。书写:<h1>标题</h>

5.<span>标签

  白板,本身没有特性,行内标签。

6.<div>标签(最最常用)

  白板,本身没有特性,块级标签。

7.<a>标签

  1.做链接。<a href="http://www.baidu.com"  target="_blank"  title="点一下看看啊">你好</a>  # 页面中点击“你好”,跳转页面,参数target=_blank表示跳转到新的标签页,title属性作用:当鼠标移动到链接处,会显示该文字。

  2.锚。用来记录页面浏览的位置。

前端——HTML,CSS
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <a href="#i5">第五章</a>

    <div id="i1" style="height:600px;">第一章的内容 <p>绪论</p></div>
    <div id="i2" style="height:600px;">第二章的内容 <p>公元500年</p></div>
    <div id="i3" style="height:600px;">第三章的内容 <p>公园1000年</p></div>
    <div id="i4" style="height:600px;">第四章的内容 <p>公元1900年</p></div>
    <div id="i5" style="height:600px;">第五章的内容 <p>公元2010年</p></div>
View Code

<a>标签默认的显示样式会有下划线,如果看着不爽想要去掉,在a标签样式中设置:text-decoration:none;

8.<input>标签

  用来做用户输入、按钮框,取决于type属性

type参数值 代表的类型 其他说明
text 单行文本输入框 参数name便于后台识别
password 密码输入 name同上
button 按钮 value在按钮上显示的名称
submit 提交按钮 value同上
radio 单选框 name相同则互斥,value用来后台识别,check=“checked”默认选中
checkbox 多选框 name相同表明是同一类,value用来后台识别,checked=“checked”默认选中
file 上传文件 name后台识别,依赖form表单属性enctype=“multipart/form-data”
reset 重置按钮 value按钮名称

示例:

前端——HTML,CSS
<form action="" method="get"> 
        <input type="text" name="user">  <!-- name是标签名,便于后台识别 -->
        <input type="text" name="emil">
        <input type="password" name="password">
        <input type="button" value="登录">
        <input type="submit" value="登录吧">
</form>
text,password,button,submit
前端——HTML,CSS
<form enctype="multipart/form-data">
        <p>请选择性别</p>
        男:<input type="radio" name="gender" value="1">  <!--name相同则互斥,value用来后台识别-->
        女:<input type="radio" name="gender" value="2">
        alex:<input type="radio" name="gender" value="3">
        <p>爱好</p>
        篮球<input type="checkbox" name="favor" value="1"> <!--name相同表示同一类,value用于后台识别-->
        足球<input type="checkbox" name="favor" value="2">
        台球<input type="checkbox" name="favor" value="3">
        羽毛球<input type="checkbox" name="favor" value="4">
        <p>技能</p>
        写代码<input type="checkbox" name="skill" value="1">
        唱歌<input type="checkbox" name="skill" value="2">
        <p>上传文件</p>
        <input type="file" name="fname">
        <p>说说你的优势</p>
        <textarea name="meno">可以设置默认值的多行文本框</textarea>
        <p>选择你的地址</p>
</from>
radio,checkbox,file

9.<form>标签

  表单,可以将用户操作的内容提交到后台。参数:action指向提交地址,method指明使用哪种方式提交。

   method有两种方式:get和post。提交后台时会发送两部分数据:请求头和请求体。get方式是将内容放在了请求头,所以会显示在url上,post将内容放在了请求体。两者区别仅仅是,内容存放位置不同。

   entype="multipar/form-data"设置该属性可以上传文件。

10.<textarea>标签

  是一个多行输入框,与上面不同的是,它可以设置默认值。

  <textarea name="">默认值在这里</textarea>

11.<select>标签

  选择框。如果属性设置multiple="multiple" size="3",表示选择框只能同时显示三项。

前端——HTML,CSS
<p>选择你的地址</p>
        <select name="city">
            <option value="1" selected="selected">北京</option> <!-- selected 默认选项 -->
            <option value="2">深圳</option>
            <option value="3">上海</option>
            <option value="4">杭州</option>
            <option value="5">成都</option>
        </select>
select标签
前端——HTML,CSS
        <p>请选择籍贯</p>
        <select name="jiguan">
            <optgroup label="河北省">
                <option value="1">石家庄</option>
                <option value="2">保定</option>
                <option value="3">邯郸</option>
            </optgroup>
            <optgroup label="湖南">
                <option>长沙</option>
                <option>株洲</option>
                <option>湘潭</option>
            </optgroup>
            <optgroup label="广东">
                <option>广州</option>
                <option>深圳</option>
                <option>佛山</option>
                <option>珠海</option>
                <option>中山</option>
            </optgroup>
        </select>    
分组选择,组名不能被选择

12.<img>标签

  用来显示图片,属性style中可以设置图片大小,alt可以在图片无法显示的时候显示文字。<iamge>也有title属性,和a标签的作用一样。

13.<label>标签

  通常与input输入框一起用。它本身是个普通的白板,与<span>没什么区别,但与输入框在一起时,for属性可以实现一个功能:点击输入框前面的文字,也可以启用输入框编辑。

前端——HTML,CSS
    <label for="username">用户名:</label>
    <input id="username" type="text" name="user">
for属性的作用

14.列表

  ul  ol  dl三种。ul中没有编号,ol有编号,dl中<dt>可以作为大标号,<dd>作为小标号

前端——HTML,CSS
<ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>
    <ol>
        <li>asdfe</li>
        <li>asdfe</li>
        <li>asdfe</li>
    </ol>
    <dl>
        <dt>asfas</dt>
        <dt>sdfas</dt>
        <dd>safsd</dd>
        <dd>safsd</dd>
        <dd>safsd</dd>
    </dl>
示例

15.<table>标签

  制作表格,<table>标签内可以分成两部分,<thead>表头和<tbody>表格内容区。表头会自动加粗居中,在表格内容区,<tr>表示行,<td>表示列。

  合并单元格:

    colspan横向合并,要注意去除多余的列

    rowspan纵向合并,要注意去除多余的行

前端——HTML,CSS
    <table border="1">
        <thead>
            <tr>
                <th>地址</th>
                <th>性别</th>
                <th>姓名</th>
                <th>其它</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>石家庄</td>
                <td>男</td>
                <td colspan="2">欧沃</td>
            </tr>
            <tr>
                <td>保定</td>
                <td>女</td>
                <td>alex</td>
                <td rowspan="2">1</td>
            </tr>
            <tr>
                <td>株洲</td>
                <td>男</td>
                <td>alxe</td>

            </tr>
            <tr>
                <td>长沙</td>
                <td>男</td>
                <td>森马</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
表格,合并单元格

16.<fieldset>标签

  这个用的很少,看看效果图就懂了

前端——HTML,CSS
<fieldset>
    <legend>登录</legend>
    <p>用户名</p>
    <p>密码</p>
</fieldset>
View Code

CSS

CSS是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。

存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。

语法:style = "key1:value1;key2:value2;"

  • 在标签中使用 style="xx:xxx;"(任何一个标签都可以使用style属性来编写样式)
  • 在页面中嵌入 < style type="text/css"> </style > 块
  • 引入外部css文件

必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。

CSS选择器(编写CSS样式)

选择器指的是,在<head>标签中的<style>标签中编写样式(或在CSS文件中编写),在<body>内的标签来选择已经写好的样式,提高了重用率,减轻了body中的代码臃肿。

 1.id选择器(不建议用)

  样式编写以#开头,标签选择用id属性,每个标签使用的id都不能相同(唯一配对)

  #名称{

     ........

    }

  <标签 id="名称">

2.class选择器(最常用)

  样式编写以 . 开头,可以使用相同的设置

  .名称{

    .........

    }

   <标签 class="名称">

3.标签选择器

  如下所示,将所有div标签设置成此样式。

  div{

    ……

    }

4.层级选择器(常用)

  样式的选择具有层级关系,类似于目录(用空格隔开)

  span div{

    ………

    }   <!--所有span标签内的div标签应用此设置-->

  .c1 div{

    ………

    }   <!--应用c1的标签内的div标签应用此设置-->

  .c1 .c2{

    ………

    }   <!--应用c1的标签内的标签才能应用此设置-->

5.组合选择器

  .c1,.c2,div{

     ………

     }   <!-- class="c1" 或 class="c2" 或 所有div标签都能应用此设置-->

6.属性选择器

  先做一遍筛选,对筛选出来的标签根据属性再做筛选,并设置该样式

  格式:标签名 [ 属性 = "值" ]{ …编写的样式… }

  如:input[name="alex"]{width:10px;height:20px;}            <!-- 先筛选出来所有input标签,再筛选出来属性name为alex的标签,设置样式 -->

    .c1[type="password"]{height:40px;width:30px;}        <!-- 先筛选出来所有应用c1样式的标签,再筛选属性type为password的标签,设置样式 -->

 样式设置的优先级

  • 针对某个标签,头部style标签中设置了样式,标签本身也设置了样式,如果没有重复设置属性,都能应用
  • 如果有重复设置的属性,则根据优先级来应用。

  应用优先级:标签本身的设置 > 书写距离近 > 书写距离远

例如:

前端——HTML,CSS
<head>
    <style>
        .c1{
        background:red;
        color:white;
        }
        .c2{
        background:black;
        font-size:58px;
        color:black;
        }
    </style>
</head>
<body>
    <div class="c1 c2" style="color:green">wooohoo</div>
</body>

<!-- color和font-size属性由于没有重复,所以都能应用,color属性根据就近原则被应用绿色,background属性被应用黑色 -->
优先级

基本样式

  高度:   height

  宽度:   width

  框内水平居中(文字):  text-align:center;

  垂直居中(文字):         line-height:20px;  <!--标签多高,这里就要设置多高-->

  字体加粗:   font-weight:bold; 

  字体大小:   font-size

border (边框)

  样式:border: 宽度 样式 颜色  。样式中:dotted表示虚线,solid表示实线

  如:border:2px dotted red;  <!-- 2像素宽度,虚线,红色 -->

float (浮动)

  在样式中设置 float : right; 此标签就会浮动到父标签的最右边。块级标签本身是不能堆叠在一行的,但是都设置了这个属性就可以(宽度相加不大于父标签的前提下)

clear (清除浮动)

  语法:

       clear : none | left | right | both

       取值:

       none  :  默认值。允许两边都可以有浮动对象

       left   :  不允许左边有浮动对象

       right  :  不允许右边有浮动对象

       both  :  不允许有浮动对象

What?清除浮动直接把 float 代码直接删除掉不就可以了吗?为什么还要再设置一个属性?且看下面。

上面的定义非常容易理解,但是读者实际使用时可能会发现不是这么回事。 定义没有错,只不过它描述的太模糊,让我们不知所措。

案例:先写一个<div>大方块背景灰色,里面有三个小方块<div>从左到右背景分别是红、绿、蓝。如果不浮动,三个方块分别占三行。现在给三个小方块都加上样式 float:left; 它们会依次从左到右排列,并且共占一行。

前端——HTML,CSS

如果我现在想要使红色方块右边的方块清除掉,按照我们的想法就是给红色设置 clear:right; 然而却并没有任何效果。正确的用法是给绿色设置 clear:left;

前端——HTML,CSS

所以一定要牢记:对于CSS的清除浮动规则,只能影响使用清除元素的本身,不能影响其它元素。

现在想一下,如果直接删掉 float 代码,能满足这个需求吗?这就是clear的作用。

还有一个场景非常实用:在刚才的示例基础上,把灰色块的高度设置删掉,界面上灰色会消失,此时的需求是:使父标签包裹住所有子标签。怎么做呢?   只需要在父标签内最底部再写一个<div>标签,样式设置 clear:both; 即可。

前端——HTML,CSS

前端——HTML,CSS
    <div style="width:500px;background:#b0b0b0;">
        <div style="width:80px;height:80px;float:left;background:red;"></div>
        <div style="width:80px;height:80px;float:left;background:green;clear:left"></div>
        <div style="width:80px;height:80px;float:left;background:#2b2ba8;"></div>
        <div style="clear:both"></div>
    </div>
clear:both;示例

display

   将块级标签和行内标签转换属性。

  设置 inline 为行内,设置 block 为块级。

  如果设置 inline-block 则同时具有:

    inline的属性:默认自己有多少空间占多少空间

    block的属性:可以设置高度,宽度,边距      ( 行内标签不能设置高度和宽度,而块级标签可以)

margin padding(边距)

  内边距 padding  当padding值增加时,默认增加上边距,除了自己的位置在变化,本身的大小也在变化(可以想象原本的标签在移动,移动过的的区域就是增加的那部分。虽然本身大小在变化,但是可编辑区域仍然是原来那部分大小。)padding-top,padding-left,padding-right,padding-bottom是相同的效果。

  外边距 margin    当margin值增加时,与父标签上左右距离增加,标签本身的大小被强制变化。但如果单独设置某一边距时,标签大小不会变化(margin-top 上边距,margin-left 左边距,margin-right 右边距,margin-bottom 下边距。)

    常用的方式还有:margin:0 auto; 表示与父标签的上边距为0,左右居中

background  (背景)

  background 分为以下几类:

    background-color:red;       背景颜色设置为红色

    background-image:url("image/4.jpg");   设置背景图片

    background-repeat:no-repeat;      如果设置了背景图片,这个属性则可以设置重复平铺。默认是no-repeat不平铺。还可以设置repeat表示背景图片横向纵向都平铺。          repeat-x表示只在横向平铺,repeat-y表示只在纵向平铺。

    background-position:74px 100px;  设置背景图片的位置。表示水平方向左边距74像素,上边距100像素。

position 位置

  可以设置标签的位置,经常与top、right、left、bottom联用。一旦设置position属性,此标签将变成上一层覆盖下一层。position的值分两类:

  • fixed                            固定在屏幕的某个位置(滑动滚轮,相对屏幕的位置不会动)
  • relative + absolute      固定在相对于父标签的某个位置(单独设置relative没有任何效果,一般与absolute嵌套使用)

  思考:当position为 relative + absolute时,它与margin系列的区别是什么?

    1. margin是基于父标签调整位置,依赖于父标签;position是基于整个页面调整位置(单独absolute),当然也可以基于父标签调整。

    2. 用margin,如果两个同级标签位置不够占,其中一个会将另一个挤到下一行,永远属于同一个图层。而如果设置position,它会分层,覆盖下一层。

  在设置position时需要注意:

    1. 一旦设置position后,必须设置位置(top,left,right,bottom),否则根本无法显示标签。

    2. 如果出现分多层,可以使用 z-index 来设置层级顺序,数值越大层级越高。设置该 z-index 的标签会覆盖没设置的。

    3. 若要将position:fixed的标签居中,则应top:50%;left:50%;且上边距为 -(标签高度)÷2 ; 左边距为 -(标签宽度)÷2;

opacity 透明度

  opacity的值在[0,1]区间内,0为完全透明,1为完全不透明

overflow 限制图片显示区域

  当父标签内的<img>图片大于父标签,若想将其限制,不能超过父标签的范围。有两种解决思路:

  ① 直接给图片设置大小,小于或等于父标签。

  ② 设置overflow:hidden。表示超过父标签的部分隐藏,这时显示出来的是原图的右上角部分。

    也可以 overflow: auto 。显示效果在hidden的基础上可以滚动图片。

hover 

  能够实现:将鼠标移动到标签上,显示出另外一种样式。

  比如菜单栏,原本全部都是蓝色背景,如果鼠标移动到某个标签上,则显示深蓝色背景。

前端——HTML,CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <style>
        .pg-head{
            position:fixed;
            top:0;
            height:50px;
            width:1537px;
            background-color: #2459a2;
            line-height: 50px;
        }
        .w{
            width:1168px;
            margin:0 auto;
        }
        .pg-head .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /*当鼠标移动到当前标签上时,以下css属性才生效*/
        .pg-head .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body style="margin:0 auto;">
    <div class="pg-head">
        <div class="w">
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class=""></div>
</body>
</html>
hover

 

初学者可能会遇到的问题:

1.CSS重用

css样式可以放在<head>标签中,也可以放在css文件中,link标签引入即可。在编写样式时,如果样式c1和c2中有相同的部分,或者有在其他地方被大量使用的部分,可以将这部分提取出来再写个c样式。

2.改变页面大小,原本的页面混乱

要注意:在<body>标签中最外层的标签,大小(height、width)不能用百分比,一定要是具体的数值。

一般情况下,我们习惯将整个页面分成三部分:头部,身体,底部。这三部分都是<div>标签,每个部分标签内层再嵌套一层<div>,这层宽度可以设置百分比了。内层的也可以。

3.在IE浏览器中可能会出现:用<a>标签包裹的<img>图片显示出来会有蓝色边框。

解决办法:样式设置:border:0;

4.<input>标签用户输入的内容若想提交到后台,必须用<form>标签包裹。