前端HTML、css、javascript学习

一、html、css、javascript基本认识

1.HTML

类型:超文本标记语言

用途:可用于网页结构的设计或搭建:

后缀:html.html

超文本简述:‘超文本’就是指的是其可以包含图片、链接、音乐、程序等非文字元素

HTML简述如下:

1、标记语言:标记语言为非编程语言,不具备编程语言的程序逻辑

2、HTML组成部分:由标签、指令、转义字符(实体)

指令:被尖括号包裹有!开头的标记

转义字符:被&与;包裹的特殊字母组合或#开头的十进制数。(空格&nbsp,版权&copy)

2.CSS

类型:级联样式表

用途:可以让网页页面的风格设计,样式、美观

后缀:CSS.css

CSS简述:

1、css也可叫标记语言同上

2、CSS的组成部分:选择器、样式块、作用域

选择器:有标签、id、类单独或组合出现

作用域:由{}包裹

样式块:满足css连接语法的众多样式:

3.javascript

类型:浏览器脚本语言

用途:可以负责页面特效、调用刘乱起的API(BOM)\操作改变页面页面内容(DOM),从祸端获取数据、渲染页面等:

后缀:javascript.js

javascript简述:

1、实实在在的编程语言有着完善的语法、可以完成复杂的程序逻辑

2、javascript组成部分:由BOM、DOM、ES(ECMAScript)

DOM:文档对象模型

BOM:浏览器对象模型

ES:是一种开放的且广为被桀纣的脚本语言规范

二、HTML常用标签

1、无语义标签

    <div></div>
    <span></span>

2、常用语义标签

    <h1>一级标题</h1>
    <p>段落</p>
    <pre>原文本</pre>
    <br/>换行
    <hr/>分割线

3、文本标签

        <i>斜体</i>
    <em>强调型斜体</em>
    <b>粗体</b>
    <strong>强调型粗体</strong>
    <del>删除文本</del>
    <s></s>
    <ins>添加文本</ins>
    <u></u>
    <sub>下标字</sub>
    <sup>上标字</sup>
    <ruby>
        拼音<rt>pinyin</rt>
    </ruby>    

三、标签分类
1、单双标签

单标签:单标签在?自身标签标识结束,主要应?用场景为功能性标签

双标签:双标签有成对的结束标识,主要应?用场景为内容性标签

2、行块标签

行标签: 又名内联标签,内联标签?身不具备宽?,通常同行显示

块标签:又名块级标签,块标签拥有?身宽?,通常独?占据?行

3、单一或组合标签

单一标签:单独出现,表示具体的功能或展示具体的内容

组合标签:配合使?用,才能产?生相应的内容与效果

四、模板解析

1、基础模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>

</body>
</html>

2、模板解读
DCOTYPE:指定文档类型,规定html标签语法

html:文档根标签、标注着文档(页面)的开始与结束

head:文档头标签、可以引用脚步文件、指定样式表、书写代码逻辑块、提供元信息

body:文档主体标签,包含文档所有文本与超文本内容

title:文档tag标题标签,设置文档tag的标题内容

3、meta(元标签)

<meta charset="UTF-8">
    <title>css选择器</title>
    <meta name="keywords" content="网页搜索的关键字">
    <meta name="description" content="有关网页的描述在80字以内">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=decvice-width,initial-scale=1,maxmum-scale=1,minmum-scale=1,user-scale=no">

4、link连接标签

<!-- 外联样式 -->
    <link rel="stylesheet" type="text/css" href="文件名.css">
    <!-- 文档tag样式 -->
    <link rel="icon" type="image/x-icon" href="图片路径或网址">

5、script标签

<script style="text/javascript"></script>

五、CSS三种引入方式

 一、三种方式的书写规范

 1、行间式

```html
<div style="width: 100px; height: 100px; background-color: red"></div>
```

 2、内联式

```html
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
```

3、外联式

```css
file: zero.css
div {
    width: 100px;
    height: 100px;
    background-color: red;
}
```

```css
file: zero.html
<head>
    <link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
```

 二、三种方式间的"优先级"

* 与样式表的解析顺序有关

 v_test:掌握三种CSS引入方式方式

css三种引入方式

六、常用样式及长度颜色

1、样式模板

<head>
    <style type="text/css">
        div{
            color: red;
        }
    </style>
</head>

2、长度
* px:像素(pixel),屏幕上显示的最小单位,用于网页设计,直观方便
* mm:毫米
* cm:厘米
* in:英寸
* pt:点(point),一个标准的长度单位,1pt=1/72in,用于印刷业,非常简单易用;
* em:相当长度,通常1em=16px,应用于流式布局

