c1-3web前端

最新推荐文章于 2024-06-12 11:59:04 发布

Ꭿιrєx

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量372

点赞数

分类专栏： web前端文章标签： javascript css html5

本文链接：https://blog.csdn.net/weixin_42226309/article/details/116261149

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、什么是html

1、概述

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

2、html基础格式

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>>

3、运行我们的第一个html

3.1 Hello World Html

<!DOCTYPE html>
<html>
<head>
	<title>Hello World Html</title>
</head>
<body>
	<h1>Hello World Html</h1>
</body>
</html>

3.2 使用浏览器打开

在这里插入图片描述

3.3 解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

3.4 HTML 编辑器推荐

VS Code：https://code.visualstudio.com/
Sublime Text：http://www.sublimetext.com/

4、如何使用html

4.1 HTML 标题

HTML的标题是通过标签来定义的，文档标题标签，大小是依次递减的(h1~h6)。

<!--取值范围<h1>~<h6>-->
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>

4.1.2 如果超出范围则没有任何变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是一个标题</title>
</head>
<body>
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>
    <h7>我是标题7</h7>
    我是普通文本
</body>
</html>

在这里插入图片描述

4.2 HTML 段落

<p>我是一段文本</p><!--在里面添加文本即可-->

在这里插入图片描述

4.3 HTML换行和分割线

<br><!--换行标签-->
<hr><!--分割线标签-->

4.4 HTML格式化

<b>：字体加粗。
<strong>：字体加粗
<i>：字体倾斜
<em>：字体倾斜
<u>：下划线
<ins>：下划线
<q>：加双引号
<sub>：下标
<sup>：上标
<s>：删除线
<del>：删除线

4.5 HTML图片和视频

<!--
1.img标签中的img其实是英文image的缩写，就是告诉浏览器我们需要显示一张图片。

2.img标签格式: <img src="">
其实img标签中的src是英文source的缩写，img标签中的src就是用来告诉img标签, 需要显示的图片名称。

4.img中的其它属性
width: 宽度
height: 高度
在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高

title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容

alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>
<body>
<img src="images/QRCode.jpg">

<img src="images/QRCode.jpg" width="300" height="478">

<img src="images/QRCode.jpg" width="100" height="478">

<img src="images/QRCode.jpg" height="178">
<img src="images/QRCode.jpg" width="100">

<img src="images/QRCode.jpg" width="100" title="这个是图片">

<img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了">
</body>
</html>

在这里插入图片描述

4.6 HTML列表

4.6.1 无序列表(unordered list)

给一堆内容添加无序列表语义，列表中的条目是不分先后。

<!DOCTYPE html>
<html>
<head>
	<title>无序列表</title>
</head>
<body>
	<h4>你喜欢玩哪些游戏</h4>
    <ul>
        <li>英雄联盟</li>
        <li>LOL</li>
        <li>QQ魔法战争</li>
    </ul>
</body>
</html>

在这里插入图片描述

4.6.2 有序列表(ordered list)

给一堆内容添加有序列表语义, 列表中的条目有先后之分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>

<ol>
	<h4>学生排名</h4>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>
</body>
</html>

在这里插入图片描述

4.7 HTML表格

<!--
先定义一个表格, 然后通过tr告诉浏览器这个表格中一共有多少行, 然后再通过td告诉浏览器一共有多少列
<table>：定义一个表格。
<tr>：定义一个行。
<td>：定义表格的元素。
<th>：定义表格的头。
<caption>：设置表格标题
width：表格宽度。
height：表格高度。
border：表格边框。
cellspacing：单元格和单元格之间的距离。
cellpadding：单元格内容和边框之间的距离。
align：表格在网页中的位置。
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

</ol>
</body>
</html>

在这里插入图片描述

4.8 HTML超链接a标签

<a>：超链接标签。
href：定义链接地址的属性。
title：鼠标停留在超链接上，会显示的文字。
网页打开方式（target）：
	告诉浏览器是否保留原始界面, _blank保留, _self不保留
书签定位：
	跳转到当前页面指定位置
	格式<a href="#location">跳转到指定位置</a>
	在页面的指定位置给任意标签添加一个id属性
	例如 <p id="location">这个是目标</p>
	跳转到指定页面的指定位置
	格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
	只需要在01-锚点链接.html页面添加一个id位置即可

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>超链接</title> 
</head>
<body>
	
<a href="https://www.baidu.com/" target="_blank">访问百度</a>

</body>
</html>

在这里插入图片描述

二、什么是CSS

1、概述

CSS 指层叠样式表 (Cascading Style Sheets)，样式通常存储在样式表中。样式是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个。

2、css格式

2.1 CSS 主要有两个主要的部分构成

1:选择器
2:多条声明

在这里插入图片描述

2.2 CSS语法格式

/*
选择器：要修饰的对象
属性名：修饰对象的哪一个属性
属性值：属性的取值范围
*/
<style type="text/css">
        标签名称{
            属性名称: 属性对应的值;
            ...
        }
</style>

2.3 实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	h1 {
		color: blue;font:15px;
	}
</style>
<body>
	<h1>
		Hello World CSS
	</h1>
</body>
</html>

