前言：
前端三剑客即HTML、CSS、JavaScript。本文只对其进行简单介绍，达到简单WEB程序所需。若想要深入学习，可以查看W3C教程，其对三者进行了详细的介绍。
HTML
-
简介：HTML是一种超文本标记语言，由浏览器来解析运行，其作用为编写网页的结构。
-
常见标签及代码：
- 第一节：日常标签
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页title>
head>
<body>
<div>
<h1>hello worldh1>
<h2>hello worldh2>
<h3>hello worldh3>
<h4>hello worldh4>
<h5>hello worldh5>
<h6>hello worldh6>
div>
<p>这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页p>
<p>这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页p>
<ul>
<li>香蕉li>
<li>鸭梨li>
<li>苹果li>
ul>
<ol>
<li>香蕉li>
<li>鸭梨li>
<li>苹果li>
ol>
<a href="http://baidu.com">跳转到百度a>
<img src="coder.jpg" alt="图片加载失败">
<h1 id="title">heheheh1>
<h1 id="title">heheheh1>
<p class="hot">红p>
<p class="hot">黄p>
<p class="cool">蓝p>
<p class="cool">绿p>
body>
html>
- 第二节：表格和表单
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个网页title>
head>
<body>
<table border="1">
<thead>
thead>
<tbody>
<tr>
<td colspan="4">学生列表td>
tr>
<tr>
<td rowspan="3">一班td>
<td>1td>
<td>小红td>
<td>7td>
tr>
<tr>
<td>2td>
<td>小鹿td>
<td>5td>
tr>
<tr>
<td>3td>
<td>小张td>
<td>6td>
tr>
tbody>
table>
<form action="">
<label for="usename">用户名label>
<input id="usename" type="text" placeholder="用户名">
<label for="password">密码label>
<input id="password" type="password" placeholder="密码">
<input name="sex" type="radio">公
<input name="sex" type="radio">母
<select name="" id="">
<option value="">男option>
<option value="">女option>
select><br>
爱好<br>
<input type="checkbox">足球
<input type="checkbox">篮球<br>
<input type="submit" value="登录">
<input type="button" value="按钮">
form>
body>
html>
CSS
-
简介：CSS全称层叠样式表，用来控制网页的样式，其作用主要是美化网页。
-
CSS选择器与常用属性及其代码
- 第一节：选择器类型
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 选择器 */
h1{
color: brown;
font-size: 12px;
}
.test{
color: blue;
}
#name{
color: purple;
}
*{
color: green;
}
style>
head>
<body>
<h1>hello worldh1>
<h1 class="test">类选择器h1>
<p class="test">这是一个段落，它应该是蓝色的。这是一个段落，它应该是蓝色的。这是一个段落，它应该是蓝色的。p>
<span id="name">一个块，它会是紫色的span>
body>
html>
- 第二节：选择器常用属性
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器常用属性title>
<style>
.test{
font-size: 18px;
color: white;
background-color: black;
text-align: center;
line-height: 100px;
}
img{
width: 500px;
height: auto;
}
style>
head>
<body>
<h1 class="test">hello worldh1>
<img src="coder.jpg" alt="图片正在加载ing">
body>
html>
- 第三节：选择器进阶
层级选择器和组合选择器
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 层级选择器 */
/* .box1 h1{
color: red;
} */
/* 组合选择器 */
.box1 h1,.box1 h2{
color:red;
}
style>
head>
<body>
<div class="box1">
<h1>hello h1h1>
<h2>hello h2h2>
div>
<div class="box2">
<h1>box2容器h1>
<h2>hello worldh2>
div>
body>
html>
伪类选择器和伪元素选择器
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 伪类选择器 */
/* .box{
height: 100px;
width: 100px;
background-color: red;
}
.box:hover{
background-color: blue;
} */
/* 伪元素选择器 */
h1::before,h2::after{
content: "aaaa";
color:red;
}
style>
head>
<body>
<div class="box">div>
<h1>hello h1h1>
<h2>heloo h2h2>
body>
html>
选择器权重
- 不同选择器权重：id（100）>class（10）>element（1）
- 相同选择器：后面的会覆盖前面的
- 层级选择器：将权重累加比较
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 选择器权重 */
/* #hehehe{
color: red;
} */
/* .box1{
color: blue;
} */
/* h1{
color: green;
}
h1{
color: blue;
} */
.box1 #henghengheng{
color: red;
}
.box1 h1{
color: green;
}
style>
head>
<body>
<div class="box1" id="henghengheng">
<h1 id="hehehe" >hello worldh1>
div>
body>
html>
- 设置最高权重
!important
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 选择器权重 */
/* #hehehe{
color: red;
} */
/* .box1{
color: blue;
} */
/* h1{
color: green;
}
h1{
color: blue;
} */
/* 10 + 100 */
.box1 #hehehe{
color: red ;
}
/* 10 + 1 */
.box1 h1{
color: green !important;
}
style>
head>
<body>
<div class="box1" id="henghengheng">
<h1 id="hehehe" >hello worldh1>
div>
body>
html>
引入CSS的方法
- 嵌入样式
- 内联样式
- 外部样式
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
h1{
color: red;
}
style>
<link rel="stylesheet" href="style/demo06.css">
head>
<body>
<h1 style="color: green;">hello worldh1>
<h1>hello greenh1>
body>
html>
后续
因为内容实在是比较多，所以我分开来写了，CSS还没写完，JS也还没开始。后面还打算写node和vue，只能说路漫漫其修远兮，容不得一点懈怠啊！