3、颜色

* rgb():三个值可为[0-255]数值或百分比,以,相隔(r:Red g:Green b:Blue)
* rgba():前三个值可为像素或是百分比,最后一个为[0, 1]数值,以,相隔(r:Red g:Green b:Blue a:Alpha)
* hsl():第一个值为[0,360]数值,后二个值可为百分比,以,相隔(h:Hue s:Saturation l:Lightness)
* hsla():第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值,以,相隔(h:Hue s:Saturation l:Lightness a:Alpha)
* #AABBCC:六个十六进制位,每两位一整体,分别代表Red、Green、Blue,可以简写#abc

七、三种常用样式

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>三合一练习</title>
    <style type="text/css">
    /*字体练习*/
        span{
            color: blue;
            /*字体粗细(lighter细,normal标准,bold粗)*/
            font-weight:bold;
            /*字体风格(oblique斜体,normal标准,initial首字母大写)*/
            font-style: oblique;
            line-height: 10px;
            font-size:10mm;
            /*font:lighter 10mm/10mm "STSong","微软雅黑";*/
        }
        /*文本练习*/
        div{
            width: 100px;
            color: red;
            /*文本水平排列方式*/
            text-align: center;
            /*字词间距*/
            letter-spacing: 1mm;
            word-break: 1mm;
            /*文本下划线underline,中划线line-through,上划线overline*/
            text-decoration:line-through;
            /*显示方式(行内块同一行显示)*/
            display: inline-block;
        }
        div{
            /*文本内容首行缩进*/
            text-indent: 2em;
            /*垂值排列方式(top 上,middle中,(基线baseline,底部bottom))*/
            vertical-align:baseline;
        }
        /*标题水平居中*/
        h1{
            text-align: center;
        }
        /*背景练习*/
         .d{
            width: 300px;
            height: 300px;
            background-color: blue;
            /*插入背景图片*/
            background-image: url(‘bg_repeat.gif‘);
            /*平铺方式(repeat平铺,no-repeat不平铺,repeat-x横平铺,repeat-y纵平铺)*/
            background-repeat:no-repeat;
            /*定位第一个为水平的值(left,center,right),第二为垂值的值(top,center,bottom)*/
            /*background-position: right top;*/
            /*插入背景图片是否滚动(scroll,fixed)*/
            background-attachment: scroll;
            /*实现滚动效果*/
            overflow: auto;
        }

    </style>
</head>
<body>
    <span>
        嘿嘿
    </span>
    <h1>dd</h1>
    <div> 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个</div>
    <div> kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff</div>
    <div>55</div>
    <!-- <div class="d">等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个</div> -->
    <div class="d"></div>
    br*50
</body>
</html>

三种样式合一

八、CSS选择器
  

8、 一、基础选择器

1、通配选择器

```css * {     border: solid; } 匹配文档中所有标签:通常指html、body及body中所有显示类的标签 ```

2、标签选择器

```css div {     background-color: yellow; } 匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div,span{}会匹配文档中所有span ```

3、类选择器

```css .red {     color: red; } 匹配文档中所有拥有class属性且属性值为red的标签:如<sup class="red"></sup> <sub class="red"></sub>均会被匹配 ```

4、id选择器

```css #div {     text-align: center; } 匹配文档中所有拥有id属性且属性值为div的标签:如<div id="div"></div> <section id="div"></section>均会被匹配 ```

补充:基础选择器的优先级

- 基础选择器优先级大致与选择器匹配范围成反比,匹配范围越小,优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比,匹配精度越高,优先级越高
- 基础选择器优先级:id选择器 > 类选择器 > 标签选择器 > 通配选择器

8、二 组合选择器 

1、群组选择器

```css div, span, .red, #div {     color: red; } ```

- 一次性控制多个选择器 - 选择器之间以,隔开,每一个选择器位均可以为任意合法选择器或选择器组合

2、子代(后代)选择器

```css 子代选择器用>连接 body > div {     color: red; } 后代选择器用空格连接 .sup .sub {     color: red; } ```

- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器 - 每一个选择器位均可以为任意合法选择器或选择器组合 - 子代选择器必须为一级父子嵌套关系,后代选择器可以为一级及多级父子嵌套关系

3、相邻(兄弟)选择器

```css 相邻选择器用+连接 .d1 + .d2 {     color: red; } 兄弟选择器用~连接 .d1 ~ .d3 {     color: red; } ```

- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器 - 每一个选择器位均可以为任意合法选择器或选择器组合 - 相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系

补充:组合选择器优先级

- 组合选择器优先级与权值相关,权值为权重和 - 权重对应关系

|   选择器   | 权重  | | :--------: | :---: |

|    通配    |   1   | |

标签    |  10   | |

类、属性  |  100  |

|     id     | 1000  |

| !important | 10000 |

- 选择器权值比较,只关心权重和,不更新选择器位置 - 不同级别的选择器间不具备可比性:1个类选择器优先级高于n个标签选择器的任意组合

4、属性选择器

- [attr]:匹配拥有attr属性的标签 - [attr=val]:匹配拥有attr属性,属性值为val的标签 - [attr^=val]:匹配拥有attr属性,属性值以val开头的标签 - [attr$=val]:匹配拥有attr属性,属性值以val结尾的标签 - [attr*=val]:匹配拥有attr属性,属性值包含val的标签

v_hint:属性选择器权重等价于类

演示如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        /*组合选择器*/
        /*特性:每个选择器位可以为任意基本选择器或选择器组合*/

        /*群组选择器: ,隔开*/
        /*控制多个*/
        div, .s, section {
            color: red;
        }
        /*子代选择器: >连接*/
        body > div {
            color: orange;
            text-decoration: underline;
        }
        /*div > a {
            text-decoration: none;
        }*/
        /*后代选择器: 空格连接*/
        /*包含子代选择器*/
        body a {
            text-decoration: none;
        }
        /*相邻选择器: +连接*/
        span + section {
            background-color: pink;
        }
        /*兄弟选择器: ~连接*/
        /*包含相邻选择器*/
/*        div ~ section {
            background-color: brown;
        }

        /*交集选择器*/
        /*即是选择器1又是选择器2*/
/*        i.s {
            color: yellow;
        }

        /*多类名选择器*/
        /*.d1 {
            color: blue;
        }
        .d1.d2 {
            color: tan;
        }
        .d1.d2.d3 {
            color: #780;
        }**//*/
    </style>
</head>
<body>
    <!-- div{div}+span{span}+section{section} -->
    <div>div</div>
    <span class="s">span</span>
    <section>section</section>
    <div>
        <i class="s">iiii</i>
        <a href="">a标签</a>
    </div>
    <div class="d1 d2 d3">呵呵</div>

</body>
</html>
二、组合选择器优先级演示如下:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>组合选择器优先级</title>
    <style type="text/css">
        /*同目录结构下*/
        /*1.子代与后代优先级相同*/
        /*body > div == body div*/
        /*2.相邻与兄弟优先级相同*/
        /*div + span == div ~ span*/
        /*3.最终样式采用逻辑后的样式值*/

        /*不同目录结构下*/
        /*1.根据选择器权值进行比较*/
        /*2.权值为标签权重之和*/
        /*3.权重: *:1 div:10 class:100 id:1000 !important:10000 */
        /*4.权值比较时,关心的是值大小,不关心位置与具体选择器名*/
        /*5.id永远比class大,class永远比标签大*/
        /*注:控制的是同一目标,才具有可比性*/
        /*div>div>div>div>...>div {} 11 < .div{}*/

        /*10*/
        div {
            color: red;
        }
        /*20*/
        div div {
            color: yellow;
        }
        /*大于一切标签*/
        .d2 {
            color: blue;
        }
        /*.d2抵消,剩权重10*/
        div .d2 {
            color: orange;
        }
        /*等价于div .d2,权值相同,位置决定*/
        .d1 div {
            color: pink;
        }
        /*又多10*/
        div .d1 div {
            color: tan;
        }
        /*不具有可比性*/
        div .d1 > div{
            color: green;
        }
        /*高于一切class及标签*/
        #dd1 div {
            color: #000;
        }
    </style>
</head>
<body>
    <!-- div>.d1>#dd1>div>.d2 -->
    <div>
        <div class="d1">
            <div id="dd1">
                <div>
                    <div class="d2">12345</div>
                </div>
            </div>
            <!-- <div id="dd2">
                <div>
                    <div class="d2">12345</div>
                </div>
            </div> -->
        </div>
    </div>
</body>
</html>

