前端（CSS+HTML）- 配合视频教程

前端_刘师兄
240 阅读10分钟

建立第一个网页

文件名：index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标题 </title>
</head>
<body>
  <div id="root">你好!!! 前端</div>
</body>
</html>
  • 将文本粘贴到记事本后修改名称（注意：后缀名也要一起修改）

一、 HTML

1.基本的 HTML 标签

  • 以下代码都粘贴在<body></body>里面 (1)HTML段落
    <p>第一个段落</p>
    <p>第二个段落</p>

(2)HTML链接

    <a href="http://www.baidu.com" title= "百度首页">百度</a>

(3)HTML图像

<img src= "xxx.jpg"/>

(4)HTML标题

<h1> 最大的标题</h1>
<h6> 最小的标题</h6>

(5)HTML水平线

<hr />

(6)HTML注释

<!-- HTML注释 -->

(7)HTML折行

<br />

2.HTML属性

(1)HTML属性的作用

<div name="xx" />
  • 属性总是在 HTML 元素的开始标签中规定。

(2)始终为属性值加引号

  • 双引号、单引号都可以
  • 属性值本身就含有双引号，那么您必须使用单引号
<div name="xxx'xx'xxxxx" />
<div name="xxxx" />
<div name='xxxx' />

(3)HTML元素的核心属性(每个标签都有)

    - class 规定元素的类名
    - id 规定元素的唯一 id
    - style 规定元素的行内样式
    - title 规定元素的额外信息（可在工具提示中显示）

3.HTML文本格式化标签

(1)文本格式化标签

<b> 定义粗体文本。

<big> 定义大号字。

<em> 定义着重文字。

<i> 定义斜体字。

<small> 定义小号字。

<strong> 定义加重语气。

<sub> 定义下标字。

<sup> 定义上标字。

<ins> 定义插入字。

<del> 定义删除字。

<u> 为文本添加下划线。

4.超链接的锚点 

<a name= "tag" >标签</a>
<div id=”#tag”>
<a href= "index.htm#tips">自定义网站</a>

5.HTML表格

(1)表格的定义

表格标签: <table></table>

表格标题:<caption></caption>

表头标签: <th></th>

表格行标签：<tr> </tr>

表格单元格标签: <td> </td>

表格的主体标签:<tbody> </tbody>

表格的页脚标签:<tfoot> </tfoot>

表格列的属性标签:<col></col>

表格列的组标签<colgroup></colgroup>

单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

(2)表格属性colspan、rowspan、cellpadding、cellspacing

colspan：单元格要跨越的表格列数

rowspan：单元格要跨越表格的多少行

cellpadding：设置单元格边距

cellspacing：设置单元格边距

例：

<table border= "1">
    <caption>跨行跨列的表格</caption>
    <tr>
        <th>姓名</th>
        <thcolspan= "2">电话号码</th><!-- 跨列 -->
    </tr>
    <tr>
        <td rowspan= "2">aaa</td><!-- 跨行 -->
        <td>bbb</td>
        <td>ccc</td>
    </tr>
    <tr>
        <td>eee</td>
        <td>fff</td>
    </tr>
</table>

(3)cellpadding属性设置边距

<table border= "1" cellpadding= "12">
    <tr>
        <td>aa</td>
        <td>bb</td>
    </tr>
</table>

(4)cellspacing属性设置单元格间距

<table border="1" cellspacing="6">
    <tr>
        <td>aa</td>
        <td>bb</td>
    </tr>
    <tr>
        <td>ee</td>
        <td>dd</td>
    </tr>
</table>

6.HTML 列表

(1)定义列表的标签

<ol> 有序列表。
<ul> 无序列表。
<li> 列表项。
<dl> 定义列表。
<dt> 定义项目。
<dd> 定义的描述。

(2)无序列表

<ul>
    <li>1</li>
    <li>2</li>
</ul>

(3)有序列表

<ol>
    <li>1</li>
    <li>2</li>
</ol>

(4)自定义列表

<dl>
    <dt>1</dt>
    <dd>1.1</dd>
    <dt>2</dt>
    <dd>2.2</dd>
</dl>

7.HTML表单和输入

(1)各种表单标签

<form> 表单标签
<input> 输入域
<textarea> 文本域 (一个多行的输入控件)
<select> 选择列表
<option> 选择列表的下拉列表中的选项
<button> 按钮

例：

<form>
男：<input type="radio"checked="checked"name="Sex"value="male"/><br />
女：<input type="radio" name="Sex" value="female"/><br/>
<select name= "cars">
    <option value="volvo">1</option>
    <option value= "saab">2</option>
    <option value="fiat" selected="selected">3</option>
    <option value="audi">4</option>
</select><br/>
<text arearows="10"cols="30">文本域</textarea><br/>
<input type="button"value="按钮" /><br/>
<input type="submit"value="提交"/><br/>
<input type="reset"value="重置"/><br/>
</form>

