开发者社区> 学霸初养成> 正文

前端——HTML,CSS

简介: HTML HTML叫做超文本标记语言,是一种制作万维网页面标准语言。相当于定义一套规则,大家都来遵守它,这样浏览器就可以去解释它。 浏览器负责将标签翻译成用户看得懂的格式,呈现给用户。 作为开发者需要学习的:   1.学习HTML规则   2.从数据库获取数据,然后替换到HTML文件的指定位置(web框架) HTML文档 如果新建一个HTML文档,编译器会帮你自动写好基本格式: 我们一一来看,他们是怎么回事 1.Doctype Doctype告诉浏览器使用什么样的规范来解析文档。
+关注继续查看

HTML

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

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

作为开发者需要学习的:

  1.学习HTML规则

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

HTML文档

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

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

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.锚。用来记录页面浏览的位置。

    <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

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按钮名称

示例:

<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
<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",表示选择框只能同时显示三项。

<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标签
        <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属性可以实现一个功能:点击输入框前面的文字,也可以启用输入框编辑。

    <label for="username">用户名:</label>
    <input id="username" type="text" name="user">
for属性的作用

14.列表

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

<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纵向合并,要注意去除多余的行

    <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>标签

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

<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标签中设置了样式,标签本身也设置了样式,如果没有重复设置属性,都能应用
  • 如果有重复设置的属性,则根据优先级来应用。

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

例如:

<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属性被应用黑色 -->
优先级

边框border

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

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

基本样式

  高度:   height

  宽度:   width

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

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

  字体加粗:   font-weight:blod; 

  字体大小:   font-size

float(飘)

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

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 

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

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

<!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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端学习 -- Css -- 否定伪类
语法::not(.选择器) 作用:可以从已选中的元素中剔除出某些元素。 DOCTYPE html> p:not(.
782 0
前端学习 -- Css -- 兄弟元素选择器
为一个元素后边的元素设置css样式: 语法:前一个 + 后一个。 作用:可以选中一个元素后紧挨着的指定的兄弟元素。 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有。 DOCTYPE html> ...
883 0
前端学习 -- Css
Css:Cascading Style Sheets CSS叫做层叠样式表,用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。 编写位置:   1,内联样式:     将样式编写到标签的style属性中           doctype html> 超链接 风起檐飞雪 沟壑巧遁形 置身大漠里 踏浪烟波中 效果: 如果对其他标签起作用,内联样式就需要复制到其他标签去,这样就显得比较麻烦,无法复用,不易维护。
1024 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23582 0
前端学习 -- Css -- 字体分类
在网页中将字体分成5大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) fantasy (虚幻字体) 可以将字体设置为这些大的分类,当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式。
1053 0
好程序员web前端分享CSS基础篇
学习目标1、CSS简介2、CSS语法3、样式的创建4、两种引入外部样式表的区别5、样式表的优先级和作用域6、CSS选择器7、选择器的权重8、浮动属性的简单应用9、HTML、CSS注释一、CSS简介css:层叠样式表 英文全名:cascading style sheets,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。
2288 0
前端笔记:css3动画transition和animation
前端笔记:css3动画transition和animation
56 0
前端学习 -- Css -- 选择器的优先级
当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。 优先级的规则 内联样式 , 优先级 1000 id选择器,优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配* , 优先级 0 继承的样式,没有优先级 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式。
962 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29187 0
17
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载