【快速入门】前端御三家：HTML、CSS和JS

HTML

HTML，超文本标记语言，可以理解成骨架，是一个基础的东西。

一.基础结构

如图所示：

二.常见标签

1.标题标签

在页面上定义标题性的内容

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落标签

用于在页面上显示段落性质的内容

<p>
    段落内容
</p>

3.换行标签

<br> 换行，是单标签
<hr> 换行并加一条线，是单标签

4.列表标签

：有序列表：

<ol>
    <li>前端</li>
    <li>后端</li>
    <li>测试</li>
    <li>运维</li>
    <li>大数据</li>
</ol>

：无序列表：

<ul>
    <li>前端</li>
    <li>后端</li>
    <li>测试</li>
    <li>运维</li>
    <li>大数据</li>
</ul>

还可以将两种列表镶嵌在一起组成嵌套列表：

<ol>
    <li>
        Java
        <ul>
            <li>前端</li>
            <li>后端</li>
            <li>测试</li>
            <li>运维</li>
            <li>大数据</li>
        </ul>
    </li>
</ol>

5.超链接标签

点击后跳转连接：

<a href="地址" target="？"显示内容</a>

href中写地址，target中的？可以替换成两个东西：一个是 _blank 在新口中开目资源，另一个是 _self 在前口中开目资源。

6.多媒体标签

图片标签，可以在页面上放上一个图片：

<img src="路径"  title="鼠标放在照片上时显示的名字" alt="加载失败显示的名字" />

音频标签，可以在页面上放上一段音频：

<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" />

解释：autoplay控制页面打开时音频是否自动播放，controls控制是否显示控制面板，loop控制是否进行循环播放

7.表格标签

table标签表示表格，tr标签表示一行，td标签表示行内的一格，th标签表示自和中效果的td。

//例子
<table border="1px" style="width: 400px; margin: 0px auto;">
    <tr>
        <th>排名</th> <th>姓名</th> <th>分数</th>
    </tr>
    <tr>
        <td>1</td> <td>小明</td> <td>90</td>
    </tr>
    <tr>
        <td>2</td> <td>小红</td> <td>80</td>
    </tr>
    <tr>
        <td>3</td> <td>小刚</td> <td>70</td>
    </tr>
</table>

单元格跨行跨列，使用td标签的rowspan属性来实现跨行，使用td标签的colspan属性来实现跨列：

<table border="1px" style="width: 400px; margin: 0px auto;">
    <tr>
        <th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th>
    </tr>
    <tr>
        <td>1</td> <td>小明</td> <td>90</td> <td rowspan="3">前三名</td>
    </tr>
    <tr>
        <td>2</td> <td>小红</td> <td>80</td>
    </tr>
    <tr>
        <td>3</td> <td>小刚</td> <td>70</td>
    </tr>
    <tr>
        <td>总人数</td> <td colspan="2">50</td> <td rowspan="2">无</td>
    </tr>
    <tr>
        <td>平均分</td> <td colspan="2">60</td>
    </tr>
</table>

8.表单标签

form标签，用于定义可以让用户输入信息的表单项标签。其内部的action属性：用于定义信息提交的服务器的地址；method属性：用于定义信息的提交方式。

input标签，用于定义表单项。其内部的name属性：用于定义提交的参数名；type属性：用于定义表单项的类型（text：文本框，password：密码框，submit：提交按钮，reset：重置按钮）。

9.常用表单项标签

这个要和上面的表单标签一起看。

单行文本框：

个性签名：<input type="text" name="signal"/><br/>

多行文本框：

自我介绍：<textarea name="desc"></textarea>

密码框：

密码：<input type="password"/> <br>

单选框：

性别：
    <input type="radio" name="gender" value="男" checked="true"> 男
    <input type="radio" name="gender" value="女"> 女
<br>

复选框：

爱好：
<input type="checkbox" name="hobby" value="1"> 唱歌
<input type="checkbox" name="hobby" value="2"> 跳舞
<input type="checkbox" name="hobby" value="3"> rap
<input type="checkbox" name="hobby" value="4"> 篮球
<br>

下拉框：

地址：
<select name="pro">
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>
<br>

可以通过在option中设置selected="selected" 属性实现默认选中的效果。

按钮：