组合选择器演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .d2 {
            color: red;
        }
        /*属性选择器权重 == class选择器权重*/
        /*有属性class的所有标签*/
        [class] {
            color: orange;
        }

        /*有属性class且值为d2的所有标签(值不影响权重)*/
        [class="d2"] {
            color: pink;
        }

        /*是div且class=‘d2‘,增加了权重*/
        div[class=‘d2‘] {
            color: blue;
        }

        /*属性以什么开头: ^= */
        /*属性以什么结尾: $= */
        /*属性模糊匹配: *= */
        [class ^= ‘he‘] {
            color: yellow;
        }
        [class $= ‘ld‘] {
            color: tan;
        }
        [class *= ‘ow‘] {
            color: cyan;
        }
        [class][dd] {
            color: brown;
        }

    </style>
</head>
<body>
    <!-- div.d1>.d2 -->
    <div class="d1">00000
        <div class="d2">12345</div>
        <!-- dd与do为自定义属性 -->
        <div class="helloworld" dd do="do something">helloworld</div>
    </div>
</body>
</html>

属性选择器演示

九、盒模型及其布局
1、盒模型

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style type="text/css">
        .box {
            margin: 10px;
            border: solid;
            padding: 10px;
            width: 100px;
            height: 100px;
            /*background-color: orange;*/
            /*覆盖*/
            background: red;
        }
        /*组成:margin + border + padding + content*/
        /*content = width * height*/
        /*1.四个成员均具有自身独立显示区域,不相互影响(视觉上感觉会相互影响)*/
        /*2.margin/padding外边距/内边距控制布局*/
        /*3.border控制边框*/
        /*4.content控制内容*/

        /*padding*/
        /*与content共有背景颜色*/

        /*content*/
        /*内容显示区域*/
        /*红色区域 120 * 120 */
        /*content区域 100 * 100 => 内容显示区域*/

        /*值设置*/
        .box {
            /*控制四个方位*/
            /*margin: 20px;
            padding: 30px;*/

            /*上下 左右*/
            /*margin: 10px 20px;
            padding: 30px 40px;*/

            /*上 左右 下*/
            /*margin: 10px 20px 30px;
            padding: 30px 40px 50px;*/

            /*上 右 下 左*/
            margin: 10px 20px 30px 40px;
            padding: 30px 40px 50px 40px;
            /*总结*/
            /*1.规定起始 2.顺时针 3.不足找对面*/
        }

        /*边框: 宽度,颜色,样式*/
        .box {
            border-width: 10px;

            /*transparent透明,会透出背景颜色*/
            /*border-color: transparent;*/
            border-color: #333;

            /*solid solid dotted dotted outset inset double*/
            border-style: double;

            /*整体设置*/
            border: 5px solid orange;
        }

    </style>
</head>
<body>
    <div class="box">12345</div>
</body>
</html>

盒模型演示