8.HTML字符实体

符号名称实体编号实体名称
 空格&#160;   &nbsp;
<小于号&#60; &lt;
大于号&#62; &gt;
®商标&#174;&reg;
"引号&#34;&quot;

9.头部标签

(1). 包含的标签

<head>
    <link />
    <meta />
    <title> 文档标题</title>
    <style> </style>
    <script></script>
</head>

(2). Meta元信息

<!-- 提供浏览器或搜索引擎相关的信息、描述文档的内容 -->
<meta name="keywords" content="关键字1, 关键字2,关键字3, ... ..." ？>

二、 CSS

(1)外部样式表

<head>
    <link rel= "stylesheet" type="text/css"href="index.css">
</head>

(2)内部样式表

<head>
    <style type= "text/css">
        body {background-color: red}
        p {margin-left: 20px}
    </style>
</head>

(3)内联样式

    <p style="color: red; margin-left: 20px">内联样式</p>

1. CSS基础样式

height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
clear  设置一个元素的侧面是否允许其他的浮动元素。
cursor  规定当指向某元素之上时显示的指针类型。
display  设置是否及如何显示元素。
float  定义元素在哪个方向浮动。
position  把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility  设置元素是否可见或不可见

2.基础语法

(1)CSS 语法

选择器{属性:值; }

*{color:’red’}

(2)颜色 #ff0000、red、rgb(255,0,0)、rgba(255,0,0,0.5)  

3.选择器

(1) id 选择器

#id{
color: red
}

(2)类选择器

.className{
    color: red
}

(3)派生选择器

div strong {
    font-style: italic;
    font-weight: normal;
  }

(4)子元素选择器

ul > li {
    color: red
}

(5)相邻兄弟选择器

div + span {
    color: red
}

(6)伪类

a:link{  // 未访问
    color:#f00
}
a:visited{  // 已访问
    color:#0f0
}
a:hover{  // 悬停
    color:00f
}
a:active{  // 已选择
    color:ff0
}

(7)伪元素

p::before { // <p> 元素之前插入内容
    content:’’;
}

p::after { // <p> 元素之后插入内容
    content:’’;
}

4. 背景(background)

(1)背景色

    background-color: red