<!-- 普通按钮：点击后无效，需要通过JS绑定单机响应函数 -->
<button type="button">普通按钮</button>
<!-- 重置按钮：点击后将表单内的所有表单项都恢复默认值 -->
<button type="reset">重置按钮</button>
<!-- 提交按钮：点击后提交表单 -->
<button type="submit">提交按钮</button>

隐藏域：

<input type="hidden" name="userId" value="1145"/>

通过表单隐藏域设置的表单项不会显示到页面上，用户看不到，但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，

例如：用户id等等。

文件标签：

头像:<input type="file" name="file"/>

10.布局相关标签

div标签：俗称“块”，主要用于划分页面结构，做页面布局。

span标签：俗称“层”，用于划分元素范围，配合CSS做页面元素样式的修饰。

CSS

CSS可以修改文本等的字体颜色、背景颜色、字体大小、字体类型等等。

这里的CSS的用法不会说，比如怎么设置颜色，字体等，大家可以自行去：w3school 在线教程上查。

一.引入

1.行内式

将CSS代码与HTML代码混在一起，例子：

<input type="button" value="按钮" style="display: block;     width: 60px; 
height: 40px;       background-color: rgb(140, 235, 100); 
color: white;       border: 3px solid green;
font-size: 22px;   font-family: '隶书';
line-height: 30px; border-radius: 5px;">

如果写的少的话还行，要是多的话就太乱了，因此我们进一步，引出内嵌式。

2.内嵌式

将CSS代码放入head标签中，例子：

<style>
    input{
        display: block;     width: 60px; 
        height: 40px;       background-color: rgb(140, 235, 100); 
        color: white;       border: 3px solid green;
        font-size: 22px;   font-family: '隶书';
        line-height: 30px; border-radius: 5px;
    }
</style>

注意在head标签中要加style中写。

其实内嵌式还是没有解决问题，只是把在body问题转移给head，写多了还是很乱。这就引出了我们最常用最推荐的一种方法：连接式。

3.连接式

将我们要写的CSS代码写入一个CSS文件中，这个文件就是一个配置文件，我们要用的话直接调用就行了。这不仅是让HTML代码变的更加整洁，还统一了代码风格与便于代码维护。

配置文件：

input{
    display: block;     width: 60px; 
    height: 40px;       background-color: rgb(140, 235, 100); 
    color: white;       border: 3px solid green;
    font-size: 22px;   font-family: '隶书';
    line-height: 30px; border-radius: 5px;
}

<head>中的代码：

<link rel="stylesheet" href="01css.css">

二.选择器

1.标签选择器

根据我们选中的标签进行设置。下面的例子我们就是选择input标签进行设置。

<style>
    input{
        display: block;     width: 60px; 
        height: 40px;       background-color: rgb(140, 235, 100); 
        color: white;       border: 3px solid green;
        font-size: 22px;   font-family: '隶书';
        line-height: 30px; border-radius: 5px;
    }
</style>

标签选择器的问题是影响的范围太大，如果我们想要修改某一行的内容，但其会把全部都给改了

2.id选择器

我们可以给<body>标签里的input设置一个id，这样我们就可以根据id来进行选择去设置CSS。

<head>
    <style>
        #btn{
            display: block;     width: 60px; 
            height: 40px;       background-color: rgb(140, 235, 100); 
            color: white;       border: 3px solid green;
            font-size: 22px;   font-family: '隶书';
            line-height: 30px; border-radius: 5px;
        }
    </style>
</head>
<body>
    <input id="btn" type="button" value="按钮"/> 
</body>

语法就是：#id，详细的可以看上面代码。

id选择器解决了这个问题，其给style定义了一个id，在body使用时，输入id即可控制

但是id选择器不太灵活，如果我们想要的效果是一个复合效果

style中对字体、背景颜色、框形状都进行了定义

但是我们只想要其字体和框形状的部分，那我们就又要重新写一个

3.class选择器

我们在实际写代码中一个标签内的内容可能有多种组合，我们可以根据不同类型进行分类，比如分成颜色，字体，形状大小......

这个时候我们就要用class选择器了：

<head>
    <style>
        .shapeClass{
            display: block;     width: 60px; 
            height: 40px;
        }
        .colorClass{
            background-color: rgb(140, 235, 100); 
            color: white;       border: 3px solid green;
        }
        .font{
            font-size: 22px;   font-family: '隶书';
            line-height: 30px; 
        }
    </style>