2、盒模型布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型布局</title>
    <style>
        /*做页面必备reset操作*/
        html, body {
            margin: 0
        }
        .box, .wrap {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .wrap {
            background: orange;
        }
        /*影响自身布局*/
        /*.box {
            margin-top: 30px;
            margin-left: 100px;
        }*/
        /*影响兄弟布局*/
        /*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/
        /*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/
        .box {
            /*margin-bottom: 30px;*/
            margin-right: 100px;
        }

        /*display:显示方式*/
        /*块:block*/
        /*内联:inline*/
        /*内联块:inline-block*/
        .box, .wrap {
            display: inline-block;
            /*vertical-align: top;*/
        }

        /*兄弟坑*/
        /*盒模型布局坑只出现在和margin-top相关的地方*/
        .s1, .s2 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        /*重叠取大值*/
        .s1 {
            margin-bottom: 30px;
        }
        .s2 {
            margin-top: 50px;
        }

        /*父子坑*/
        .sup {
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        /*父子top重叠,取大值*/
        .sup {
            margin-top: 50px;
        }
        .sub {
            margin-left: 50px;
        }
        /*解决盒模型经典布局坑*/
        /*1.将父级固定*/
        .sup {
            /*border-top: 1px solid black;*/
            /*border-top: 1px solid transparent;*/
            /*保证显示区域 200*200 */
            /*height: 199px;*/
        }
        .sub {
            /*margin-top: 50px;*/
        }
        /*2.通过padding*/
        .sup {
            padding-top: 50px;
            height: 150px;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="wrap"></div>

    <!-- 坑 -->
    <section class="s1"></section>
    <section class="s2"></section>

    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>

盒模型布局

十、边界圆角

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>边界圆角</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        /*单角设置*/
        .box {
            /*一个固定值: 横纵*/
            border-top-left-radius: 100px;
            /*两个固定值:横 纵*/
            border-top-left-radius: 100px 50px;
            /*百分比赋值*/
            border-top-left-radius: 100%;
        }

        /*整体赋值*/
        .box {
            /*不分方位(横纵)*/
            /*左上为第一个角,顺时针,不足找对角*/
            /*border-radius: 10px 100px 50px;*/

            /*区分横纵*/
            /*1./前控制横向,后控制纵向*/
            /*2.横向又可以分为1,2,3,4个值,纵向毅然*/
            border-radius: 10px 100px 50px / 50px;
            /*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/
            /*所有最多可以赋值8个值*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

边界圆角演示

十一、伪类选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        a {
            color: #333;
            text-decoration: none;
        }
        /*:link为一个整体,代表超链接的初始状态*/
        a:link {
            color: orange;
        }
        /*:hover鼠标悬浮*/
        a:hover {
            color: green;
            /*鼠标样式*/
            cursor: pointer;
        }
        /*:active活动状态中(被鼠标点击中)*/
        a:active {
            color: red;
        }
        /*:visited访问过的状态*/
        a:visited {
            color: cyan;
        }
        /*普通标签运用: :hover :active*/
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box:hover {
            background-color: orange;
            cursor: pointer;
        }
        .box:active {
            width: 400px;
            border-radius: 50%;
        }

        /*内容伪类*/
        .txt:before {
            content: "我是前缀~~~"
        }
        .txt:after {
            content: ">>>我是后缀"
        }

        /*伪类可以单独出现*/
        /*:after {
            content: "呵呵"
        }*/

        /*位置伪类*/
        /*1.位置从1开始*/
        /*2.*/
        /*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/
        /*body a-baidu div01*/
        div:nth-child(2) {
            color: green;
        }

        /*先确定类型,再匹配位置*/
        /*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
        div:nth-of-type(2) {
            color: cyan;
        }

        /*2n*/
        /*
            div ooo div
            ooo div ooo
            div ooo div
        */

        /*3n*/
        /*
            div div ooo
            div div ooo
            div div ooo
        */

        /*3n - 1*/
        /*
            div ooo div
            div ooo div
            div ooo div
        */

        /*取反伪类*/
        /*:not([d]) {
            color: red;
        }
        body.body {
            color: orange;
        }*/
        span:not([d]) {
            color: red;
        }
    </style>
</head>
<body class="body">
    <!-- 1.a标签的四大伪类 -->
    <a href="./123.html">访问页面</a>
    <a href="https://www.baidu.com">访问过页面</a>
    <div class="box">box</div>

    <!-- 2.内容伪类 -->
    <div class="txt">原来的文本</div>

    <!-- 3.位置伪类 -->
    <div class="wrap">
        <span>span01</span>
        <div>div01</div>
        <div>div02</div>
    </div>

    <!-- 4.取反伪类 -->
    <span d>12345</span>
    <span dd>67890</span>
</body>
</html>

伪类选择器演示

十二、a、img、列表标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>a_img_list</title>
    <style type="text/css">
        /*reset操作: a标签一些默认属性的清除*/
        a {
            color: #333;
            text-decoration: none;
            outline: 0;
        }
    </style>
</head>
<body>
    <!-- 一.基本使用 -->
    <!-- 超链接标签:a -->
    <!-- 双/行/单一类型标签 -->
    <a href="https://www.baidu.com">前往百度</a>
    <a href="./05_边界圆角.html">前往边界圆角页面</a>
    <!-- ./或省略代表当前文件所在路径,可以访问与该文件同路径下的所有文件及文件夹 -->
    <a href="./temp/temp.html">前往temp页面</a>

    <!-- 二.属性 -->
    <!-- title:鼠标悬浮的文本提示 -->
    <!-- target:_blank,新开空白标签位来打开目标页面 -->
    <a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>

    <!-- 三.其他应用场景 -->
    <!-- mailto | sms | tel -->
    <a href="mailto:[email protected]">信息给zero</a>

    <!-- 四.锚点 -->
    <!-- a与a href="#锚点名" -- name="锚点名" -->
    <!-- a与标签 href="#锚点名" -- id="锚点名" -->
    <a href="#tag">前往底部</a>
    <!-- 测试锚点请tab -->
    br * 100
    <!-- 设置一个锚点 -->
    <!-- .bottom做底部布局的区域 -->
    <div class="bottom">
        <a name="tag"></a>
        <!-- <i id="tag"></i> -->
        <!-- <div id="tag"></div> -->
        ...
    </div>

    <!-- 五.img使用 -->
    <!-- src可以连接本地及网络图片 -->
    <!-- alt:资源加载失败时的文本提示 -->
    <!-- title:图片的文本信息(鼠标悬浮时展示) -->
    <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537511739499&di=f5f2763fe54c8ea4d89b2fafe0569c84&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2IZbxogmTBuNjy1XbXXaMrVXa_%2521%25212754890204.jpg_400x400.jpg" alt="雪纳瑞" title="一览雪纳瑞风姿"> -->

    <!-- 六.list列表 -->
    <!-- reset操作 -->
    <style type="text/css">
        ol, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>

    <!-- 有序列表 -->
    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
    <!-- 无需列表:常用 -->
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
</body>
</html>

原文地址:https://www.cnblogs.com/ageliu/p/9692750.html

时间: 2024-11-14 03:27:47

前端HTML、css、javascript学习的相关文章

html+css+javascript学习简介

网页设计中最核心的技术:html, css,  javascript 1.html详解 2.Css(块级元素.行内元素.标准流盒子模型.浮动定位) 3.Div+css网页布局(盒子模型经典案例.仿搜狐首页面布局) 4.Javascript深入讲解(js基本语法.数组.js面向对象编程.js系统函数.事件.js dom 编程详解.正则表达式) Web开发:网页设计是web开发的重要组成部分 Php web, java web, .net web 都需要网页设计,实际上web程序的界面,网页的界面

HTML/CSS/JavaScript学习总结(转)

HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,是最基础的网页语言 . Html是通过标签来定义的语言,代码都是由标签所组成 .Html代码不用区分大小写 . Html代码由<html>开始</html>结束.里面由头部分<head>

[前端] html+css+javascript 实现选项卡切换效果

用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计 二手房: 通州豪华3居260万 二环稀缺2居

HTML/CSS/JavaScript学习笔记【持续更新】

HTML <font> 标签 定义和用法 <font> 规定文本的字体.字体尺寸.字体颜色. 实例 规定文本字体.大小和颜色: 1 <font size="3" color="red">This is some text!</font> 2 <font size="2" color="blue">This is some text!</font> 3 &l

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

前端html、Javascript、CSS技术小结

简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页,只需要找找内部是否有html5的标志性标签就行了.然而平时虽然写了不少html,却没怎么关注它的发展史: GML(Generalized Marcup Language)通用标记语言 和SGML(Standard Generalized Markup Language)标准通用标记语言. 由Tim

聊聊html+css+javascript的学习顺序

最近在知乎看到一篇文章,内容颇具感染力,助力了我经营TwentyHeart的想法,手动补上文章地址https://zhuanlan.zhihu.com/p/23893278 时不我待,如果有想法有信念想入前端大坑的朋友,just do it! 说下小编入坑八个月的感悟想法与学习顺序吧: 身为一个前端,必须会核心技能是HTML+CSS+Javascript,如果把HTML比作一个裸体机器人的话,那么css就是这个机器人的皮肤,Javascript就是这个有身体,有皮肤的机器 人的动作了,用技术词来

web前端开发自学路线是怎样的?html+css+JavaScript的学习方法?

不废话,直接干货 学习前端的几个个阶段: 一阶段:html标签.html5新增标签.css样式.css3样式.媒体查询等 二阶段:JavaScript.jQuery.ajax.面向对象.http传输协议等 三阶段:canvas.js高级应用.JS-SDK.H5新增技术 四阶段:node.js.vue.js 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代

56本前端工程师必备的javaScript学习书籍

分享56本前端工程师必备的javaScript学习书籍(包括了pdf,chm,doc) 1.JavaScript权威指南(第6版)(中文版)2.深入浅出Javascript.O‘reilly.Head.First.Javascript.Jan.20083.JavaScript王者归来月影扫描版4.JavaScript.DOM高级程序设计贝斯扫描版5.精通javascript(图灵计算机科学丛书)6.JavaScript面向对象15分钟教程7.原型.作用域.闭包的完整解释8.Javascript面

想做web前端project师应该学习些什么?

偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做web前端的. 这篇文章对于想学web前端工作的人有非常大的帮助.假设您是做SEO的.也建议您学习下博主推荐的这些课程,也许对你以后的职业.薪资都有非常大的帮助! 遇到非常多新手.都会问,假设要学习web前端开发,须要学习什么?难不难?多久能入门? 怎么能高速建一个站点?工资能拿到多少?还有些让我推荐