在这里插入图片描述

3、CSS 属性

文字属性

1、font-style:
作用: 规定文字样式
格式: font-style: italic;
2、font-weight:
作用: 规定文字粗细
格式: font-weight: bold;
3、font-size:
作用: 规定文字大小
格式: font-size: 30px;
4、font-family:
作用: 规定文字字体
格式: font-family:"楷体";

文本属性

1、text-decoration:
作用: 给文本添加装饰
格式: text-decoration: underline;
2、text-align
作用: 设置文本水平对齐方式:
格式: text-align: center;
3、text-indent:
作用: 设置文本缩进
格式: text-indent: 2em;

颜色属性

在CSS中如何通过color属性来修改文字颜色
格式: color: 值;

1、英文单词:
一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达
2、rgb:
rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
3、十六进制:
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
例如: #FFEE00 FF表示R EE表示G 00表示B

4、CSS 选择器

1 标签选择器:
也称为元素选择器，使用HTML标签作为选择器的名称以标签名作为样式应用的依据

2 类选择器:
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用的依据

注意事项：
调用时不能添加 . 号
同时调用多个类选择器时，以 空格 分隔
类选择器名称不能以 数字 开头

3 ID选择器:
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用的依据，一对一的关系

格式:

标签名称{
    属性:值;
}

5、CSS 盒子

CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

边框属性

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

6、CSS 定位

相对定位

对定位就是相对于自己以前在标准流中的位置来移动
格式:
position: relative;

绝对定位

绝对定位就是相对于body或者某个定位流中的祖先元素来定位
格式:
position: absolute;

7、CSS 页面布局

常见页面布局:
1、表格布局:不适用于复杂布局，仅用于简单 、有规则的结构定位相对准确，与浏览器基本无关，适用于简单分隔
2、div布局:定位绝对精确，使用灵活，适合于复杂的布局方式

三、什么是JavaScript

JavaScript 是互联网上最流行的脚本语言，用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

第一个JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello JavaScript</title>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>Hello JavaScript </h1>
<p id="demo">使用JavaScript之前</p>

<button type="button" onclick="displayDate()">显示时间</button>

</body>
</html>

在这里插入图片描述

C1-3 任务web基础

挑战

你做过站⻓吗？你知道建设和维护⼀个属于⾃⼰的站点是⼀种什么样的体验吗？你开过⽹店吗？你知道玲琅满⽬的商品和那些惊艳⼜⾼⼤上的产品详情是怎样呈现在我们眼前的吗？你在上⽹时是否发现有些⽹站禁⽌⽤户拷⻉内容（或其他的烦⼈的限制）呢？以上所有这些，对于学过Web前端技术的⼯程师来说，都不叫事⼉～。

说明

⼤⼚每年都要招聘⼤量的前端软件⼯程师，有些开发基于浏览器应⽤，有些开发基于H5的应⽤，⽽有些可能会开发⼩程序和桌⾯应⽤。不管是做哪种开发⼯作的前端⼯程师，都离不开HTML、CSS、JavaScript这三类Web浏览器核⼼技术。HTML定义了浏览器中各种元素的分类和⽤途，CSS定义了浏览器⻚⾯的整体布局和外观，⽽JavaScript可以动态创建⻚⾯，使⽹⻚能够响应⽤户的点击、拖拽等各种事件，给⽤户更好的体验。

任务⼀

1、⾸先，在开源富⽂本编辑器（ https://summernote.org/ ）中随便输⼊⼀段⽂本

在这里插入图片描述

2、然后，在源码模式下，查看内容是如何被转变为带标签的⽂本的，都带了哪些HTML标签

在这里插入图片描述

3、最后，实现编辑器没有的功能，例如让表格隔⾏换⾊，加⼊JavaScript按钮，试着完成它吧：）

<!DOCTYPE html>
<html>
<head>
	<title>CSDN</title>
</head>
<body>
<p><font color="#ff0000">csdn能力认证中心</font></p>
	<table border="">
		<tbody><tr>
			<td><span style="background-color: rgb(206, 198, 206);">C1</span></td>
			<td><span style="background-color: rgb(206, 198, 206);">见习工程师</span></td>
		</tr>
		<tr>
			<td>C4</td>
			<td>专项工程师</td>
		</tr>
		<tr>
			<td><span style="background-color: rgb(206, 198, 206);">C5</span></td>
			<td><span style="background-color: rgb(206, 198, 206);">全栈工程师</span></td>
		</tr>
	</tbody></table>
<br>
<br>
<button type="button" onclick="alert('Airex考试通过 分数是10000分');">我要考试</button>
</body>
</html>

在这里插入图片描述

任务⼆

在code.org上以「所⻅即所得（WYSIWYG）」的⽅式完成HTML和CSS系列⽹⻚开发任务（ https://studio.code.org/s/csd2- 2019 ）如果已注册账号则⽆需再注册加深对HTML和CSS技术的理解
在这里插入图片描述

在这里插入图片描述

Ꭿιrєx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
c1-3web前端

一、什么是html1、概述HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。2、html基础格式<!DOCTYPE html><html><head> <title></title></head><body&
复制链接

扫一扫