</head>
<body>
    <input  class ="shapeClass colorClass fontClass"type="button" value="按钮1"/> 
    <input  class ="shapeClass colorClass" type="button" value="按钮2"/> 
    <input  class ="colorClass fontClass" type="button" value="按钮3"/>
</body>

class选择器相当灵活，其将属性相同的内容放在一个class中，比如将字体大小、字体类型、字体颜色的设置放在一个class中

我们想要使用其属性时只需选择相应的class即可

4.复合选择器

顾名思义，就是将上面的选择器合在一起用。

<head>
    <style>
        #div1,#div2{
            color: red;
        }
    </style>
</head>
<body>
    <input id="div1" type="button" value="按钮1"/> 
    <input id="div2" type="button" value="按钮2"/> 
    <input id="div3" type="button" value="按钮3"/>
</body>

JavaScript

JavaScript (简称JS)，是⼀个脚本语言,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

一.引入

与CSS的引入类似

1.行内式

即直接在我们写的标签中写JS：

<input type="button" value="点我⼀下" onclick="alert('haha')">

2.内部脚本引入

即通过script标签引入，位置随意，一般放在head标签中：

<head>
    <script>
        function surprise(){
            alert("hello world")
        }
    </script>
</head>

3.外部脚本引入

引入外部提前写好的文档：

<script src="01JS.js"></script>

二.基础语法

1.数据类型

类型介绍number数值类型，不区分整形还是浮点型string字符串类型boolean布尔类型undefined表示未初始化的类型

2.变量

JS中的变量是弱变量，统一声明称let，一个变量可以多次声明，每次声明的类型可以不一样。比如一开始 let a=10 ，紧接着可以写 a="abc"。

3.运算符

类型运算符算数运算符+ - * / %复合算数运算符++ -- += -= *= /= %=关系运算符< > <= >= == !=逻辑运算符|| && 条件运算符条件?A:B位运算符& ^ << >> >>>

4.数组

JS的数组中的元素不要求类型相同。

创建方法：

//方法一
let arr = new Array();
//方法二
let arr = [];

数组常用的API：JavaScript Array 对象 | 菜鸟教程

5.函数

函数声明：

/* 语法1 ：function 函数名 (参数列表){函数体} */
 function sum(a, b){
 return a+b;
 }
 letresult =sum(10,20);
 console.log(result)
 /* 语法2 ： var 函数名 = function (参数列表){函数体}  */
 let add = function(a, b){
 return a+b;
 }
 let result = add(1,2);
 console.log(result);

6.对象

//方法一： 通过new Object()直接创建对象
let person =new Object();
// 给对象添加属性并赋值
person.name="小明";
person.age=10;
person.foods=["苹果","橘子","香蕉","葡萄"];
// 给对象添加功能函数
person.eat= function (){
    console.log(this.age+"岁的"+this.name+"喜欢吃:")
    for(let i = 0;i<this.foods.length;i++){
        console.log(this.foods[i])
    } 
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();

//方法二：，通过{}创建对象
var person ={
    "name":"张小明",
    "age":10,
    "foods":["苹果","香蕉","橘子","葡萄"],
    "eat":function (){
        console.log(this.age+"岁的"+this.name+"喜欢吃:")
        for(var i = 0;i<this.foods.length;i++){
            console.log(this.foods[i])
        } 
    }
 }
 //获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();

标签：前端 html css

本文转载自: https://blog.csdn.net/lllsure/article/details/143668761
版权归原作者 lllsure 所有，如有侵权，请联系我们删除。

【快速入门】前端御三家：HTML、CSS和JS

HTML

一.基础结构

二.常见标签

1.标题标签

2.段落标签

3.换行标签

4.列表标签

5.超链接标签

6.多媒体标签

7.表格标签

8.表单标签

9.常用表单项标签

10.布局相关标签

CSS

一.引入

1.行内式

2.内嵌式

3.连接式

二.选择器

1.标签选择器

2.id选择器

3.class选择器

4.复合选择器

JavaScript

一.引入

1.行内式

2.内部脚本引入

3.外部脚本引入

二.基础语法

1.数据类型

2.变量

3.运算符

4.数组

5.函数

6.对象

发表评论

“【快速入门】前端御三家：HTML、CSS和JS”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航