(2) 背景图像

    background-image:url(‘xx/xxx.jpg’);}
    background-image:url(‘http://www.xxx.com/xxx.jpg’);}

(3)背景重复

    background-repeat: repeat、no-repeat、repeat-y

(4)背景定位

    background-position: center; //top、bottom、left、right

(5)背景关联

background-attachment: fixed

5. 文本

color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

  (1)缩进文本

    p{ text-indent: 20px }

(2)水平对齐

p{text-align : left、right 、center }

(3)字间隔

p{ word-spacing: 20px }

(4)字母间隔

p{ letter-spacing: 20px }

6. 字体

    font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
    font-family 设置字体系列。
    font-size 设置字体的尺寸。
    font-style 设置字体风格。
    font-variant 以小型大写字体或者正常字体显示文本。
    font-weight 设置字体的粗细。

7. 列表

    list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
    list-style-image 将图象设置为列表项标志。
    list-style-position 设置列表中列表项标志的位置。
    list-style-type 设置列表项标志的类型。

盒模型

1.盒模型概述

element : 元素。
padding : 内边距
border : 边框。
margin : 外边距

2. 内边距

    div {padding:  20px;}
    div {padding-right:  20px;} // 四个方向 left、right、bottom、top

3. 边框

div {border: 1px solid #f00;}

border 简写属性，用于把针对四个边的属性设置在一个声明。

border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom  简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color 设置元素的下边框的颜色。

border-bottom-style 设置元素的下边框的样式。

border-bottom-width 设置元素的下边框的宽度。

border-left 简写属性，用于把左边框的所有属性设置到一个声明中。

border-left-color 设置元素的左边框的颜色。

border-left-style 设置元素的左边框的样式。

border-left-width 设置元素的左边框的宽度。

border-right 简写属性，用于把右边框的所有属性设置到一个声明中。

border-right-color 设置元素的右边框的颜色。

border-right-style 设置元素的右边框的样式。

border-right-width 设置元素的右边框的宽度。

border-top 简写属性，用于把上边框的所有属性设置到一个声明中。

border-top-color 设置元素的上边框的颜色。

border-top-style 设置元素的上边框的样式。

border-top-width 设置元素的上边框的宽度。

4. 外边距

margin 简写属性。在一个声明中设置所有外边距属性。

margin-bottom  设置元素的下外边距。

margin-left 设置元素的左外边距。

margin-right 设置元素的右外边距。

margin-top 设置元素的上外边距。

5. clear 属性

div{clear:both}

left 在左侧不允许浮动元素。

right 在右侧不允许浮动元素。

both 在左右两侧均不允许浮动元素。

none 默认值。允许浮动元素出现在两侧。

inherit 规定应该从父元素继承 clear 属性的值。

三、 Flex布局

推荐：阮一峰的网络日志-flex

四、 CSS动画

学习动画属性以及3d

PS： 静态网页实战

  • 完成5个以上的官网基础的HTML+CSS部分，实现整个页面（JS部分暂时不做）
  • 针对练习页面布局、绝对定位、相对定位、浮动
  • 用CSS的三种不同方法实现水平垂直居中
  • 完成单列布局、双飞翼布局

五、 JavaScript

1. 建立第一个JS脚本

文件名：index.html

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>标题</title>
</head>

<body>
  <div id="root">你好!!! 前端</div>
</body>
<script>
  document.write('<div id="root">你好!!! JavaScript</div>');
</script>

</html>

2. 初识JS

  • javascript语言是网页中广泛使用的一种脚本语言
  • javascript语言是弱语言，同时也是一种解释性语言
  • javascript由Netscape公司开发，基于对象和事件驱动并具有一定安全性的脚本语言
  • javascript是靠浏览器中的javascript解释器来运行的，与操作环境没有关系
  • javascript具有安全性，不允许用户访问本地硬盘，不允许对网络中的文档进行修改或删除，这样就能有效地防止数据丢失以及恶意修改。

3. JS输出

  • 在控制台中输出
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>标题</title>
</head>
<script>
  console.log('你好！！！');
</script>

</html>
  1. 用浏览器打开这个页面
  2. 在网页空白处右击鼠标
  3. 选择 “检查”
  4. 选择 "console"

image.png

  • 在弹窗上输出
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>标题</title>
</head>
<body>
</body>
<script>
  alert('你好！！！');
</script>

</html>
  • 直接用浏览器打开该文件网页就会弹出对话弹窗 image.png

4. JS获取文档节点并修改节点内容

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>标题</title>
</head>
<body>
<div id="root">你好！！！</div>
</body>
<script>
// 获取节点
 var root = document.getElementById("root");
 console.log(root);
 
// 修改节点信息
 root.innerHTML = "Hello !!!";
</script>

</html>

image.png

4.1 获取节点的方法

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>标题</title>
</head>
<body>
<div id="root">你好！！！</div>
<div name="name">名字！！！</div>
<div tag="tag">标签！！！</div>
</body>
<script>
// 获取节点
var rootId = document.getElementById("root");
var name =  document.getElementsByName("name");
var nodelist = document.querySelectorAll("div");
console.log(root,name,nodelist);
</script>

</html>

5. 基本数据类型

  1. Arrar(数组)
  2. String(字符串)
  3. Boolear(布尔值)
  4. Number(数值)
  5. Null(空值)
  6. Undefined(未定义)
  7. Symbol(唯一值)
  8. BigInt(大数字)

5.1 Arrar(数组) 属性、方法

数组:

  const arr1 = [1,2,3,4];
  const arr2 = ['a','b','c'];
  
  console.log(arr1, arr2);

属性： [].length 用于获取数组的长度

  const arr1 = [1,2,3,4];
  const arr2 = ['a','b','c'];
  
  console.log(arr1.length , arr2.length );

方法:

方法作用
concat()连接两个或多个数组，并返回已连接数组的副本
copyWithin()将数组中的数组元素复制到指定位置或从指定位置复制。
entries()返回键/值对数组迭代对象。
every()检查数组中的每个元素是否通过测试。
fill()用静态值填充数组中的元素。
filter()使用数组中通过测试的每个元素创建新数组。
find()返回数组中第一个通过测试的元素的值。
findIndex()返回数组中通过测试的第一个元素的索引。
forEach()为每个数组元素调用函数。
from()从对象创建数组。
includes()检查数组是否包含指定的元素。
indexOf()在数组中搜索元素并返回其位置。
isArray()检查对象是否为数组。
join()将数组的所有元素连接成一个字符串。
keys()返回 Array Iteration 对象，包含原始数组的键.
lastIndexOf()在数组中搜索元素，从末尾开始，并返回其位置。
map()使用为每个数组元素调用函数的结果创建新数组。
pop()删除数组的最后一个元素，并返回该元素。
push()将新元素添加到数组的末尾，并返回新的长度。
reduce()将数组的值减为单个值（从左到右）。
reduceRight()将数组的值减为单个值（从右到左）。
reverse()反转数组中元素的顺序。
shift()删除数组的第一个元素，并返回该元素。
slice()选择数组的一部分，并返回新数组。
some()检查数组中的任何元素是否通过测试。
sort()对数组的元素进行排序。
splice()从数组中添加/删除元素。
toString()将数组转换为字符串，并返回结果。
unshift()将新元素添加到数组的开头，并返回新的长度。
valueOf()返回数组的原始值。
avatar
文章
阅读
粉丝